/* Le socle des pages intérieures de nexus-engine.eu.
 *
 * PORTÉ : c'est le préfixe que les quatre maquettes du Studio partagent mot
 * pour mot — jetons, reset, barre de navigation, pied, `.sec`, `.btn`, le
 * rideau, les révélations. Il est CALCULÉ par `site/vitrine/porter-pages.py`
 * (le plus long préfixe commun aux quatre), jamais découpé à la main.
 *
 * Maquettes portées : « Cas d’usage — la page » 01.00.02, « Fonctionnalités — le catalogue » 01.00.03, « Fonctionnalité — la page de détail » 01.00.05, « Cas d’usage — étude de cas (gabarit) » 01.00.02.
 *
 * Toute page intérieure charge cette feuille, puis la sienne. L'accueil, lui,
 * porte sa propre feuille entière (`accueil.css`) : il est la maquette, pas une
 * page qui en reprend le socle.
 *
 * NE PAS RETOUCHER ICI. On retravaille la maquette, puis on rejoue le portage.
 */

:root{
  /* Territoire de marque Nexus — repris du deck « présentation licences » (v01.00.00) */
  --bleu-nexus:#4E81EE; --bleu-profond:#2F5CC4; --bleu-glacier:#90B8FD; --bleu-nuit:#203149;
  --fond:#0E0E0D; --graphite:#1A1A18; --noir-chaud:#141413; --panneau:#21211F; --releve:#2A2A27; --filet:#302F2C;
  --craie:#F0EEE7; --gris-chaud:#A8A49C; --gris-cendre:#8B867D; --gris-fumee:#6B6760;
  --vert-valide:#22C55E; --orange-signal:#FA7315; --corail:#F0908F;
  --f-titre:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-ctrl:10px; --r-carte:16px; --r-pill:999px;
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:40px; --e6:56px; --e7:80px; --e8:120px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --marge:20px; --lisible:1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

#page{background:var(--fond);color:var(--craie);font-family:var(--f-titre);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;overflow:clip}

img,svg,video{display:block;max-width:100%}

a{color:inherit;text-decoration:none}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3,h4{font-weight:800;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}

p{text-wrap:pretty}

ul{list-style:none}

::selection{background:var(--bleu-nexus);color:#fff}


/* ——— Ossature ——— */
.sec{position:relative;padding:var(--e7) var(--marge);isolation:isolate}

/* La barre est COLLANTE : sans cette marge, une ancre pose la section à y=0 et
   la barre en recouvre les 73 premiers pixels — le surtitre disparaît sous elle. */
.sec[id],#page>footer{scroll-margin-top:84px}

.dedans{max-width:var(--lisible);margin:0 auto}

.large{max-width:1320px;margin:0 auto}

.sec--releve{background:var(--noir-chaud)}

.filet-haut{border-top:1.5px solid var(--filet)}

/* Les surtitres de SECTION ont été retirés (29 septembre 2026) : le titre se
   suffit, et « Le constat » au-dessus de « Un modèle d'IA, seul, n'accélère pas
   une équipe » ne disait rien de plus. La classe reste pour les deux blocs qui
   s'en servaient à l'INTÉRIEUR d'une carte — là, le petit titre porte ce que la
   carte montre, et le retirer aurait coûté l'information. */
.carte__sus{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-cendre);margin-bottom:var(--e3)}

.titre-sec{font-size:clamp(30px,7vw,52px);max-width:22ch}

.titre-sec em{font-style:normal;color:var(--bleu-glacier)}

.chapeau{font-size:clamp(17px,2.2vw,21px);line-height:1.5;color:var(--gris-chaud);max-width:62ch;margin-top:var(--e3);font-weight:500}

.chapeau b,.chapeau strong{color:var(--craie);font-weight:600}

.mono{font-family:var(--f-mono)}

.source{font-size:12px;line-height:1.5;color:var(--gris-fumee);margin-top:var(--e4);max-width:84ch}

.source a{color:var(--gris-cendre);text-decoration:underline;text-underline-offset:2px}


/* ——— Grain et halo, communs ——— */
.grille-fond{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--filet) 1px,transparent 1px),linear-gradient(90deg,var(--filet) 1px,transparent 1px);
  background-size:64px 64px;opacity:.3;
  mask-image:radial-gradient(ellipse 60% 60% at var(--gx,80%) var(--gy,10%),#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at var(--gx,80%) var(--gy,10%),#000,transparent 72%)}

.halo{position:absolute;z-index:-1;width:min(900px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  left:var(--hx,60%);top:var(--hy,0%);translate:-50% -50%;
  background:radial-gradient(circle,rgba(78,129,238,.18) 0%,rgba(32,49,73,.10) 42%,transparent 70%);
  animation:respire 11s ease-in-out infinite alternate}


/* ——— Pastilles, cartes, boutons ——— */
.pastille{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--bleu-nuit);color:var(--bleu-glacier);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.pastille.ok{background:rgba(34,197,94,.12);color:var(--vert-valide)}

.pastille.alerte{background:rgba(250,115,21,.12);color:var(--orange-signal)}

.pastille.neutre{background:var(--releve);color:var(--gris-chaud)}

.point{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}

.point.vif{animation:pouls 2s ease-in-out infinite}

.carte{background:linear-gradient(180deg,var(--panneau),var(--graphite));border:1.5px solid var(--filet);
  border-radius:var(--r-carte);padding:var(--e4)}

.carte h3{font-size:21px;margin-bottom:10px;letter-spacing:-.02em}

.carte p{font-size:15.5px;color:var(--gris-chaud);line-height:1.55}

.ico{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;
  border-radius:var(--r-ctrl);font-size:16px;font-weight:700;letter-spacing:-.01em;
  transition:transform .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}

.btn--plein{background:var(--bleu-nexus);color:#fff;box-shadow:0 8px 28px -10px rgba(78,129,238,.7)}

.btn--plein:hover{background:var(--bleu-glacier);color:var(--bleu-nuit);transform:translateY(-2px)}

.btn--vide{border:1.5px solid var(--filet);color:var(--craie)}

.btn--vide:hover{border-color:var(--bleu-nexus);color:var(--bleu-glacier);transform:translateY(-2px)}

.btn--ico{min-height:44px;width:44px;padding:0;border:1.5px solid var(--filet);border-radius:var(--r-ctrl);color:var(--gris-chaud)}

.btn--ico:hover{border-color:#5865F2;color:#8891FF;background:rgba(88,101,242,.12)}

.btn--ico svg{width:20px;height:20px;fill:currentColor}


/* ——— Navigation ——— */
.nav{position:sticky;top:0;z-index:40;background:rgba(14,14,13,.78);backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom:1.5px solid var(--filet)}

.nav__in{position:relative;max-width:1320px;margin:0 auto;padding:12px var(--marge);display:flex;align-items:center;gap:var(--e3)}

.marque{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.02em}

/* `fill` EXPLICITE, jamais `color` seul : un `<symbol>` réemployé par `<use>`
   n'hérite pas de `currentColor` si rien ne pose `fill` — il sort en NOIR, et
   sur un fond noir on ne voit plus rien. Mesuré dans la vraie fenêtre. */
.marque svg{width:24px;height:24px;fill:var(--bleu-nexus);color:var(--bleu-nexus);animation:souffle 5s ease-in-out infinite}

.nav__liens{display:none;gap:var(--e3);margin-left:auto;font-size:14.5px;font-weight:600;color:var(--gris-chaud)}

.nav__liste{display:flex;gap:var(--e3);align-items:center}

.nav__item{position:static}

.nav__lien{display:inline-flex;align-items:center;gap:6px;padding:8px 0;position:relative;
  transition:color .2s var(--ease)}

.nav__lien::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:var(--bleu-nexus);transition:right .28s var(--ease)}

.nav__lien:hover,.nav__item:hover>.nav__lien,.nav__item:focus-within>.nav__lien{color:var(--craie)}

.nav__lien:hover::after,.nav__item:hover>.nav__lien::after,.nav__item:focus-within>.nav__lien::after{right:0}

.nav__chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;transition:rotate .28s var(--ease)}

.nav__item:hover .nav__chev,.nav__item:focus-within .nav__chev{rotate:180deg}

.nav__actions{display:flex;align-items:center;gap:10px;margin-left:auto}

.nav__menu{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--filet);border-radius:var(--r-ctrl);color:var(--gris-chaud)}

.nav__menu svg{width:20px;height:20px}

/* Le bouton porte SES DEUX états. Le menu ouvert est l'élément qui précède les
   actions : c'est lui qui commande l'icône, sans une ligne de script de plus. */
.nav__menu-fermer{display:none}

.nav__liens[data-ouvert]~.nav__actions .nav__menu{border-color:var(--bleu-profond);color:var(--bleu-glacier)}

.nav__liens[data-ouvert]~.nav__actions .nav__menu-ouvrir{display:none}

.nav__liens[data-ouvert]~.nav__actions .nav__menu-fermer{display:block}
@media (max-width:369px){
.nav__actions .btn--plein{display:none}
}

.nav__tel{display:none}
@media (min-width:1040px){

  .nav__liens{display:flex}

  .nav__actions{margin-left:var(--e3)}

  .nav__menu{display:none}
}


/* ——————————————————————————————————————————————————————————————————————
   L'EFFET DU HERO

   Trois couches de mouvement, et chacune se dégrade proprement :

   1. AU DÉFILEMENT — CSS pur (`animation-timeline: scroll()`), zéro script.
      Sous `@supports` : un navigateur qui ne connaît pas les chronologies de
      défilement IGNORERAIT `animation-timeline` mais JOUERAIT l'animation sur
      l'horloge — le hero disparaîtrait tout seul au chargement. La garde n'est
      donc pas une précaution, c'est ce qui évite une page vide.
   2. AU POINTEUR — le script ne pose que des VARIABLES (`--px`, `--py`, `--rx`,
      `--ry`). Sans lui, elles gardent leur valeur par défaut : la lueur reste
      posée, le panneau reste droit, et rien ne manque.
   3. AU SURVOL — CSS pur.

   Tout s'arrête sous `prefers-reduced-motion` (bloc en fin de feuille).
   —————————————————————————————————————————————————————————————————————— */

/* ——— LE HERO : UN RIDEAU DE LUMIÈRE QUI TOMBE ————————————————————————————
   Ni paysage, ni carte électronique : des BANDES de dégradé qui descendent,
   lentement, chacune à son rythme. Universel — on n'a pas besoin d'être
   développeur pour y lire quelque chose —, et c'est la seule chose au monde
   qu'un dégradé sait faire mieux qu'une image : peser zéro octet et ne jamais
   pixeliser.
   Chaque bande est un dégradé VERTICAL (la lumière) masqué par un dégradé
   HORIZONTAL (les bords fondus) : sans ce second masque, on verrait un
   rectangle à arêtes franches, et tout l'effet tomberait. */
.rideau{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.45) 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.45) 92%,transparent 100%)}

