:root{
  --nuit:#2A3124;
  --nuit-2:#333B2C;
  --olive:#3E4736;
  --creme:#F1E9DC;
  --creme-2:#E5DACA;
  --ambre:#F1E9DC;
  --ambre-clair:#E5DACA;
  --olive-clair:#7C866F;
  --trait:rgba(241,233,220,.16);
  --trait-sombre:rgba(42,49,36,.18);
  --serif:"EB Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
  --r:999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--nuit);color:var(--creme);
  font-family:var(--serif);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.mesure{max-width:58ch}

/* ---------------- bandeau ---------------- */
.bandeau{
  background:var(--creme);color:var(--nuit);border-bottom:1px solid rgba(42,49,36,.12);
  font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:.04em;
  text-align:center;padding:11px 20px;position:relative;z-index:60;
}
.bandeau a{font-weight:500}

/* ---------------- navigation ---------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(42,49,36,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--trait)}
.nav-in{display:flex;align-items:center;gap:26px;height:74px}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.marque-nom{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.26em;white-space:nowrap}
.nav-liens{display:flex;gap:26px;font-family:var(--sans);font-size:12.5px;font-weight:300;letter-spacing:.14em;text-transform:uppercase}
.nav-liens a{text-decoration:none;padding-bottom:5px;border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s}
.nav-liens a:hover{border-bottom-color:var(--creme)}
.nav-liens a.actif{border-bottom-color:var(--creme);color:var(--creme)}
.burger{display:none;background:none;border:0;color:var(--creme);font-family:var(--sans);font-size:12px;letter-spacing:.16em;cursor:pointer;padding:10px}

/* ---------------- boutons ---------------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.05em;
  padding:15px 32px;text-decoration:none;border:1.5px solid transparent;border-radius:var(--r);
  transition:transform .18s ease,background .2s,color .2s,border-color .2s,box-shadow .2s;cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-ambre{background:var(--creme);color:var(--nuit);border-color:var(--creme);box-shadow:0 6px 24px rgba(42,49,36,.35)}
.btn-ambre:hover{background:var(--creme-2);border-color:var(--creme-2)}
.btn-fil{border-color:rgba(241,233,220,.42);color:var(--creme)}
.btn-fil:hover{border-color:var(--creme);background:rgba(241,233,220,.08)}
.btn-sombre{background:var(--nuit);color:var(--creme);border-color:var(--nuit)}
.btn-sombre:hover{background:var(--olive);border-color:var(--olive)}
.btn-petit{padding:11px 22px;font-size:13px}

/* ---------------- sections ---------------- */
.section{padding:112px 0}
.clair{background:var(--creme);color:var(--olive)}
.olive{background:var(--olive);color:var(--creme)}
.nuit2{background:var(--nuit-2)}
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(241,233,220,.62);margin:0 0 20px;
}
.clair .eyebrow{color:var(--olive-clair)}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em;margin:0 0 .42em}
h1{font-size:clamp(2.8rem,7vw,6rem);max-width:16ch}
h2{font-size:clamp(2.1rem,4.6vw,3.7rem);max-width:18ch}
h1 em,h2 em{font-style:italic;color:var(--creme-2)}
.clair h1 em,.clair h2 em{color:var(--olive-clair)}
.chapeau{font-size:1.16rem;opacity:.82;margin:0}
p{margin:0 0 1.1em}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:132px 0 118px;text-align:center}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(42,49,36,.97) 4%,rgba(42,49,36,.74) 42%,rgba(42,49,36,.58) 100%)}
.hero-in{position:relative;z-index:2}
.hero h1{margin-left:auto;margin-right:auto}
.hero .chapeau{max-width:52ch;margin:0 auto}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:42px}
.hero-mini{padding:104px 0 84px;text-align:left}
.hero-mini h1{margin-left:0;max-width:18ch}
.hero-mini .chapeau{margin:0;max-width:56ch}
.lueur{
  position:absolute;width:640px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(241,233,220,.13) 0%,rgba(241,233,220,0) 68%);
}
.lueur-a{top:-220px;right:-140px}
.lueur-b{bottom:-300px;left:-180px}

