:root{
  --film:      #0F0F0F;
  --papier:    #F2F2F2;
  --papier-2:  #FAFAFA;
  --trait:     #E1E1E1;
  --encre:     #0F0F0F;
  --gris:      #5C5C5C;
  --gris-2:    #9B9B9B;
  --jaune:     #F2B200;
  --sol:       #EAEAEA;

  --r-s: 8px;
  --om-1: 0 1px 2px rgba(15,15,15,.05);
  --om-2: 0 4px 16px -6px rgba(15,15,15,.14), 0 1px 3px rgba(15,15,15,.05);
  --pas: 260ms cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--papier);color:var(--encre);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.enveloppe{max-width:1140px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:4px}

/* ── Typographie ────────────────────────────────────────────────────── */
h1{font-family:Inter,sans-serif;font-weight:900;letter-spacing:-.028em;line-height:1.08;
  font-size:clamp(2.2rem,5vw,3.4rem)}
.mono{font-family:Inter,sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.sourcil{display:inline-flex;align-items:center;gap:9px;color:var(--encre);font-weight:600;margin-bottom:18px}
.sourcil::before{content:'';width:20px;height:2px;background:var(--jaune)}
.chapo{font-size:1.14rem;color:var(--gris);max-width:56ch;line-height:1.68}

/* ── Boutons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-s);border:1px solid transparent;
  font-family:Inter,sans-serif;font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;
  transition:transform var(--pas),box-shadow var(--pas),background var(--pas),color var(--pas),border-color var(--pas);
}
.btn-jaune{background:var(--jaune);color:var(--encre);box-shadow:var(--om-2)}
.btn-jaune:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(242,178,0,.5)}
.btn-jaune:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn .fl{transition:transform var(--pas)}
.btn:hover .fl{transform:translateX(3px)}

/* ── Navigation (identique à index.html) ───────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(244,246,247,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--pas),box-shadow var(--pas);
}
#nav.pose{border-bottom-color:var(--trait);box-shadow:var(--om-1)}
.nav-in{max-width:1140px;margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:30px}
.marque{display:inline-flex;align-items:baseline;text-decoration:none;color:var(--encre);
  font-family:Inter,sans-serif;font-weight:900;font-size:19px;letter-spacing:-.03em;line-height:1}
.marque .pt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--jaune);
  margin-left:3px;margin-bottom:2px;align-self:flex-end;transition:transform var(--pas),box-shadow var(--pas)}
.marque:hover .pt{transform:scale(1.5);box-shadow:0 0 7px 2px rgba(242,178,0,.55),0 0 14px 6px rgba(242,178,0,.28)}
.nav-liens{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-liens a:not(.btn){
  position:relative;text-decoration:none;color:var(--gris);font-size:14.5px;font-weight:500;
  padding:4px 0;transition:color var(--pas);
}
.nav-liens a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--jaune);transition:right var(--pas);
}
.nav-liens a:not(.btn):hover{color:var(--encre)}
.nav-liens a:not(.btn):hover::after{right:0}
.nav-liens .btn{padding:10px 18px;font-size:14px}
.nav-connexion{color:var(--gris-2)!important}
.nav-connexion:hover{color:var(--encre)!important}
.nav-connexion::before{
  content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:var(--trait);
}
@media(max-width:820px){
  .nav-liens{gap:16px}
  .nav-liens a:not(.btn):not(.nav-connexion){display:none}
  .nav-connexion::before{display:none}
}

/* ── Contact ───────────────────────────────────────────────────────── */
#contact-corps{padding:150px 0 96px}
.contact-in{max-width:600px;margin:0 auto}

#formulaire-contact{margin-top:38px}
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:13.5px;font-weight:600;color:var(--encre);margin-bottom:7px}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 15px;border-radius:var(--r-s);
  border:1px solid var(--trait);background:var(--papier-2);
  color:var(--encre);font-family:Inter,sans-serif;font-size:15px;
  transition:border-color var(--pas),background var(--pas);
}
.champ select{cursor:pointer}
.champ textarea{resize:vertical;min-height:130px;line-height:1.6}
.champ input::placeholder,.champ textarea::placeholder{color:var(--gris-2)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--jaune);background:#fff}
#formulaire-contact .btn{margin-top:8px;width:100%}
.c-msg{margin-top:16px;font-size:14px;min-height:22px}
.c-msg.ok{color:#2f8a55}
.c-msg.err{color:#c04b32}
.c-note{margin-top:24px;color:var(--gris-2);font-size:12.5px;line-height:1.6}

/* ── Pied de page (identique à index.html) ───────────────────────────── */
footer{padding:56px 0 40px;border-top:1px solid var(--trait);background:var(--sol)}
.pied{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.pied-marque{display:flex;flex-direction:column;gap:9px}
.pied-etym{color:var(--gris-2);font-size:12.5px;font-style:italic;max-width:34ch;line-height:1.5}
.pied-etym i{font-style:italic}
.pied-cols{display:flex;gap:48px;flex-wrap:wrap;padding-top:2px}
.pied-col{display:flex;flex-direction:column;gap:11px;min-width:112px}
.pied-col h4{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-2);margin:0 0 1px}
.pied-col a{color:var(--gris);text-decoration:none;font-size:14px;transition:color var(--pas)}
.pied-col a:hover{color:var(--encre)}
.pied-confiance{display:flex;gap:28px;flex-wrap:wrap}
.pied-sub{display:flex;flex-direction:column;gap:11px;min-width:112px}
.pied-bas{margin-top:26px;color:var(--gris-2);font-size:13px}