/* Un décor n'a le droit d'être beau que s'il laisse LIRE : ce voile assombrit
   le fond DERRIÈRE la colonne de texte, et là seulement. */
.rideau::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 58% at 26% 40%,rgba(12,12,14,.82),rgba(12,12,14,.4) 54%,transparent 84%)}


.rideau__fond{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 74% 52% at 72% -6%,rgba(47,92,196,.34),transparent 66%),
    radial-gradient(ellipse 56% 42% at 8% 98%,rgba(32,49,73,.5),transparent 70%),
    linear-gradient(180deg,#0B0C11 0%,#0F1426 38%,#0D0E16 76%,#0E0E0D 100%)}


.rideau__b{position:absolute;top:-78%;left:var(--x);width:var(--w,10%);height:78%;
  mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,
    rgba(78,129,238,calc(var(--o,.4) * 1.35)) 40%,
    rgba(144,184,253,var(--o,.4)) 72%,
    transparent);
  mask-image:linear-gradient(90deg,transparent,#000 34%,#000 66%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%,#000 66%,transparent);
  animation:rideauTombe var(--d,15s) linear infinite;animation-delay:var(--t,0s)}

/* 244 % de SA hauteur : la bande part au-dessus du cadre et le quitte par le
   bas sans jamais sauter — le cycle se referme hors champ. */
@keyframes rideauTombe{from{translate:0 0}to{translate:0 244%}}


/* Quelques filets fins, plus vifs et plus rapides : ce sont eux qui donnent la
   VITESSE, quand les bandes larges donnent la profondeur. */
.rideau__f{position:absolute;top:-34%;left:var(--x);width:2px;height:34%;
  background:linear-gradient(180deg,transparent,rgba(190,217,255,var(--o,.5)),transparent);
  animation:rideauTombe var(--d,9s) linear infinite;animation-delay:var(--t,0s)}
@supports (animation-timeline: scroll()){
@media (min-width:1060px) and (prefers-reduced-motion: no-preference){

    .hero__tete,.hero__gauche,.hero__scene,.hero__cue,.hero .grille-fond,
    .rideau__fond{
      animation-timeline:scroll(root);animation-fill-mode:both;animation-timing-function:linear}

    /* ON PLONGE DANS LA CARTE : le routage grandit et s'efface, la trame
       du substrat se resserre, la pluie accélère. Chacun sur une propriété
       que sa BOUCLE ne touche pas — les deux foyers respirent en `opacity`,
       donc ils ne bougent pas ici. */
    /* ON S'ENFONCE DANS LE RIDEAU : le fond se resserre et s'éteint. Les
       BANDES, elles, ne sont pas touchées — elles tombent sur `translate`, et
       le défilement le leur arracherait. */
    .rideau__fond{animation-name:fondAvance;animation-range:0 90vh}
}
}


/* ——— Animations, nommées et réemployées ——— */
@keyframes respire{from{transform:scale(1)}to{transform:scale(1.14) translate(-24px,16px)}}

@keyframes souffle{0%,100%{opacity:1}50%{opacity:.6}}

@keyframes pouls{0%,100%{box-shadow:0 0 0 0 rgba(78,129,238,0)}50%{box-shadow:0 0 0 7px rgba(78,129,238,.2)}}


/* ——— Le méga-menu ———
   IL S'OUVRE SANS JAVASCRIPT : `:hover` pour la souris, `:focus-within` pour le
   clavier. L'éditeur du Studio n'exécute aucun script, et la page doit être
   complète sans lui — un menu qui ne s'ouvrirait qu'au clic y serait mort.
   Le panneau est posé par rapport à `.nav__in` (et non à son item) : centré, il
   tient à toute largeur de bureau, alors qu'ancré sur un item collé à droite il
   sortait de l'écran à 1040 px. */
.mega{position:absolute;z-index:5;top:100%;left:50%;width:min(760px,calc(100vw - 40px));
  translate:-50% 10px;opacity:0;visibility:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--panneau),var(--graphite));border:1.5px solid var(--filet);
  border-radius:var(--r-carte);box-shadow:0 40px 90px -40px rgba(0,0,0,1);overflow:hidden;
  transition:opacity .22s var(--ease),translate .22s var(--ease),visibility .22s}

