/* ============================================================
   Impact-NVA — version 4
   L'univers de la Signature (impact-nva.fr), repris tel quel : un seul fond vert-noir
   continu, l'or, le Cormorant Garamond et le Jost, les boutons à crochet, les filets dorés.
   Aucune section n'a de fond propre : la couleur suit le défilement d'un bout à l'autre.
   ============================================================ */
:root{
  --nuit:#050b08;--v900:#08130d;--v850:#0a1913;--v800:#0d2118;--v700:#123024;
  --or:#c9a24b;--or-clair:#e7cc86;--or-fonce:#8a6c2c;--jade:#57b183;--jade-clair:#8fe0b3;
  --argent:#c6ccd2;--argent-doux:#8a9299;--blanc:#f6f3ec;
  --texte:rgba(246,243,236,.76);--fort:rgba(246,243,236,.92);
  --trait:rgba(201,162,75,.24);--trait-doux:rgba(255,255,255,.09);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);--sortie:cubic-bezier(.16,1,.3,1);
  --degrade-or:linear-gradient(100deg,#8a6c2c,#e7cc86 30%,#fff6df 50%,#e7cc86 70%,#8a6c2c);
  --bouton-or:linear-gradient(135deg,#f0da9e,#c9a24b 55%,#a07f36);
  --marge:clamp(20px,5vw,72px);
  --z-monde:5;--z-nav:50;--z-grain:60;--z-menu:80;--z-intro:9999;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--nuit);scrollbar-color:var(--or-fonce) var(--nuit)}
body{margin:0;background:var(--nuit);color:var(--blanc);font-family:var(--sans);font-weight:300;font-size:1.06rem;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased;caret-color:var(--or-clair)}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:500;color:var(--fort)}
[hidden]{display:none!important}
section[id],header[id]{scroll-margin-top:84px}
::selection{background:var(--or);color:var(--nuit)}
:focus-visible{outline:2px solid var(--or-clair);outline-offset:4px;border-radius:2px}
.hors-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:fixed;left:12px;top:-80px;z-index:var(--z-menu);background:var(--blanc);color:var(--nuit);padding:12px 18px}
.evitement:focus{top:12px}
.cadre{width:100%;max-width:1244px;margin-inline:auto;padding-inline:var(--marge)}

/* ---------- Le fond : une seule matière, dont les lueurs glissent avec le défilement (--sy : 0 → 1) ---------- */
.fond{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--nuit)}
.fond i{position:absolute;border-radius:50%;will-change:transform}
.fond .f1{width:95vmax;height:95vmax;left:42%;top:-42vmax;background:radial-gradient(closest-side,rgba(22,84,60,.62),rgba(18,48,36,.28) 45%,transparent 72%);transform:translate3d(calc(var(--sy,0) * -62vw),calc(var(--sy,0) * 78vh),0)}
.fond .f2{width:80vmax;height:80vmax;left:-34vmax;top:38vh;background:radial-gradient(closest-side,rgba(138,108,44,.3),rgba(138,108,44,.1) 50%,transparent 72%);transform:translate3d(calc(var(--sy,0) * 70vw),calc(var(--sy,0) * -46vh),0)}
.fond .f3{width:70vmax;height:70vmax;left:30%;top:64vh;background:radial-gradient(closest-side,rgba(87,177,131,.16),transparent 70%);transform:translate3d(calc(var(--sy,0) * -34vw),calc(var(--sy,0) * -58vh),0)}
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.filet{height:1px;max-width:1180px;margin-inline:auto;background:linear-gradient(90deg,transparent,rgba(201,162,75,.38),transparent)}

/* ---------- Lettrage ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.01em;text-wrap:balance;color:var(--blanc)}
h1{font-size:clamp(2.7rem,min(6vw,9vh),5.2rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
h1 em,h2 em,h3 em,.plume,.nom{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--or-clair)}
.metier{color:var(--argent-doux)}
p{color:var(--texte);text-wrap:pretty}
.chapo{max-width:60ch;margin-top:1.3rem;font-size:1.18rem;color:var(--fort)}
.or-vif{background:var(--degrade-or);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:var(--or-clair);-webkit-text-fill-color:transparent;animation:reflet 6s linear infinite}
@keyframes reflet{to{background-position:200% center}}
/* le repère de chapitre : seulement là où l'ordre raconte quelque chose */
.chapitre{display:flex;align-items:center;gap:1.1em;margin-bottom:1.4rem;font-size:.74rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--argent-doux)}
.chapitre span{font-family:var(--serif);font-style:italic;font-size:1.5rem;letter-spacing:.02em;text-transform:none;color:var(--or-clair)}
.chapitre span::after{content:"";display:inline-block;vertical-align:middle;width:38px;height:1px;margin-left:1.1em;background:var(--or)}

/* ---------- Boutons : le rectangle doré à crochet de la Signature ---------- */
.bouton{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:54px;padding:0 2.3em;border:0;border-radius:0;isolation:isolate;overflow:hidden;
  font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;text-align:center;line-height:1.3;cursor:pointer;
  color:var(--nuit);background:var(--bouton-or);box-shadow:0 12px 40px -12px rgba(201,162,75,.7),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease)}
.bouton::before{content:"";position:absolute;z-index:2;top:6px;left:6px;width:9px;height:9px;border-top:1px solid rgba(6,20,12,.55);border-left:1px solid rgba(6,20,12,.55);opacity:.6;transition:.5s var(--ease)}
.bouton:hover::before{width:calc(100% - 12px);height:calc(100% - 12px);opacity:.9}
.bouton::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-130%);transition:transform .85s var(--ease)}
.bouton:hover{transform:translateY(-3px);box-shadow:0 20px 55px -14px rgba(201,162,75,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.bouton:hover::after{transform:translateX(130%)}
.bouton:active{transform:translateY(-1px)}
.bouton[disabled]{opacity:.6;cursor:progress;transform:none}
.bouton--lueur,.bouton--contour,.bouton--foret{color:var(--blanc);background:transparent;box-shadow:inset 0 0 0 1px rgba(198,204,210,.32)}
.bouton--lueur::before,.bouton--contour::before,.bouton--foret::before{border-color:var(--or)}
.bouton--lueur::after,.bouton--contour::after,.bouton--foret::after{background:linear-gradient(135deg,rgba(201,162,75,.18),rgba(18,48,36,.45));transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.bouton--lueur:hover,.bouton--contour:hover,.bouton--foret:hover{color:var(--or-clair);box-shadow:inset 0 0 0 1px var(--or)}
.bouton--lueur:hover::after,.bouton--contour:hover::after,.bouton--foret:hover::after{transform:scaleY(1)}
.bouton--petit{min-height:44px;padding:0 1.5em;font-size:.72rem}
.bouton--grand{min-height:58px;padding:0 2.7em}
.lien-fleche{display:inline-flex;align-items:center;gap:.6em;padding:.5em 0;font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--or-clair);border-bottom:1px solid var(--trait);transition:border-color .3s,color .3s}
.lien-fleche:hover{border-bottom-color:var(--or-clair);color:var(--blanc)}
.lien-fleche svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.lien-fleche:hover svg{transform:translate(3px,-3px)}

/* ---------- Apparition (posée par le script seulement : rien n'est jamais masqué sans lui) ---------- */
.monte{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.monte.attente{opacity:0;transform:translateY(34px)}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{position:fixed;z-index:var(--z-nav);top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px var(--marge);transition:padding .5s var(--ease),background-color .5s var(--ease)}
.nav.descendu{padding-block:12px;background:rgba(5,11,8,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(201,162,75,.16)}
.nav-marque{display:flex;align-items:center;gap:12px;margin-right:auto;font-family:var(--serif);font-size:1.55rem;font-weight:700;letter-spacing:.05em;text-decoration:none;color:var(--jade)}
.nav-logo{width:auto;height:44px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));transition:transform .5s var(--ease)}
.nav-marque:hover .nav-logo{transform:rotate(-4deg) scale(1.05)}
.nav-liens{display:flex;gap:clamp(16px,2.2vw,32px)}
.nav-liens a{padding:10px 0;font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--texte);transition:color .3s}
.nav-liens a:hover{color:var(--or-clair)}
.nav-menu{display:none;flex-direction:column;justify-content:center;gap:5px;width:52px;height:44px;padding:0 13px;background:rgba(201,162,75,.06);border:1px solid rgba(201,162,75,.38);border-radius:4px;cursor:pointer}
.nav-menu span{display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--or),var(--or-clair))}
.nav-menu span:nth-child(2){width:70%;align-self:flex-end}
.menu{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:96px var(--marge) 40px;border:0;color:var(--blanc);background:radial-gradient(90% 70% at 80% 6%,#123024 0%,#08130d 48%,#050b08 100%)}
.menu[open]{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.menu::backdrop{background:var(--nuit)}
.menu a{font-family:var(--serif);font-size:clamp(1.8rem,7vw,2.5rem);line-height:1.3;text-decoration:none}
.menu a:hover{color:var(--or-clair)}
.menu a.bouton{margin-top:30px;font-family:var(--sans);font-size:.8rem}
.menu-fermer{position:absolute;top:20px;right:var(--marge);min-height:44px;padding:0 18px;border:1px solid rgba(201,162,75,.5);background:transparent;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}

/* ============================================================
   LE LOGO EN RELIEF (une toile unique, au-dessus de la page, qui ne capte aucun clic)
   ============================================================ */
.monde{display:none}
.anime .monde{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:var(--z-monde);pointer-events:none;mix-blend-mode:lighten}
.intro-en-cours .monde{z-index:calc(var(--z-intro) + 1)}
.monde canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s}
.logo3d{position:relative;display:block}
.logo3d .logo-fixe{width:100%;height:100%;object-fit:contain;transition:opacity .2s}
.monde-vivant .logo3d .logo-fixe{opacity:0}
.logo3d.vivant{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ============================================================
   L'OUVERTURE — celle de la Signature : la nuit, l'étincelle, puis la révélation
   ============================================================ */
.intro{display:none}
.intro-en-cours{overflow:hidden}
.intro-en-cours .intro,.intro-sortie .intro{position:fixed;inset:0;z-index:var(--z-intro);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;background-color:#020403;animation:introOut 1.4s var(--ease) 10.6s forwards}
.intro-sortie .intro{animation:introOut 1.2s var(--ease) forwards}
.intro.passe{animation:introOut .55s var(--ease) forwards}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro > *{will-change:transform,opacity}
.intro-sky{position:absolute;inset:0;opacity:0;animation:monter 3.8s var(--ease) .3s forwards;background:radial-gradient(130% 90% at 50% 122%,rgba(24,74,52,.7),transparent 58%),radial-gradient(90% 60% at 50% 128%,rgba(201,162,75,.42),transparent 52%),linear-gradient(180deg,#010302,#030605)}
.intro-stars{position:absolute;inset:0;opacity:0;animation:monter 4s ease .6s forwards;background-repeat:no-repeat;background-image:radial-gradient(1px 1px at 18% 28%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 72% 34%,rgba(143,224,179,.5),transparent),radial-gradient(1px 1px at 42% 68%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 84% 22%,rgba(231,204,134,.75),transparent),radial-gradient(1px 1px at 58% 82%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 30% 55%,rgba(143,224,179,.35),transparent),radial-gradient(1px 1px at 88% 62%,rgba(255,255,255,.4),transparent)}
@keyframes monter{to{opacity:1}}
.intro-spark{position:absolute;top:44%;left:50%;z-index:4;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,#fff,#e7cc86 40%,transparent 70%);box-shadow:0 0 30px 8px rgba(231,204,134,.8),0 0 60px 20px rgba(201,162,75,.5);animation:sparkGrow 2.1s var(--ease) 1.3s forwards,sparkOut .5s ease 3.4s forwards}
@keyframes sparkGrow{0%{transform:translate(-50%,-50%) scale(0);opacity:0}40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:1}}
@keyframes sparkOut{to{opacity:0;transform:translate(-50%,-50%) scale(6)}}
.intro-flash{position:absolute;top:44%;left:50%;z-index:3;width:60vmax;height:60vmax;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,rgba(255,255,255,.95),rgba(231,204,134,.5) 25%,transparent 55%);animation:flash 1s var(--sortie) 3.35s forwards}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}25%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
.intro-rays,.ouverture-rayons{position:absolute;top:44%;left:50%;z-index:1;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;opacity:0;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(231,204,134,.16) 6deg,transparent 12deg,transparent 30deg,rgba(143,224,179,.12) 36deg,transparent 42deg,transparent 60deg,rgba(231,204,134,.14) 66deg,transparent 72deg,transparent 90deg,rgba(231,204,134,.16) 96deg,transparent 102deg,transparent 130deg,rgba(143,224,179,.12) 136deg,transparent 142deg,transparent 170deg,rgba(231,204,134,.14) 176deg,transparent 182deg,transparent 210deg,rgba(231,204,134,.16) 216deg,transparent 222deg,transparent 250deg,rgba(143,224,179,.12) 256deg,transparent 262deg,transparent 290deg,rgba(231,204,134,.14) 296deg,transparent 302deg,transparent 330deg,rgba(231,204,134,.16) 336deg,transparent 342deg);
  -webkit-mask-image:radial-gradient(circle,#000 12%,transparent 60%);mask-image:radial-gradient(circle,#000 12%,transparent 60%)}
.intro-rays{animation:raysIn 2.2s var(--sortie) 3.4s forwards,tourner 40s linear 3.4s infinite}
@keyframes raysIn{from{opacity:0;scale:.5}to{opacity:.9;scale:1}}
@keyframes tourner{to{rotate:360deg}}
.intro-ring{position:absolute;top:44%;left:50%;z-index:2;width:120px;height:120px;border-radius:50%;border:2px solid rgba(231,204,134,.7);opacity:0;transform:translate(-50%,-50%) scale(0);animation:shock 1.5s var(--sortie) 3.4s forwards}
.intro-ring.r2{border-color:rgba(143,224,179,.6);animation-delay:3.7s;animation-duration:1.6s}
@keyframes shock{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(9)}}
.intro-burst{position:absolute;top:44%;left:50%;z-index:3}
.intro-burst .p{position:absolute;width:5px;height:5px;border-radius:50%;opacity:0;animation:burst 1.5s var(--sortie) 3.4s forwards}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}
.intro-logo{position:relative;z-index:5;width:min(62vw,340px);aspect-ratio:785/683}
.intro-logo .logo-fixe{opacity:0;transform:scale(.35);filter:blur(14px) brightness(2);animation:logoIn 2.6s var(--sortie) 3.6s forwards}
@keyframes logoIn{0%{opacity:0;transform:scale(.35);filter:blur(14px) brightness(2.4)}55%{opacity:1;transform:scale(1.06);filter:blur(0) brightness(1.15)}100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}
.monde-vivant .intro-logo .logo-fixe{animation:none;opacity:0}
.intro-wordmark{position:relative;z-index:5;font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:.14em;line-height:1;opacity:0;transform:translateY(8px);animation:wmIn 1.3s var(--sortie) 4.6s forwards}
@keyframes wmIn{to{opacity:1;transform:none}}
.intro-underline{position:relative;z-index:5;width:0;height:2px;border-radius:2px;opacity:0;background:linear-gradient(90deg,transparent,#57b183,#8fe0b3,#57b183,transparent);box-shadow:0 0 14px rgba(95,177,131,.6);animation:ulDraw 1.3s var(--sortie) 5.6s forwards}
@keyframes ulDraw{to{opacity:1;width:220px}}
.intro-line{position:relative;z-index:5;padding:0 20px;font-size:.78rem;font-weight:300;letter-spacing:.32em;text-transform:uppercase;text-align:center;color:var(--argent);opacity:0;animation:lineIn 1.9s var(--ease) 6s forwards}
@keyframes lineIn{from{opacity:0;letter-spacing:.6em;filter:blur(4px)}to{opacity:.92;letter-spacing:.32em;filter:blur(0)}}
.intro-skip{position:absolute;bottom:30px;right:36px;z-index:8;min-height:44px;padding:0 10px;background:none;border:0;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--argent-doux);cursor:pointer;opacity:0;animation:monter 1s ease 1.4s forwards;transition:color .3s}
.intro-skip:hover{color:var(--or-clair)}

/* ============================================================
   LE PREMIER ÉCRAN
   ============================================================ */
.ouverture{position:relative}
.ouverture-pin{position:relative;display:grid;place-items:center;overflow:hidden;min-height:100vh;min-height:100svh;padding:clamp(86px,11vh,120px) var(--marge) clamp(40px,7vh,76px)}
.ouverture-rayons{top:31%;opacity:.5;-webkit-mask-image:radial-gradient(circle,#000 6%,rgba(0,0,0,.4) 22%,transparent 46%);mask-image:radial-gradient(circle,#000 6%,rgba(0,0,0,.4) 22%,transparent 46%)}
.anime .ouverture-rayons{animation:tourner 60s linear infinite}
.ouverture-bloc{position:relative;z-index:2;width:100%;max-width:1040px;text-align:center}
.logo3d--haut{width:min(74vw,calc(35vh * 1.15));aspect-ratio:785/683;margin:0 auto clamp(6px,1.6vh,18px)}
.ouverture-marque{font-size:.74rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--or)}
.ouverture h1{margin-top:clamp(12px,2.2vh,24px)}
.ouverture-phrase{margin-top:clamp(10px,1.8vh,18px);font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.75rem);color:var(--blanc)}
.ouverture-phrase em{color:var(--or-clair)}
.ouverture-suite{max-width:52ch;margin:clamp(10px,1.8vh,18px) auto 0;font-size:1.08rem}
.ouverture-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;margin-top:clamp(20px,3.4vh,36px)}
.ouverture-indice{display:none}
.anime .ouverture{height:190vh}
.anime .ouverture-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
/* --p : 0 → 1 pendant que le logo se défait ; le texte ne s'efface qu'à ce moment-là */
.anime .ouverture-bloc > :not(.logo3d){opacity:calc(1 - (var(--p,0) - .12) * 4.6);transform:translate3d(0,calc(max(0,var(--p,0) - .12) * -110px),0)}
.anime .ouverture-rayons{opacity:calc(.5 - var(--p,0) * .5)}
.intro-en-cours .ouverture-bloc > :not(.logo3d),.intro-en-cours .nav{opacity:0!important}
@keyframes entree{from{opacity:0;transform:translateY(26px)}}
.intro-finie .ouverture-bloc > :not(.logo3d){animation:entree 1.3s var(--sortie) backwards}
.intro-finie .ouverture h1{animation-delay:.12s}
.intro-finie .ouverture-phrase{animation-delay:.26s}
.intro-finie .ouverture-suite{animation-delay:.38s}
.intro-finie .ouverture-actions{animation-delay:.5s}
.intro-finie .nav{animation:monter 1.2s .4s backwards}
.anime .ouverture-indice{display:flex;flex-direction:column;align-items:center;gap:10px;position:absolute;left:0;right:0;bottom:22px;z-index:2;pointer-events:none;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--argent-doux);opacity:calc(1 - var(--p,0) * 7)}
.ouverture-indice::after{content:"";width:1px;height:38px;background:linear-gradient(var(--or),transparent)}

/* ============================================================
   L'HISTOIRE
   ============================================================ */
.histoire{position:relative}
.histoire-entete{max-width:1244px;margin-inline:auto;padding:clamp(70px,12vh,130px) var(--marge) 0;font-size:.74rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--or)}
.histoire-fil{display:none}
.plan{position:relative;max-width:1244px;margin-inline:auto;padding:clamp(40px,8vh,96px) var(--marge)}
.plan-titre{max-width:none;font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1.04}
.plan-titre--grand{font-size:clamp(2.4rem,5.8vw,5.2rem)}
.plan-suite{max-width:52ch;margin-top:1.5rem;font-size:clamp(1.08rem,1.45vw,1.25rem);color:var(--fort)}
.plan--terrain{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,96px);align-items:center}
.plan-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;border:1px solid rgba(201,162,75,.3);box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.plan-photo figcaption{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--texte)}
.plan-citation{max-width:26ch;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,4.1rem);line-height:1.12;text-wrap:balance;quotes:"«\00a0" "\00a0»"}
.plan-citation::before{content:open-quote;color:var(--or-clair)}
.plan-citation::after{content:close-quote;color:var(--or-clair)}
.plan--marque{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center}
.logo3d--marque{width:100%;max-width:500px;aspect-ratio:785/683;justify-self:center}
.signe{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;margin-top:1.5rem}
.signe .plume{font-size:clamp(2.6rem,4.6vw,3.6rem);line-height:1.1}
.signe small{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--argent-doux)}
.anime .mot{opacity:var(--o,1);transition:opacity .35s linear}
/* la scène figée : les quatre chapitres se succèdent au même endroit pendant que les éclats flottent */
.anime .histoire{height:470vh}
.anime .histoire-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.anime .histoire-entete{position:absolute;z-index:2;left:max(var(--marge),calc((100vw - 1244px) / 2 + var(--marge)));top:clamp(88px,12vh,116px);max-width:none;margin:0;padding:0}
.anime .plan{position:absolute;inset:0;max-width:none;margin:0;padding:clamp(130px,19vh,180px) max(var(--marge),calc((100vw - 1244px) / 2 + var(--marge))) clamp(64px,10vh,100px);display:flex;flex-direction:column;justify-content:center;opacity:var(--v,0);visibility:hidden;transform:translate3d(0,calc(var(--s,0) * 54px),0);will-change:opacity,transform}
.anime .plan.vu{visibility:visible}
.anime .plan--terrain,.anime .plan--marque{display:grid;align-content:center}
.anime .plan--terrain .plan-photo{transform:translate3d(0,calc(var(--s,0) * 60px),0)}
.anime .plan--terrain .plan-photo img{max-height:min(62vh,640px)}
.anime .histoire-fil{display:flex;flex-direction:column;gap:14px;position:absolute;z-index:2;top:50%;right:max(14px,calc(var(--marge) * .45));transform:translateY(-50%);font-family:var(--serif);font-style:italic;font-size:1rem;color:rgba(246,243,236,.45)}
.histoire-fil li{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(201,162,75,.28);transition:color .4s,background-color .4s,box-shadow .4s,transform .5s var(--sortie)}
.histoire-fil li.actif{color:var(--nuit);background:var(--or-clair);box-shadow:0 0 0 6px rgba(231,204,134,.12);transform:scale(1.12)}

