/* Luxurya — feuille de style du site.
   Jetons repris de la direction artistique v1 (page 04). Ivoire par défaut, Nuit en mode sombre. */

:root{
  --surface:#F6F2EA; --raised:#FCFAF6; --sunken:#EAE3D5;
  --ink:#0E1628; --muted:#4B5468; --hairline:#D6CDBB; --border:#7B8396;
  --navy:#12203B; --on-navy:#F6F2EA; --on-navy-muted:#A9B2C3;
  --brass:#B38B4D; --on-brass:#0E1628; --brass-text:#7A571C; --brass-navy:#C9A66B;
  --bordeaux-text:#6B1E2A; --pinstripe:#2A3A5E;
  --bordeaux:#6B1E2A; --on-bordeaux:#F6F2EA; --on-bordeaux-muted:#E7C9CD; --brass-bordeaux:#D8BB84; --wine-stripe:#7E2A37;
  --success:#2E6B4F; --danger:#A3202F;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --surface:#0C1321; --raised:#131C2E; --sunken:#09101B;
    --ink:#F3EEE4; --muted:#A9B2C3; --hairline:#26324B; --border:#66718A;
    --navy:#263A63; --brass:#C9A66B; --on-brass:#0C1321; --brass-text:#D2B37C; --brass-navy:#D8BB84;
    --bordeaux-text:#E3A0AB; --pinstripe:#34497A;
    --bordeaux:#9C3447; --on-bordeaux:#FFFFFF; --on-bordeaux-muted:#F3DDE0; --wine-stripe:#A94355;
    --success:#7CC4A0; --danger:#F29AA3;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:26px;text-rendering:optimizeLegibility}
h1,h2,h3,blockquote{font-family:var(--display);font-weight:500;margin:0}
p,ol,ul,figure{margin:0;padding:0}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--brass-text);outline-offset:2px}
.on-navy :focus-visible{outline-color:var(--brass-navy)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--raised);color:var(--ink);padding:12px 16px;border-radius:2px}
.skip:focus{top:12px}

/* Grille : 16 px de marge sur mobile, 32 px au-delà, contenu 1200 px. */
.wrap{max-width:1264px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.wrap{padding:0 32px}}
section{padding:64px 0;scroll-margin-top:72px}
@media (min-width:960px){section{padding:96px 0}}

/* Typographie */
.eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-text)}
.on-navy .eyebrow{color:var(--brass-navy)}
.title{font-size:clamp(32px,4.4vw,40px);line-height:1.15;margin-top:16px;max-width:22ch;text-wrap:balance}
.title::after{content:"";display:block;width:50px;height:3px;background:var(--brass);margin-top:20px}
.lead{font-size:18px;line-height:30px;color:var(--muted);margin-top:24px;max-width:60ch}