.nav__item:hover>.mega,.nav__item:focus-within>.mega{opacity:1;visibility:visible;translate:-50% 0;pointer-events:auto}

/* Le pont : sans lui, descendre de l'onglet vers le panneau traverse la marge de
   la barre — qui n'appartient pas à l'item — et le survol se perd. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px}

/* `right:var(--marge)` et non `right:0` : le bloc de référence d'un élément
   absolu est la boîte de PADDING de la barre, qui déborde de 20 px le contenu —
   le panneau dépassait le bouton « Télécharger » d'autant. */
.mega--droite{left:auto;right:var(--marge);width:min(330px,calc(100vw - 40px));translate:0 10px}

.nav__item:hover>.mega--droite,.nav__item:focus-within>.mega--droite{translate:0 0}

.mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:0}

.mega__col{padding:22px}

.mega__col+.mega__col{border-left:1.5px solid var(--filet)}

.mega__tete{display:flex;align-items:center;gap:10px;margin-bottom:4px}

.mega__tete svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.mega__tete b{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

.mega__col--dev .mega__tete{color:var(--bleu-glacier)}

.mega__col--crea .mega__tete{color:var(--corail)}

.mega__sous{font-size:12.5px;color:var(--gris-fumee);margin-bottom:16px;line-height:1.45}

.mega__l{display:grid;gap:2px}

.mega__l a{display:block;padding:9px 10px;border-radius:9px;transition:background-color .2s var(--ease)}

.mega__l a:hover,.mega__l a:focus-visible{background:var(--releve)}

.mega__l b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--craie)}