/* ============================================================
   DEUX MONDES : du métier au nom
   ============================================================ */
.recherche{position:relative}
.recherche-pin{position:relative}
.m1{position:relative;padding:clamp(104px,13.5vh,136px) var(--marge) 0}
.m1-bloc{position:relative;max-width:780px;margin-inline:auto;text-align:center}
.m1-tete{margin-inline:min(0px,calc((780px - min(1080px,100vw - 2 * var(--marge))) / 2))}
.m1-tete .chapitre{justify-content:center}
.recherche-titre{max-width:none;font-size:clamp(2.1rem,min(5vw,7.4vh),4.2rem)}
.barre{position:relative;display:flex;align-items:center;gap:12px;height:66px;margin-top:clamp(24px,4vh,42px);padding:0 8px 0 22px;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(201,162,75,.55);border-radius:999px;transition:border-color .25s,box-shadow .25s,background-color .25s}
.barre:focus-within{border-color:var(--or-clair);background:rgba(255,255,255,.09);box-shadow:0 0 0 5px rgba(231,204,134,.16)}
.barre-loupe{flex:none;width:21px;height:21px;fill:none;stroke:var(--or-clair);stroke-width:1.8;stroke-linecap:round}
.barre-champ{position:relative;flex:1;min-width:0;height:100%}
.barre-champ input{width:100%;height:100%;padding:0;border:0;outline:0;background:transparent;font-size:clamp(1.05rem,2.2vw,1.2rem);font-weight:400;color:var(--blanc)}
.barre-champ input::placeholder{color:var(--texte);opacity:1}
.js .barre-champ input::placeholder{color:transparent}
.js .barre-champ input:focus::placeholder{color:var(--texte)}
.barre-fantome{display:none}
.js .barre-fantome{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;pointer-events:none;white-space:nowrap;font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--texte)}
.barre-fantome.cache{visibility:hidden}
.curseur{display:inline-block;width:1.5px;height:1.25em;margin-left:2px;background:var(--or-clair);animation:battre 1.05s steps(1) infinite}
@keyframes battre{50%{opacity:0}}
.barre-envoi{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--bouton-or);color:var(--nuit);font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:filter .25s,transform .35s var(--sortie)}
.barre-envoi:hover{filter:brightness(1.08)}
.barre-envoi svg{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes refus{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}
.anime .barre.refus{animation:refus .45s}
.barre-aide{margin-top:14px;font-size:.98rem}
.resultats{max-height:330px;margin-top:clamp(22px,4vh,40px);padding-inline:22px;overflow:hidden;text-align:left}
.legende{display:grid;max-width:54ch;margin-bottom:22px;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.4;color:var(--blanc)}
.legende > span{grid-area:1/1}
.legende-b{display:none}
.res-liste{position:relative}
.res{height:78px;transition:translate .8s var(--sortie)}
.res-t{position:relative;display:inline-block;font-size:1.16rem;font-weight:400;line-height:1.2;white-space:nowrap;color:var(--argent-doux)}
.res-t::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:1px;background:var(--blanc);transform:scaleX(var(--s,0));transform-origin:left center}
.res-l{display:block;width:min(86%,560px);height:7px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.07)}
.res-l--court{width:min(52%,340px)}
/* Monde 2 : on cherche votre nom */
.m2{position:relative;padding:14vh var(--marge);color:var(--blanc)}
.m2-fond{display:none}
.m2-contenu{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.m2-compte{font-size:.74rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--or)}
.griffe{position:relative;display:inline-block;margin-top:.6rem}
.griffe-txt{display:block;padding:.06em .18em .14em;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(3.6rem,min(15vw,21vh),10rem);line-height:1.1}
.paraphe{display:block;width:min(70%,420px);height:2px;margin:.1em auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,#57b183,#8fe0b3,#57b183,transparent);box-shadow:0 0 14px rgba(95,177,131,.6)}
.m2-titre{max-width:30ch;margin-top:clamp(1.2rem,3.4vh,2.2rem);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.25}
.m2-essai{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:clamp(1.6rem,4vh,2.8rem)}
.m2-essai label{font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--argent)}
.m2-essai input{width:min(100%,300px);height:50px;padding:0 18px;border:1px solid rgba(201,162,75,.6);border-radius:2px;outline:0;background:rgba(255,255,255,.05);color:var(--blanc);transition:border-color .2s,background-color .2s,box-shadow .2s}
.m2-essai input::placeholder{color:var(--texte);opacity:1}
.m2-essai input:focus{border-color:var(--or-clair);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(231,204,134,.18)}
.defiler{display:none}
/* la scène, quand les effets sont actifs */
.anime .recherche{height:340vh}
.anime .recherche-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.anime .m1{position:absolute;inset:0}
.anime .m1-bloc{transform:translate3d(0,calc(var(--a,0) * var(--lift,0px) * -1),0);will-change:transform}
.anime .m1-tete{opacity:calc(1 - var(--a,0) * 1.7);transform:scale(calc(1 - var(--a,0) * .06));transform-origin:50% 100%}
.anime .barre-aide{opacity:calc(1 - var(--a,0) * 3)}
.anime .resultats{max-height:none;overflow:visible;-webkit-mask-image:linear-gradient(#000 55%,transparent 96%);mask-image:linear-gradient(#000 55%,transparent 96%)}
.anime .legende-b{display:block;opacity:calc(var(--lb,0) * 2.5 - 1.5);color:var(--or-clair)}
.anime .legende-a{opacity:calc(1 - var(--lb,0) * 2.5)}
.anime .res{opacity:var(--o,1)}
.anime .m2{position:absolute;inset:0;z-index:3;padding:0;pointer-events:none}
.anime .m2.actif{pointer-events:auto}
/* la lumière gagne l'écran depuis le bouton : un halo, pas un aplat, pour rester dans la même nuit */
.anime .m2-fond{display:block;position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 44%,rgba(22,84,60,.95),rgba(13,33,24,.96) 46%,rgba(5,11,8,.98) 86%);clip-path:circle(calc(var(--d,0) * 150vmax) at var(--fx,50%) var(--fy,30%));opacity:calc(.25 + var(--d,0) * .75)}
.anime .m2-contenu{height:100%;justify-content:center;padding:96px var(--marge) 40px}
.anime .m2-compte{opacity:var(--e1,0);transform:translateY(calc((1 - var(--e1,0)) * 14px))}
.anime .griffe-txt{clip-path:inset(-20% calc((1 - var(--w,0)) * 100%) -20% -6%)}
.anime .paraphe{transform:scaleX(var(--k,0));opacity:calc(var(--k,0) * 6)}
.anime .m2-titre,.anime .m2-essai{opacity:var(--e3,0);transform:translateY(calc((1 - var(--e3,0)) * 22px))}
.anime .defiler{display:block;position:absolute;left:0;right:0;bottom:18px;z-index:4;text-align:center;pointer-events:none;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--argent-doux);opacity:calc(1 - var(--a,0) * 4)}

/* ============================================================
   LE PRINCIPE
   ============================================================ */
.bloc{position:relative;padding:clamp(90px,15vh,150px) 0}
.tete{max-width:800px;margin:0 auto clamp(44px,7vh,72px);text-align:center}
.tete .chapitre{justify-content:center}
.tete p{margin-top:1.3rem;font-size:1.12rem}
.manifeste-phrase{max-width:20ch;margin-inline:auto;font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.1;text-align:center;text-wrap:balance;color:var(--blanc)}
.manifeste-suite{max-width:46ch;margin:1.8rem auto 0;font-size:1.18rem;text-align:center;color:var(--fort)}
.piliers-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(56px,9vh,96px);border-top:1px solid var(--trait)}
.pilier{padding:30px clamp(14px,2vw,30px) 0;border-left:1px solid var(--trait-doux)}
.pilier:first-child{border-left:0;padding-left:0}
.pilier-mot{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15;color:var(--or-clair)}
.pilier p{margin-top:.8rem;font-size:1rem}

/* ============================================================
   RÉALISATIONS
   ============================================================ */