/* ---------------- cartes ---------------- */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.carte{
  background:var(--nuit-2);border:1px solid var(--trait);border-radius:18px;
  padding:38px 32px;transition:transform .2s ease,border-color .2s ease;
  display:flex;flex-direction:column;
}
.carte:hover{transform:translateY(-4px);border-color:rgba(241,233,220,.42)}
.clair .carte{background:rgba(255,255,255,.5);border-color:var(--trait-sombre)}
.clair .carte-num{color:var(--olive-clair)}
.carte-num{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:rgba(241,233,220,.55);margin:0 0 16px}
.carte h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:0 0 .3em;line-height:1.15}
.carte p{font-size:1rem;opacity:.76;margin:0 0 1em}
.carte .lien{
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-decoration:none;
  color:var(--olive-clair);margin-top:auto;border-bottom:1px solid transparent;align-self:flex-start;padding-bottom:2px;
}
.carte .lien:hover{border-bottom-color:currentColor}

/* ---------------- listes ---------------- */
.puces{list-style:none;margin:26px 0 0;padding:0}
.puces li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--trait);font-size:1.04rem}
.clair .puces li{border-bottom-color:var(--trait-sombre)}
.puces li::before{content:"";position:absolute;left:0;top:22px;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.duo-photo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cadre{border-radius:18px;overflow:hidden;aspect-ratio:4/5}
.cadre img{width:100%;height:100%;object-fit:cover}

/* ---------------- étapes ---------------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px}
.etape{border-top:2px solid currentColor;padding-top:26px}
.etape-num{font-family:var(--serif);font-size:2.8rem;line-height:1;opacity:.45;display:block;margin-bottom:12px}
.etape h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;margin:0 0 .35em}
.etape p{font-size:.99rem;opacity:.76;margin:0}

/* ---------------- chiffre ---------------- */
.chiffre{text-align:center}
.chiffre-nombre{
  font-family:var(--serif);font-style:italic;font-size:clamp(4rem,13vw,10rem);
  line-height:.9;margin:0;color:var(--creme);
}
.compare{max-width:940px;margin:60px auto 0;text-align:left}
.compare-ligne{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:28px 0;border-top:1px solid var(--trait)}
.compare-ligne:last-child{border-bottom:1px solid var(--trait)}
.compare h4{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px;opacity:.5}
.compare p{margin:0;font-size:1.05rem;opacity:.7}
.compare .fort p{opacity:1}

/* ---------------- appel final ---------------- */
.appel{text-align:center;padding:118px 0;position:relative;overflow:hidden}
.appel h2{margin-left:auto;margin-right:auto}
.appel .chapeau{max-width:48ch;margin:0 auto 40px}
.appel-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------------- pied ---------------- */
.pied{background:var(--nuit-2);border-top:1px solid var(--trait);padding:70px 0 40px;font-family:var(--sans);font-weight:300;font-size:.92rem}
.pied-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.pied h4{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,233,220,.55);margin:0 0 16px}
.pied p{margin:0 0 10px;opacity:.72}
.pied a{text-decoration:none;opacity:.72}
.pied a:hover{opacity:1}
.pied-bas{grid-column:1/-1;margin-top:48px;padding-top:20px;border-top:1px solid var(--trait);opacity:.5;font-size:.82rem}

/* ---------------- apparition ---------------- */
.monte{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.monte.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .monte{opacity:1;transform:none;transition:none}
  .btn:hover,.carte:hover{transform:none}
}
:focus-visible{outline:2px solid var(--creme);outline-offset:3px}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .cartes{grid-template-columns:1fr}
  .etapes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  body{font-size:18px}
  .section{padding:74px 0}
  .hero{padding:88px 0 76px}
  .hero-mini{padding:70px 0 56px}
  .nav-liens{
    display:none;position:absolute;top:74px;left:0;right:0;
    background:var(--nuit-2);border-bottom:1px solid var(--trait);
    flex-direction:column;gap:0;padding:10px 32px 22px;
  }
  .nav-liens.ouvert{display:flex}
  .nav-liens a{padding:15px 0;border-bottom:1px solid var(--trait)}
  .burger{display:block}
  .duo,.duo-photo,.compare-ligne{grid-template-columns:1fr;gap:34px}
  .etapes{grid-template-columns:1fr}
  .pied-in{grid-template-columns:1fr 1fr;gap:32px}
  .appel{padding:78px 0}
}
@media (max-width:560px){
  .marque-nom{display:none}
  .pied-in{grid-template-columns:1fr}
}