.mega__l span{display:block;font-size:12.5px;color:var(--gris-cendre);line-height:1.4;margin-top:2px}

.mega__pied{display:flex;gap:0;border-top:1.5px solid var(--filet);background:rgba(20,20,19,.6)}

.mega__pied a{flex:1 1 0;display:flex;align-items:center;gap:10px;padding:14px 22px;font-size:13.5px;
  font-weight:600;color:var(--gris-chaud);transition:color .2s var(--ease),background-color .2s var(--ease)}

.mega__pied a+a{border-left:1.5px solid var(--filet)}

.mega__pied a:hover{color:var(--craie);background:var(--releve)}

.mega__pied svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--bleu-glacier)}

.mega--droite .mega__l{padding:14px}

.mega--droite .mega__l a{padding:10px}

.mega__disc svg{fill:currentColor;stroke:none;width:16px;height:16px;color:#8891FF}
@media (max-width:1039px){

  .nav__liens[data-ouvert]{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    padding:8px var(--marge) 20px;background:var(--noir-chaud);border-bottom:1.5px solid var(--filet);
    max-height:calc(100vh - 70px);overflow-y:auto}

  .nav__liens[data-ouvert] .nav__liste{flex-direction:column;align-items:stretch;gap:0}

  .nav__liens[data-ouvert] .nav__lien{padding:13px 0;border-bottom:1px solid var(--filet);font-size:16px}

  .nav__liens[data-ouvert] .nav__chev{display:none}

  .nav__liens[data-ouvert] .mega{position:static;width:auto;translate:none;opacity:1;visibility:visible;
    pointer-events:auto;background:none;border:0;border-radius:0;box-shadow:none;margin:6px 0 10px}

  .nav__liens[data-ouvert] .mega::before{display:none}

  .nav__liens[data-ouvert] .mega__cols{grid-template-columns:1fr}

  .nav__liens[data-ouvert] .mega__col{padding:10px 0}

  .nav__liens[data-ouvert] .mega__col+.mega__col{border-left:0;border-top:1.5px solid var(--filet)}

  .nav__liens[data-ouvert] .mega__l a{padding:9px 0}

  .nav__liens[data-ouvert] .mega__pied{flex-direction:column;background:none;border-top:0}

  .nav__liens[data-ouvert] .mega__pied a{padding:11px 0}

  .nav__liens[data-ouvert] .mega__pied a+a{border-left:0}

  .nav__liens[data-ouvert] .mega--droite .mega__l{padding:0}

  .nav__liens[data-ouvert] .nav__tel{display:flex;margin-top:14px;border:0;justify-content:center;color:#fff}
}


/* ——— Les secteurs : à qui ça s'adresse, posé haut ———
   Une bande VOLONTAIREMENT légère : elle répond à « est-ce pour moi ? » juste
   après la promesse, sans prendre la place de l'argumentaire qui suit. D'où des
   tuiles compactes (une icône, un nom, une ligne) et non des cartes de plus. */
.secteurs{display:grid;gap:14px;margin-top:var(--e5)}
@media (min-width:660px){
.secteurs{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1060px){
.secteurs{grid-template-columns:repeat(3,1fr)}
}

.secteur{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1.5px solid var(--filet);
  border-radius:14px;background:linear-gradient(180deg,var(--panneau),var(--graphite));
  transition:border-color .28s var(--ease),transform .28s var(--ease)}

.secteur:hover{border-color:var(--bleu-profond);transform:translateY(-3px)}

.secteur__i{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--bleu-nuit);color:var(--bleu-glacier)}

.secteur__i svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.secteur__c{min-width:0}

.secteur__c b{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em}

.secteur__c span{display:block;font-size:13.5px;color:var(--gris-chaud);line-height:1.45;margin-top:3px}

.secteurs__fin{display:flex;gap:12px;align-items:flex-start;margin-top:var(--e4);
  font-size:14px;color:var(--gris-cendre);line-height:1.5;max-width:80ch}

.secteurs__fin svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--bleu-glacier)}