.cas-intro{padding:clamp(90px,15vh,150px) 0 clamp(30px,5vh,60px);text-align:center}
.cas-intro h2,.cas-intro .chapo{margin-inline:auto}
.cas-intro h2{max-width:22ch}
.cas-intro .chapitre{justify-content:center}
.cas{position:relative}
.cas-pin{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(28px,5vw,84px);max-width:1440px;min-height:100vh;min-height:100svh;margin-inline:auto;padding:110px var(--marge) 70px}
.cas-metier{font-size:.74rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--jade-clair)}
.cas-nom{margin-top:.5rem;font-size:clamp(2.8rem,6vw,5.4rem);line-height:1}
.cas-phrase{max-width:34ch;margin-top:1.4rem;font-size:1.16rem;color:var(--fort)}
.cas-fiche{display:flex;flex-wrap:wrap;gap:14px 44px;margin:1.8rem 0 1.6rem}
.cas-fiche dt{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--argent-doux)}
.cas-fiche dd{font-family:var(--serif);font-size:1.4rem;color:var(--blanc)}
.cas-ecrans{position:relative;justify-self:center;width:100%;max-width:calc((100vh - 270px) * 1.6);perspective:1600px}
.ecran{overflow:hidden;border-radius:10px;border:1px solid rgba(201,162,75,.3);background:#07100b;box-shadow:0 40px 90px -30px rgba(0,0,0,.85);transform-origin:50% 100%}
.ecran-barre{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:var(--v850)}
.ecran-barre i{width:9px;height:9px;border-radius:50%;background:#2b4a3c}
.ecran-barre span{margin-left:12px;padding:2px 14px;border-radius:999px;background:var(--v700);font-size:.76rem;color:#cfe3d7}
.ecran-vue{aspect-ratio:16/10;overflow:hidden}
.ecran-vue img{width:100%;transform:translate3d(0,calc(var(--p,0) * -80.9%),0);will-change:transform}
.tel{position:absolute;left:-7%;bottom:-9%;width:23%;aspect-ratio:9/18.4;overflow:hidden;border-radius:24px;border:5px solid #10261d;background:#000;box-shadow:0 0 0 1px rgba(201,162,75,.4),0 30px 50px -20px rgba(0,0,0,.85);transform:translate3d(0,calc((1 - var(--p,0)) * 16%),0)}
.tel img{width:100%;height:100%;object-fit:cover;object-position:top}
.anime .cas{height:200vh}
.anime .cas-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.anime .ecran{transform:rotateX(calc((1 - var(--q,1)) * 14deg)) scale(calc(.9 + var(--q,1) * .1))}
.anime .cas-nom{transform:translate3d(calc((1 - var(--q,1)) * -40px),0,0)}

/* ============================================================
   LE CURSEUR AVANT / APRÈS
   ============================================================ */
.avap-onglets{display:flex;justify-content:center;gap:10px;margin-top:1.8rem}
.avap-onglets button{min-height:44px;padding:0 22px;border:1px solid rgba(198,204,210,.3);border-radius:2px;background:transparent;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texte);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.avap-onglets button.actif{border-color:transparent;background:var(--bouton-or);color:var(--nuit)}
.avap-cadre{position:relative;max-width:1080px;margin-inline:auto;aspect-ratio:3/2;overflow:hidden;border-radius:12px;border:1px solid rgba(201,162,75,.28);background:#07100b;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);--pos:50%}
.avap-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avap-avant{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.avap-etiquette{position:absolute;top:18px;padding:.55em 1.1em;border-radius:2px;font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;pointer-events:none}
.avap-etiquette--avant{left:18px;color:#dff0e6;background:rgba(8,17,12,.7);border:1px solid rgba(143,191,164,.4)}
.avap-etiquette--apres{right:18px;color:var(--nuit);background:linear-gradient(135deg,#e7cc86,#c9a24b)}
.avap-poignee{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;pointer-events:none;background:linear-gradient(transparent,var(--or-clair) 12%,var(--or) 50%,var(--or-clair) 88%,transparent);box-shadow:0 0 24px rgba(201,162,75,.6)}
.avap-poignee svg{position:absolute;top:50%;left:50%;width:38px;height:38px;max-width:none;margin:-19px 0 0 -19px;padding:10px;border-radius:50%;background:linear-gradient(135deg,#e7cc86,#c9a24b);fill:none;stroke:var(--nuit);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 6px 22px -6px rgba(201,162,75,.8),0 0 0 4px rgba(201,162,75,.14)}
.avap-reglage{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.avap-cadre:focus-within .avap-poignee svg{outline:2px solid var(--blanc);outline-offset:3px}
.avap-legende{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:1.2rem;text-align:center;color:var(--blanc)}

/* ============================================================
   PROPRIÉTAIRE, PAS LOCATAIRE
   ============================================================ */
.calcul{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;padding:clamp(26px,4vw,52px);border:1px solid var(--trait);border-radius:6px;background:linear-gradient(180deg,rgba(18,48,36,.42),rgba(138,108,44,.05))}
.calcul-loyer,.calcul-duree legend{display:block;padding:0;font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.3;color:var(--blanc)}
.calcul-loyer output{display:inline-block;min-width:4.6em;font-style:italic;color:var(--or-clair)}
.calcul input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:12px 0 0;background:transparent;cursor:pointer}
.calcul input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(198,204,210,.3)}
.calcul input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(198,204,210,.3)}
.calcul input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-13px;border:0;border-radius:50%;background:linear-gradient(135deg,#e7cc86,#c9a24b);box-shadow:0 6px 22px -6px rgba(201,162,75,.8),0 0 0 4px rgba(201,162,75,.14)}
.calcul input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:linear-gradient(135deg,#e7cc86,#c9a24b);box-shadow:0 0 0 4px rgba(201,162,75,.14)}
.calcul-bornes{display:flex;justify-content:space-between;font-size:.82rem;color:var(--argent-doux)}
.calcul-duree{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding:0;border:0}
.calcul-duree legend{margin-bottom:14px}
.calcul-duree label{position:relative;cursor:pointer}
.calcul-duree input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.calcul-duree span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(198,204,210,.3);border-radius:2px;font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:background-color .2s,color .2s,border-color .2s}
.calcul-duree input:checked + span{border-color:transparent;background:var(--bouton-or);color:var(--nuit)}
.calcul-duree input:focus-visible + span{outline:2px solid var(--blanc);outline-offset:3px}
.calcul-ligne + .calcul-ligne{margin-top:clamp(26px,4.4vh,40px)}
.calcul-libelle{font-size:.72rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--argent-doux)}
.calcul-somme{margin-top:.2rem;font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,6vw,5rem);line-height:1.05;font-variant-numeric:lining-nums tabular-nums;color:var(--blanc)}
.calcul-ligne--nva .calcul-somme{font-size:clamp(2rem,4.2vw,3.4rem);color:var(--or-clair)}
.calcul-barre{height:6px;margin-top:16px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.1)}
.calcul-barre i{display:block;width:100%;height:100%;background:var(--argent);transform:scaleX(.33);transform-origin:left center;transition:transform .6s var(--sortie)}
.calcul-ligne--nva .calcul-barre i{background:linear-gradient(90deg,#c9a24b,#e7cc86);transform:scaleX(.09)}
.calcul-note{margin-top:.5rem;font-size:.95rem}
.propriete-bas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(28px,5vw,72px);margin-top:clamp(36px,6vh,60px)}
.propriete-fort{grid-column:1/-1;font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.3;color:var(--blanc)}
.propriete-fort strong{font-style:italic;font-weight:500;color:var(--or-clair)}
.propriete-source{font-size:.86rem;color:var(--argent-doux)}
.cles{margin-top:clamp(50px,9vh,90px);text-align:center}
.cles .plume{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.2}

/* ============================================================
   LE STORE (le comparateur de la Signature) ET LA BOUTIQUE
   ============================================================ */
.cmp-stage{position:relative;max-width:1080px;margin-inline:auto}
.cmp-slider{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:12px;border:1px solid rgba(201,162,75,.28);background:#07100b;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03);cursor:ns-resize;user-select:none;-webkit-user-select:none;touch-action:none}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
/* la capture Prestige se déroule du haut vers le bas, comme un store, jusqu'à --pos */
.cmp-top{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 calc(100% - var(--pos,50%)) 0);will-change:clip-path;transition:clip-path .9s var(--sortie)}
.cmp-demo{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.6em;border-radius:2px;white-space:nowrap;font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(8px);transition:transform .45s var(--ease),opacity .45s var(--ease)}
.cmp-demo.show{opacity:1;pointer-events:auto;transform:none}
.cmp-demo.show:hover{transform:translateY(-3px) scale(1.04)}
.demo-prestige{top:26%;right:24px;color:var(--nuit);background:linear-gradient(135deg,#e7cc86,#c9a24b);box-shadow:0 10px 30px -10px rgba(201,162,75,.7)}
.demo-essentiel{bottom:18px;left:22px;color:#eef4f0;border:1px solid rgba(95,177,131,.7);background:rgba(10,25,19,.7)}
.cmp-handle{position:absolute;z-index:6;left:0;right:0;top:var(--pos,50%);height:3px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--or-clair) 12%,var(--or) 50%,var(--or-clair) 88%,transparent);box-shadow:0 0 24px rgba(201,162,75,.6);transition:top .9s var(--sortie)}
.cmp-slider.saisi .cmp-top,.cmp-slider.saisi .cmp-handle{transition:none}
.cmp-grip{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#e7cc86,#c9a24b);color:var(--nuit);box-shadow:0 6px 22px -6px rgba(201,162,75,.8),0 0 0 4px rgba(201,162,75,.14)}
.cmp-grip svg{width:16px;height:16px}
.cmp-grip::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(201,162,75,.4);animation:battement 2s var(--ease) infinite}
@keyframes battement{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.cmp-badges{display:flex;justify-content:space-between;gap:16px;margin-top:18px;padding:0 4px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--argent-doux)}
.cmp-badges b{color:var(--blanc)}
.cmp-hint{margin-top:22px;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;text-align:center;color:var(--argent-doux)}
.cmp-hint b{color:var(--or)}

.boutique{display:grid;gap:clamp(24px,4vw,56px);margin-top:clamp(56px,9vh,96px)}
.comptoir{display:none}
.fiche{padding-top:28px;border-top:1px solid var(--trait)}
.fiche h3{font-size:clamp(2.2rem,3.6vw,3rem)}
.fiche[data-fiche=signature] h3{font-style:italic;color:var(--or-clair)}
.offre-pour{margin-top:.5rem;font-size:1.1rem;color:var(--fort)}
.prix{margin-top:1rem;font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--blanc)}
.prix small{margin-left:.6em;font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--argent-doux)}
.coches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px;margin-top:1.5rem}
.coches li{position:relative;padding-left:28px;line-height:1.45;color:var(--fort)}
.coches li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:6px;border-left:1.5px solid var(--or);border-bottom:1.5px solid var(--or);transform:rotate(-45deg)}
.fiche-liens{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:1.8rem}
.js .boutique{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.js .comptoir{display:grid;gap:12px}
.js .vitrine{display:grid;overflow-x:clip}
@supports not (overflow:clip){.js .fiche,.js .fiche.sorti{transform:none}}
.js .fiche{grid-area:1/1;padding:clamp(24px,3.4vw,44px);border:1px solid var(--trait);border-radius:6px;background:linear-gradient(180deg,rgba(18,48,36,.5),rgba(138,108,44,.06));opacity:0;visibility:hidden;transform:translate3d(46px,0,0);transition:opacity .45s var(--sortie),transform .7s var(--sortie),visibility 0s .45s}
.js .fiche.actif{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.js .fiche.sorti{transform:translate3d(-46px,0,0)}
.js .fiche .prix,.js .fiche-achat{display:none}
.formules{display:grid;gap:10px;min-width:0;padding:0;border:0}
.formules legend,.etape legend{padding:0;margin-bottom:14px;font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.formule,.option{position:relative;display:grid;align-items:center;border:1px solid var(--trait-doux);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);cursor:pointer;transition:border-color .4s,background-color .4s,transform .5s var(--ease)}
.formule{grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:18px 22px}
.formule input,.option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.formule-nom{font-family:var(--serif);font-size:1.7rem;line-height:1.1;color:var(--blanc)}
.formule-pour{grid-column:1;font-size:.96rem;color:var(--texte)}
.formule-prix{grid-column:2;grid-row:1/3;font-family:var(--serif);font-weight:600;font-size:1.7rem;white-space:nowrap;font-variant-numeric:lining-nums;color:var(--argent)}
.formule:hover,.option:hover{transform:translateY(-3px);border-color:rgba(201,162,75,.4)}
.formule.choisi,.option.choisi{border-color:rgba(201,162,75,.65);background:linear-gradient(180deg,rgba(18,48,36,.7),rgba(138,108,44,.1))}
.formule.choisi .formule-nom{font-style:italic;color:var(--or-clair)}
.formule.choisi .formule-prix{color:var(--or-clair)}
.formule:focus-within,.option:focus-within{outline:2px solid var(--or-clair);outline-offset:3px}
.option{grid-template-columns:92px minmax(0,1fr) auto;gap:14px;margin-top:8px;padding:12px 16px 12px 12px}
.option-film{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--nuit)}
.film-fixe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.film-fixe + video{position:relative;width:100%;height:100%;object-fit:cover;opacity:0}
.joue > .film-fixe + video{opacity:1}
.option-texte{display:grid;gap:3px;font-size:.93rem;line-height:1.45;color:var(--texte)}
.option-texte strong{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--blanc)}
.option-texte em{margin-left:.3em;color:var(--or-clair)}
.option-coche{display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(198,204,210,.5);border-radius:2px;transition:background-color .25s,border-color .25s}
.option.choisi .option-coche{border-color:transparent;background:var(--bouton-or)}
.option.choisi .option-coche::after{content:"";width:11px;height:5px;border-left:2px solid var(--nuit);border-bottom:2px solid var(--nuit);transform:translateY(-2px) rotate(-45deg)}
.option-note{font-size:.9rem}
.option-note a{color:var(--or-clair)}
.ticket{margin-top:10px;padding:clamp(20px,2.4vw,30px);border:1px solid rgba(201,162,75,.45);border-radius:6px;background:linear-gradient(180deg,rgba(18,48,36,.75),rgba(8,19,13,.6));box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.ticket-lignes{display:grid;gap:8px}
.ticket-lignes div{display:flex;justify-content:space-between;gap:16px;color:var(--fort)}
.ticket-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--trait)}
.ticket-total span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--argent-doux)}
.ticket-total strong{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.ticket .bouton{width:100%;margin-top:18px}
.ticket-note,.ticket-conseil{margin-top:12px;font-size:.9rem}
.ticket-conseil{margin-top:4px}
.ticket-conseil a{color:var(--or-clair)}
.apres{margin-top:clamp(50px,8vh,90px);padding:clamp(24px,3.6vw,44px);border:1px solid var(--trait-doux);border-radius:6px}
.apres > p{max-width:70ch;margin-top:.8rem}
.apres dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 48px;margin-top:1.6rem}
.apres dt,.garanties dt{font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.apres dd,.garanties dd{margin-top:.4rem;color:var(--texte)}

/* ============================================================
   MÉTHODE, QUESTIONS
   ============================================================ */
.etapes{counter-reset:etape;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.etapes li{counter-increment:etape;padding-top:22px;border-top:1px solid var(--trait)}
.etapes li::before{content:counter(etape);display:block;margin-bottom:.4rem;font-family:var(--serif);font-style:italic;font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;color:var(--or-clair)}
.etapes h3{font-size:1.45rem}
.etapes p{margin-top:.6rem;font-size:1rem}
.garanties{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px);margin-top:clamp(50px,8vh,90px)}
.questions-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.questions h2{position:sticky;top:110px}
.faq details{border-top:1px solid var(--trait-doux)}
.faq details:last-child{border-bottom:1px solid var(--trait-doux)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;list-style:none;cursor:pointer;font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.3;color:var(--blanc);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--or),var(--or)) center/100% 1.5px no-repeat,linear-gradient(var(--or),var(--or)) center/1.5px 100% no-repeat;transition:transform .4s var(--sortie)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--or-clair)}
.faq details p{max-width:66ch;padding:0 40px 26px 0}

