:root{
  --encre:#241A10;
  --brun:#49361D;
  --brun-clair:#6B5334;
  --papier:#EFEDE6;
  --craie:#FBFAF7;
  --laiton:#9C7B36;
  --gris:#6A6357;
  --rule:rgba(36,26,16,.14);
  --display:"Fraunces",Georgia,serif;
  --texte:"Karla",system-ui,sans-serif;
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.012em}
p{max-width:62ch}

/* barre haute */
.bandeau{border-bottom:1px solid var(--rule);background:rgba(239,237,230,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}
.bandeau .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 28px}
.marque{display:flex;align-items:center;gap:9px;text-decoration:none}
.marque img{height:38px;width:auto;display:block}
.marque span{font-family:var(--display);font-size:19px;letter-spacing:-.015em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:26px;font-size:15px}
.nav a{text-decoration:none;color:var(--gris);position:relative;padding-bottom:3px;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--laiton);transition:width .28s ease}
.nav a:hover{color:var(--encre)}
.nav a:hover::after{width:100%}
.nav .tel{color:var(--encre);font-weight:600;border-bottom:1px solid var(--laiton);padding-bottom:2px}
.nav .tel::after{display:none}
@media (max-width:880px){.nav a:not(.tel){display:none}}

/* ouverture */
.ouverture{padding:110px 0 96px;position:relative;overflow:hidden}
.ouverture h1{font-size:clamp(2.35rem,5.9vw,4.35rem);max-width:16ch;font-weight:300;letter-spacing:-.022em;line-height:1.08;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 120}
.ouverture h1 .ligne1{display:block}
.ouverture h1 i.ligne2{display:block;font-style:italic;font-weight:300;color:var(--brun);margin-top:.06em}
.ouverture h1 .mot{padding-right:.02em}
.ouverture h1 i{font-style:italic;font-weight:300}
.chapeau{margin-top:30px;font-size:1.16rem;color:var(--gris);max-width:52ch}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.bouton{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:15px 30px;background:var(--brun);color:var(--craie);border:1px solid var(--brun);transition:background .2s ease,transform .2s ease}
.bouton:hover{background:var(--encre);border-color:var(--encre);transform:translateY(-2px)}
.bouton.creux{background:transparent;color:var(--encre);border-color:var(--rule)}
.bouton.creux:hover{background:transparent;border-color:var(--encre);transform:translateY(-2px)}
.filet{margin-top:64px;height:1px;background:linear-gradient(to right,var(--laiton),transparent);max-width:340px}

/* animations */
.up{opacity:0;transform:translateY(18px);animation:monte .85s cubic-bezier(.2,.7,.3,1) forwards}
.up.d2{animation-delay:.12s}.up.d3{animation-delay:.24s}.up.d4{animation-delay:.36s}
@keyframes monte{to{opacity:1;transform:none}}
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rev.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .up{animation:none;opacity:1;transform:none}
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .bouton:hover{transform:none}
}

/* sections */
.bloc{padding:84px 0;border-top:1px solid var(--rule)}
.bloc h2{font-size:clamp(1.85rem,3.6vw,2.7rem);max-width:18ch}
.intro-bloc{margin-top:16px;color:var(--gris)}

/* prestations */
.prestations{margin-top:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.presta{padding:26px 0;border-top:1px solid var(--rule);transition:border-color .25s}
.presta:hover{border-color:var(--laiton)}
.presta h3{font-size:1.2rem;margin-bottom:8px}
.presta p{font-size:15.5px;color:var(--gris);max-width:44ch}

/* forfaits */
.forfaits{margin-top:50px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.forfait{background:var(--papier);padding:30px 24px 34px;display:flex;flex-direction:column;transition:background .25s}
.forfait:hover{background:var(--craie)}
.forfait.phare{background:var(--craie);box-shadow:inset 0 3px 0 var(--laiton)}
.forfait h3{font-size:1.35rem}
.duree{font-size:14px;color:var(--gris);margin-top:4px}
.prix{font-family:var(--display);font-size:2.1rem;margin:20px 0 4px;color:var(--brun)}
.prix small{font-family:var(--texte);font-size:13px;color:var(--gris)}
.forfait ul{list-style:none;margin-top:16px;font-size:15px;color:var(--gris)}
.forfait li{padding:7px 0 7px 18px;position:relative;line-height:1.45}
.forfait li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--laiton)}
.mention-phare{font-size:12.5px;color:var(--laiton);margin-bottom:10px}
.hors-forfait{margin-top:26px;font-size:15.5px;color:var(--gris)}
.legal-tva{margin-top:8px;font-size:13.5px;color:var(--gris)}