/* Boutons : angles de 2 px, jamais en pilule. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:1px solid transparent;border-radius:2px;font-family:var(--sans);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .24s var(--ease),filter .24s var(--ease)}
.btn-accent{background:var(--brass);color:var(--on-brass)}
.btn-accent:hover{filter:brightness(1.08)}
.btn-primary{background:var(--navy);color:var(--on-navy)}
.btn-primary:hover{background:var(--ink)}
.btn-light{background:var(--on-navy);color:#12203B}
.btn-light:hover{background:#FFFFFF}
.btn[disabled]{opacity:.55;cursor:wait}
.link{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--brass-navy);border-bottom:1px solid currentColor;padding-bottom:4px}
.link:hover{color:var(--on-navy)}

/* 1 · Navigation : bleu nuit, 72 px, fixe au défilement. */
.nav{position:sticky;top:0;z-index:10;background:#12203B;border-bottom:1px solid #2A3A5E}
.nav .wrap{height:72px;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:#F6F2EA;margin-right:auto}
.brand span{font-family:var(--display);font-weight:500;font-size:18px;line-height:1;letter-spacing:.32em;text-transform:uppercase}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{font-size:14px;line-height:20px;font-weight:500;color:#F6F2EA;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{border-bottom-color:#C9A66B}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;color:#F6F2EA;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;min-height:48px;display:flex;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;left:0;right:0;top:72px;list-style:none;background:var(--raised);border-bottom:1px solid var(--hairline);padding:8px 0}
.menu a{display:block;padding:14px 16px;color:var(--ink);text-decoration:none}
.menu a:hover{background:var(--sunken)}
@media (max-width:959px){
  .nav-links{display:none}
  .menu{display:block}
  .nav .wrap{gap:16px}
}
@media (max-width:479px){
  .brand span{display:none}
  .nav .btn{padding:0 16px}
}

/* 2 à 6 · Le parcours. Par défaut : des sections empilées (sans JS ou « réduire les animations »).
   site.js ajoute .cine-on : les scènes s'empilent dans une scène épinglée et l'on zoome de l'une à l'autre. */
.scene{position:relative;background:var(--surface);color:var(--ink);overflow:hidden}
.scene-open,.scene-method{background:var(--navy);color:var(--on-navy)}
/* Couleurs de la charte toutes en scène : bleu nuit, ivoire, bordeaux (la cravate), laiton (le bouton de manchette). */
.scene-work{background:var(--bordeaux);color:var(--on-bordeaux)}
.scene-work .eyebrow{color:var(--brass-bordeaux)}
.scene-work .title::after{background:var(--brass-bordeaux)}
.scene-work .shots-note,.scene-work .portal-label{color:var(--on-bordeaux-muted)}
.scene-work .shots-note a{color:var(--on-bordeaux)}
.scene-work .scene-stripes,.scene-work::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 31px,var(--wine-stripe) 31px 32px);
  -webkit-mask:linear-gradient(90deg,transparent 0 55%,#000 90%);mask:linear-gradient(90deg,transparent 0 55%,#000 90%)}
.scene-cta{background:var(--brass);color:var(--on-brass)}
.scene-cta .eyebrow{color:var(--on-brass)}
.scene-cta .sub{color:var(--on-brass)}
.scene-stripes{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 31px,var(--pinstripe) 31px 32px);
  -webkit-mask:linear-gradient(90deg,transparent 0 50%,#000 85%);mask:linear-gradient(90deg,transparent 0 50%,#000 85%)}
.scene-in{position:relative;z-index:1;display:grid;gap:40px;align-items:center;width:100%}
@media (min-width:960px){.scene-in{grid-template-columns:1fr minmax(260px,32%);gap:64px}}
.scene-copy{min-width:0}
.scene-open h1{font-size:clamp(36px,min(6.4vw,8.4svh),72px);line-height:1.06;letter-spacing:-.01em;margin-top:20px;max-width:14ch;text-wrap:balance}
.scene-open h1::after{content:"";display:block;width:64px;height:3px;background:var(--brass);margin-top:28px}
.sub{font-size:19px;line-height:31px;color:var(--muted);margin-top:24px;max-width:52ch}
.on-navy .sub,.on-navy .steps p{color:var(--on-navy-muted)}
.on-navy .title::after{background:var(--brass-navy)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:32px}

.offers{list-style:none;display:grid;gap:20px;margin-top:32px}
@media (min-width:960px){.offers{grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}}
.offer{padding:24px;border-radius:2px;background:var(--navy);color:var(--on-navy);transition:transform .24s var(--ease)}
.offer:nth-child(2){background:var(--bordeaux);color:var(--on-bordeaux)}
.offer:nth-child(3){background:var(--brass);color:var(--on-brass)}
.offer .num{font-family:var(--display);font-size:32px;line-height:36px;color:var(--brass-navy)}
.offer:nth-child(2) .num{color:var(--brass-bordeaux)}
.offer:nth-child(3) .num{color:var(--on-brass)}
.offer h3{font-size:24px;line-height:32px;margin-top:8px}
.offer p{font-size:16px;line-height:25px;margin-top:8px;opacity:.92}
.offer:hover{transform:translateY(-4px)}

.shots{display:flex;gap:20px;align-items:flex-end;margin-top:32px}
.shots .browser{flex:1;max-width:640px}
.shots .phone{flex:0 0 22%;max-width:150px}
.browser{background:var(--raised);border:1px solid var(--hairline);border-radius:8px;overflow:hidden}
.browser-bar{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--hairline);background:var(--surface)}
.browser-bar i{width:8px;height:8px;border-radius:50%;background:var(--hairline)}
.browser img,.phone img{display:block;width:100%;height:auto}
.phone{border:6px solid #12203B;border-radius:22px;overflow:hidden;background:#12203B}
.shots-note{font-size:14px;line-height:22px;color:var(--muted);margin-top:20px}

.steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:32px;counter-reset:step}
@media (min-width:960px){.steps{grid-template-columns:repeat(4,1fr);margin-top:48px}}
.steps li{border-top:1px solid var(--pinstripe);padding-top:16px;counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--display);font-size:40px;line-height:44px;color:var(--brass-navy)}
.steps li{border-top-color:var(--brass-navy)}
.steps h3{font-size:24px;line-height:32px;margin-top:8px}
.steps p{font-size:15px;line-height:24px;margin-top:6px}

.scene-cta .scene-in{grid-template-columns:1fr;justify-items:center;text-align:center}
.scene-cta .sub{margin-left:auto;margin-right:auto}
.cta-title{font-size:clamp(36px,min(5.6vw,8svh),64px);line-height:1.08;max-width:16ch;margin:20px auto 0;text-wrap:balance}

/* Fenêtres : cadre laiton où la scène suivante apparaît en miniature. */
.portal-wrap{display:grid;gap:12px;justify-items:center}
.portal-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-text)}
.on-navy .portal-label{color:var(--brass-navy)}
.portal{display:block;position:relative;text-decoration:none}
.portal:empty{border:1px solid var(--brass);outline:1px solid var(--brass);outline-offset:5px}
.scene-offers .portal{background:var(--sunken)}
.scene-why .portal{background:var(--bordeaux)}
.scene-work .portal{background:var(--navy);border-color:var(--brass-bordeaux);outline-color:var(--brass-bordeaux)}
.scene-method .portal{background:var(--surface)}
.scene-care .portal{background:var(--brass)}
.portal-mark svg{display:block;width:112px;height:112px}
@media (min-width:960px){.portal-mark svg{width:200px;height:200px}}
.portal-cta{display:inline-flex;align-items:center;justify-content:center;min-height:72px;padding:0 48px;background:var(--navy);color:var(--on-navy);border-radius:2px;
  font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background-color .24s var(--ease)}