/* ============================================================
   CONTACT ET PIED
   ============================================================ */
.contact{position:relative;padding:clamp(90px,15vh,150px) 0 0}
.contact-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.contact h2{max-width:13ch;font-size:clamp(2.4rem,5vw,4.2rem)}
.contact-griffe{margin-top:1.2rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.3;color:var(--blanc)}
.contact-griffe span span{display:block}
.contact-griffe [data-nom-phrase]{color:var(--or-clair)}
.contact-promesse{max-width:38ch;margin-top:1.5rem;font-size:1.12rem;color:var(--fort)}
.contact-direct{margin-top:1rem}
.contact-direct a{color:var(--or-clair)}
.contact-boite{padding:clamp(22px,3.2vw,44px);border:1px solid rgba(201,162,75,.3);border-radius:6px;background:linear-gradient(180deg,rgba(18,48,36,.55),rgba(8,19,13,.5));box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.formulaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.champ--large,.etape{grid-column:1/-1}
.etape{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;min-width:0;padding:0;border:0}
.etape + .etape{margin-top:16px}
.champ label{display:block;margin-bottom:8px;font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--argent)}
.champ input,.champ select,.champ textarea{width:100%;min-height:54px;padding:13px 16px;border:1px solid rgba(198,204,210,.28);border-radius:2px;outline:0;background:rgba(5,11,8,.5);color:var(--blanc);transition:border-color .2s,background-color .2s,box-shadow .2s}
.champ textarea{min-height:120px;line-height:1.5;resize:vertical}
.champ select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,#e7cc86 50%),linear-gradient(135deg,#e7cc86 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.champ select option{color:#0a1a13;background:#fff}
.champ input::placeholder{color:var(--argent-doux);opacity:1}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--or-clair);background-color:rgba(18,48,36,.5);box-shadow:0 0 0 4px rgba(231,204,134,.16)}
.champ [aria-invalid=true]{border-color:#ffb4a8}
.champ-erreur{margin-top:6px;font-size:.92rem;color:#ffc9c0}
.piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.case{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px;border:1px solid rgba(198,204,210,.28);border-radius:2px;background:rgba(5,11,8,.5);cursor:pointer}
.case input{flex:none;width:20px;height:20px;margin:0;accent-color:#e7cc86}
.formulaire-bas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:8px}
.formulaire-note{font-size:.9rem;color:var(--argent-doux)}
.formulaire-echec{padding:14px 18px;border:1px solid #ffb4a8;border-radius:2px;background:rgba(255,180,168,.1);color:var(--blanc)}
.formulaire-echec a{color:var(--or-clair)}
.formulaire-merci{padding:clamp(28px,4vw,48px);outline:0;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.35;color:var(--blanc)}
.formulaire-merci b{font-style:italic;color:var(--or-clair)}
.parcours{display:none}
.par-etapes .parcours{display:flex;gap:8px;grid-column:1/-1;margin-bottom:10px;counter-reset:pas}
.par-etapes .parcours li{flex:1;counter-increment:pas;padding-top:10px;border-top:2px solid rgba(201,162,75,.2);font-size:.66rem;font-weight:500;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;color:var(--argent-doux);transition:border-color .4s,color .4s}
.par-etapes .parcours li::before{content:counter(pas) ". "}
.par-etapes .parcours li.actif,.par-etapes .parcours li.fait{border-top-color:var(--or-clair);color:var(--blanc)}
.par-etapes .etape{display:none;margin-top:0}
.par-etapes .etape.actif{display:grid;animation:entree .6s var(--sortie) backwards}
.par-etapes .etape legend{margin-bottom:18px;font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--blanc)}
.pied{margin-top:clamp(90px,15vh,150px);padding:clamp(44px,7vh,72px) 0 34px;border-top:1px solid var(--trait)}
.pied .cadre{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px clamp(32px,6vw,90px);align-items:center}
.logo3d--pied{width:clamp(130px,16vw,210px);aspect-ratio:785/683}
.pied-phrase{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.1;color:var(--blanc)}
.pied-liens{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 34px;padding-top:26px;border-top:1px solid var(--trait-doux)}
.pied-liens a{padding:10px 0;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--texte);transition:color .3s}
.pied-liens a:hover{color:var(--or-clair)}
.pied-bas{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;font-size:.84rem;color:var(--argent-doux)}

/* ============================================================
   ÉCRANS MOYENS ET TÉLÉPHONES
   ============================================================ */
@media (max-width:1020px){
  .nav-liens{display:none}
  .nav-menu{display:flex}
}
@media (max-width:860px){
  .plan--terrain,.plan--marque,.calcul,.contact-grille,.questions-grille,.propriete-bas,.js .boutique{grid-template-columns:minmax(0,1fr)}
  .anime .plan{padding:clamp(108px,15vh,140px) var(--marge) 76px}
  .anime .histoire-entete{left:var(--marge);top:clamp(80px,10.5vh,98px)}
  .plan-photo{max-width:420px}
  .anime .plan--terrain .plan-photo{max-width:none}
  .anime .plan--terrain .plan-photo img{aspect-ratio:16/11;max-height:27vh}
  .anime .plan--terrain .plan-photo figcaption{margin-top:8px;font-size:.95rem}
  .anime .plan-suite{margin-top:1rem}
  .logo3d--marque{max-width:none;width:auto;height:25vh}
  .anime .histoire-fil{flex-direction:row;top:auto;right:auto;bottom:16px;left:50%;transform:translateX(-50%)}
  .histoire-fil li{width:30px;height:30px}
  .cas-pin{grid-template-columns:minmax(0,1fr);align-content:center;gap:34px;min-height:0;padding:80px var(--marge) 90px}
  .anime .cas{height:auto}
  .anime .cas-pin{position:relative;height:auto;overflow:visible}
  .anime .cas-nom{transform:none}
  .cas-ecrans{max-width:none;margin-right:4%}
  .tel{left:auto;right:-2%;bottom:-7%;width:27%;border-radius:16px;border-width:4px}
  .piliers-liste,.etapes,.garanties{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pilier{padding:26px 0 0;border-left:0}
  .pilier:nth-child(odd){padding-right:16px}
  .questions h2{position:static}
  .cmp-slider{aspect-ratio:4/5}
  .cmp-badges{flex-direction:column;gap:6px}
  .avap-cadre{aspect-ratio:4/3}
  .pied .cadre{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px) and (max-height:780px){
  .logo3d--marque{height:18vh}
  .signe{margin-top:.6rem}
  .signe .plume{font-size:2.3rem}
  .anime .plan{padding-top:clamp(100px,14vh,124px)}
  .anime .plan--terrain .plan-photo img{max-height:19vh}
  .plan-titre,.plan-titre--grand{font-size:clamp(2rem,8.6vw,2.7rem)}
  .plan-citation{font-size:clamp(1.7rem,7.2vw,2.3rem)}
}
@media (max-width:560px){
  body{font-size:1rem}
  .nav{padding-block:14px}
  .nav-marque{font-size:0;gap:0}
  .nav-logo{height:38px}
  .logo3d--haut{width:min(74vw,calc(29vh * 1.15))}
  .ouverture-suite{font-size:1rem}
  .ouverture-actions .bouton,.formulaire-bas .bouton{width:100%}
  .m1{padding-top:92px}
  .barre{height:60px;padding:0 6px 0 16px;gap:8px}
  .barre-loupe{display:none}
  .barre-envoi{width:48px;height:48px;padding:0}
  .barre-envoi span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .barre-envoi svg{display:block}
  .resultats{padding-inline:6px}
  .res{height:72px}
  .m2-essai input{width:100%}
  .piliers-liste,.etapes,.garanties,.coches,.apres dl,.formulaire,.etape{grid-template-columns:minmax(0,1fr)}
  .pilier:nth-child(odd){padding-right:0}
  .option{grid-template-columns:70px minmax(0,1fr) auto;gap:10px;padding-right:12px}
  .formule{padding:16px}
  .faq details p{padding-right:0}
  .pied-bas{flex-direction:column;gap:4px}
  .intro-skip{right:16px;bottom:18px}
}
@media (max-width:560px) and (max-height:700px){
  .logo3d--haut{width:min(66vw,calc(21vh * 1.15))}
  .ouverture-actions .bouton--lueur,.ouverture-suite{display:none}
}
@media (max-width:560px) and (max-height:600px){
  .ouverture-marque{display:none}
  .logo3d--marque{height:14vh}
  .signe small{display:none}
  .plan--marque .plan-titre{font-size:1.9rem}
  .anime .plan--marque .plan-suite{font-size:.98rem}
}
@media (max-height:820px){
  .anime .ouverture-indice{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- compléments ---------- */
/* le cœur de l'ouverture : l'étincelle, le flash, les ondes et les rayons partent du centre exact du logo */
.intro-coeur{position:relative;z-index:5;width:min(62vw,340px);aspect-ratio:785/683}
.intro-coeur .intro-spark,.intro-coeur .intro-flash,.intro-coeur .intro-rays,.intro-coeur .intro-ring,.intro-coeur .intro-burst{top:50%;left:50%}
.intro-logo{position:absolute;inset:0;width:auto;aspect-ratio:auto}
.intro-en-cours .monde,.intro-sortie .monde{z-index:calc(var(--z-intro) + 1)}
.logo3d--haut .ouverture-rayons{top:50%;z-index:-1}
.propriete .calcul,.methode .etapes{margin-top:clamp(44px,7vh,72px)}
.propriete h2,.methode h2{max-width:20ch}
.chantiers .tete{margin-bottom:clamp(28px,4vh,44px)}
.offres .cmp-stage + .boutique{margin-top:clamp(64px,10vh,110px)}
@media (max-width:560px){.nav-action{padding:0 1.1em;font-size:.66rem;letter-spacing:.14em}}
/* le fond, plus présent : l'émeraude et l'or accompagnent la lecture d'un bout à l'autre */
.fond .f1{background:radial-gradient(closest-side,rgba(26,104,74,.8),rgba(18,62,45,.42) 42%,transparent 72%)}
.fond .f2{background:radial-gradient(closest-side,rgba(168,130,50,.44),rgba(138,108,44,.15) 50%,transparent 72%)}
.fond .f3{background:radial-gradient(closest-side,rgba(87,177,131,.28),rgba(87,177,131,.08) 55%,transparent 74%)}
.fond .f4{width:60vmax;height:60vmax;left:62%;top:86vh;background:radial-gradient(closest-side,rgba(168,130,50,.3),transparent 70%);transform:translate3d(calc(var(--sy,0) * -48vw),calc(var(--sy,0) * -96vh),0)}
@media (max-width:560px){.anime .ouverture-indice{display:none}}
@media (max-width:560px) and (max-height:600px){
  .anime .plan--terrain .plan-photo img{max-height:13vh}
  .anime .plan--terrain .plan-photo figcaption{display:none}
}
/* le fond de page est porté par <html> : le corps reste transparent, sinon il recouvrirait les lueurs */
body{background:none}
/* plancher de lisibilité : aucune petite capitale sous 11,5 px */
.cas-fiche dt,.champ label,.par-etapes .parcours li,.anime .ouverture-indice,.anime .defiler,.avap-etiquette,.ticket-total span,.cmp-badges,.intro-skip,.prix small,.nav-action{font-size:.72rem}
.plan-citation{line-height:1.16}
/* à la sortie de l'ouverture, le texte attend que le logo ait rejoint sa place */
.intro-finie .ouverture-bloc > :not(.logo3d){animation-delay:.75s}
.intro-finie .ouverture h1{animation-delay:.87s}
.intro-finie .ouverture-phrase{animation-delay:1s}
.intro-finie .ouverture-suite{animation-delay:1.12s}
.intro-finie .ouverture-actions{animation-delay:1.24s}

/* @@V5 — ne pas modifier ici : source = Site-10k-outils/v5/v5.css */
/* ============================================================
   VERSION 5 — JETONS (skill design-system : valeurs brutes → rôles → composants)
   Posés avant la reconstruction ; les sections de la V5 n'emploient que ces noms.
   Ce bloc est recopié à la fin de css/site.css par Site-10k-outils/v5/assembler.js.
   ============================================================ */
:root{
  /* rôles : niveaux de fond */
  --fond-0:var(--nuit);
  --fond-1:linear-gradient(180deg,rgba(18,48,36,.5),rgba(138,108,44,.06));
  --fond-2:linear-gradient(180deg,rgba(18,48,36,.75),rgba(8,19,13,.6));
  --fond-champ:rgba(5,11,8,.5);
  /* rôles : texte */
  --texte-fort:var(--fort);--texte-courant:var(--texte);--texte-discret:var(--argent-doux);--texte-accent:var(--or-clair);
  /* rôles : bordures */
  --bord:var(--trait);--bord-fort:rgba(201,162,75,.45);--bord-doux:var(--trait-doux);
  /* rôles : ombres (trois niveaux seulement) */
  --ombre-carte:0 30px 70px -34px rgba(0,0,0,.9);
  --ombre-ecran:0 40px 90px -30px rgba(0,0,0,.85);
  --ombre-or:0 12px 40px -12px rgba(201,162,75,.7);
  /* rôles : dégradés (quatre seulement, avec --degrade-or et --bouton-or déjà posés) */
  --degrade-filet:linear-gradient(90deg,transparent,rgba(201,162,75,.38),transparent);
  --degrade-jade:linear-gradient(90deg,transparent,#57b183,#8fe0b3,#57b183,transparent);
  /* espacements */
  --esp1:8px;--esp2:16px;--esp3:24px;--esp4:32px;--esp5:48px;--esp6:72px;--esp-section:clamp(96px,14vh,150px);
  /* tailles de texte */
  --t-label:.72rem;--t-petit:.92rem;--t-corps:1.06rem;--t-chapo:1.18rem;
  --t-h3:clamp(1.45rem,2vw,1.8rem);--t-grand:clamp(2.2rem,5vw,4.2rem);
  /* rayons */
  --r-bouton:0;--r-champ:2px;--r-carte:6px;--r-ecran:12px;
  /* composants */
  --carte-fond:var(--fond-1);--carte-pad:clamp(22px,3vw,40px);
}

/* ---------- 1. L'ouverture : une seule œuvre — l'onde dorée part avec l'éclatement ---------- */
.intro-ring.r3{width:160px;height:160px;border-color:rgba(231,204,134,.55);animation:shock 1.7s var(--sortie) 6.9s forwards}

/* ---------- 2. La promesse ---------- */
.anime .ouverture-indice{display:none}
.ouverture-suite{max-width:50ch;font-size:clamp(1.08rem,1.5vw,1.24rem);color:var(--texte-fort)}

/* ---------- 3. Le problème ---------- */
.probleme h2{max-width:22ch}
.insecable{white-space:nowrap}
.constats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px);margin-top:var(--esp6);border-top:1px solid var(--bord)}
.constats li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--esp3);align-items:baseline;padding:var(--esp4) 0;border-bottom:1px solid var(--bord-doux)}
.constats p{font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.55}
.constats strong{font-weight:400;color:var(--blanc)}
.probleme-perte{max-width:56ch;margin-top:var(--esp5);font-size:var(--t-chapo);color:var(--texte-courant)}
.probleme-conclusion{max-width:24ch;margin-top:var(--esp6);font-family:var(--serif);font-weight:500;font-size:var(--t-grand);line-height:1.12;text-wrap:balance;color:var(--blanc)}
.probleme-conclusion em{color:var(--texte-accent)}

/* ---------- 4. L'histoire en trois mouvements ---------- */
.anime .histoire{height:320vh}
.anime .recherche{height:290vh}
@media (min-width:861px){.anime .cas{height:125vh}}
.plan-titre--declic{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.08}
.plan-suite--fort{font-family:var(--serif);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.3;color:var(--blanc)}
.plan-suite--fort em{color:var(--texte-accent)}

/* ---------- 5. La transformation ---------- */
.m1-tete .chapitre span{font-size:1.3rem}
.m2-gains{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--esp1) 34px;max-width:780px;margin-top:clamp(1rem,2.6vh,1.6rem)}
.m2-gains li{position:relative;padding-left:22px;font-size:1rem;color:var(--texte-fort)}
.m2-gains li::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:5px;border-left:1.5px solid var(--or);border-bottom:1.5px solid var(--or);transform:rotate(-45deg)}
.anime .m2-gains{opacity:var(--e3,0);transform:translateY(calc((1 - var(--e3,0)) * 22px))}

