/* ---------------------------------------------------------------------------
   besoin.css — les pages « besoin métier » (planning, réservation, agents IA).
   Servie à part des pages qui l'utilisent : trois pages, une seule feuille,
   mise en cache une fois. Aucun @import, aucune requête tierce (CSP style-src
   'self' 'unsafe-inline' ; ici : 'self').

   Mêmes jetons que l'accueil et que les pages légales. Ce qui est propre à ces
   pages : la mise en page de lecture longue, le bloc « signes », le diagramme
   avant/après, et la FAQ. L'ambre reste réservé au SEUL point de contact.
   --------------------------------------------------------------------------- */
:root{--nuit:#050A14;--nuit-2:#0A1322;--nuit-3:#101D33;--nuit-4:#17263F;--filet:#22344F;--acier:#5A6E92;--brume:#93A6C6;--clair:#C7D4E8;--os:#F0F5FC;--electrique:#4C8DFF;--electrique-clair:#7FAEFF;--ambre:#FF9E3D;--ambre-clair:#FFC27A;--title:'Bricolage Grotesque','Onest','Trebuchet MS',sans-serif;--text:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Onest; src: url("/fonts/onest-latin.woff2") format("woff2"); font-weight: 300 700; font-display: optional; }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
html[data-motion="reduced"]{scroll-behavior:auto}
body{margin:0;background:var(--nuit);color:var(--os);font:400 16px/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{font-family:var(--title);font-weight:500}
p{color:var(--clair)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
a:focus-visible,button:focus-visible{outline:2px solid var(--electrique-clair);outline-offset:4px}
::selection{background:var(--electrique);color:var(--nuit)}
.icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:fixed;left:24px;top:-80px;padding:12px 24px;z-index:100;background:var(--os);color:var(--nuit);border-radius:8px}
.skip:focus{top:12px}
.wrap{width:min(1360px,calc(100% - 128px));margin-inline:auto}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--brume)}

/* Barre — identique aux pages légales : ici on lit, on n'explore pas. */
header{position:relative;z-index:20}
.nav-shell{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--filet);gap:32px}
.brand{display:inline-flex;align-items:center;gap:16px;flex:none;font-family:var(--title);font-size:19px;letter-spacing:-.04em;font-weight:500;white-space:nowrap;color:var(--os)}
.brand-sign{display:block;width:28px;height:28px;flex:none}
.brand-sign svg{width:100%;height:100%}
.nav-links{display:flex;gap:28px;margin-left:auto;margin-right:36px;align-items:center;font-size:13px;color:var(--clair)}
.nav-links a{position:relative;padding:8px 0}
.nav-links a[aria-current="page"]{color:var(--os)}
.nav-links a:after{content:'';position:absolute;bottom:0;left:0;right:100%;height:1px;background:var(--electrique-clair);transition:right .3s}
.nav-links a:hover:after,.nav-links a[aria-current="page"]:after{right:0}
.nav-contact{border:1px solid var(--acier);padding:12px 16px;display:inline-flex;gap:20px;align-items:center;border-radius:8px;font-size:13px;min-height:44px;color:var(--os);transition:background .2s,border-color .2s,transform .12s ease-out}
.nav-contact:hover{background:var(--nuit-3);border-color:var(--electrique-clair)}
.nav-court{display:none}
.nav-long{display:inline}