.portal-cta:hover{background:var(--ink)}

/* Mode classique : sections normales, les fenêtres vers la suite n'ont pas lieu d'être. */
.cine:not(.cine-on) .scene{padding:64px 0}
@media (min-width:960px){.cine:not(.cine-on) .scene{padding:96px 0}}
.cine:not(.cine-on) .portal:empty,.cine:not(.cine-on) .portal-label{display:none}

/* Mode zoom infini */
.cine-on .cine-stage{position:sticky;top:72px;height:calc(100svh - 72px);overflow:hidden;background:var(--navy)}
.cine-on .scene{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;padding:24px 0;transform-origin:0 0;visibility:hidden}
.cine-on .scene.on{visibility:visible}
.cine-on .portal:empty{width:min(30vw,420px);aspect-ratio:var(--ar,16/10)}
@media (max-width:959px){
  .cine-on .scene-in{gap:24px;align-content:center}
  .cine-on .portal:empty{width:auto;height:clamp(96px,19svh,180px)}
  .cine-on .offer p,.cine-on .shots-note{display:none}
  .cine-on .offers{gap:10px;margin-top:24px}
  .cine-on .offer{padding:14px 18px;display:flex;align-items:baseline;gap:14px}
  .cine-on .offer h3{margin-top:0}
  .cine-on .offer .prix{display:block;margin:0 0 0 auto;font-size:12px;white-space:nowrap}
  .cine-on .offers-note{margin-top:12px;font-size:13px}
  .cine-on .why,.cine-on .plans{gap:12px;margin-top:20px}
  .cine-on .why h3,.cine-on .plans h3{font-size:20px;line-height:26px}
  .cine-on .why p,.cine-on .plans p{font-size:14px;line-height:20px;margin-top:4px}
  .cine-on .plans li{padding:12px 16px}
  .cine-on .steps{gap:16px 24px;margin-top:24px}
  .cine-on .steps p{font-size:14px;line-height:20px}
  .cine-on .shots{margin-top:24px}
  .cine-on .sub{font-size:16px;line-height:26px;margin-top:16px}
  .cine-on .hero-actions{margin-top:24px}
}
/* Profondeur : en plongeant, les plans proches glissent plus vite que les plans lointains. */
.cine-on .d1{transform:translateY(calc(var(--x,0) * -24px))}
.cine-on .d2{transform:translateY(calc(var(--x,0) * -56px))}
/* Ce qui est « dans » la fenêtre s'efface quand on y entre. */
.cine-on .mark-l,.cine-on .portal-cta span{opacity:calc(1 - var(--z,0) * 5)}