.secteurs__fin b{color:var(--craie);font-weight:600}

.liste-arg{display:grid;gap:18px;margin-top:var(--e5)}

.liste-arg li{display:flex;gap:14px;align-items:flex-start}

.liste-arg .puce{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--bleu-nuit);color:var(--bleu-glacier);margin-top:1px}

.liste-arg .puce svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.liste-arg b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}

.liste-arg span{display:block;font-size:15px;color:var(--gris-chaud);line-height:1.5}

.js .rv .barre__p i,.js .rv-z .barre__p i{transform:scaleX(0)}

.js .rv.vu .barre__p i,.js .rv-z.vu .barre__p i{transform:scaleX(1)}


/* ——— Pied de page ——— */
.pied{padding:var(--e6) var(--marge) var(--e5);border-top:1.5px solid var(--filet);background:var(--noir-chaud)}

.pied__in{max-width:1320px;margin:0 auto;display:grid;gap:var(--e5)}
@media (min-width:900px){
.pied__in{grid-template-columns:1.4fr 1fr 1fr 1fr}
}

.pied__marque .marque{margin-bottom:14px}

.pied__marque p{font-size:14px;color:var(--gris-cendre);line-height:1.55;max-width:34ch}

.pied__disc{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;min-height:44px;
  border:1.5px solid var(--filet);border-radius:var(--r-ctrl);font-size:14.5px;font-weight:600;color:var(--gris-chaud);
  transition:border-color .22s var(--ease),color .22s var(--ease),background-color .22s var(--ease)}