/* ── Tête ─────────────────────────────────────────────────────────────────── */
.tete{padding:80px 0 0;position:relative}
.tete .overline{display:flex;align-items:center;gap:12px;color:var(--brume);font-size:12px;letter-spacing:.03em;margin-bottom:30px}
.tete .overline:before{content:'';width:24px;height:1px;background:var(--electrique)}
.tete-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:88px;align-items:start;padding-bottom:76px;border-bottom:1px solid var(--filet)}
h1{font-size:clamp(42px,4.9vw,68px);line-height:1.06;letter-spacing:-.045em;margin-left:-3px;max-width:15ch}
h1 em{font-style:normal;color:var(--brume)}
.chapeau{font-family:var(--title);font-size:clamp(18px,1.7vw,22px);line-height:1.45;letter-spacing:-.022em;color:var(--os);margin-top:30px;max-width:26ch}
.appel{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.bouton{display:inline-flex;align-items:center;gap:18px;min-height:48px;padding:13px 22px;border-radius:9px;font-size:14px;background:var(--os);color:var(--nuit);font-weight:500;transition:transform .12s ease-out,box-shadow .3s}
.bouton .icon{transition:transform .3s var(--ease)}
.bouton-2{display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:13px 20px;border:1px solid var(--acier);border-radius:9px;font-size:14px;color:var(--clair);transition:border-color .2s,color .2s,transform .12s ease-out}
.bouton-2:hover{border-color:var(--electrique-clair);color:var(--os)}
.sous-appel{margin-top:20px;font-size:13px;line-height:1.7;color:var(--brume);max-width:44ch}

/* ── La scène ────────────────────────────────────────────────────────────────
   Le pendant, pour ces pages, de la sculpture #confluence de l'accueil : même
   ossature (titre en surtitre, deux légendes de part et d'autre, voix + phases +
   indice en bas, contrôle du mouvement en coin), même palette, même easing.
   Le canvas est décoratif ET informatif : il porte un role="img" et un libellé.
   Sans JavaScript, il ne reste qu'un cadre vide — c'est pourquoi le texte de la
   page ne dépend jamais de lui. */
.scene-stage{position:relative;display:grid;grid-template-rows:auto auto minmax(240px,1fr) auto;min-height:620px;isolation:isolate;border:1px solid var(--filet);border-radius:14px;background:linear-gradient(180deg,var(--nuit-2),var(--nuit));overflow:hidden}
.scene-toile{position:relative;touch-action:pan-y;min-height:240px}
.scene-toile:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 62% 42%,rgba(76,141,255,.10),transparent 66%);z-index:0;pointer-events:none}
.scene-stage canvas{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:1}
.scene-tete{position:relative;z-index:2;margin:22px 26px 4px;display:flex;justify-content:space-between;gap:16px;color:var(--brume);font-size:10px;letter-spacing:.13em;text-transform:uppercase;pointer-events:none}
.scene-etat{display:inline-flex;align-items:center;gap:9px}
.live-dot{position:relative;background:var(--electrique-clair);width:5px;height:5px;border-radius:50%;flex:none}
.live-dot:after{content:'';position:absolute;inset:-4px;border:1px solid var(--electrique);border-radius:50%}
html[data-motion="full"] .live-dot:after{animation:pulse-dot 2.5s infinite}
@keyframes pulse-dot{0%,100%{opacity:.7;transform:scale(.6)}80%{opacity:0;transform:scale(1.8)}}

/* Les deux côtés du schéma, nommés SOUS le sur-titre et non plus sur le dessin. */
.scene-cotes{display:flex;justify-content:space-between;gap:24px;margin:10px 26px 0;position:relative;z-index:2}
.scene-legende{font-size:11px;letter-spacing:.02em;color:var(--clair);line-height:1.5;max-width:15em;padding-top:9px;position:relative}
.scene-legende small{display:block;color:var(--brume);font-size:10.5px;margin-top:3px;line-height:1.5}
.scene-legende:before{content:'';height:1px;position:absolute;top:0;width:34px;background:currentColor;opacity:.32}
.scene-legende.gauche:before{left:0}
.scene-legende.droite{text-align:right}
.scene-legende.droite:before{right:0}

.scene-pied{position:relative;z-index:2;padding:16px 26px 22px;display:flex;flex-direction:column;align-items:center;gap:13px;background:linear-gradient(180deg,transparent,rgba(5,10,20,.55) 42%)}
.scene-voix{display:flex;align-items:center;justify-content:center;gap:11px;font-size:12.5px;color:var(--clair);min-height:22px;text-align:center;line-height:1.5}
.equalizer{display:flex;align-items:flex-end;gap:3px;height:14px;color:var(--electrique-clair);flex:none}
.equalizer i{display:block;width:2px;height:5px;background:currentColor}
.equalizer i:nth-child(2){height:12px}
.equalizer i:nth-child(3){height:8px}
.equalizer i:nth-child(4){height:14px}
.equalizer i:nth-child(5){height:6px}
html[data-motion="full"] .scene-voix.parle .equalizer i{animation:equalize .55s ease-in-out infinite alternate}
.equalizer i{transition:transform .3s var(--ease)}
html[data-motion="full"] .scene-voix.parle .equalizer i:nth-child(2){animation-delay:-.2s}
html[data-motion="full"] .scene-voix.parle .equalizer i:nth-child(3){animation-delay:-.45s}
html[data-motion="full"] .scene-voix.parle .equalizer i:nth-child(4){animation-delay:-.7s}
html[data-motion="full"] .scene-voix.parle .equalizer i:nth-child(5){animation-delay:-.15s}
@keyframes equalize{to{transform:scaleY(.3)}}