/* Rail de progression : un repère par scène, cliquable. */
.rail{position:fixed;right:12px;top:50%;z-index:9;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateY(-50%);transition:opacity .24s var(--ease)}
.rail[hidden]{display:none}
.rail.off{opacity:0;pointer-events:none}
/* Le bouton fait 24 px (cible tactile) ; seul le petit carré intérieur est visible. */
.rail button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.rail button::after{content:"";width:10px;height:10px;border:1px solid var(--brass);transition:background-color .24s var(--ease),transform .24s var(--ease)}
.rail button[aria-current="step"]::after{background:var(--brass);transform:scale(1.4)}
.rail-count{font-size:12px;line-height:16px;letter-spacing:.08em;color:var(--brass);font-variant-numeric:tabular-nums;writing-mode:vertical-rl;margin-top:8px}
.rail-count b{font-weight:600}
@media (max-width:639px){.rail{right:2px}.rail button::after{width:8px;height:8px}.rail-count{display:none}}

/* 6 · Témoignage : une seule citation. */
.quote{background:var(--raised);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);text-align:center}
.quote blockquote{font-size:clamp(24px,3.2vw,30px);line-height:1.3;max-width:32ch;margin:0 auto;text-wrap:balance}
.quote figcaption{margin-top:32px}

/* 7 · Contact : bleu nuit, formulaire sur surface relevée. */
.contact{background:var(--navy);color:var(--on-navy)}
.contact .wrap{display:grid;gap:48px}
@media (min-width:960px){.contact .wrap{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.contact .title::after{background:var(--brass-navy)}
.contact .lead{color:var(--on-navy-muted)}
.coords{margin-top:40px;display:grid;gap:16px;font-style:normal}
.coords a{color:var(--on-navy);text-decoration:none;border-bottom:1px solid var(--pinstripe)}
.coords a:hover{border-bottom-color:var(--brass-navy)}
.coords .eyebrow{display:block;margin-bottom:4px}

.form{background:var(--raised);color:var(--ink);border-radius:4px;border-top:3px solid var(--brass);padding:32px 24px}
@media (min-width:640px){.form{padding:40px}}
.fields{display:grid;gap:24px}
@media (min-width:640px){.fields{grid-template-columns:1fr 1fr}.full{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted)}
input,select,textarea{width:100%;padding:12px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:2px;font:inherit;font-size:16px;line-height:26px}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237B8396' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--brass-text)}
.err{display:none;font-size:14px;line-height:22px;font-weight:500;color:var(--danger)}
.field:has(:user-invalid) .err{display:block}
:user-invalid{border-color:var(--danger)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.form-foot small{font-size:12px;line-height:18px;color:var(--muted);max-width:36ch}
.status{display:none;align-items:flex-start;gap:12px;margin-top:24px;padding:16px;border:1px solid currentColor;border-radius:2px;font-size:15px;line-height:24px}
.status.ok{display:flex;color:var(--success)}
.status.ko{display:flex;color:var(--danger)}
.status svg{flex:0 0 auto;margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Guide « Laquelle vous correspond ? » : deux questions, l'offre adaptée s'allume au-dessus. */
.contact .fit{grid-column:1/-1;margin:0 0 16px;color:var(--ink)} /* carte claire dans une section bleu nuit */
.fit{margin-top:64px;padding:32px 24px;background:var(--raised);color:var(--ink);border:1px solid var(--hairline);border-top:3px solid var(--brass);border-radius:2px;display:grid;gap:32px}
@media (min-width:640px){.fit{padding:40px}}
@media (min-width:960px){.fit{grid-template-columns:1fr 1fr;column-gap:48px}.fit h2,.fit-out{grid-column:1/-1}}
.fit h2{font-size:30px;line-height:38px}
.fit fieldset{border:0;margin:0;padding:0;min-width:0}
.fit fieldset[hidden]{display:none}
.fit legend{padding:0;margin-bottom:16px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{color:var(--ink);display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:2px;font-size:15px;transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease)}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.chip input:checked+span::before{content:"";width:6px;height:6px;margin-right:10px;background:var(--brass-navy)}
.chip input:focus-visible+span{outline:2px solid var(--brass-text);outline-offset:2px}
.fit-out{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--hairline);padding-top:32px}
.fit-result{font-size:16px;line-height:26px;color:var(--muted);max-width:56ch}
.fit-result strong{display:block;font-family:var(--display);font-weight:500;font-size:30px;line-height:38px;color:var(--ink);margin-bottom:4px}

/* Questionnaire complet : un vrai bloc, pas un lien perdu dans le texte. */
.brief-cta{margin-top:32px;padding:28px;background:var(--bordeaux);border-left:3px solid var(--brass-bordeaux);border-radius:2px;display:grid;gap:20px;justify-items:start}
.brief-cta p{color:var(--on-bordeaux-muted);max-width:44ch}
.brief-cta strong{display:block;color:var(--on-bordeaux);font-weight:600;margin-bottom:4px}
.brief-cta .btn-outline{color:var(--on-bordeaux);border-color:var(--brass-bordeaux)}
.brief-cta .btn-outline::before{background:var(--brass-bordeaux)}
.btn-outline{background:transparent;color:var(--on-navy);border-color:var(--brass-navy)}
.btn-outline::before{background:var(--brass-navy)}
.btn-outline:hover,.btn-outline:focus-visible{color:#0E1628}
.btn-outline{transition:color .24s var(--ease)}

.copy{margin-left:8px;padding:2px 10px;min-height:28px;background:transparent;color:var(--brass-navy);border:1px solid var(--pinstripe);border-radius:2px;font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .24s var(--ease)}
.copy:hover{border-color:var(--brass-navy)}
.count{align-self:flex-end;font-size:12px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Navigation : la section en cours de lecture est soulignée. */
.nav-links a[aria-current="true"]{background-size:100% 1px,100% 1px;color:var(--brass-navy)}

/* 8 · Pied de page */
.foot{background:var(--bordeaux);padding:48px 0;font-size:12px;line-height:18px;color:var(--on-bordeaux-muted)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.foot .brand{color:var(--on-bordeaux);margin:0}
.foot .brand span{font-size:16px}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.foot nav a{text-decoration:none;color:var(--on-bordeaux)}
.foot nav a:hover{color:var(--brass-bordeaux)}

/* Pages de texte (mentions légales) */
.doc{max-width:72ch;border-left:3px solid var(--brass);padding-left:24px}
.doc h2{font-size:24px;line-height:32px;margin:48px 0 12px}
.doc h2::before{content:"";display:inline-block;width:10px;height:10px;margin-right:14px;background:var(--bordeaux);vertical-align:middle}
.doc p{color:var(--muted);margin-top:12px}

/* ==================================================================== MOUVEMENT
   Un seul moment orchestré (le héros, au chargement), le reste ne bouge qu'en réponse au visiteur.
   Base de la charte : fondu + glissement de 8 px, 240 ms, ease-out. Ni rebond, ni parallaxe, ni curseur.
   Mécanismes réécrits d'après Uiverse (balayage, soulignement), Kokonut UI (libellé glissant)
   et React Bits (révélation mot par mot) ; aucun code tiers embarqué. */

/* --- Ouverture : la rayure se trace, le revers se coud, le titre se pose (au chargement).
   « backwards » et non « both » : une fois finie, l'animation rend la main à la profondeur (.d1, .d2). */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes stitch{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scene-open .scene-stripes{animation:draw-down 1.1s var(--ease) both}
.scene-open .portal-mark{animation:fade .4s var(--ease) .2s backwards}
.scene-open .frame{stroke-dasharray:1;animation:stitch 1s var(--ease) .45s both}
.scene-open h1 .w{display:inline-block;animation:rise .24s var(--ease) backwards;animation-delay:calc(.1s + var(--i) * 60ms)}
.scene-open h1::after{transform-origin:left;animation:rule .5s var(--ease) .75s both}
.scene-open .eyebrow{animation:fade .4s var(--ease) backwards}
.scene-open .sub,.scene-open .hero-actions{animation:rise .24s var(--ease) .85s backwards}

/* --- Boutons : balayage de gauche à droite (Uiverse), qui repart dans le même sens à la sortie. */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .24s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn-primary::before{background:var(--ink)}
.btn-primary:hover{background:var(--navy)}
.btn-light::before{background:var(--brass-navy)}
.btn-light:hover{background:var(--on-navy)}
.btn-accent:hover{filter:none}
.btn[disabled]::before{transform:scaleX(0)}

/* --- Bouton de la navigation : le libellé glisse et révèle la promesse (Kokonut UI, slide-text-button). */
.slide{display:grid;overflow:hidden}
.slide>span{grid-area:1/1;transition:transform .24s var(--ease),opacity .24s var(--ease)}
.slide>span+span{transform:translateY(100%);opacity:0}
.btn:hover .slide>span:first-child,.btn:focus-visible .slide>span:first-child{transform:translateY(-100%);opacity:0}
.btn:hover .slide>span+span,.btn:focus-visible .slide>span+span{transform:none;opacity:1}
.btn-accent::before{background:var(--on-navy)}

/* --- Liens : un trait qui se dessine depuis la gauche, comme une couture. */
.link,.nav-links a,.coords a,.foot nav a,.lead a{text-decoration:none;border-bottom:0;padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat,
             linear-gradient(var(--line,transparent),var(--line,transparent)) left bottom/100% 1px no-repeat;
  transition:background-size .24s var(--ease),color .24s var(--ease)}
.link,.lead a{--line:currentColor}
.coords a{--line:var(--pinstripe)}
.foot nav a{--line:var(--wine-stripe)}
.link:hover,.nav-links a:hover,.coords a:hover,.foot nav a:hover,.lead a:hover{background-size:100% 1px,100% 1px}
.nav-links a:hover,.coords a:hover{color:var(--brass-navy)}
.link:hover{color:var(--on-navy)}

/* --- Champs : trait laiton tiré sous le champ actif (Uiverse), bordeaux s'il est invalide. */
input,textarea{background-image:linear-gradient(var(--brass),var(--brass));background-repeat:no-repeat;background-position:left bottom;background-size:0 2px;transition:background-size .24s var(--ease),border-color .24s var(--ease)}
input:focus,textarea:focus{background-size:100% 2px}
:user-invalid{background-image:linear-gradient(var(--danger),var(--danger))}
.field:focus-within label{color:var(--brass-text)}
.field label{transition:color .24s var(--ease)}

/* --- Envoi réussi : la coche se trace. */
.status.ok path{stroke-dasharray:24;animation:check .4s var(--ease) .1s both}
@keyframes check{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Refonte 2026-10 : prix, pourquoi, entretien, halo des offres */
.offer .prix,.plans .prix{font-family:var(--sans);font-weight:600;font-size:14px;line-height:20px;letter-spacing:.08em;text-transform:uppercase;margin-top:16px;opacity:1}
.offers-note{margin-top:20px;font-size:14px;line-height:22px;color:var(--muted)}
.scene-why{background:var(--sunken);color:var(--ink)}
.why,.plans{list-style:none;display:grid;gap:20px;margin-top:32px}
@media (min-width:960px){.why,.plans{grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}}
.why li{border-top:1px solid var(--brass);padding-top:16px}
.why h3,.plans h3{font-size:24px;line-height:32px}
.why p{font-size:16px;line-height:25px;margin-top:8px;color:var(--muted)}
.scene-care{background:var(--surface);color:var(--ink)}
.plans li{padding:24px;border:1px solid var(--hairline);border-radius:2px;background:var(--raised)}
.plans li:nth-child(2){border-color:var(--brass)}
.plans p{font-size:15px;line-height:24px;margin-top:8px;color:var(--muted)}
.plans .prix{color:var(--brass-text);margin-top:4px}
/* Halo laiton qui suit le pointeur (site.js pose --mx/--my) ; rien sans pointeur fin ni en mouvement réduit */
.offer{position:relative;overflow:hidden}
.offer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .24s var(--ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(201,166,107,.28),transparent 70%)}
@media (hover:hover) and (pointer:fine){.offer:hover::after{opacity:1}}
@media (prefers-reduced-motion:reduce){.offer::after{display:none}.offer:hover{transform:none}}