/* étapes */
.etapes{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.etape{border-top:2px solid var(--brun);padding-top:20px}
.rang{font-family:var(--display);font-size:1.5rem;color:var(--laiton);display:block;margin-bottom:6px}
.etape h3{font-size:1.15rem;margin-bottom:8px}
.etape p{font-size:15.5px;color:var(--gris)}

/* parcours */
.parcours{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;margin-top:44px;align-items:start}
.parcours p{margin-bottom:18px}
.reperes{border-left:2px solid var(--brun);padding-left:24px}
.repere{padding:13px 0}
.repere strong{display:block;font-family:var(--display);font-weight:400;font-size:1.06rem;margin-bottom:2px}
.repere span{font-size:15px;color:var(--gris)}

/* cadre */
.cadre{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:52px}
.cadre h3{font-size:1.15rem;margin-bottom:10px}
.cadre p{font-size:16px;color:var(--gris)}
.outils{margin-top:16px;font-size:15px;color:var(--gris);line-height:2.05}

/* secteur */
.secteur{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.secteur h3{font-size:1.15rem;margin-bottom:10px}
.secteur p{font-size:16px;color:var(--gris)}

/* contact */
.contact{background:var(--encre);color:var(--craie);padding:96px 0}
.contact h2{color:var(--craie);font-size:clamp(1.9rem,4vw,2.9rem)}
.contact p{color:rgba(251,250,247,.72);margin-top:18px}
.coords{margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:34px}
.coord{border-top:1px solid rgba(251,250,247,.22);padding-top:16px}
.coord span{display:block;font-size:13.5px;color:rgba(251,250,247,.6);margin-bottom:6px}
.coord a{font-family:var(--display);font-size:1.35rem;text-decoration:none;word-break:break-word;transition:color .2s}
.coord a:hover{color:var(--laiton)}

/* mentions + pied */
.mentions{padding:56px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--gris)}
.mentions h2{font-size:1.15rem;margin-bottom:14px;color:var(--encre)}
.mentions p{max-width:72ch;margin-bottom:10px}
.pied{padding:34px 0 44px;border-top:1px solid var(--rule)}
.pied .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.pied img{height:70px;width:auto;opacity:.85}
.pied div{font-size:13.5px;color:var(--gris)}


/* ---- curseur personnalise ---- */
@media (hover:hover) and (pointer:fine){
  body.curseur, body.curseur *{cursor:none}
  .cur-point{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--brun);z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .25s}
  .cur-anneau{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--laiton);border-radius:50%;z-index:9998;pointer-events:none;transform:translate(-50%,-50%);transition:width .28s cubic-bezier(.2,.7,.3,1),height .28s cubic-bezier(.2,.7,.3,1),background-color .28s,border-color .28s,opacity .25s}
  .cur-anneau.actif{width:58px;height:58px;background:rgba(156,123,54,.13);border-color:var(--brun)}
  .cur-anneau.sombre{border-color:rgba(251,250,247,.7)}
  .cur-point.sombre{background:var(--craie)}
}

/* ---- jauge de lecture ---- */
.jauge{position:fixed;top:0;left:0;height:2px;width:0;background:var(--laiton);z-index:40;transition:width .1s linear}