.scene-phases{display:flex;gap:4px;border:1px solid var(--filet);border-radius:999px;padding:4px;background:rgba(5,10,20,.72);max-width:100%;flex-wrap:wrap;justify-content:center}
.scene-phases button{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 13px;color:var(--brume);font-size:10px;letter-spacing:.05em;min-height:34px;white-space:nowrap;transition:background .25s,color .25s}
.scene-phases button span:first-child{font-variant-numeric:tabular-nums}
.scene-phases button[aria-pressed="true"]{background:var(--nuit-4);color:var(--os)}
.scene-phases button[aria-pressed="true"] span:first-child{opacity:1;color:var(--electrique-clair)}
.scene-phases button:hover{color:var(--os)}

.scene-indice{font-size:10px;color:var(--brume);display:flex;align-items:center;gap:8px;letter-spacing:.03em;text-align:center}
.scene-indice .icon{width:12px;height:12px}
/* Le seul bouton d'action de la scène (page IA) : le visiteur y tient le rôle
   qu'aucune machine ne doit tenir — celui qui dit oui. */
.scene-action{margin-top:2px;display:inline-flex;align-items:center;gap:12px;min-height:36px;padding:8px 16px;border:1px solid var(--acier);border-radius:999px;font-size:12px;color:var(--os);background:rgba(5,10,20,.72);transition:border-color .25s,background .25s,transform .12s ease-out}
.scene-action:hover{border-color:var(--electrique-clair);background:var(--nuit-3)}
.scene-action .icon{width:13px;height:13px;color:var(--electrique-clair)}

.scene-controle{position:absolute;z-index:3;right:16px;bottom:14px}
.scene-controle button{background:var(--nuit-2);border:1px solid var(--acier);width:32px;height:32px;border-radius:999px;display:grid;place-items:center;color:var(--clair);transition:border-color .25s,color .25s}
.scene-controle button:hover{border-color:var(--electrique-clair);color:var(--os)}
.scene-controle .icon{width:12px;height:12px}
.scene-controle .play{display:none}
.scene-controle button[aria-pressed="true"] .pause{display:none}
.scene-controle button[aria-pressed="true"] .play{display:block}

.scene-note{margin-top:14px;font-size:12px;line-height:1.6;color:var(--brume)}

/* La pause arrête TOUT, pas seulement le canvas. */
body.motion-paused .live-dot:after,
body.motion-paused .equalizer i,
body.motion-paused .carte.machine:after{animation-play-state:paused}
body.motion-paused .reveal{opacity:1 !important;transform:none !important;transition:none !important}
body.motion-paused .reveal .no:before,
body.motion-paused .reveal .capacites:before{transform:none !important;transition:none !important}
body.motion-paused .faq details[open] .reponse{animation:none}

/* L'invitation à démarrer, pour qui arrive en mouvement réduit : sans elle, un
   visiteur qui a coupé les animations n'a aucun moyen de voir la démonstration.
   Elle ne s'affiche que dans ce cas — et elle disparaît dès qu'on l'a acceptée. */
.motion-notice{display:none;position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;max-width:calc(100% - 32px);border:1px solid var(--acier);border-radius:9px;background:var(--nuit-2);padding:12px 20px;color:var(--os);font-size:12.5px;box-shadow:0 20px 60px -20px rgba(5,10,20,.9)}
.motion-notice:hover{border-color:var(--electrique-clair)}
html[data-motion="reduced"] .motion-notice{display:block}
body:not(.motion-paused) .motion-notice{display:none}