/* ---------- 6. Les bénéfices ---------- */
.triade{margin-top:var(--esp6);font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1.08;text-align:center;color:var(--blanc)}
.triade em{color:var(--texte-accent)}
.honnete{max-width:52ch;margin:var(--esp3) auto 0;font-size:var(--t-chapo);text-align:center;color:var(--texte-fort)}

/* ---------- 7. Les preuves ---------- */
.cas-etude{display:grid;gap:var(--esp2);max-width:40ch;margin:var(--esp4) 0 var(--esp3)}
.cas-etude dt{font-size:var(--t-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--or)}
.cas-etude dd{margin-top:.25rem;font-size:1.04rem;line-height:1.55;color:var(--texte-fort)}
.avis{padding:clamp(40px,7vh,80px) 0 clamp(70px,11vh,120px)}
.avis-cadre{max-width:760px;margin-inline:auto;padding:var(--carte-pad);border:1px dashed var(--bord-fort);border-radius:var(--r-carte);background:var(--carte-fond);text-align:center}
.avis-etoiles{font-size:1.3rem;letter-spacing:.3em;color:var(--or)}
.avis-titre{margin-top:var(--esp2);font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;color:var(--blanc)}
.avis-texte{max-width:52ch;margin:var(--esp2) auto 0;font-size:var(--t-petit)}

/* ---------- 8. Mes chantiers ---------- */
.regard{counter-reset:regard;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--esp4);margin:0 0 var(--esp5)}
.regard li{counter-increment:regard;padding-top:var(--esp2);border-top:1px solid var(--bord)}
.chantiers .avap-onglets{margin:0 0 var(--esp3)}
.avap-note{margin-top:var(--esp1);font-size:var(--t-petit);text-align:center;color:var(--texte-discret)}
.regard-conclusion{margin-top:var(--esp6);font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.12;text-align:center;color:var(--blanc)}
.regard-conclusion em{color:var(--texte-accent)}

/* ---------- 9. Le store à trois niveaux ---------- */
.cmp-niveaux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp1);margin-bottom:var(--esp2)}
.cmp-niveaux button{display:grid;gap:2px;min-height:58px;padding:10px 14px;border:1px solid var(--bord-doux);border-radius:var(--r-champ);background:transparent;text-align:left;cursor:pointer;transition:border-color .3s,background-color .3s}
.cmp-niveaux b{font-family:var(--serif);font-size:1.35rem;font-weight:500;line-height:1.1;color:var(--texte-courant);transition:color .3s}
.cmp-niveaux span{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-discret)}
.cmp-niveaux button:hover{border-color:var(--bord)}
.cmp-niveaux button.actif{border-color:var(--bord-fort);background:var(--fond-2)}
.cmp-niveaux button.actif b{font-style:italic;color:var(--texte-accent)}
.cmp-top--prestige{clip-path:inset(0 0 calc(100% - var(--p1,0%)) 0)}
.cmp-top--signature{clip-path:inset(0 0 calc(100% - var(--p2,0%)) 0)}
.cmp-demo{top:auto;bottom:18px;right:20px;left:auto;color:var(--nuit);background:var(--bouton-or);box-shadow:var(--ombre-or)}
.cmp-demo[data-demo="0"]{right:auto;left:20px;color:#eef4f0;background:rgba(10,25,19,.78);border:1px solid rgba(95,177,131,.7);box-shadow:none}
.cmp-ecart{min-height:3.2em;margin-top:var(--esp3);font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.35;text-align:center;color:var(--blanc)}
.cmp-hint{margin-top:var(--esp1)}

/* ---------- 10. La propriété ---------- */
.propriete h2{max-width:18ch}
.propriete .calcul{margin-top:var(--esp6)}
.propriete-source{margin-top:var(--esp2)}
.partenaires{margin-top:var(--esp6);padding-top:var(--esp5);border-top:1px solid var(--bord-doux);text-align:center}
.partenaires-titre{font-size:var(--t-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-discret)}
.partenaires-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--esp5) clamp(40px,7vw,90px);margin-top:var(--esp4)}
.partenaire{display:flex;flex-direction:column;align-items:center;gap:9px;opacity:.78;transition:opacity .4s var(--ease)}
.partenaire:hover{opacity:1}
.partenaire-github{width:32px;height:32px;color:#fff}
.partenaire-nom{font-family:var(--serif);font-size:1.15rem;line-height:1;color:#fff}
.partenaire-img{width:auto;height:24px;max-width:160px;object-fit:contain;filter:brightness(1.6)}
.partenaire-img--stripe{height:34px}
.partenaire-role{font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--texte-discret)}

/* ---------- 11. Les offres ---------- */
.offres .tete h2{max-width:26ch;margin-inline:auto}
.offres .boutique{margin-top:0}
.formule-marque{display:inline-block;vertical-align:middle;margin-left:.5em;padding:.3em .7em;border:1px solid var(--bord-fort);border-radius:var(--r-champ);font-family:var(--sans);font-style:normal;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-clair)}

/* ---------- 12–15. Méthode, questions, appel final, fin ---------- */
.contact h2{max-width:15ch}
.contact-promesse{margin-top:var(--esp3)}
.contact-griffe{margin-top:var(--esp3);font-size:clamp(1.25rem,2vw,1.6rem)}
.pied-cles{margin-top:var(--esp1);font-size:var(--t-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-discret)}
.pied-revoir{margin-top:var(--esp3)}

/* ---------- téléphones et écrans moyens ---------- */
@media (max-width:860px){
  .constats,.regard{grid-template-columns:minmax(0,1fr)}
  .regard{gap:var(--esp2)}
  .cas-etude{max-width:none}
  .plan-titre--declic{font-size:clamp(1.9rem,7.4vw,2.6rem)}
  .plan-suite--fort{font-size:1.25rem}
}
@media (max-width:560px){
  .constats li{padding:var(--esp3) 0;gap:var(--esp2)}
  .cmp-niveaux button{padding:8px 10px}
  .cmp-niveaux b{font-size:1.1rem}
  .cmp-niveaux span{display:none}
  .cmp-demo{bottom:12px;right:12px}
  .cmp-demo[data-demo="0"]{left:12px}
  .m2-gains{gap:6px 16px}
  .m2-gains li{font-size:.92rem}
  .partenaires-logos{gap:var(--esp4) var(--esp5)}
}
@media (max-width:860px) and (max-height:780px){
  .plan-titre--declic{font-size:clamp(1.7rem,6.8vw,2.2rem)}
  .plan-suite--fort{font-size:1.1rem}
}
/* petits téléphones : la promesse tient entière dans le premier écran */
@media (max-width:560px) and (max-height:800px){
  .logo3d--haut{width:min(60vw,calc(22vh * 1.15))}
  .ouverture h1{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  .ouverture-suite{font-size:.96rem;line-height:1.55}
  .ouverture-actions{gap:10px;margin-top:18px}
  .ouverture-actions .bouton{min-height:50px}
}

/* ============================================================
   V5.1 — raccourcir et donner du caractère (Impeccable : critique, distill, bolder, layout)
   ============================================================ */
/* un rythme plus serré entre les sections */
.bloc{padding:clamp(72px,11vh,120px) 0}
.cas-intro{padding:clamp(72px,11vh,120px) 0 clamp(16px,3vh,36px)}
.anime .histoire{height:300vh}
.anime .recherche{height:270vh}

/* 3. Le problème : le titre tient la gauche, les constats la droite, la conclusion traverse */
.probleme .cadre{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px,6vw,110px);align-items:start}
.probleme h2{grid-column:1;grid-row:1 / span 2;max-width:11ch;font-size:clamp(2.5rem,4.8vw,4.4rem);line-height:1.04}
.constats{grid-column:2;grid-template-columns:minmax(0,1fr);margin-top:0;border-top:1px solid var(--bord)}
.constats li{display:block;padding:var(--esp3) 0}
.probleme-perte{grid-column:2;margin-top:var(--esp3)}
.probleme-conclusion{grid-column:1 / -1;max-width:28ch;margin-top:var(--esp6)}

/* 6. Les bénéfices : un registre ; la ligne au centre de l'écran s'allume en or */

/* 7. Les preuves : le métier sous le nom, pas au-dessus */
.cas-metier{margin-top:.7rem}
.avis-etoiles{display:flex;justify-content:center;gap:6px}
.avis-etoiles svg{width:20px;height:20px;fill:var(--or)}

/* 8. Mes chantiers : les quatre verbes en une ligne */
.regard{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--esp1) 0;margin:0 0 var(--esp4)}
.regard li{padding:0;border:0;font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.3;color:var(--blanc)}
.regard li + li::before{content:"";display:inline-block;width:28px;height:1px;margin:0 16px;vertical-align:middle;background:var(--or)}

/* 10. La propriété : un acte, à double filet doré */
.acte{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--esp5) clamp(40px,5vw,84px);padding:clamp(28px,4.6vw,66px);border:1px solid var(--bord-fort);border-radius:var(--r-carte);background:var(--fond-1);box-shadow:inset 0 0 0 7px var(--nuit),inset 0 0 0 8px var(--bord)}
.acte h2{max-width:14ch}
.clauses{counter-reset:clause;margin-top:var(--esp4)}
.clauses li{counter-increment:clause;display:grid;grid-template-columns:4.2em minmax(0,1fr);gap:2px var(--esp1);padding:var(--esp2) 0;border-top:1px solid var(--bord-doux)}
.clauses li::before{content:"Art. " counter(clause);grid-row:1 / span 2;padding-top:.5em;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.clauses b{font-family:var(--serif);font-size:1.35rem;font-weight:500;line-height:1.2;color:var(--blanc)}
.clauses span{font-size:.98rem;color:var(--texte-courant)}
.acte-calcul{align-self:start;padding-top:clamp(8px,1vw,16px)}
.acte-calcul .calcul{display:block;margin:0;padding:0;border:0;background:none}
.acte-calcul .calcul-resultat{margin-top:var(--esp4)}
.acte .calcul-somme{font-size:clamp(2.2rem,4vw,3.6rem)}
.acte .calcul-ligne--nva .calcul-somme{font-size:clamp(1.9rem,3.2vw,2.8rem)}
.acte-pied{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--esp4) var(--esp5);align-items:center;padding-top:var(--esp4);border-top:1px solid var(--bord)}
.acte .cles{margin:0;text-align:left}
.acte .cles .plume{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.acte .partenaires{margin:0;padding:0;border:0;text-align:right}
.acte .partenaires-logos{justify-content:flex-end;gap:var(--esp3) var(--esp5);margin-top:var(--esp2)}

/* 12. La méthode : une frise */
.frise{position:relative;margin-top:var(--esp5)}
.frise::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--degrade-filet)}
.frise li{position:relative;padding-top:0;border-top:0}
.frise li::before{display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--esp2);border:1px solid var(--bord-fort);border-radius:50%;background:var(--nuit);font-size:1.35rem;line-height:1}

@media (max-width:860px){
  .probleme .cadre,.acte,.acte-pied{grid-template-columns:minmax(0,1fr)}
  .probleme h2{grid-row:auto;max-width:14ch;margin-bottom:var(--esp4)}
  .constats,.probleme-perte{grid-column:1}
  .acte .cles,.acte .partenaires{text-align:center}
  .acte .partenaires-logos{justify-content:center}
  .frise{grid-template-columns:minmax(0,1fr);gap:var(--esp3)}
  .frise::before{left:22px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(transparent,rgba(201,162,75,.38) 12%,rgba(201,162,75,.38) 88%,transparent)}
  .frise li{min-height:44px;padding-left:64px}
  .frise li::before{position:absolute;left:0;top:0;margin:0}
}
@media (max-width:560px){
  .regard{flex-direction:column;gap:6px}
  .regard li + li::before{display:block;width:1px;height:14px;margin:0 auto 6px}
  .clauses li{grid-template-columns:minmax(0,1fr)}
  .clauses li::before{grid-row:auto;padding:0}
  .acte{box-shadow:inset 0 0 0 5px var(--nuit),inset 0 0 0 6px var(--bord)}
}
/* contraste (critique Impeccable, évaluation B) : les repères I · II · III et les légendes des garants passent au-dessus de 4,5:1 */
.anime .histoire-fil{color:rgba(246,243,236,.66)}
.partenaire{opacity:1}
.partenaire-img,.partenaire-github,.partenaire-nom{opacity:.82;transition:opacity .4s var(--ease)}
.partenaire:hover .partenaire-img,.partenaire:hover .partenaire-github,.partenaire:hover .partenaire-nom{opacity:1}
/* la transformation : la liste « avant » s'efface vraiment quand l'encre gagne, et l'encre se fond dans le fond en bas */
.anime .resultats{opacity:calc(1 - var(--d,0) * 1.6)}
.anime .m2-fond{-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
/* le store : liens « voir en vrai » sous l'image, plus jamais par-dessus ses propres boutons */
.cmp-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--esp1) var(--esp4);margin-top:var(--esp2)}
.cmp-liens .cmp-demo{position:static;display:none;align-items:center;gap:.6em;padding:.75em 1.4em;transform:none;opacity:1}
.cmp-liens .cmp-demo.show{display:inline-flex}
.cmp-liens .cmp-demo svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cmp-liens .cmp-demo[data-demo="0"]{left:auto}
/* au doigt : la page défile sur l'image, seule la poignée (bande de 48 px) tire le store */
.cmp-handle::before{content:"";position:absolute;left:0;right:0;top:-22px;bottom:-22px}
@media (pointer:coarse){.cmp-slider{touch-action:pan-y}.cmp-handle{touch-action:none}}
/* les étoiles des avis : dessinées en creux, puisqu'il n'y a pas encore d'avis */
.avis-etoiles svg{fill:none;stroke:var(--or);stroke-width:1.3;stroke-linejoin:round}
/* calcul dans l'acte : les quatre durées tiennent sur une ligne */
.acte .calcul-duree span{padding:0 12px}
.acte .calcul-loyer output{min-width:0}

/* ============================================================
   V5.2 — les fusions (choix de Loïc) et un seul éclatement
   ============================================================ */