.pied__disc svg{width:18px;height:18px;fill:currentColor}

.pied__disc:hover{border-color:#5865F2;color:#8891FF;background:rgba(88,101,242,.12)}

.pied h2{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-fumee);margin-bottom:14px}

.pied ul{display:grid;gap:10px}

.pied li a{font-size:14.5px;color:var(--gris-chaud);transition:color .2s var(--ease)}

.pied li a:hover{color:var(--craie)}

.pied__bas{max-width:1320px;margin:var(--e5) auto 0;padding-top:var(--e3);border-top:1.5px solid var(--filet);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;font-size:12.5px;color:var(--gris-fumee)}

.pied__bas a{text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:no-preference){

  @keyframes entre{from{opacity:0;translate:0 16px}}

  @keyframes entreTitre{
    from{clip-path:inset(0 0 100% 0);translate:0 22px;opacity:.2}
    to{clip-path:inset(0 0 -18% 0);translate:0;opacity:1}
  }

  @keyframes entreEclair{
    0%{opacity:0;scale:0 1}
    18%{opacity:1}
    60%{opacity:.9;scale:1 1}
    100%{opacity:0;scale:1 1}
  }


  /* Le rideau de fond se lève AVEC nous : ses bandes tombent déjà, on ne fait
     qu'ouvrir le rideau — d'où une animation sur le CONTENEUR, qui ne touche
     pas au `translate` des bandes. */
  .rideau{animation:entreRideau 1.5s var(--ease) both}

  @keyframes entreRideau{from{opacity:0;scale:1.06}}

  @keyframes entreVitre{from{opacity:0;translate:0 26px;scale:.985}}

  @keyframes entreFrappe{to{width:var(--w,30ch)}}

  @keyframes entreCurseur{0%{border-color:var(--bleu-glacier)}50%,100%{border-color:transparent}}
}


/* Apparition au défilement : la page est COMPLÈTE sans script ; le script ajoute .js puis .vu */
.js .rv{opacity:0;translate:0 26px;transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}

.js .rv.vu{opacity:1;translate:none}

.js .rv-z{opacity:0;scale:.95;transition:opacity .8s var(--ease),scale .8s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}

.js .rv-z.vu{opacity:1;scale:1}

.js .trace{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);transition:stroke-dashoffset 1.7s var(--ease)}

.js .trace.vu{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){

  html{scroll-behavior:auto}

  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}

  .js .rv,.js .rv-z{opacity:1!important;translate:none!important;scale:1!important}

  .js .trace{stroke-dashoffset:0!important}
}

/* LA PAGE, ET PAS SEULEMENT SON BLOC (ajouté au portage).
   La maquette vit dans un cadre posé sur la toile du Studio ; une page web n'a
   pas de toile. Sans ces deux lignes, `body` reste sans fond ni police : le
   rebond de défilement découvre du blanc sous une page noire, et tout texte qui
   sortirait du bloc tomberait en Times New Roman. */
html{background:#0E0E0D;color-scheme:dark}
body{background:#0E0E0D;color:#F0EEE7;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;margin:0}

/* ——— Le bandeau de consentement ———
 * Sa feuille (`css/consentement.css`) est écrite dans l'ancien
 * vocabulaire. Ce bloc le lui rend, CALCULÉ par
 * `site/vitrine/porter-pages.py` depuis ce qu'elle lit vraiment :
 * sans lui, le bandeau sort en texte nu sur les quarante-cinq
 * pages intérieures. Les règles de page redéfinissent `--accent`
 * sur `#page`, plus spécifique : elles gagnent, comme avant.
 */
:root {
  --accent: var(--bleu-nexus);
  --accent-deep: var(--bleu-profond);
  --accent-text: var(--bleu-glacier);
  --accent-night: var(--bleu-nuit);
  --bg-overlay: var(--releve);
  --bg-panel: var(--panneau);
  --bg-raised: var(--graphite);
  --bg-base: var(--fond);
  --border: var(--filet);
  --ok: var(--vert-valide);
  --signal: var(--orange-signal);
  --text-primary: var(--craie);
  --text-secondary: var(--gris-chaud);
  --text-tertiary: var(--gris-cendre);
  --text-faint: var(--gris-fumee);
  --font-sans: var(--f-titre);
  --font-mono: var(--f-mono);
}