/* ── Corps ────────────────────────────────────────────────────────────────── */
.corps{padding:0 0 8px}
.bloc{padding-top:72px;margin-top:0;border-top:1px solid var(--filet)}
.bloc:first-child{border-top:0}
.bloc + .bloc{margin-top:72px}
.bloc-tete{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);gap:88px;align-items:start}
.bloc h2{display:flex;gap:18px;align-items:baseline;font-size:clamp(28px,2.9vw,40px);line-height:1.12;letter-spacing:-.035em;max-width:14ch}
.bloc h2 .no{font-family:var(--text);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--brume);font-variant-numeric:tabular-nums;flex:none;padding-top:.35em}
.bloc-intro{font-size:16px;line-height:1.85;max-width:62ch}
.bloc-intro + .bloc-intro{margin-top:18px}
.bloc-corps{margin-top:44px}

/* Les signes : une phrase que le lecteur reconnaît, ou pas. */
.signes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:12px;overflow:hidden}
.signes li{background:var(--nuit-2);padding:26px 28px;display:grid;gap:12px;align-content:start}
.signes .num{font-size:10px;letter-spacing:.12em;color:var(--brume);font-variant-numeric:tabular-nums}
.signes p{font-size:15.5px;line-height:1.7;color:var(--clair);margin:0}
.signes b{font-weight:500;color:var(--os)}

/* Deux colonnes : ce qui existe / ce que ça coûte. */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.carte{border:1px solid var(--filet);border-radius:12px;background:var(--nuit-2);padding:28px 30px}
.carte h3{font-size:19px;line-height:1.3;letter-spacing:-.025em;color:var(--os)}
.carte p{margin-top:14px;font-size:15px;line-height:1.8}
.carte .cap{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brume);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.carte .cap:before{content:'';width:13px;height:1px;background:var(--acier)}
.carte.machine{border-color:rgba(76,141,255,.34)}
.carte.machine .cap:before{background:var(--electrique)}

/* Capacités : le résultat, jamais le mode d'emploi. */
.capacites{list-style:none;padding:0;display:grid;gap:18px;max-width:70ch}
.capacites li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.8;color:var(--clair)}
.capacites li:before{content:'';position:absolute;left:0;top:14px;width:15px;height:1px;background:var(--electrique)}
.capacites b{font-weight:500;color:var(--os)}

/* Ce que ce n'est pas — la borne. Elle rassure plus que la promesse. */
.bornes{list-style:none;padding:0;display:grid;gap:14px;max-width:70ch}
.bornes li{display:flex;gap:16px;align-items:baseline;font-size:15px;line-height:1.8;color:var(--brume)}
.bornes .icon{width:14px;height:14px;color:var(--acier);position:relative;top:2px}

.encart{margin-top:34px;max-width:66ch;border:1px solid var(--filet);border-left:2px solid var(--electrique);border-radius:0 11px 11px 0;background:var(--nuit-2);padding:24px 28px}
.encart p{font-size:14.5px;line-height:1.8;margin:0}
.encart p + p{margin-top:12px}

/* Trois questions : la page pose, elle ne répond pas à tout. C'est voulu. */
.questions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:12px;overflow:hidden;margin-top:34px}
.questions div{background:var(--nuit-2);padding:26px 28px}
.questions .num{font-size:10px;letter-spacing:.12em;color:var(--brume);display:block;margin-bottom:12px}
.questions p{font-family:var(--title);font-size:17px;line-height:1.4;letter-spacing:-.02em;color:var(--os);margin:0}

/* FAQ — questions réelles, réponses courtes. Reprises en JSON-LD FAQPage. */
.faq{display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:12px;overflow:hidden;max-width:88ch}
.faq details{background:var(--nuit-2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 28px;display:flex;gap:20px;align-items:baseline;justify-content:space-between;font-family:var(--title);font-size:17px;line-height:1.45;letter-spacing:-.02em;color:var(--os);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--nuit-3)}
.faq summary .icon{flex:none;color:var(--acier);transition:transform .3s var(--ease);position:relative;top:4px}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq .reponse{padding:0 28px 24px}
.faq .reponse p{font-size:15px;line-height:1.85;max-width:64ch}
.faq .reponse p + p{margin-top:14px}

/* Clôture */
.cloture{margin-top:96px;padding:72px 0 80px;border-top:1px solid var(--filet);background:linear-gradient(180deg,transparent,rgba(16,29,51,.42))}
.cloture h2{font-size:clamp(28px,3.2vw,44px);line-height:1.14;letter-spacing:-.038em;max-width:18ch;margin-top:26px}
.cloture h2 em{font-style:normal;color:var(--brume)}
.cloture p{margin-top:22px;font-size:16px;line-height:1.8;max-width:56ch}