/* le haut de page tient en un écran : le logo n'éclate plus au défilement */
.anime .ouverture{height:auto}
.anime .ouverture-pin{position:relative;height:100vh;height:100svh}
.anime .ouverture-bloc > :not(.logo3d){opacity:1;transform:none}
.anime .ouverture-rayons{opacity:.5}

/* chapitre II : la citation, puis le problème en une phrase */
.plan-suite--probleme{max-width:32ch;margin-top:var(--esp4)}

/* sous « Votre nom » : ce que la signature change */
.m2-gains{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:center;gap:10px 40px;max-width:820px;margin-top:clamp(1rem,2.6vh,1.6rem);text-align:left}
.m2-gains li{font-size:.98rem;line-height:1.4;color:var(--texte-courant)}
.m2-gains b{font-family:var(--serif);font-size:1.18rem;font-weight:500;color:var(--blanc)}
.m2-gains li:last-child{grid-column:1 / -1;justify-self:center}

/* la courte bande des bénéfices */
.triade-bloc{padding:clamp(56px,9vh,100px) 0}
.triade-bloc .triade{margin-top:0}

/* la méthode, née des chantiers : le geste du jardin au-dessus de l'étape du site */
.methode{margin-top:var(--esp6);padding-top:var(--esp5);border-top:1px solid var(--bord-doux)}
.methode-titre{font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;text-align:center}
.methode .frise{margin-top:var(--esp5)}
.geste{display:block;margin-bottom:.15rem;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--texte-accent)}
.frise h4{margin:0;font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.15;color:var(--blanc)}
.frise p{margin-top:.5rem;font-size:1rem}

@media (max-width:860px){
  .m2-gains{grid-template-columns:minmax(0,1fr);gap:6px;max-width:30rem}
  .m2-gains li:last-child{grid-column:auto;justify-self:start}
}
@media (max-width:560px){
  .m2-gains li{font-size:.9rem}
  .m2-gains b{font-size:1.04rem}
}
@media (max-width:860px) and (max-height:780px){
  .plan-suite--probleme{margin-top:var(--esp2)}
}
/* chapitre I sans photo (retirée à la demande de Loïc, 14/10) : le texte tient seul la scène */
.plan--terrain,.anime .plan--terrain{grid-template-columns:minmax(0,1fr)}
.plan--terrain .plan-titre{font-size:clamp(2.6rem,6.4vw,5.6rem)}
.plan--terrain .plan-suite{max-width:46ch;font-size:clamp(1.12rem,1.6vw,1.35rem)}

/* ============================================================
   V5.3 — retours de Loïc sur téléphone (14/10) : le vert argent, le fil de la différence,
   le graphique, le store qui suit la page, Prismatik en scène, moins d'écrans vides
   ============================================================ */
/* le vert argent de la Signature : le mot « différence » porte la couleur du M, « signature » celle du I */
:root{--degrade-vert-argent:linear-gradient(100deg,#4fa47a,#8fe0b3 30%,#e6f3ec 50%,#a8dcc1 66%,#57b183)}
.diff,.ouverture-marque{background:var(--degrade-vert-argent);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:#8fe0b3;-webkit-text-fill-color:transparent}
.anime .diff{animation:reflet 9s linear infinite}
@media (prefers-reduced-motion:reduce){.diff{animation:none}}

/* la force, et ça se mesure : le graphique revient */
.force-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--esp5) clamp(40px,6vw,96px);align-items:center}
.force h2{max-width:16ch;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.08}
.force-texte p{max-width:44ch;margin-top:var(--esp3);font-size:var(--t-chapo);color:var(--texte-courant)}
.force-texte strong{font-weight:500;color:var(--blanc)}
.courbe svg{display:block;width:100%;height:auto;overflow:visible}
.courbe-axe{stroke:rgba(198,204,210,.45);stroke-width:1.5;stroke-linecap:round}
.courbe-jalon{stroke:rgba(201,162,75,.55);stroke-width:1.2;stroke-dasharray:3 7;stroke-linecap:round}
.courbe-metier{fill:none;stroke:rgba(198,204,210,.6);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,1))}
.courbe-nom{fill:none;stroke:#8fe0b3;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,1));filter:drop-shadow(0 0 10px rgba(143,224,179,.35))}
.courbe-point{fill:var(--or-clair);stroke:#8fe0b3;stroke-width:3;opacity:var(--pt,1);transition:opacity .4s}
.courbe-txt{font-family:var(--sans);font-size:15px;font-weight:400;fill:#c6ccd2}
.courbe-txt--nom{font-family:var(--serif);font-style:italic;font-size:20px;fill:#bff0d4}
.courbe figcaption{max-width:52ch;margin-top:var(--esp2);font-size:var(--t-petit);color:var(--texte-discret)}
.force .triade{margin-top:var(--esp6)}

/* le store suit la page : il reste à l'écran, le défilement le déroule */
.anime .store{height:300vh;padding:0}
.anime .store-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(76px,10vh,96px) 0 clamp(10px,2vh,24px);overflow:hidden}
.anime .store .tete{margin-bottom:clamp(12px,2.4vh,26px)}
.anime .store .tete h2{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.1}
.anime .store .tete p{margin-top:.6rem;font-size:1.02rem}
.anime .store .cmp-stage{max-width:min(1080px,calc((100svh - 470px) * 1.6));margin-inline:auto}
.anime .store .cmp-top,.anime .store .cmp-handle{transition:none}
.anime .store .cmp-ecart{min-height:2.7em;margin-top:var(--esp2)}
.anime .store .cmp-hint{display:none}

/* Prismatik : sa propre scène, le film de l'ouverture en grand */
.prisma-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--esp5) clamp(40px,5vw,84px);align-items:center}
.prisma-film{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--bord-fort);border-radius:var(--r-ecran);background:var(--nuit);box-shadow:var(--ombre-ecran)}
.prisma-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.prisma-film.joue video{opacity:1}
.prisma-prix{font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-discret)}
.prisma-prix span{margin-right:.4em;font-family:var(--serif);font-size:2.6rem;font-weight:500;letter-spacing:0;text-transform:none;vertical-align:-.12em}
.prisma h2{margin-top:var(--esp2);font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1.08}
.prisma-texte > p:not(.prisma-prix){max-width:46ch;margin-top:var(--esp3);font-size:var(--t-chapo)}
.prisma-texte strong{font-weight:500;color:var(--blanc)}
.prisma .coches{grid-template-columns:minmax(0,1fr);gap:8px}
.prisma-texte > p.prisma-total{font-size:var(--t-petit);color:var(--texte-courant)}
.prisma-total b{font-weight:500;color:var(--blanc)}
.prisma-actions{display:flex;flex-wrap:wrap;gap:var(--esp2);margin-top:var(--esp4)}
.prisma .lien-fleche{margin-top:var(--esp3)}

@media (max-width:860px){
  .force-grille,.prisma-grille{grid-template-columns:minmax(0,1fr)}
  .force h2{max-width:none}
  .anime .store{height:260vh}
  .anime .store .tete p,.anime .store .cmp-hint{display:none}
  .anime .store .cmp-stage{max-width:min(100%,calc((100svh - 400px) * .8))}
  .anime .store .cmp-ecart{min-height:4.1em;font-size:1.1rem}
  .prisma-actions .bouton{flex:1 1 100%}
}
/* téléphone : moins de vide entre les sections */
@media (max-width:560px){
  .bloc{padding:56px 0}
  .cas-intro{padding:56px 0 12px}
  .avis{padding:28px 0 56px}
  .force .triade{margin-top:var(--esp5)}
  .regard-conclusion,.methode{margin-top:var(--esp5)}
}
@media (max-width:560px){
  .anime .histoire{height:250vh}
  .anime .recherche{height:240vh}
  .courbe-txt{font-size:19px}
  .courbe-txt--nom{font-size:23px}
}

/* ============================================================
   V5.6 — direction finale : moins longue, plus rare, plus précise
   ============================================================ */
.bloc{padding:clamp(64px,9vh,104px) 0}
.cas-intro{padding:clamp(64px,9vh,100px) 0 clamp(12px,2vh,24px)}
.plan-citation--compacte{max-width:34ch;margin-top:clamp(28px,5vh,52px);font-size:clamp(1.45rem,2.6vw,2.35rem);line-height:1.2;color:var(--texte-fort)}
.avis-note{padding:clamp(24px,4vh,44px) var(--marge);text-align:center;font-size:.9rem;line-height:1.6;color:var(--texte-discret)}
.ecran-barre{height:auto;min-height:34px;padding:7px 14px}
.plan-citation--compacte{line-height:1.3}
.anime .histoire{height:220vh}
.anime .recherche{height:230vh}
.anime .store{height:240vh}

@media (min-width:861px){
  .anime .cas{height:105vh}
  .cas-pin{min-height:min(880px,100svh);padding-top:96px;padding-bottom:48px}
}

@media (max-width:560px){
  .bloc{padding:52px 0}
  .cas-intro{padding:52px 0 10px}
  .avis-note{padding-top:24px;padding-bottom:40px}
  .anime .histoire{height:205vh}
  .anime .recherche{height:205vh}
  .anime .store{height:220vh}
}

/* ============================================================
   V5.7 — retours de Loïc (14/10 au soir) : le logo devient le menu (IM → I·NVA, comme Prismatik),
   un sommaire plein écran, la Boussole et Vos finances, moins de vide, des scènes plus courtes
   ============================================================ */
/* la barre du haut : le logo-menu à gauche, le bouton à droite */
.nav-liens,.nav-marque,.nav-menu{display:none}
.sceau{display:flex;align-items:center;gap:14px;margin-right:auto;padding:4px 8px 4px 0;border:0;background:none;color:var(--texte-courant);cursor:pointer}
.sceau-logo{position:relative;display:block;flex:none;width:51px;height:44px;transition:width .55s var(--ease)}
.sceau.nva .sceau-logo{width:122px}
.sceau-logo img{position:absolute;left:0;top:0;width:51px;height:44px;max-width:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.sceau-i{clip-path:inset(0 64% 0 0)}
.sceau-m{clip-path:inset(0 0 0 34%);transform-origin:68% 62%;transition:opacity .35s,transform .5s var(--ease),filter .45s}
.sceau.nva .sceau-m{opacity:0;transform:scale(1.4);filter:blur(5px) brightness(1.8)}
.sceau-nva{position:absolute;left:20px;bottom:1px;display:flex;gap:2px;font-family:var(--serif);font-weight:700;font-size:2.35rem;line-height:.78;letter-spacing:.01em;pointer-events:none}
.sceau-nva b{display:block;font-weight:700;background:var(--degrade-vert-argent);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:#8fe0b3;-webkit-text-fill-color:transparent;opacity:0;transform:translateY(8px) scale(.55);filter:blur(4px);transition:opacity .25s,transform .25s,filter .25s}
.sceau.nva .sceau-nva b{opacity:1;transform:none;filter:none;transition:opacity .45s,transform .6s var(--ease),filter .45s}
.sceau.nva .sceau-nva b:nth-child(1){transition-delay:.2s}
.sceau.nva .sceau-nva b:nth-child(2){transition-delay:.3s}
.sceau.nva .sceau-nva b:nth-child(3){transition-delay:.4s}
.sceau-eclats{position:absolute;left:31px;top:22px;width:0;height:0}
.sceau-eclats i{position:absolute;left:-3px;top:-3px;width:7px;height:8px;background:linear-gradient(135deg,#e6f3ec,#57b183);clip-path:polygon(50% 0,100% 72%,14% 100%);opacity:0}
.sceau-eclats i:nth-child(3n){background:linear-gradient(135deg,#fff6df,#c9a24b)}
.sceau.nva .sceau-eclats i{animation:eclat-sceau .75s var(--sortie) forwards}
@keyframes eclat-sceau{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx,14px),var(--dy,-10px)) rotate(var(--r,90deg)) scale(.5)}}
.sceau-mot{display:grid;justify-items:start;gap:4px;font-size:.66rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;transition:color .3s}
.sceau-mot i{display:block;width:22px;height:1.5px;background:linear-gradient(90deg,var(--or),var(--or-clair));transition:width .4s var(--ease)}
.sceau-mot i + i{width:14px}
.sceau:hover .sceau-mot,.sceau:focus-visible .sceau-mot{color:var(--or-clair)}
.sceau:hover .sceau-mot i + i{width:22px}
@media (prefers-reduced-motion:reduce){.sceau-logo,.sceau-m,.sceau-nva b{transition:none}.sceau.nva .sceau-eclats i{animation:none}}

/* le sommaire */
.sommaire{padding:clamp(18px,3vh,30px) var(--marge) 32px;overflow-y:auto}
.sommaire[open]{display:block}
.sommaire a{font-family:inherit;font-size:inherit;line-height:inherit}
.sommaire-tete{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1240px;margin:0 auto}
.sommaire-marque{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:.06em}
.sommaire-marque img{width:auto;height:44px}
.sommaire .menu-fermer{position:static}
.sommaire-corps{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--esp5) clamp(40px,6vw,100px);max-width:1240px;margin:clamp(24px,5vh,56px) auto 0}
.sommaire-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);align-content:start}
.sommaire-liste li{border-top:1px solid var(--bord-doux)}
.sommaire-liste a{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:2px 8px;padding:14px 0 16px;text-decoration:none}
.sommaire-num{grid-row:1 / span 2;padding-top:.6em;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--or)}
.sommaire-liste b{font-family:var(--serif);font-size:clamp(1.55rem,2.5vw,2.25rem);font-weight:500;line-height:1.1;color:var(--blanc);transition:color .3s,transform .45s var(--ease)}
.sommaire-liste small{font-size:.9rem;line-height:1.4;color:var(--texte-discret)}
.sommaire-liste a:hover b,.sommaire-liste a:focus-visible b{color:var(--or-clair);transform:translateX(6px)}
.sommaire-titre{margin-bottom:var(--esp2);font-size:var(--t-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-discret)}
.soeur{display:grid;grid-template-columns:136px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:10px;padding:10px;border:1px solid var(--bord-doux);border-radius:var(--r-carte);background:var(--fond-1);text-decoration:none;transition:border-color .3s,transform .45s var(--ease)}
.soeur:hover,.soeur:focus-visible{border-color:var(--bord-fort);transform:translateY(-2px)}
.soeur img{width:100%;aspect-ratio:800/420;object-fit:cover;border-radius:4px}
.soeur span{font-size:.9rem;line-height:1.45;color:var(--texte-courant)}
.soeur b{display:block;margin-bottom:2px;font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--blanc)}
.soeur svg{width:.9em;height:.9em;margin-left:.3em;vertical-align:-.1em;fill:none;stroke:var(--or-clair);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sommaire-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--esp3)}
.menu.sommaire a.bouton{margin:0;font-family:var(--sans);font-size:.74rem}
.sommaire[open] .sommaire-liste li,.sommaire[open] .sommaire-cote{animation:monter-sommaire .6s var(--ease) backwards}
.sommaire[open] .sommaire-liste li:nth-child(2){animation-delay:.04s}
.sommaire[open] .sommaire-liste li:nth-child(3){animation-delay:.08s}
.sommaire[open] .sommaire-liste li:nth-child(4){animation-delay:.12s}
.sommaire[open] .sommaire-liste li:nth-child(5){animation-delay:.16s}
.sommaire[open] .sommaire-liste li:nth-child(6){animation-delay:.2s}
.sommaire[open] .sommaire-liste li:nth-child(7){animation-delay:.24s}
.sommaire[open] .sommaire-liste li:nth-child(8){animation-delay:.28s}
.sommaire[open] .sommaire-liste li:nth-child(9){animation-delay:.32s}
.sommaire[open] .sommaire-cote{animation-delay:.3s}
@keyframes monter-sommaire{from{opacity:0;transform:translateY(18px)}}