/* ---- filet anime sous les titres ---- */
.bloc h2{position:relative;padding-bottom:16px}
.bloc h2::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--laiton);transition:width .9s cubic-bezier(.2,.7,.3,1) .15s}
.bloc h2.vu::after{width:96px}

/* ---- titre d'ouverture mot a mot ---- */
.mot{display:inline-block;opacity:0;transform:translateY(24px);animation:motmonte .8s cubic-bezier(.2,.7,.3,1) forwards}

@keyframes motmonte{to{opacity:1;transform:none}}

/* ---- relief au survol ---- */
.forfait{position:relative}
.forfait:hover{transform:translateY(-4px)}
.forfait{transition:background .25s,transform .3s cubic-bezier(.2,.7,.3,1)}
.presta{transition:border-color .25s,transform .3s cubic-bezier(.2,.7,.3,1)}
.presta:hover{transform:translateX(5px)}
.repere{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.repere:hover{transform:translateX(4px)}
.marque img{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.marque:hover img{transform:rotate(-4deg) scale(1.06)}
.etape{transition:border-color .3s}
.etape:hover{border-color:var(--laiton)}

@media (prefers-reduced-motion:reduce){
  .mot{animation:none;opacity:1;transform:none}
  .bloc h2::after{transition:none;width:96px}
  .forfait:hover,.presta:hover,.repere:hover{transform:none}
  .marque:hover img{transform:none}
  .jauge{display:none}
}


/* ---- calculateur ---- */
.calc{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.calc-champ{margin-bottom:26px}
.calc-champ label{display:block;font-size:15px;color:var(--gris);margin-bottom:10px}
.calc-champ input[type=range]{width:100%;accent-color:var(--brun);height:4px}
.calc-val{font-family:var(--display);font-size:1.5rem;color:var(--brun);margin-top:6px;display:block}
.calc-res{background:var(--craie);border:1px solid var(--rule);padding:34px 32px}
.calc-gros{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.2rem);color:var(--brun);line-height:1.05}
.calc-leg{font-size:15px;color:var(--gris);margin-top:10px}
.calc-reco{margin-top:24px;padding-top:22px;border-top:1px solid var(--rule);font-size:15.5px}
.calc-reco b{font-family:var(--display);font-weight:400;color:var(--brun)}

/* ---- comparatif ---- */
.compare{margin-top:44px;width:100%;border-collapse:collapse;font-size:15.5px}
.compare th,.compare td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
.compare thead th{font-family:var(--display);font-weight:400;font-size:1.1rem;border-bottom:1px solid var(--brun)}
.compare tbody th{font-weight:500;color:var(--gris);width:36%}
.compare .col-nous{background:var(--craie)}
.compare tfoot td,.compare tfoot th{font-family:var(--display);font-size:1.15rem;border-bottom:none;padding-top:20px}
.compare-note{margin-top:16px;font-size:14px;color:var(--gris)}
.tableau-scroll{overflow-x:auto}

/* ---- cas ---- */
.cas{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cas-item{background:var(--papier);padding:30px 26px 34px;transition:background .25s}
.cas-item:hover{background:var(--craie)}
.cas-item h3{font-size:1.2rem;margin-bottom:14px}
.cas-item p{font-size:15px;color:var(--gris);margin-bottom:14px}
.cas-item .avant{padding-left:16px;border-left:2px solid var(--rule)}
.cas-item .apres{padding-left:16px;border-left:2px solid var(--laiton);color:var(--encre)}
.cas-eti{font-size:12.5px;color:var(--laiton);display:block;margin-bottom:5px}

/* ---- faq ---- */
.faq{margin-top:40px;max-width:78ch}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-family:var(--display);font-size:1.12rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:1px solid var(--brun);border-bottom:1px solid var(--brun);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .rep{padding:0 20px 24px 0;font-size:16px;color:var(--gris);animation:ouvre .38s cubic-bezier(.2,.7,.3,1)}
@keyframes ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- formulaire ---- */
.form{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;max-width:760px}
.form .large{grid-column:1/-1}
.form label{display:block;font-size:14px;color:rgba(251,250,247,.72);margin-bottom:7px}
.form input,.form textarea,.form select{width:100%;background:transparent;border:1px solid rgba(251,250,247,.28);color:var(--craie);padding:13px 14px;font-family:var(--texte);font-size:16px;border-radius:0;transition:border-color .2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--laiton)}
.form textarea{min-height:120px;resize:vertical}
.form option{color:#222}
.form button{justify-self:start;background:var(--craie);color:var(--encre);border:1px solid var(--craie);padding:15px 32px;font-family:var(--texte);font-weight:600;font-size:16px;cursor:pointer;transition:background .2s,transform .2s}
.form button:hover{background:var(--laiton);border-color:var(--laiton);color:var(--craie);transform:translateY(-2px)}
.form-ok{grid-column:1/-1;font-family:var(--display);font-size:1.2rem;color:var(--laiton);display:none}
.form .cache{position:absolute;left:-9999px}

/* ---- whatsapp flottant ---- */
.wa{position:fixed;right:22px;bottom:22px;z-index:35;display:flex;align-items:center;gap:10px;background:var(--brun);color:var(--craie);text-decoration:none;padding:14px 20px;border-radius:40px;font-size:15px;font-weight:500;box-shadow:0 6px 22px rgba(36,26,16,.22);transition:transform .25s,background .25s}
.wa:hover{background:var(--encre);transform:translateY(-3px)}
.wa svg{width:19px;height:19px;fill:currentColor;flex:none}
@media (max-width:600px){.wa span{display:none}.wa{padding:15px;border-radius:50%}}

@media (max-width:880px){
  .calc,.form{grid-template-columns:1fr;gap:28px}
  .cas{grid-template-columns:1fr}
  .compare tbody th{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .faq .rep{animation:none}
  .cas-item:hover,.form button:hover,.wa:hover{transform:none}
}


/* ---- alternance de fonds ---- */
.bloc.clair{background:var(--craie)}
.bloc.clair .forfait{background:var(--craie)}
.bloc.clair .forfait.phare{background:var(--papier)}
.bloc.clair .forfait:hover{background:var(--papier)}
.bloc.clair .cas-item{background:var(--craie)}
.bloc.clair .cas-item:hover{background:var(--papier)}
.bloc.clair .calc-res{background:var(--papier)}

/* ---- bandeau de rupture ---- */
.rupture{background:var(--brun);color:var(--craie);padding:90px 0;position:relative;overflow:hidden}
.rupture p{font-family:var(--display);font-size:clamp(1.7rem,4.1vw,3rem);line-height:1.16;max-width:20ch;font-weight:300;position:relative;z-index:2}
.rupture .sous{font-family:var(--texte);font-size:1.05rem;color:rgba(251,250,247,.66);margin-top:22px;max-width:46ch;font-weight:400}
.rupture .mono{position:absolute;right:-40px;top:50%;transform:translateY(-50%);height:150%;opacity:.07;z-index:1;pointer-events:none;filter:brightness(0) invert(1)}

/* ---- filigrane ---- */
.ouverture{position:relative}
.filigrane{position:absolute;pointer-events:none;z-index:0;opacity:.05}
.ouverture .filigrane{right:-60px;top:-30px;height:135%}
.ouverture .wrap{position:relative;z-index:2}
#parcours{position:relative;overflow:hidden}
#parcours .filigrane{left:-90px;bottom:-70px;height:105%;opacity:.045}
#parcours .wrap{position:relative;z-index:2}
@media (max-width:880px){.filigrane,.rupture .mono{display:none}}

/* ---- nav active ---- */
.nav a.ici{color:var(--encre)}
.nav a.ici::after{width:100%}

/* ---- deroule en fil vertical ---- */
.fil{margin-top:48px;position:relative;padding-left:52px;max-width:760px}
.fil::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:var(--rule)}
.fil::after{content:"";position:absolute;left:15px;top:8px;width:1px;height:0;background:var(--brun);transition:height 1.5s cubic-bezier(.3,.7,.3,1)}
.fil.vu::after{height:calc(100% - 16px)}
.etape-fil{position:relative;padding:0 0 44px}
.etape-fil:last-child{padding-bottom:0}
.etape-fil::before{content:"";position:absolute;left:-44px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--papier);border:1px solid var(--brun);transition:background .4s,transform .4s}
.etape-fil.vu::before{background:var(--brun);transform:scale(1.18)}
.etape-fil .rang{font-family:var(--display);font-size:.95rem;color:var(--laiton);display:block;margin-bottom:4px}
.etape-fil h3{font-size:1.25rem;margin-bottom:7px}
.etape-fil p{font-size:16px;color:var(--gris)}

/* ---- cas en onglets ---- */
.onglets{display:flex;gap:0;margin-top:44px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.onglet{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 22px 13px;font-family:var(--texte);font-size:15.5px;color:var(--gris);cursor:pointer;transition:color .22s,border-color .22s}
.onglet:hover{color:var(--encre)}
.onglet[aria-selected=true]{color:var(--encre);border-bottom-color:var(--brun);font-weight:500}
.volet{display:none;padding-top:36px;animation:paraitre .45s cubic-bezier(.2,.7,.3,1)}
.volet.actif{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@keyframes paraitre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.volet .cas-eti{font-size:12.5px;color:var(--laiton);display:block;margin-bottom:7px}
.volet h3{font-size:1.25rem;margin-bottom:14px;grid-column:1/-1}
.volet .avant{padding-left:18px;border-left:2px solid var(--rule);color:var(--gris)}
.volet .apres{padding-left:18px;border-left:2px solid var(--laiton)}
@media (max-width:880px){.volet.actif{grid-template-columns:1fr;gap:26px}.onglet{padding:12px 15px}}

/* ---- retour en haut ---- */
.haut{position:fixed;left:22px;bottom:22px;z-index:35;width:44px;height:44px;border:1px solid var(--rule);background:rgba(251,250,247,.9);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s,border-color .25s}
.haut.vis{opacity:1;pointer-events:auto;transform:none}
.haut:hover{border-color:var(--brun)}
.haut::before{content:"";width:9px;height:9px;border-left:1px solid var(--encre);border-top:1px solid var(--encre);transform:rotate(45deg) translate(2px,2px)}
@media (max-width:600px){.haut{display:none}}

@media (prefers-reduced-motion:reduce){
  .fil::after{transition:none;height:calc(100% - 16px)}
  .etape-fil::before{background:var(--brun)}
  .volet{animation:none}
}


.slogan{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.15rem;color:var(--brun-clair);margin-top:38px;letter-spacing:.005em}
.slogan-pied{display:block;font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--brun);margin-bottom:5px}

/* ---- bandeau d'appel a l'action ---- */
.annonce{background:var(--brun);color:var(--craie)}
.annonce .wrap{display:flex;align-items:center;justify-content:center;gap:22px;padding:13px 28px;flex-wrap:wrap;text-align:center}
.annonce p{margin:0;font-size:15.5px;max-width:none;color:rgba(251,250,247,.9)}
.annonce b{font-weight:600;color:var(--craie)}
.annonce a{display:inline-block;background:var(--craie);color:var(--encre);text-decoration:none;font-weight:600;font-size:14.5px;padding:9px 20px;white-space:nowrap;transition:background .22s,transform .22s}
.annonce a:hover{background:var(--laiton);color:var(--craie);transform:translateY(-1px)}
@media (max-width:640px){
  .annonce .wrap{gap:12px;padding:12px 20px}
  .annonce p{font-size:14px}
  .annonce a{font-size:14px;padding:9px 18px}
}
@media (prefers-reduced-motion:reduce){.annonce a:hover{transform:none}}

a:focus-visible,.bouton:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}

@media (max-width:880px){
  .prestations,.etapes,.secteur,.parcours,.cadre{grid-template-columns:1fr;gap:0}
  .etapes{gap:34px}.secteur,.cadre,.parcours{gap:32px;margin-top:32px}
  .forfaits{grid-template-columns:1fr}
  .coords{grid-template-columns:1fr}
  .ouverture{padding:70px 0 60px}
  .bloc{padding:62px 0}
  .marque img{height:32px}
  .marque span{font-size:17px}
}

/* ================= MODE SOMBRE ================= */
:root{color-scheme:light}
html[data-theme="sombre"]{
  --encre:#F2EFE8; --brun:#C9A66B; --brun-clair:#B08F58;
  --papier:#171310; --craie:#1F1A15; --laiton:#C9A66B;
  --gris:#A49A8C; --rule:rgba(242,239,232,.16);
  color-scheme:dark;
}
html[data-theme="sombre"] .bandeau{background:rgba(23,19,16,.92)}
html[data-theme="sombre"] .annonce{background:#241D16}
html[data-theme="sombre"] .annonce a{background:var(--laiton);color:#171310}
html[data-theme="sombre"] .annonce a:hover{background:#F2EFE8}
html[data-theme="sombre"] .rupture{background:#241D16}
html[data-theme="sombre"] .contact{background:#0F0C0A}
html[data-theme="sombre"] .bouton{background:var(--laiton);color:#171310;border-color:var(--laiton)}
html[data-theme="sombre"] .bouton:hover{background:#F2EFE8;border-color:#F2EFE8;color:#171310}
html[data-theme="sombre"] .bouton.creux{background:transparent;color:var(--encre);border-color:var(--rule)}
html[data-theme="sombre"] .bouton.creux:hover{border-color:var(--encre);color:var(--encre)}
html[data-theme="sombre"] .marque img,html[data-theme="sombre"] .pied img,html[data-theme="sombre"] .filigrane{filter:brightness(0) invert(1)}
html[data-theme="sombre"] .filigrane{opacity:.035}
html[data-theme="sombre"] .haut{background:rgba(31,26,21,.9)}
html[data-theme="sombre"] .form button{background:var(--laiton);color:#171310;border-color:var(--laiton)}
html[data-theme="sombre"] .texture{opacity:.5}

.bascule{background:none;border:1px solid var(--rule);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--encre);transition:border-color .22s,transform .22s}
.bascule:hover{border-color:var(--brun);transform:translateY(-1px)}
.bascule svg{width:15px;height:15px;fill:currentColor}
.bascule .lune{display:none}
html[data-theme="sombre"] .bascule .lune{display:block}
html[data-theme="sombre"] .bascule .soleil{display:none}

/* ================= TEXTURE PAPIER ================= */
.texture{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")}
html[data-theme="sombre"] .texture{mix-blend-mode:screen}

/* ================= BARRE D'OUTILS ================= */
.outils-bar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 0;background:var(--craie)}
.outils-bar .wrap{display:flex;align-items:center;justify-content:center;gap:14px 40px;flex-wrap:wrap}
.outils-bar span{font-size:13px;color:var(--gris);letter-spacing:.02em}
.outils-bar b{font-family:var(--display);font-weight:400;font-size:1.12rem;color:var(--brun-clair);opacity:.85;transition:opacity .25s,transform .25s}
.outils-bar b:hover{opacity:1;transform:translateY(-2px)}

/* ================= CHIFFRES CLES ================= */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:48px}
.chiffre{background:var(--papier);padding:30px 24px;text-align:left}
.chiffre .n{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.6rem);color:var(--brun);line-height:1}
.chiffre .l{font-size:14.5px;color:var(--gris);margin-top:9px}
@media (max-width:880px){.chiffres{grid-template-columns:1fr 1fr}}

/* ================= TRANSITION DE PAGE ================= */
.voile{position:fixed;inset:0;background:var(--papier);z-index:9990;pointer-events:none;opacity:1;transition:opacity .45s ease}
.voile.parti{opacity:0}
body.sortie .voile{opacity:1;pointer-events:auto}

/* ================= PAGES METIER ================= */
.metier-tete{padding:76px 0 8px;position:relative;overflow:hidden}
.metier-tete .eyebrow{font-family:var(--display);font-style:italic;color:var(--brun-clair);font-size:1.05rem;margin-bottom:14px}
.metier-tete h1{font-size:clamp(2.2rem,5.2vw,3.7rem);max-width:17ch;font-weight:300;letter-spacing:-.02em;line-height:1.09}
.metier-tete .chapeau{margin-top:26px}
.douleurs{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.douleur{padding:24px 0;border-top:1px solid var(--rule)}
.douleur h3{font-size:1.12rem;margin-bottom:7px}
.douleur p{font-size:15.5px;color:var(--gris);max-width:46ch}
.reponse{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.reponse div{background:var(--papier);padding:28px 24px}
.reponse h3{font-size:1.1rem;margin-bottom:9px}
.reponse p{font-size:15px;color:var(--gris)}
@media (max-width:880px){.douleurs,.reponse{grid-template-columns:1fr;gap:0}}
.autres{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}
.autres a{font-size:15px;text-decoration:none;border:1px solid var(--rule);padding:11px 18px;transition:border-color .22s,transform .22s}
.autres a:hover{border-color:var(--brun);transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .voile{transition:none;display:none}
  .outils-bar b:hover,.autres a:hover,.bascule:hover{transform:none}
}

/* ================= RESSOURCES ================= */
.res-liste{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.res-carte{background:var(--papier);padding:34px 30px;display:flex;flex-direction:column}
.res-carte .type{font-size:12.5px;color:var(--laiton);margin-bottom:9px}
.res-carte h3{font-size:1.28rem;margin-bottom:12px}
.res-carte p{font-size:15.5px;color:var(--gris);margin-bottom:14px}
.res-carte ul{list-style:none;font-size:15px;color:var(--gris);margin-bottom:22px}
.res-carte li{padding:6px 0 6px 18px;position:relative}
.res-carte li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--laiton)}
.res-carte .dl{margin-top:auto}
.res-carte .dl a{display:inline-block;text-decoration:none;font-weight:600;font-size:15px;padding:13px 24px;background:var(--brun);color:var(--craie);border:1px solid var(--brun);transition:background .2s,transform .2s}
.res-carte .dl a:hover{background:var(--encre);border-color:var(--encre);transform:translateY(-2px)}
.res-carte .bloque{font-size:14.5px;color:var(--gris);font-style:italic}
.res-mur{margin-top:44px;background:var(--craie);border:1px solid var(--rule);padding:38px 34px;max-width:760px}
.res-mur h3{font-size:1.3rem;margin-bottom:10px}
.res-mur p{font-size:16px;color:var(--gris);margin-bottom:24px}
.res-mur form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.res-mur .large{grid-column:1/-1}
.res-mur label{display:block;font-size:14px;color:var(--gris);margin-bottom:7px}
.res-mur input{width:100%;background:var(--papier);border:1px solid var(--rule);color:var(--encre);padding:13px 14px;font-family:var(--texte);font-size:16px;transition:border-color .2s}
.res-mur input:focus{outline:none;border-color:var(--brun)}
.res-mur button{grid-column:1/-1;justify-self:start;background:var(--brun);color:var(--craie);border:1px solid var(--brun);padding:15px 30px;font-family:var(--texte);font-weight:600;font-size:16px;cursor:pointer;transition:background .2s,transform .2s}
.res-mur button:hover{background:var(--encre);border-color:var(--encre);transform:translateY(-2px)}
.res-mur .cache{position:absolute;left:-9999px}
.res-mur .fin{font-size:13.5px;color:var(--gris);grid-column:1/-1}
.debloque{display:none}
body.ouvert .debloque{display:block}
body.ouvert .res-mur{display:none}
body.ouvert .bloque{display:none}
@media (max-width:880px){.res-liste{grid-template-columns:1fr}.res-mur form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.res-carte .dl a:hover,.res-mur button:hover{transform:none}}

/* ================= PAGE RESERVATION ================= */
.res-tete{padding:78px 0 10px}
.res-tete h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:16ch;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.res-tete .chapeau{margin-top:26px}
.res-corps{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;padding:52px 0 90px;align-items:start}
.res-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.res-form .large{grid-column:1/-1}
.res-form label{display:block;font-size:14px;color:var(--gris);margin-bottom:7px}
.res-form input,.res-form textarea,.res-form select{width:100%;background:var(--craie);border:1px solid var(--rule);color:var(--encre);padding:13px 14px;font-family:var(--texte);font-size:16px;border-radius:0;transition:border-color .2s}
.res-form input:focus,.res-form textarea:focus,.res-form select:focus{outline:none;border-color:var(--brun)}
.res-form textarea{min-height:110px;resize:vertical}
.res-form button{grid-column:1/-1;justify-self:start;background:var(--brun);color:var(--craie);border:1px solid var(--brun);padding:16px 34px;font-family:var(--texte);font-weight:600;font-size:16px;cursor:pointer;transition:background .2s,transform .2s}
.res-form button:hover{background:var(--encre);border-color:var(--encre);transform:translateY(-2px)}
.res-form button:disabled{opacity:.6;cursor:default}
.res-form .cache,.form .cache,.res-mur .cache{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.legende{grid-column:1/-1;font-size:13.5px;color:var(--gris)}

.choix{display:flex;flex-wrap:wrap;gap:10px}
.choix input{position:absolute;opacity:0;width:0;height:0}
.choix label{display:inline-block;margin:0;padding:11px 18px;border:1px solid var(--rule);background:var(--craie);font-size:15px;color:var(--encre);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.choix label:hover{border-color:var(--brun-clair);transform:translateY(-1px)}
.choix input:checked + label{background:var(--brun);border-color:var(--brun);color:var(--craie)}
.choix input:focus-visible + label{outline:2px solid var(--laiton);outline-offset:3px}

.res-aside{background:var(--craie);border:1px solid var(--rule);padding:34px 30px;position:sticky;top:120px}
.res-aside h2{font-size:1.25rem;margin-bottom:18px;padding:0}
.res-aside h2::after{display:none}
.res-aside ol{list-style:none;counter-reset:n;margin:0;padding:0}
.res-aside li{counter-increment:n;position:relative;padding:0 0 20px 34px;font-size:15.5px;color:var(--gris)}
.res-aside li:last-child{padding-bottom:0}
.res-aside li::before{content:counter(n);position:absolute;left:0;top:0;width:22px;height:22px;border:1px solid var(--brun);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:12.5px;color:var(--brun)}
.res-aside strong{display:block;color:var(--encre);font-family:var(--display);font-weight:400;font-size:1.02rem;margin-bottom:2px}
.res-rappel{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule);font-size:15px;color:var(--gris)}
.res-rappel a{font-family:var(--display);font-size:1.15rem;color:var(--brun);text-decoration:none;display:block;margin-top:6px}
.res-rappel a:hover{color:var(--laiton)}

.merci{display:none;padding:70px 0 110px}
.merci h1{font-size:clamp(2rem,4.6vw,3rem);max-width:18ch;font-weight:300;letter-spacing:-.02em}
.merci p{margin-top:22px;color:var(--gris);font-size:1.1rem}
.merci .bouton{margin-top:34px}

@media (max-width:880px){
  .res-corps{grid-template-columns:1fr;gap:40px;padding:36px 0 70px}
  .res-form{grid-template-columns:1fr}
  .res-aside{position:static}
  .res-tete{padding:52px 0 6px}
}
@media (prefers-reduced-motion:reduce){
  .res-form button:hover,.choix label:hover{transform:none}
}