.voisines{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:64px;padding-top:28px;border-top:1px solid var(--filet)}
.voisines a{display:inline-flex;align-items:center;gap:18px;font-size:14px;color:var(--clair);padding:8px 0;border-bottom:1px solid var(--acier);transition:border-color .2s,color .2s}
.voisines a:hover{color:var(--os);border-bottom-color:var(--electrique-clair)}
.voisines .icon{transition:transform .3s}

/* Pied — repris tel quel des pages légales (LCEN art. 6-III, AI Act art. 50). */
.pied{border-top:1px solid rgba(240,245,252,.08);margin-top:0;padding:56px 0 40px;background:#080E1A}
.pied__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:44px}
.pied__marque{font-family:var(--title);font-size:20px;font-weight:500;letter-spacing:-.02em;color:#F0F5FC;margin:0 0 10px}
.pied__titre{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#93A6C6;margin:0 0 12px}
.pied__ligne{font-size:14px;line-height:1.7;color:#93A6C6;margin:0}
.pied__ligne a{display:inline-flex;align-items:center;min-height:32px;color:#C7D4E8;border-bottom:1px solid rgba(199,212,232,.3)}
.pied__ligne a:hover{color:#F0F5FC;border-bottom-color:#4C8DFF}
.pied__legal{border-top:1px solid rgba(240,245,252,.06);padding-top:28px}
.pied__legal p{font-size:12.5px;line-height:1.65;color:#93A6C6;margin:0 0 10px;max-width:none}
.pied__legal b{color:#93A6C6;font-weight:600}
.pied__ia{border-left:2px solid #FF9E3D;padding-left:14px;color:#93A6C6 !important;margin-top:18px !important}
.pied__copy{margin-top:20px !important;color:#93A6C6 !important}

/* ── La couche vivante du corps ───────────────────────────────────────────────
   Régime volontairement bas : ces pages se lisent. La scène de tête porte le
   spectacle ; ici on se contente de faire respirer ce qui arrive et de récompenser
   le survol. Aucun texte n'est caché derrière une interaction.

   PLANCHER RESPECTÉ, ET IL DIFFÈRE DE L'ACCUEIL. La charte MWC interdit
   l'apparition depuis l'opacité 0 (marque.json → planchersNonLevables, opacité de
   départ minimale 0,82) : un texte doit rester lisible pendant toute sa transition.
   L'accueil part de 0 — c'est un écart constaté le 08/09/2026, signalé, pas imité.
   Ici on part de 0,82 : l'entrée se voit, et rien n'est jamais illisible. */
.reveal{opacity:1;transform:none}
html.js-reveal[data-motion="full"] .reveal{opacity:.82;transform:translateY(16px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.js-reveal[data-motion="full"] .reveal.visible{opacity:1;transform:none}
/* Une révélation dans une autre : les opacités se multiplient (0,82 × 0,82 = 0,67, mesuré
   à 4,11:1 sur les numéros des signes). L'élément imbriqué ne fait que glisser. */
html.js-reveal[data-motion="full"] .reveal .reveal{opacity:1}
/* Décalage en cascade pour les grilles : l'œil suit, il ne subit pas six entrées d'un coup. */
html.js-reveal[data-motion="full"] .signes li.reveal{transition-delay:calc(var(--i) * 70ms)}

/* Les blocs : le numéro et son filet se tracent quand la section arrive. */
.bloc h2 .no{position:relative;padding-left:26px}
.bloc h2 .no:before{content:'';position:absolute;left:0;top:.62em;width:18px;height:1px;background:var(--electrique);transform-origin:left;transform:scaleX(1)}
html.js-reveal[data-motion="full"] .reveal .no:before{transform:scaleX(0);transition:transform .7s var(--ease) .15s}
html.js-reveal[data-motion="full"] .reveal.visible .no:before{transform:scaleX(1)}

/* Les signes : six constats. Le survol soulève la cellule et allume son numéro —
   c'est la même récompense que sur les cartes de l'accueil. */
.signes li{position:relative;transition:background .3s var(--ease),transform .3s var(--ease)}
.signes li:before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--electrique);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.signes li:hover{background:var(--nuit-3)}
.signes li:hover .num{color:var(--electrique-clair)}
.signes .num{transition:color .3s}

/* Les deux cartes : celle du logiciel généraliste reçoit un balayage lent, comme
   l'atelier de l'accueil. Il dit « une machine tourne là-dedans », rien de plus. */
.carte{position:relative;overflow:hidden;transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
/* Pas de balayage permanent ici : il a été retiré le 08/09 après revue. Il mettait
   en scène la carte qui décrit l'impasse, et ne racontait rien du problème du lecteur.
   La carte se distingue par sa bordure, au survol, quand on la regarde. */

/* Les capacités : un rail qui se trace une fois, et des tirets qui s'allongent.
   Pas de boucle — sur une liste qu'on lit, une boucle devient un tic. */
.capacites{position:relative;padding-left:2px}
.capacites:before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--filet);transform-origin:top}
html.js-reveal[data-motion="full"] .reveal .capacites:before{transform:scaleY(0);transition:transform 1.1s var(--ease) .2s}
html.js-reveal[data-motion="full"] .reveal.visible .capacites:before{transform:scaleY(1)}
.capacites li{transition:color .3s}
.capacites li:before{transition:width .4s var(--ease),background .3s}
.capacites li:hover{color:var(--os)}

/* Les bornes : ce qu'on ne fera pas. La croix s'anime au survol — discrètement,
   c'est une limite, pas une punition. */
.bornes li{transition:color .3s}
.bornes li:hover,.bornes li:hover span{color:var(--os)}
.bornes .icon{transition:color .3s}
.bornes li:hover .icon{color:var(--electrique-clair)}

/* Les trois questions : ce sont elles qui ouvrent le dialogue. Elles s'éclairent. */
.questions div{position:relative;transition:background .3s var(--ease)}
.questions div:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--electrique);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.questions div:hover{background:var(--nuit-3)}
.questions div:hover .num{color:var(--electrique-clair)}
.questions .num{transition:color .3s}

/* La FAQ : la réponse arrive, elle ne surgit pas. Le contenu reste dans le HTML
   servi — c'est lui qui est indexé et qui alimente le JSON-LD. */
.faq details[open] .reponse{animation:reponse-in .45s var(--ease) both}
html[data-motion="reduced"] .faq details[open] .reponse{animation:none}
@keyframes reponse-in{from{opacity:.82;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{transition:background .25s,color .25s}
.faq details[open] summary{color:var(--os);background:var(--nuit-3)}

/* La clôture : la même lueur de fond que sur l'accueil, et la marque à trois barres. */
.cloture{position:relative;overflow:hidden}
.cloture:before{content:'';position:absolute;left:50%;top:0;width:min(900px,100%);height:100%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 10%,rgba(76,141,255,.10),transparent 62%);pointer-events:none}
.cloture .wrap{position:relative}
/* Pas de signature animée sur le dernier écran : elle prenait l'attention du bouton. */
.cloture-marque{display:none}

/* Le bouton principal : la seule lueur ambre de la page, et elle ne s'allume qu'au survol. */
.bouton:hover{box-shadow:0 10px 30px -12px rgba(255,158,61,.45)}

/* Survol en mouvement : avec une vraie souris seulement. Au tactile, il resterait collé
   après l'appui. */
@media (hover:hover) and (pointer:fine){
  html[data-motion="full"] .bouton:hover{transform:translateY(-2px)}
  html[data-motion="full"] .bouton:hover .icon,html[data-motion="full"] .voisines a:hover .icon{transform:translate(3px,-3px)}
  html[data-motion="full"] .signes li:hover:before{transform:scaleY(1)}
  html[data-motion="full"] .carte:hover{transform:translateY(-3px);border-color:var(--acier);box-shadow:0 0 0 1px rgba(76,141,255,.16),0 18px 44px -20px rgba(76,141,255,.4)}
  html[data-motion="full"] .carte.machine:hover{border-color:var(--electrique-clair)}
  html[data-motion="full"] .capacites li:hover:before{width:24px;background:var(--electrique-clair)}
  html[data-motion="full"] .questions div:hover:after{transform:scaleX(1)}
}

/* Appui : le bouton répond sous le doigt, tout de suite. */
html[data-motion="full"] :is(.bouton,.bouton-2,.nav-contact,.scene-action):active{transform:scale(.97)}

/* Garde doublée. motion-init.js pose data-motion ; si le script ne passait pas,
   cette requête média reprend la main. Le plancher est explicite : « une page
   complète et immobile », pas une page dégradée. */
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *:before,
  html:not([data-motion="full"]) *:after{animation:none !important;transition:none !important}
  html:not([data-motion="full"]) .reveal{opacity:1 !important;transform:none !important}
  html:not([data-motion="full"]) .capacites:before,
  html:not([data-motion="full"]) .bloc h2 .no:before{transform:none !important}
}
html[data-motion="reduced"] .reveal{opacity:1;transform:none;transition:none}

@media (max-width:1080px){
  .nav-shell{height:auto;flex-wrap:wrap;padding:18px 0;align-items:center}
  .brand{order:1}
  .nav-contact{order:2;margin-left:auto}
  .nav-links{order:3;width:100%;margin:2px 0 0;gap:24px;justify-content:flex-start}
}
@media (max-width:1250px){
  .wrap{width:calc(100% - 80px)}
  .tete-grille,.bloc-tete{gap:56px}
  .nav-links{gap:22px;margin-right:16px}
  .nav-shell{gap:24px}
}
@media (max-width:1080px){
  .tete-grille{grid-template-columns:1fr;gap:52px}
  h1{max-width:18ch}
  .chapeau{max-width:46ch}
  .bloc-tete{grid-template-columns:1fr;gap:26px}
  .bloc h2{max-width:22ch}
}
@media (max-width:1000px){
  .wrap{width:calc(100% - 64px)}
  .nav-links{gap:18px;font-size:12px}
  .questions{grid-template-columns:1fr}
}
@media (max-width:860px){
  .pied__grille{grid-template-columns:1fr;gap:28px}
  .signes,.compare{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .scene-stage{min-height:560px;grid-template-rows:auto auto minmax(230px,1fr) auto}
  .scene-legende{max-width:13em;font-size:10.5px}
}
@media (max-width:900px){
  .scene-stage{min-height:520px}
  .scene-legende{max-width:11em}
}
@media (max-width:760px){
  .wrap{width:calc(100% - 40px)}
  .nav-shell{height:80px;gap:16px}
  .brand{font-size:17px;gap:12px}
  .brand-sign{width:24px;height:24px}
  .nav-links{display:none}
  .nav-contact{margin-left:auto;min-height:40px;padding:10px 14px;font-size:12px;gap:14px}
  .nav-long{display:none}
  .nav-court{display:inline}
  .tete{padding-top:52px}
  .tete-grille{padding-bottom:52px}
  h1{font-size:clamp(34px,8.6vw,52px);margin-left:-2px}
  .chapeau{font-size:18px}
  .bloc{padding-top:48px}
  .bloc + .bloc{margin-top:48px}
  .bloc h2{font-size:26px;gap:12px}
  .bloc-corps{margin-top:32px}
  .signes li,.carte,.questions div{padding:22px 20px}
  .faq summary{padding:18px 20px;font-size:16px}
  .faq .reponse{padding:0 20px 20px}
  .cloture{margin-top:64px;padding:52px 0 60px}
  /* Téléphone : la toile garde une part fixe et le pied prend ce qu'il lui faut —
     la voix peut passer à trois lignes sans jamais toucher le dessin. */
  .scene-stage{min-height:0;grid-template-rows:auto 260px auto}
  .scene-toile{min-height:260px}
  .scene-tete{margin:16px 18px 2px;font-size:9px}
  .scene-cotes{display:none}
  .scene-pied{padding:14px 16px 18px;gap:11px}
  .scene-voix{font-size:12px;min-height:0}
  .scene-phases{gap:2px;padding:3px}
  .scene-phases button{padding:9px 8px;font-size:9.5px;gap:4px;min-height:40px}
  .scene-phases button span:first-child{display:none}
  .scene-indice{font-size:9.5px;line-height:1.5}
  .scene-action{width:100%;justify-content:center;min-height:44px}
  .scene-controle{right:12px;bottom:12px}
}