/* fin de page : les deux autres créations, en miniature */
.pied-soeurs{grid-column:1 / -1;padding-top:26px;border-top:1px solid var(--trait-doux)}
.pied-soeurs-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp2)}
.pied-soeurs .soeur{grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;overflow:hidden}
.pied-soeurs .soeur img{border-radius:0}
.pied-soeurs .soeur span{padding:14px 16px 18px}

/* moins de vide entre les parties, et des scènes plus courtes (environ 6 crans de molette chacune) */
.bloc{padding:clamp(48px,7vh,80px) 0}
.cas-intro{padding:clamp(48px,7vh,80px) 0 8px}
.anime .histoire{height:180vh}
.anime .recherche{height:190vh}
.anime .store{height:200vh}
/* les réalisations ne sont plus épinglées : chaque site arrive en montrant son haut de page */
.anime .cas,.cas{height:auto}
.anime .cas-pin,.cas-pin{position:relative;height:auto;min-height:0;overflow:visible;padding:clamp(36px,6vh,64px) var(--marge)}
.ecran-vue img{transform:translate3d(0,min(0%,calc((var(--p,0) - .5) * -36%)),0)}
.pied{margin-top:clamp(48px,8vh,90px)}

@media (max-width:860px){
  .sommaire-corps,.sommaire-liste{grid-template-columns:minmax(0,1fr)}
  .sommaire-liste a{padding:11px 0 12px}
  .sommaire-liste b{font-size:1.5rem}
  .pied-soeurs-grille{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .bloc{padding:40px 0}
  .cas-intro{padding:40px 0 4px}
  .cas-pin,.anime .cas-pin{gap:22px;padding:28px var(--marge)}
  .avis{padding:16px 0 40px}
  .anime .histoire{height:170vh}
  .anime .recherche{height:175vh}
  .anime .store{height:190vh}
  .sceau{gap:10px}
  .sceau-mot{font-size:0;gap:5px}
  .soeur{grid-template-columns:110px minmax(0,1fr)}
}

/* pied : le lien des mentions légales */
.pied-bas a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pied-bas a:hover{color:var(--or-clair)}

/* ============================================================
   V5.8 — retour de Loïc : une révélation, pas un glissement.
   Le logo-menu ne bouge pas : un trait de lumière le traverse, le M s'éteint dans l'éclat,
   N·V·A apparaissent dans la lumière. Les vignettes deviennent des vitrines, sans boîte.
   ============================================================ */
@property --rv{syntax:'<percentage>';inherits:false;initial-value:0%}
.sceau{gap:0}
.sceau-logo,.sceau.nva .sceau-logo{width:132px;height:44px;transition:none}
.sceau-logo img{transition:none}
.sceau-m{transition:none;transform:none}
.sceau.nva .sceau-m{transform:none;filter:none}
.sceau-nva{left:20px;bottom:1px;gap:3px;--rv:0%;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--rv) - 18%),transparent var(--rv));mask-image:linear-gradient(90deg,#000 calc(var(--rv) - 18%),transparent var(--rv))}
.sceau-nva b,.sceau.nva .sceau-nva b{opacity:1;transform:none;filter:none;transition:none}
.sceau-mot{position:absolute;left:62px;top:50%;transform:translateY(-50%);display:grid;justify-items:start;gap:4px;white-space:nowrap}
.sceau-lumiere{position:absolute;top:-8px;bottom:-8px;left:0;width:30px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,246,223,.95) 50%,transparent);filter:blur(3px);mix-blend-mode:screen;transform:translateX(-36px) skewX(-16deg)}

/* la révélation */
.sceau.nva .sceau-lumiere{animation:sceau-rayon 1.05s cubic-bezier(.45,.05,.25,1) forwards}
.sceau.nva .sceau-i{animation:sceau-reflet .7s ease-out}
.sceau.nva .sceau-m{animation:sceau-eteint .55s .12s ease-in forwards}
.sceau.nva .sceau-mot{animation:sceau-efface .3s ease-in forwards}
.sceau.nva .sceau-nva{animation:sceau-revele .85s .28s cubic-bezier(.3,.1,.2,1) forwards,sceau-eclat 1.6s .28s ease-out forwards}
@keyframes sceau-rayon{0%{opacity:0;transform:translateX(-36px) skewX(-16deg)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(150px) skewX(-16deg)}}
@keyframes sceau-reflet{0%,100%{filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}35%{filter:drop-shadow(0 0 8px rgba(255,236,180,.9)) brightness(1.7)}}
@keyframes sceau-eteint{0%{opacity:1;filter:none}45%{opacity:1;filter:brightness(2.4) drop-shadow(0 0 10px rgba(255,236,180,.9))}100%{opacity:0;filter:brightness(3)}}
@keyframes sceau-efface{to{opacity:0}}
@keyframes sceau-revele{from{--rv:0%}to{--rv:120%}}
@keyframes sceau-eclat{0%{filter:brightness(2.2) drop-shadow(0 0 12px rgba(255,236,180,.85))}100%{filter:brightness(1) drop-shadow(0 0 6px rgba(143,224,179,.28))}}

/* le retour, en fondu : le M se rallume, N·V·A s'effacent */
.sceau.retour .sceau-nva{--rv:120%;animation:sceau-part .6s ease forwards}
.sceau.retour .sceau-m{animation:sceau-rallume .7s .1s ease backwards}
.sceau.retour .sceau-mot{animation:sceau-rallume .5s .35s ease backwards}
@keyframes sceau-part{from{opacity:1;--rv:120%}to{opacity:0;--rv:120%}}
@keyframes sceau-rallume{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .sceau.nva .sceau-lumiere{animation:none}
  .sceau.nva .sceau-m{animation:none;opacity:0}
  .sceau.nva .sceau-mot{animation:none;opacity:0}
  .sceau.nva .sceau-nva{animation:none;--rv:120%}
}

/* les vitrines : une grande image, le nom en dessous, la lumière passe au survol */
.soeur,.pied-soeurs .soeur{display:block;margin:0 0 var(--esp4);padding:0;border:0;border-radius:0;background:none;overflow:visible;transform:none}
.soeur:hover,.soeur:focus-visible{transform:none}
.soeur-image{position:relative;display:block;overflow:hidden;border-radius:var(--r-carte);box-shadow:0 0 0 1px rgba(201,162,75,.22),var(--ombre-carte)}
.soeur-image img,.pied-soeurs .soeur img{display:block;width:100%;aspect-ratio:800/420;object-fit:cover;border-radius:0;transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.soeur-image::after{content:"";position:absolute;inset:-10% auto -10% 0;width:28%;background:linear-gradient(90deg,transparent,rgba(255,246,223,.35),transparent);transform:translateX(-120%) skewX(-16deg);pointer-events:none}
.soeur:hover .soeur-image img,.soeur:focus-visible .soeur-image img{transform:scale(1.035);filter:brightness(1.08)}
.soeur:hover .soeur-image::after,.soeur:focus-visible .soeur-image::after{animation:vitrine-lumiere 1.1s cubic-bezier(.45,.05,.25,1)}
@keyframes vitrine-lumiere{to{transform:translateX(480%) skewX(-16deg)}}
.soeur-nom{display:flex;align-items:baseline;gap:.4em;margin-top:var(--esp2);font-family:var(--serif);font-size:1.45rem;font-weight:500;line-height:1.15;color:var(--blanc);transition:color .3s}
.soeur-nom svg{flex:none;width:.7em;height:.7em;fill:none;stroke:var(--or-clair);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.soeur:hover .soeur-nom{color:var(--or-clair)}
.soeur:hover .soeur-nom svg{transform:translate(3px,-3px)}
.soeur-texte{display:block;margin-top:4px;font-size:.95rem;line-height:1.5;color:var(--texte-courant)}
.soeur-domaine{display:block;margin-top:6px;font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-discret)}
.pied-soeurs-grille{gap:var(--esp5)}
.pied-soeurs .soeur{margin:0}
.pied-soeurs .soeur span{padding:0}
@media (max-width:560px){.soeur{margin-bottom:var(--esp3)}.soeur-nom{font-size:1.3rem}}
/* la lueur de la révélation : derrière les lettres, jamais sur elles (un filtre sur le texte dessinait un rectangle) */
.sceau.nva .sceau-i{animation:none}
.sceau.nva .sceau-m{animation:sceau-eteint2 .55s .12s ease-in forwards}
@keyframes sceau-eteint2{0%,40%{opacity:1}100%{opacity:0}}
.sceau.nva .sceau-nva{animation:sceau-revele .85s .28s cubic-bezier(.3,.1,.2,1) forwards}
.sceau-logo::before{content:"";position:absolute;left:4px;top:-14px;width:128px;height:72px;pointer-events:none;opacity:0;background:radial-gradient(50% 50% at 50% 55%,rgba(255,236,180,.42),rgba(143,224,179,.16) 45%,transparent 72%)}
.sceau.nva .sceau-logo::before{animation:sceau-halo 1.8s .2s ease-out forwards}
@keyframes sceau-halo{0%{opacity:0}30%{opacity:1}100%{opacity:.35}}
.sceau.retour .sceau-logo::before{opacity:0;transition:opacity .5s}
.sceau-i{clip-path:inset(0 69% 0 0)}
/* les vitrines : la règle générale « .soeur span » ne doit plus écraser le nom ni le domaine */
.soeur .soeur-nom{font-size:1.45rem;color:var(--blanc)}
.soeur:hover .soeur-nom{color:var(--or-clair)}
.soeur .soeur-texte{font-size:.95rem}
.soeur .soeur-domaine{font-size:var(--t-label);color:var(--texte-discret)}
.sceau:focus-visible{outline:1px solid rgba(201,162,75,.45);outline-offset:6px}
@media (max-width:560px){.soeur .soeur-nom{font-size:1.3rem}}

/* ============================================================
   V5.9 — idée de Loïc : le M est N·V·A compressé. Le M tourne sur lui-même,
   et de profil il se déplie en N·V·A (comme le « dépli » du skill logo-vivant). Au retour, N·V·A se replient en M.
   ============================================================ */
.sceau-logo{perspective:240px}
.sceau-m{transform-origin:68% 58%;backface-visibility:hidden}
.sceau-nva,.sceau.nva .sceau-nva,.sceau.retour .sceau-nva{-webkit-mask-image:none;mask-image:none;--rv:120%}
.sceau-nva{opacity:0;transform-origin:0 60%;transform:rotateY(-90deg) scaleX(.36);backface-visibility:hidden}
.sceau.nva .sceau-m{animation:sceau-m-tourne .42s .08s cubic-bezier(.55,0,.75,.35) forwards}
.sceau.nva .sceau-nva{animation:sceau-nva-deplie .8s .48s cubic-bezier(.2,.85,.25,1.08) forwards}
@keyframes sceau-m-tourne{0%{transform:rotateY(0);opacity:1}98%{transform:rotateY(90deg);opacity:1}100%{transform:rotateY(90deg);opacity:0}}
@keyframes sceau-nva-deplie{0%{opacity:1;transform:rotateY(-90deg) scaleX(.36)}40%{opacity:1;transform:rotateY(0) scaleX(.42)}100%{opacity:1;transform:rotateY(0) scaleX(1)}}
.sceau.retour .sceau-nva{animation:sceau-nva-replie .55s cubic-bezier(.5,0,.6,.4) forwards}
.sceau.retour .sceau-m{animation:sceau-m-revient .45s .5s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes sceau-nva-replie{0%{opacity:1;transform:rotateY(0) scaleX(1)}55%{opacity:1;transform:rotateY(0) scaleX(.4)}98%{opacity:1;transform:rotateY(90deg) scaleX(.36)}100%{opacity:0;transform:rotateY(90deg) scaleX(.36)}}
@keyframes sceau-m-revient{from{transform:rotateY(-90deg);opacity:1}to{transform:rotateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sceau.nva .sceau-m{animation:none;opacity:0}
  .sceau.nva .sceau-nva{animation:none;opacity:1;transform:none}
  .sceau.retour .sceau-nva,.sceau.retour .sceau-m{animation:none}
}

/* ============================================================
   V5.10 — retour de Loïc : on doit pouvoir remonter. Un bouton rond « haut de page »
   dont l'anneau doré se remplit avec la lecture ; l'appel à l'action devient plus compact.
   ============================================================ */
.nav-droite{display:flex;align-items:center;gap:12px}
.nav-action,.nav .bouton--petit.nav-action{min-height:40px;padding:0 1.2em;font-size:.66rem;letter-spacing:.16em}
.nav-haut{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:var(--or-clair);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.85);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.nav.descendu .nav-haut{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s}
.nav-haut-anneau{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.nav-haut-anneau circle{fill:none;stroke-width:1.4}
.nav-haut-fond{stroke:rgba(201,162,75,.28);fill:rgba(5,11,8,.55)!important}
.nav-haut-lu{stroke:var(--or-clair);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--sy,0))}
.nav-haut-fleche{position:relative;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.nav-haut:hover .nav-haut-fleche,.nav-haut:focus-visible .nav-haut-fleche{transform:translateY(-3px)}
.nav-haut:hover .nav-haut-fond{stroke:rgba(201,162,75,.6)}
@media (max-width:560px){
  .nav-droite{gap:8px}
  .nav-action,.nav .bouton--petit.nav-action{min-height:38px;padding:0 .9em;font-size:.6rem;letter-spacing:.12em}
  .nav-haut{width:40px;height:40px}
}
@media (max-width:560px){.nav-action,.nav .bouton--petit.nav-action{white-space:nowrap;padding:0 .85em;font-size:.58rem;letter-spacing:.1em}}

/* ============================================================
   V5.11 — idée de Loïc : on referme le sommaire en recliquant sur le logo (plus de bouton « Fermer »).
   Le logo est à la même place que dans la barre du haut, déjà en I·NVA ; les deux traits du menu se croisent en X.
   ============================================================ */
.sommaire{padding-top:12px}
.sommaire-tete{max-width:none;margin:0;min-height:52px}
.sceau--fermer{margin-right:0}
.sceau--fermer .sceau-m{opacity:0}
.sceau--fermer .sceau-nva{opacity:1;transform:none}
.sceau--fermer .sceau-logo::before{opacity:.35}
.sommaire[open] .sceau--fermer .sceau-lumiere{animation:sceau-rayon 1.05s .1s cubic-bezier(.45,.05,.25,1) forwards}
.sceau-croix{position:relative;display:block;flex:none;width:22px;height:22px;margin-left:10px;transition:transform .5s var(--ease)}
.sceau-croix i{position:absolute;left:0;top:50%;width:22px;height:1.5px;margin-top:-.75px;background:linear-gradient(90deg,var(--or),var(--or-clair));transition:background .3s}
.sceau-croix i:first-child{transform:rotate(45deg)}
.sceau-croix i:last-child{transform:rotate(-45deg)}
.sommaire[open] .sceau-croix i:first-child{animation:croix-a .5s .1s var(--ease) backwards}
.sommaire[open] .sceau-croix i:last-child{animation:croix-b .5s .1s var(--ease) backwards}
@keyframes croix-a{from{transform:translateY(-4px) rotate(0)}}
@keyframes croix-b{from{transform:translateY(4px) rotate(0) scaleX(.64);transform-origin:100% 50%}}
.sceau--fermer:hover .sceau-croix,.sceau--fermer:focus-visible .sceau-croix{transform:rotate(90deg)}
.sceau--fermer:hover .sceau-croix i,.sceau--fermer:focus-visible .sceau-croix i{background:var(--or-clair)}
@media (prefers-reduced-motion:reduce){.sommaire[open] .sceau-croix i{animation:none}.sommaire[open] .sceau--fermer .sceau-lumiere{animation:none}}
/* V5.12 : ce site est la Signature (impact-nva.fr) : pas de lien vers lui-même, on le dit simplement */
.cmp-liens .cmp-demo.cmp-ici{color:var(--or-clair);background:none;border:1px solid var(--bord-fort);box-shadow:none;cursor:default;font-style:normal}
.fiche-ici{display:inline-block;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--or-clair)}

/* ============================================================
   V5.14 — la barre sert vraiment : c'est la première étape de la démo de leur futur site
   ============================================================ */
.m2-demo{display:grid;justify-items:center;gap:10px;max-width:46ch;margin-top:clamp(1.2rem,3vh,2rem);text-align:center}
.m2-demo p{font-size:.95rem;line-height:1.5;color:var(--texte-courant)}
.anime .m2-demo{opacity:var(--e3,0);transform:translateY(calc((1 - var(--e3,0)) * 22px))}
.offres-demo{max-width:52ch;margin:.8rem auto 0;font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.4;color:var(--blanc)}
.offres-demo a{margin-left:.3em;font-family:var(--sans);font-style:normal;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair);text-underline-offset:4px}
.champ-aide{margin-top:6px;font-size:.85rem;color:var(--texte-discret)}
@media (max-width:560px){.m2-demo .bouton{width:100%}.m2-demo p{font-size:.88rem}}
.champ-aide strong{font-weight:500;color:var(--texte-fort)}
.champ-aide a{color:var(--or-clair)}

/* ============================================================
   V5.16 — on glisse son logo directement dans le formulaire
   ============================================================ */
.champ-titre{margin-bottom:8px;font-size:var(--t-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-courant)}
.depot{position:relative;border:1px dashed rgba(201,162,75,.55);border-radius:var(--r-champ);background:var(--fond-champ);transition:border-color .3s,background-color .3s}
.depot.survol,.depot:focus-within{border-color:var(--or-clair);background:rgba(201,162,75,.08)}
.depot-vide{display:grid;justify-items:center;gap:4px;padding:22px 16px;text-align:center;cursor:pointer}
.depot-vide svg{width:26px;height:26px;margin-bottom:4px;fill:none;stroke:var(--or-clair);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.depot-vide:hover svg,.depot.survol .depot-vide svg{transform:translateY(-3px)}
.depot-vide b{font-family:var(--serif);font-size:1.25rem;font-weight:500;color:var(--blanc)}
.depot-vide span{font-size:.88rem;color:var(--texte-discret)}
.depot-plein{display:none;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px}
.depot.plein{border-style:solid}
.depot.plein .depot-vide{display:none}
.depot.plein .depot-plein{display:grid}
/* le damier montre si le fond est vraiment transparent */
.depot-damier{display:grid;place-items:center;width:84px;height:84px;border-radius:4px;background:repeating-conic-gradient(#2a332e 0 25%,#1a221e 0 50%) 0 0 / 14px 14px}
.depot-damier img{max-width:76px;max-height:76px;object-fit:contain}
.depot-nom{overflow:hidden;font-size:.9rem;text-overflow:ellipsis;white-space:nowrap;color:var(--texte-fort)}
.depot-retirer{min-height:40px;padding:0 14px;border:1px solid var(--bord);border-radius:var(--r-champ);background:none;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-courant);cursor:pointer}
.depot-retirer:hover{border-color:var(--or-clair);color:var(--or-clair)}
.champ-sous{display:block;margin:14px 0 8px;font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-discret)}
.champ .depot-vide,.depot-vide{margin:0;font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--texte-courant)}
.depot-vide b,.depot-vide span{display:block}

/* ============================================================
   V5.17 — le bas de page : la miniature de chaque site, son nom à côté (plus de liens gris)
   ============================================================ */
.pied-sites{grid-column:1 / -1;padding-top:26px;border-top:1px solid var(--trait-doux)}
.pied-sites ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--esp3) var(--esp4);list-style:none}
.pied-site{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;text-decoration:none}
.pied-site-image{position:relative;display:block;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px rgba(201,162,75,.24),0 10px 26px -14px rgba(0,0,0,.9)}
.pied-site-image img{display:block;width:100%;aspect-ratio:360/189;object-fit:cover;transition:transform .9s var(--ease),filter .6s var(--ease)}
.pied-site-image::after{content:"";position:absolute;inset:-10% auto -10% 0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,246,223,.38),transparent);transform:translateX(-130%) skewX(-16deg);pointer-events:none}
.pied-site:hover .pied-site-image img,.pied-site:focus-visible .pied-site-image img{transform:scale(1.06);filter:brightness(1.1)}
.pied-site:hover .pied-site-image::after,.pied-site:focus-visible .pied-site-image::after{animation:vitrine-lumiere 1s cubic-bezier(.45,.05,.25,1)}
.pied-site-texte{display:grid;gap:2px;min-width:0}
.pied-site-texte b{font-family:var(--serif);font-size:1.2rem;font-weight:500;line-height:1.1;color:var(--blanc);transition:color .3s}
.pied-site-texte small{font-size:.8rem;line-height:1.35;color:var(--texte-discret)}
.pied-site:hover .pied-site-texte b,.pied-site:focus-visible .pied-site-texte b{color:var(--or-clair)}
.pied-bas a{white-space:nowrap}
@media (max-width:1100px){.pied-sites ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.pied-sites ul{grid-template-columns:minmax(0,1fr);gap:14px}.pied-site{grid-template-columns:112px minmax(0,1fr)}}
.pied-sites ul{column-gap:24px}
.pied-site{grid-template-columns:84px minmax(0,1fr);gap:10px}
.pied-site-texte b{font-size:1.12rem;white-space:nowrap}
@media (max-width:700px){.pied-site{grid-template-columns:112px minmax(0,1fr);gap:14px}.pied-site-texte b{font-size:1.2rem}}
/* V5.18 : les miniatures du bas de page = l icône de chaque site (la pastille IM de sa couleur, celle de Google et des onglets) */
.pied-site{grid-template-columns:58px minmax(0,1fr);gap:14px}
.pied-site-image{border-radius:14px;box-shadow:0 0 0 1px rgba(201,162,75,.22),0 10px 24px -12px rgba(0,0,0,.9)}
.pied-site-image img{aspect-ratio:1;object-fit:cover}
@media (max-width:700px){.pied-site{grid-template-columns:58px minmax(0,1fr)}}
/* V5.19 : l adresse e-mail du pied de page en vert argent (comme le mot « différence »), pas en gris */
.pied-bas a[href^="mailto:"]{background:var(--degrade-vert-argent);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:#8fe0b3;-webkit-text-fill-color:transparent;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(143,224,179,.45)}
.pied-bas a[href^="mailto:"]:hover{border-bottom-color:#a8dcc1}
.m2-demo strong,.offres-demo strong{font-weight:500;color:var(--or-clair)}

/* V5.21 (retour de Loïc, 15/10) : les petits titres en capitales passent du gris au vert argent, « en gris ça ne se voit pas ».
   Dégradé répété tous les 15em : chaque mot garde le passage vert → argent, sans changer la mise en page */
.chapitre,.signe small,.sommaire-titre,.soeur-domaine,.defiler,.cmp-hint,.prisma-prix,.ticket-total span,.prix small,.calcul-libelle,.partenaires-titre,.partenaire-role,.pied-cles,.champ label,.champ-titre{font-weight:500;background:linear-gradient(100deg,#7fd3a6,#bdeed3 30%,#eef7f2 50%,#b5e6cc 68%,#7fd3a6);background-size:12em 100%;background-repeat:repeat;-webkit-background-clip:text;background-clip:text;color:#8fe0b3;-webkit-text-fill-color:transparent}
.chapitre span{-webkit-text-fill-color:currentColor}
.case,.champ label.case,.champ label.depot-vide{-webkit-text-fill-color:currentColor;background:none}
/* l'ouverture : un seul bouton (« Découvrir l'histoire » retiré, l'histoire est juste en dessous) et moins de vide avant le chapitre I.
   Le bas de l'ouverture garde la place du halo doré du bouton, sinon il est coupé net (audit final) */
.ouverture-pin,.anime .ouverture-pin{height:auto;min-height:0;padding-bottom:clamp(56px,7vh,72px)}
.anime .plan{padding-top:clamp(84px,11vh,124px)}
.anime .plan--terrain{align-content:start}

/* Audit final (15/10) : le bouton du haut lisible au téléphone (9,3 px avant, sous le minimum de 11 px) et qui tient dans l écran :
   sur les téléphones étroits il passe sur deux lignes, « Révéler / ma signature » (avant : il dépassait à droite sous 390 px) */
@media (max-width:420px){
  .nav{gap:10px;padding-left:16px;padding-right:16px}
  .nav .nav-action::before{top:3px;left:3px;width:6px;height:6px}
  .nav-action,.nav .bouton--petit.nav-action{white-space:normal;max-width:92px;min-height:40px;padding:3px .7em;font-size:.66rem;line-height:1.2;letter-spacing:.06em;text-align:center}
}
@media (min-width:421px) and (max-width:560px){.nav-action,.nav .bouton--petit.nav-action{font-size:.69rem;letter-spacing:.05em}}
/* Retour de Loïc (15/10) : la ligne de prix nomme Prismatik, en vert argent, avant « l'option de la Signature » */
.prisma-prix .prisma-nom{margin-right:.45em;background-size:200% auto}
.prisma-prix .prisma-sous{display:block;margin-top:.7em;font-size:1em}
/* Retour de Loïc (15/10, capture Android) : les onglets du store suivaient la largeur de l'image et coupaient « Essentiel » et « Signature »
   quand l'écran est peu haut. Au téléphone, ils prennent toute la largeur de la page, et la taille du mot s'adapte s'il le faut */
@media (max-width:700px){
  .anime .store .cmp-niveaux{position:relative;left:50%;width:min(calc(100vw - 32px),440px);transform:translateX(-50%);container-type:inline-size}
  .cmp-niveaux button{padding:8px 6px;text-align:center;justify-items:center}
  .cmp-niveaux b{font-size:clamp(.82rem,6.4cqi,1.15rem);white-space:nowrap}
}
/* Retour de Loïc (15/10) : le choix d'offre en cartes au style du site, à la place de la liste blanche du système */
.offre-choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.offre-choix label{position:relative;display:grid;gap:2px;justify-items:center;padding:14px 8px;border:1px solid var(--trait-doux);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);text-align:center;cursor:pointer;transition:border-color .3s,background-color .3s,transform .3s}
.offre-choix input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.offre-choix b{font-family:var(--serif);font-size:1.3rem;font-weight:500;line-height:1.1;color:var(--texte-courant)}
.offre-choix span{font-size:.92rem;color:var(--texte-discret)}
.offre-choix .offre-choix-large{grid-column:1/-1;grid-template-columns:auto auto;justify-content:center;align-items:baseline;gap:.6em;padding:12px}
.offre-choix .offre-choix-large b{font-size:1.15rem}
.offre-choix label:hover{border-color:rgba(201,162,75,.4)}
.offre-choix label.choisi{border-color:rgba(201,162,75,.65);background:linear-gradient(180deg,rgba(18,48,36,.7),rgba(138,108,44,.1))}
.offre-choix label.choisi b{font-style:italic;color:var(--or-clair)}
.offre-choix label.choisi span{color:var(--texte-fort)}
.offre-choix label:focus-within{outline:2px solid var(--or-clair);outline-offset:3px}
@media (max-width:420px){.offre-choix{gap:8px}.offre-choix label{padding:12px 4px}.offre-choix b{font-size:1.12rem}.offre-choix span{font-size:.84rem}.offre-choix .offre-choix-large{grid-template-columns:1fr;gap:2px}}
#offre[hidden]{display:none!important}
/* les cartes d'offre ne prennent pas le style vert argent des intitulés du formulaire (il effaçait leur texte) */
.champ .offre-choix label{-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--texte-courant);text-transform:none;letter-spacing:0;font-size:1rem;font-weight:400;margin:0}
.champ .offre-choix input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;background:none;opacity:0;cursor:pointer}
.offre-choix label:focus-within{outline:none}
.offre-choix label:has(input:focus-visible){outline:2px solid var(--or-clair);outline-offset:3px}
#boitePrismatik[hidden]{display:none!important}

/* Avis clients (16/10) : la liste des avis publiés (validés par Loïc sur Telegram) et le formulaire « Laisser mon avis » */
.avis-tete{max-width:760px;margin:0 auto var(--esp3);text-align:center}
.avis-tete h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1}
.avis-tete h2 em{color:var(--texte-accent)}
.avis-explication{max-width:52ch;margin:var(--esp2) auto 0;font-size:var(--t-petit);color:var(--texte-discret)}
.avis-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;max-width:1080px;margin-inline:auto}
.avis-liste[hidden],.avis-cadre[hidden],.avis-form[hidden],.avis-merci[hidden],.avis-action[hidden]{display:none!important}
.avis-carte{margin:0;padding:var(--carte-pad);border:1px solid var(--bord-fort);border-radius:var(--r-carte);background:var(--carte-fond);text-align:left}
.avis-carte .avis-etoiles{justify-content:flex-start}
.avis-carte .avis-etoiles svg{fill:var(--or);stroke:none}
.avis-carte .avis-etoiles svg.vide{opacity:.28}
.avis-carte blockquote{margin:var(--esp2) 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.45;color:var(--blanc)}
.avis-carte figcaption{margin-top:var(--esp2);font-size:.95rem;color:var(--texte-fort)}
.avis-carte figcaption b{font-weight:500;color:var(--or-clair)}
.avis-action{margin-top:var(--esp3);text-align:center}
.avis-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;max-width:760px;margin:var(--esp3) auto 0;padding:var(--carte-pad);border:1px solid var(--bord-fort);border-radius:var(--r-carte);background:var(--carte-fond)}
.avis-form .champ--large,.avis-form-titre{grid-column:1/-1}
.avis-form-titre{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--blanc)}
.avis-notes{display:flex;gap:6px;margin-top:8px}
.champ .avis-note-choix{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;margin:0;cursor:pointer;background:none;-webkit-text-fill-color:currentColor}
.champ .avis-notes input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.avis-note-choix svg{width:30px;height:30px;fill:none;stroke:var(--or);stroke-width:1.3;stroke-linejoin:round;transition:fill .2s}
.avis-note-choix.allumee svg{fill:var(--or)}
.avis-note-choix:has(input:focus-visible){outline:2px solid var(--or-clair);outline-offset:2px;border-radius:4px}
.avis-form-bas{text-align:center}
.avis-merci{max-width:760px;margin:var(--esp3) auto 0;padding:var(--carte-pad);border:1px solid var(--bord-fort);border-radius:var(--r-carte);background:var(--carte-fond);text-align:center;font-family:var(--serif);font-size:1.3rem;color:var(--blanc)}
@media (max-width:700px){.avis-form{grid-template-columns:1fr}.avis-form-bas .bouton{width:100%}}
.avis-liste{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),460px));justify-content:center}