@charset "utf-8";
/* =========================================================================
   Response8 — feuille de style unique, partagée par les vingt et une pages.
   Une couleur, une taille, une respiration : chacune n'est écrite qu'ici.

   Le site est bleu nuit en toutes circonstances : le jeu de couleurs est
   déclaré une seule fois, sur :root, et rien ne vient le redéfinir. Le 8
   garde son rouge et son orange — c'est la seule chaleur de la page, et
   c'est pour cela qu'on la voit.
   ========================================================================= */

/* ------------------------------------------------------- 1. les jetons ---
   Les bleus sont ceux du lapis : #3D7FC1 et ses nuits. Aucune couleur ne
   naît ailleurs qu'ici ; partout ailleurs on appelle un nom. */
:root{
  color-scheme: dark;

  /* encres */
  --ink:#C3CEDD;            /* le blanc du texte : bleuté, et tenu loin du blanc pur */
  --ink-2:#AEBBCC;
  --gris:#94A5BB;           /* 7,3:1 sur le fond : lisible en texte courant */
  --gris-2:#75879F;

  /* les nuits, de la plus profonde à la plus claire */
  --nuit:#06101E;           /* les sections profondes et le pied */
  --fond:#0B1626;           /* la page */
  --fond-2:#101F35;
  --bande-panneau:#13233A;
  --carte:#16273F;
  --carte-2:#1C3252;

  /* traits */
  --trait:#1F3452;
  --trait-fort:#3A5A85;
  --trait-champ:#53769F;   /* le bord des champs : 3,2:1, comme l'exige la norme */

  /* les bleus */
  --bleu:#3D7FC1;           /* le lapis : les aplats, jamais du petit texte */
  --bleu-clair:#6BA3DC;     /* 6,9:1 sur le fond : le bleu qui porte du texte */
  --bleu-fonce:#2B6099;
  --bleu-profond:#1E4A80;
  --bleu-pale:#16304F;      /* le fond des pastilles et des survols */

  /* les chaleurs — celles du 8, et rien d'autre */
  --orange:#B04E14;         /* filets, pictogrammes, grands caractères */
  --orange-clair:#BE8150;   /* 5,6:1 sur le fond : l'accent chaud en texte */
  --orange-pale:#26190F;
  --rouge-8:#C2142A;        /* réservé au logo et à ce qui le prolonge */
  --vert:#5FD39A;           /* l'état « up » d'une console, et rien d'autre */

  /* rôles */
  --accent:var(--bleu-clair);
  --accent-plein:var(--bleu);
  --accent-vif:var(--orange-clair);
  --sur-accent:#040D18;     /* ce qui s'écrit sur un aplat de lapis : 4,7:1 */
  --sur-nuit:var(--ink);
  --sur-nuit-2:var(--gris);
  --sur-nuit-chaud:var(--orange-clair);  /* l'accent chaud sur une bande nuit */
  --sur-nuit-bleu:var(--bleu-clair);     /* le bleu sur une bande nuit */
  --panneau-nuit:#16273F;                /* la barre des consoles, nuit dans les deux thèmes */

  --ombre:0 1px 2px rgba(2,6,12,.5), 0 10px 30px -16px rgba(2,6,12,.75);
  --ombre-haute:0 2px 4px rgba(2,6,12,.55), 0 22px 46px -22px rgba(2,6,12,.85);

  --r:14px;
  --r-s:9px;
  --r-l:24px;
  --gouttiere:clamp(18px, 4vw, 40px);
  --large:1180px;
  --prose:66ch;
}

/* ------------------------------------------- 1 bis. le jeu clair ---------
   Le même site, en clair. Ce sont les mêmes noms, redéfinis une fois : rien
   d'autre dans la feuille ne connaît le thème. Les bandes profondes, le pied
   et les consoles restent nuit dans les deux jeux — c'est voulu, et c'est
   pourquoi les rôles « sur-nuit » existent. */
:root[data-theme="light"]{
  color-scheme: light;

  /* Pourquoi ce clair n'est pas blanc : une page blanche sous un texte
     presque noir, c'est un phare braqué sur l'œil — 15:1 de contraste et
     une luminance de 0,93 sur toute la surface. On a donc baissé la
     lumière du papier, supprimé le blanc pur des cartes, et détendu
     l'encre. Tout reste au-dessus des seuils de lisibilité ; rien ne
     brûle plus. */

  /* encres — plus douces qu'un noir d'imprimerie */
  --ink:#263446;            /* 10,1:1 sur la page, au lieu de 15:1 */
  --ink-2:#3C4C61;
  --gris:#516275;           /* 5,0:1 sur la page */
  --gris-2:#6B7E94;

  /* fonds — la lumière baissée d'un dixième, et plus de blanc pur */
  --nuit:#0B1626;           /* inchangé : les sections profondes restent nuit */
  --fond:#DFE6F0;           /* luminance 0,79 au lieu de 0,93 */
  --fond-2:#D4DDEA;
  --bande-panneau:#ECF1F8;
  --carte:#ECF1F8;          /* 0,88 au lieu de 1,00 : le blanc pur a disparu */
  --carte-2:#E3EAF4;

  /* traits — le papier ayant baissé, ils remontent pour rester visibles */
  --trait:#C3D1E3;
  --trait-fort:#8AA1BD;
  --trait-champ:#647C99;

  /* les bleus : plus profonds, puisqu'ils s'écrivent sur du clair */
  --bleu:#1E5A96;           /* les aplats, avec du blanc dessus : 6,7:1 */
  --bleu-clair:#1B4F86;     /* 6,9:1 sur la page : les liens, le texte bleu */
  --bleu-fonce:#153F6B;
  --bleu-profond:#12365E;
  --bleu-pale:#D3E0F2;

  /* les chaleurs */
  --orange:#9A430D;
  --orange-clair:#A8490F;   /* 4,6:1 sur la page */
  --orange-pale:#F3E5DA;
  --rouge-8:#C2142A;
  --vert:#0C6B43;           /* 5,2:1 : le vert tenait à peine, il a foncé */

  /* rôles */
  --accent:var(--bleu-clair);
  --accent-plein:var(--bleu);
  --accent-vif:var(--orange-clair);
  --sur-accent:#F4F8FD;     /* même sur un aplat de lapis, pas de blanc pur */
  --sur-nuit:#EDF2F9;       /* ce qui s'écrit sur les bandes restées nuit */
  --sur-nuit-2:#A9BACE;
  --sur-nuit-chaud:#D89A62;
  --sur-nuit-bleu:#8FBBE6;

  --ombre:0 1px 2px rgba(21,34,50,.07), 0 10px 30px -16px rgba(21,34,50,.26);
  --ombre-haute:0 2px 4px rgba(21,34,50,.09), 0 22px 46px -22px rgba(21,34,50,.32);
}

/* ------------------------------------------------------ 2. les bases ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--fond);
  color:var(--ink);
  font:400 17px/1.65 "IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent-vif); outline-offset:3px; border-radius:4px}
h1,h2,h3,h4{
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-weight:600; line-height:1.14; letter-spacing:-.018em;
  text-wrap:balance; margin:0;
}
p,ul,ol{margin:0}
ul,ol{padding-left:1.25em}
strong{font-weight:600; color:var(--ink)}
hr{border:0; border-top:1px solid var(--trait); margin:0}

/* ------------------------------------------------- 3. la trame commune --- */
.enveloppe{width:100%; max-width:var(--large); margin-inline:auto; padding-inline:var(--gouttiere)}
.bande{padding-block:clamp(56px, 8vw, 104px)}
.bande--serree{padding-block:clamp(40px, 5vw, 64px)}
.bande--brume{background:var(--fond-2)}
.bande--panneau{background:var(--bande-panneau)}
.bande--nuit{background:var(--nuit); color:var(--sur-nuit)}
.bande--nuit h1,.bande--nuit h2,.bande--nuit h3{color:var(--sur-nuit)}
.bande--nuit p{color:var(--sur-nuit-2)}
.bande--nuit a{color:var(--sur-nuit-chaud)}
.bande + .bande--brume, .bande--brume + .bande{border-top:1px solid var(--trait)}

.pile{display:flex; flex-direction:column; gap:clamp(14px,2vw,20px)}
.pile--large{gap:clamp(24px,3.4vw,40px)}

/* l'œil-de-bœuf : une étiquette en capitales, dans la fonte à chasse fixe */
.oeil{
  display:inline-flex; align-items:center; gap:.6em;
  font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.oeil::before{content:""; width:22px; height:2px; background:var(--accent-vif); border-radius:2px}
.bande--nuit .oeil{color:var(--sur-nuit-chaud)}
.bande--nuit .oeil::before{background:var(--sur-nuit-chaud)}

.titre-2{font-size:clamp(28px, 3.6vw, 42px)}
.titre-3{font-size:clamp(21px, 2.1vw, 25px)}
.chapo{font-size:clamp(17px,1.35vw,19.5px); color:var(--gris); max-width:var(--prose)}
.bande--nuit .chapo{color:var(--sur-nuit-2)}
.prose{max-width:var(--prose); color:var(--ink-2)}
.prose p + p{margin-top:.9em}

/* le repère : ce qui reste à remplir, visible et non honteux */
.repere{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.92em;
  color:var(--accent-vif); background:var(--orange-pale);
  padding:.1em .45em; border-radius:5px;
  border-bottom:2px dotted currentColor;
}
.bande--nuit .repere{background:rgba(190,129,80,.20); color:var(--sur-nuit-chaud)}

/* ---------------------------------------------------- 4. les boutons ----- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:600 16px/1 "Sora",system-ui,sans-serif; letter-spacing:-.01em;
  padding:15px 24px; border-radius:var(--r-s); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .14s, box-shadow .14s, background .14s;
}
.bouton:hover{transform:translateY(-2px)}
.bouton--plein{background:var(--bleu); color:var(--sur-accent); box-shadow:var(--ombre)}
.bouton--plein:hover{background:var(--bleu-clair); box-shadow:var(--ombre-haute)}
.bouton--creux{background:transparent; color:var(--accent); border-color:var(--trait-fort)}
.bouton--creux:hover{border-color:var(--accent); background:var(--carte)}
.bande--nuit .bouton--creux,
.porte--sombre .bouton--creux,
.une--nuit .bouton--creux{color:var(--sur-nuit); border-color:rgba(190,214,240,.34)}
.bande--nuit .bouton--creux:hover,
.porte--sombre .bouton--creux:hover,
.une--nuit .bouton--creux:hover{border-color:var(--sur-nuit-chaud); background:rgba(125,170,220,.10)}
.bande--nuit .bouton--plein{background:var(--sur-nuit-chaud); color:#190C02}
.bande--nuit .bouton--plein:hover{background:var(--sur-nuit-chaud)}
.boutons{display:flex; flex-wrap:wrap; gap:12px}

.lien-fleche{
  display:inline-flex; align-items:center; gap:.45em; font-weight:600;
  text-decoration:none; font-family:"Sora",system-ui,sans-serif; font-size:15.5px;
}
.lien-fleche::after{content:"→"; transition:transform .16s}
.lien-fleche:hover::after{transform:translateX(4px)}
.lien-fleche:hover{text-decoration:underline; text-underline-offset:4px}

/* ------------------------------------------------------ 5. l'en-tête ----- */
.entete{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:color-mix(in srgb, var(--fond) 55%, transparent);   /* 45 % de transparence */
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--trait);
}
.entete__rang{display:flex; align-items:center; gap:14px 18px; min-height:84px}
.marque{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.marque svg{width:46px; height:46px; display:block}
.marque__bloc{display:flex; flex-direction:column; gap:5px}
.marque__mot{font:700 30px/1 "Sora",system-ui,sans-serif; letter-spacing:-.03em}
.marque__mot i{font-style:normal; color:var(--accent-vif)}
/* La devise, sous le nom. Elle emprunte le monospace des yeux de section :
   c'est la voix technique de la maison, et elle ne concurrence pas le nom. */
.marque__devise{
  font:500 12.5px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.115em; text-transform:uppercase; color:var(--gris);
}
/* Sous 980 px l'en-tête se resserre : le nom suffit, la devise reste au pied. */
@media (max-width:980px){.entete .marque__devise{display:none}}

.nav{display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:wrap}
.nav a{
  font:500 15px/1 "Sora",system-ui,sans-serif; color:var(--ink-2);
  text-decoration:none; padding:10px 12px; border-radius:var(--r-s); white-space:nowrap;
}
.nav a:hover{background:var(--bleu-pale); color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent); background:var(--bleu-pale)}
.entete__fin{display:flex; align-items:center; gap:10px; margin-left:6px}

/* le bouton du thème : un soleil quand on est dans la nuit, une lune quand
   on est dans le jour. Sans JavaScript il ne paraît pas du tout. */
.theme{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-s);
  color:var(--gris); cursor:pointer; flex:0 0 auto;
}
html.js .theme{display:inline-flex}
.theme:hover{color:var(--accent); border-color:var(--trait-fort)}
.theme svg{width:19px; height:19px}
.theme__lune{display:none}
:root[data-theme="light"] .theme__soleil{display:none}
:root[data-theme="light"] .theme__lune{display:block}

/* le sélecteur de langue */
.langues{display:flex; gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:var(--r-s); overflow:hidden}
.langues a{
  font:600 12.5px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 9px; background:var(--carte); color:var(--gris); text-decoration:none;
}
.langues a:hover{color:var(--accent); background:var(--bleu-pale)}
.langues a[aria-current="true"]{background:var(--bleu); color:var(--sur-accent)}

@media (max-width:640px){
  .entete{position:static}
  .marque{padding-block:10px}
  .marque__mot{font-size:24px}
  .marque svg{width:38px; height:38px}
  .marque__devise{font-size:12px}
}

/* -------------------------------------------------------- 6. la une ----- */
.une{
  position:relative; overflow:hidden;
  padding-block:clamp(52px,7vw,92px) clamp(48px,6vw,80px);
  background:radial-gradient(120% 115% at 50% 0%, var(--bleu-pale) 0%, var(--fond) 62%);
}
.une--nuit{
  background:radial-gradient(120% 115% at 50% 0%, var(--bleu-profond) 0%, var(--nuit) 60%);
  color:var(--sur-nuit);
}
.une--nuit h1{color:var(--sur-nuit)}
.une--nuit .chapo{color:var(--sur-nuit-2)}
.une__filigrane{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:min(520px,52vw); opacity:.13; pointer-events:none; z-index:0;
}
.une--nuit .une__filigrane{opacity:.17}
:root[data-theme="light"] .une__filigrane{opacity:.08}
:root[data-theme="light"] .une--nuit .une__filigrane{opacity:.17}
@media (max-width:760px){ .une__filigrane{display:none} }
.une__corps{position:relative; z-index:1; max-width:880px}
.une__note{font:400 15px/1.6 "IBM Plex Sans",sans-serif; color:var(--gris); max-width:52ch}
.une--nuit .une__note{color:var(--sur-nuit-2)}
.une h1{font-size:clamp(34px, 5.4vw, 60px); letter-spacing:-.03em}
.une h1 em{font-style:normal; color:var(--accent-vif)}
.une--nuit h1 em{color:var(--sur-nuit-chaud)}

/* le fil d'Ariane */
.fil{font:500 13px/1 "IBM Plex Mono",monospace; color:var(--gris); letter-spacing:.04em}
.fil a{color:var(--gris); text-decoration:none}
.fil a:hover{color:var(--accent); text-decoration:underline}
.une--nuit .fil,.une--nuit .fil a{color:var(--sur-nuit-2)}

/* --------------------------------------------------- 7. les deux portes -- */
.portes{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; position:relative}
.porte{padding:clamp(34px,4.5vw,58px) clamp(24px,3.4vw,52px); display:flex; flex-direction:column; gap:16px}
.porte--claire{background:var(--carte)}
.porte--sombre{background:var(--nuit); color:var(--sur-nuit)}
.porte--sombre h2{color:var(--sur-nuit)}
.porte--sombre p{color:var(--sur-nuit-2)}
.porte--sombre .oeil{color:var(--sur-nuit-chaud)}
.porte--sombre .oeil::before{background:var(--sur-nuit-chaud)}
.porte h2{font-size:clamp(23px,2.5vw,30px)}
.porte ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; font-size:16px}
.porte li{display:flex; gap:.6em; align-items:flex-start}
.porte li::before{content:"—"; color:var(--accent-vif); flex:0 0 auto; font-weight:600}
.porte--sombre li::before{color:var(--sur-nuit-chaud)}
.porte .boutons{margin-top:auto; padding-top:12px}
.porte__couture{
  position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--orange),var(--rouge-8)); z-index:2;
}
.porte__sceau{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; background:var(--fond-2); border-radius:50%;
  display:grid; place-items:center; z-index:3; box-shadow:var(--ombre);
  border:2px solid var(--trait-fort);
}
.porte__sceau svg{width:34px; height:34px}
@media (max-width:820px){
  .portes{grid-template-columns:1fr}
  .porte__couture{left:0; right:0; top:50%; bottom:auto; width:auto; height:3px; transform:none;
    background:linear-gradient(90deg,var(--orange),var(--rouge-8))}
  .porte__sceau{display:none}
}

/* ------------------------------------------------------ 8. les cartes --- */
.grille{display:grid; gap:clamp(14px,1.8vw,22px)}
.grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .grille--3,.grille--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:660px){ .grille--2,.grille--3,.grille--4{grid-template-columns:1fr} }

.carte{
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  padding:clamp(20px,2.2vw,26px); display:flex; flex-direction:column; gap:10px;
}
.carte__tag{font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bleu-clair)}
.carte h3{font-size:19.5px}
.carte p{color:var(--gris); font-size:15.8px}
.carte__signe{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--bleu-pale); color:var(--accent); margin-bottom:2px; flex:0 0 auto;
}
.carte__signe svg{width:22px; height:22px}
.carte--maitresse{
  border-color:var(--trait-fort); box-shadow:var(--ombre);
  background:linear-gradient(180deg,var(--carte),var(--carte-2));
}
.carte--maitresse .carte__signe{background:var(--bleu); color:var(--sur-accent)}
.carte--maitresse .lien-fleche{margin-top:auto; padding-top:8px}
.carte--future{border-style:dashed; background:transparent; border-color:var(--trait-fort)}
.carte--future h3{color:var(--gris)}
.bande--nuit .carte{background:rgba(125,170,220,.07); border-color:rgba(190,214,240,.15)}
.bande--nuit .carte h3{color:var(--sur-nuit)}
.bande--nuit .carte p{color:var(--sur-nuit-2)}
.bande--nuit .carte__signe{background:rgba(125,170,220,.14); color:var(--sur-nuit-bleu)}

/* la liste sèche : ce qui est couvert, sans emphase */
.liste-plate{list-style:none; padding:0; display:grid; gap:9px 22px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:660px){ .liste-plate{grid-template-columns:1fr} }
.liste-plate li{display:flex; gap:.6em; align-items:flex-start; font-size:16px; color:var(--ink-2)}
.liste-plate li::before{
  content:""; flex:0 0 auto; width:7px; height:7px; margin-top:.62em; border-radius:2px;
  background:var(--accent-vif);
}
.bande--nuit .liste-plate li{color:var(--sur-nuit-2)}

/* ------------------------------------------------- 9. les étapes (rang) --
   Numérotées parce que l'ordre compte vraiment : on ne diagnostique pas
   avant d'avoir pris l'appel. */
.etapes{list-style:none; padding:0; display:grid; gap:2px; counter-reset:etape}
.etape{
  display:grid; grid-template-columns:auto 1fr; gap:0 20px; align-items:start;
  padding:20px 0; border-top:1px solid var(--trait); counter-increment:etape;
}
.etape:last-child{border-bottom:1px solid var(--trait)}
.etape__n{
  grid-row:1 / span 2; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:var(--bleu-pale); color:var(--accent);
  font:600 15px/1 "IBM Plex Mono",monospace;
}
.etape__n::before{content:"0" counter(etape)}
.etape h3{font-size:18.5px; align-self:center}
.etape p{color:var(--gris); font-size:15.8px; margin-top:5px}
.bande--nuit .etape{border-color:rgba(190,214,240,.14)}
.bande--nuit .etape__n{background:rgba(125,170,220,.14); color:var(--sur-nuit-bleu)}
.bande--nuit .etape p{color:var(--sur-nuit-2)}
@media (max-width:560px){
  .etape{grid-template-columns:1fr; gap:10px}
  .etape__n{grid-row:auto; width:38px; height:38px}
}

/* ------------------------------------------------- 10. les chiffres ------ */
.chiffres{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--trait); border:1px solid var(--trait); border-radius:var(--r); overflow:hidden;
}
@media (max-width:760px){ .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chiffre{background:var(--carte); padding:22px 20px; display:flex; flex-direction:column; gap:5px}
.chiffre__val{
  font:600 clamp(26px,3vw,34px)/1 "Sora",system-ui,sans-serif;
  color:var(--accent); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.chiffre__lib{font:500 13px/1.4 "IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--gris)}
.bande--nuit .chiffres{background:rgba(190,214,240,.16); border-color:rgba(190,214,240,.16)}
.bande--nuit .chiffre{background:var(--nuit)}
.bande--nuit .chiffre__val{color:var(--sur-nuit-chaud)}
.bande--nuit .chiffre__lib{color:var(--sur-nuit-2)}

/* ------------------------------------------------- 11. les formules ------ */
.formules{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); align-items:start}
@media (max-width:900px){ .formules{grid-template-columns:1fr} }
.formule{
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:14px;
}
.formule--phare{border:2px solid var(--bleu); box-shadow:var(--ombre-haute); position:relative}
.formule__etiquette{
  position:absolute; top:-11px; left:clamp(22px,2.4vw,30px);
  background:var(--bleu); color:var(--sur-accent); border-radius:99px; padding:4px 12px;
  font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase;
}
.formule h3{font-size:21px}
.formule__prix{font:600 clamp(24px,2.6vw,30px)/1 "Sora",system-ui,sans-serif; color:var(--ink); letter-spacing:-.03em}
.formule__prix small{font:500 14px/1 "IBM Plex Sans",sans-serif; color:var(--gris); letter-spacing:0}
.formule ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15.8px; color:var(--ink-2)}
.formule li{display:flex; gap:.6em; align-items:flex-start}
.formule li::before{content:"✓"; color:var(--accent); font-weight:700; flex:0 0 auto}
.formule .bouton{margin-top:auto}

.note-fine{font-size:14.8px; color:var(--gris); max-width:var(--prose)}

/* ------------------------------------------------- 12. le bloc technique --
   Le vocabulaire du métier, écrit dans la fonte du métier. */
.technique{
  background:var(--nuit); color:var(--sur-nuit); border-radius:var(--r);
  border:1px solid var(--trait-fort);
  padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:16px;
}
.technique h3{color:var(--sur-nuit); font-size:19px}
.technique__jetons{display:flex; flex-wrap:wrap; gap:8px}
.carte__jetons{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.carte__jetons span{
  font:500 13.5px/1 "IBM Plex Mono",monospace;
  border:1px solid rgba(125,170,220,.32); border-radius:6px; padding:7px 10px;
  color:var(--bleu-clair); white-space:nowrap;
}
.technique__jetons span{
  font:500 13.5px/1 "IBM Plex Mono",monospace;
  border:1px solid rgba(125,170,220,.32); border-radius:6px; padding:7px 10px;
  color:var(--sur-nuit-bleu); white-space:nowrap;
}
.technique p{color:var(--sur-nuit-2); font-size:15.5px}

/* ------------------------------------------- 11 bis. les fiches ----------
   Les ingénieurs disponibles et les missions ouvertes : une même fiche, deux
   tableaux. Celles qui portent encore un exemple sont en pointillés. */
/* Le tamis : la barre qui filtre les fiches. Un champ, une liste, un bouton.
   Tout se fait en GET, côté serveur : la recherche d'un visiteur tient donc
   dans l'adresse, elle se met en favori et se renvoie par courriel. Sans
   JavaScript, elle marche pareil. */
.tamis{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 14px;
  padding-bottom:clamp(18px,2vw,26px); border-bottom:1px solid var(--trait);
}
.tamis__champ{display:flex; flex-direction:column; gap:6px; flex:1 1 200px; max-width:320px}
.tamis__nom{
  font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
}
.tamis input,.tamis select{
  font:400 16px/1.4 "IBM Plex Sans",sans-serif; color:var(--ink);
  background:var(--carte); border:1px solid var(--trait-champ);
  border-radius:var(--r-s); padding:11px 13px; width:100%;
}
.tamis .bouton{flex:0 0 auto}
.tamis__vider{font-size:15px; color:var(--accent); align-self:center}
.tamis__compte{
  font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gris);
}

.fiches{display:grid; gap:clamp(14px,1.8vw,22px); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){ .fiches{grid-template-columns:1fr} }
.fiche{
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; gap:11px;
}
.fiche--exemple{border-style:dashed; border-color:var(--trait-fort); background:transparent}
.fiche__haut{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fiche__ref{
  font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.1em;
  color:var(--bleu-clair); background:var(--bleu-pale); border-radius:5px; padding:5px 9px;
}
.fiche__exemple{
  font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange-clair); border:1px solid var(--trait-fort); border-radius:99px; padding:4px 9px;
}
.fiche__etat{
  margin-left:auto; font:500 12.5px/1.4 "IBM Plex Mono",monospace;
  color:var(--orange-clair); text-align:right;
}
.fiche h3{font-size:19px}
.fiche__ligne{color:var(--gris); font-size:15.5px}
.fiche__faits{
  display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:2px 0 0;
  font-size:15.2px; align-items:baseline;
}
.fiche__faits dt{
  font:600 12px/1.6 "IBM Plex Mono",monospace; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gris); margin:0;
}
.fiche__faits dd{color:var(--ink-2); margin:0}
.fiche .lien-fleche{margin-top:auto; padding-top:8px}

/* ------------------------------------------- 12 bis. la console ----------
   L'objet même du labo : une console de routeur, dans un onglet. Mêmes
   jetons que le reste du site — rien n'y est écrit en dur sauf le vert. */
.console{
  background:var(--nuit); border:1px solid var(--trait-fort);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre-haute);
}
.console__barre{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--panneau-nuit); border-bottom:1px solid rgba(190,214,240,.14);
}
.console__point{width:10px; height:10px; border-radius:50%; background:rgba(190,214,240,.26)}
.console__nom{margin-left:6px; font:400 12.5px/1 "IBM Plex Mono",monospace; color:var(--sur-nuit-2)}
.console__etat{
  margin-left:auto; font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.06em;
  color:#5FD39A; background:rgba(95,211,154,.12);
  border:1px solid rgba(95,211,154,.32); padding:4px 10px; border-radius:999px;
}
.console__corps{
  padding:16px; font:400 13px/1.75 "IBM Plex Mono",ui-monospace,monospace;
  color:var(--sur-nuit); overflow-x:auto;
}
.console__corps pre{margin:0; font:inherit}
.console .invite{color:var(--sur-nuit-bleu); font-weight:600}
.console .colonnes{color:var(--sur-nuit-2)}
.console .actif{color:#5FD39A}
.console__curseur{
  display:inline-block; width:8px; height:1em; vertical-align:-2px;
  background:var(--sur-nuit-chaud); animation:clignote 1.15s steps(1) infinite;
}
@keyframes clignote{50%{opacity:0}}
.console__topo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid rgba(190,214,240,.14); background:var(--panneau-nuit);
  font:400 12px/1.6 "IBM Plex Mono",monospace; color:var(--sur-nuit-2);
}
.console__noeud{
  border:1px solid var(--sur-nuit-bleu); color:var(--sur-nuit-bleu); border-radius:999px;
  padding:3px 11px; font-weight:600;
}
.console__fil{flex:0 0 18px; height:1px; background:rgba(190,214,240,.28)}
.console__topo-mot{margin-left:auto}

/* ------------------------------------------- 12 ter. les limites ---------
   Ce qu'un labo partagé ne fait pas, annoncé d'avance. */
.limites{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 34px}
@media (max-width:760px){ .limites{grid-template-columns:1fr} }
.limite{display:flex; gap:13px; align-items:flex-start}
.limite__cle{
  font:600 12px/1.5 "IBM Plex Mono",monospace; color:var(--sur-nuit-chaud);
  border:1px solid rgba(190,214,240,.28); border-radius:5px; padding:3px 8px; flex:0 0 auto;
}
.limite p{font-size:15.8px; color:var(--gris)}
.bande--nuit .limite p{color:var(--sur-nuit-2)}
.limite strong{color:var(--sur-nuit); font-weight:600}

/* ------------------------------------------------- 13. questions ---------- */
.question{border-top:1px solid var(--trait); padding:18px 0}
.question:last-of-type{border-bottom:1px solid var(--trait)}
.question summary{
  font:600 17.5px/1.4 "Sora",system-ui,sans-serif; cursor:pointer; list-style:none;
  display:flex; gap:14px; align-items:baseline; color:var(--ink);
}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+"; margin-left:auto; color:var(--accent); font-weight:600; font-size:22px; line-height:1}
.question[open] summary::after{content:"–"}
.question p{color:var(--gris); font-size:16px; margin-top:10px; max-width:var(--prose)}

/* ------------------------------------------------- 14. le formulaire ----- */
.form{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:660px){ .form{grid-template-columns:1fr} }
.champ{display:flex; flex-direction:column; gap:6px}
.champ--long{grid-column:1 / -1}
.champ label{font:600 13.5px/1 "IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--gris)}
.champ input,.champ select,.champ textarea{
  font:400 16.5px/1.5 "IBM Plex Sans",sans-serif; color:var(--ink);
  background:var(--carte); border:1px solid var(--trait-champ); border-radius:var(--r-s);
  padding:13px 14px; width:100%;
}
.champ textarea{min-height:140px; resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--bleu-pale)}
.form__note{grid-column:1 / -1; font-size:14.5px; color:var(--gris)}
/* Le champ-piège : invisible pour une personne, tentant pour un robot.
   Ce qui le remplit n'est pas humain, et l'envoi est refusé. */
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* La case d'accord : une vraie phrase, pas une étiquette en capitales. */
.accord,.champ .accord{
  display:flex; gap:11px; align-items:flex-start;
  font:400 15.5px/1.55 "IBM Plex Sans",sans-serif; letter-spacing:0;
  text-transform:none; color:var(--ink-2); cursor:pointer;
}
.accord input{width:18px; height:18px; margin-top:3px; flex:0 0 auto; accent-color:var(--bleu)}
/* Plusieurs cases côte à côte : le matériel concerné, les données. */
.cases{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px 18px}
.form .bouton{grid-column:1 / -1; justify-self:start}

/* les moyens de contact, en vis-à-vis du formulaire */
.moyens{display:flex; flex-direction:column; gap:2px}
.moyen{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--trait); align-items:flex-start}
.moyen:last-child{border-bottom:1px solid var(--trait)}
.moyen__signe{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--bleu-pale); color:var(--accent);
}
.moyen__signe svg{width:20px; height:20px}
.moyen__lib{font:600 13px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); display:block; margin-bottom:5px}
.moyen__val{font-size:17.5px; font-weight:500}
.moyen__val a{text-decoration:none}
.moyen__val a:hover{text-decoration:underline}
.moyen small{display:block; color:var(--gris); font-size:14.5px; margin-top:3px}

/* ------------------------------------------------- 15. l'appel final ----- */
.appel{
  background:linear-gradient(135deg,var(--nuit),var(--bleu-profond) 55%,var(--bleu-fonce));
  color:#D5E1F0; border-radius:var(--r-l); padding:clamp(30px,4vw,54px);
  border:1px solid var(--trait-fort);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  position:relative; overflow:hidden;
}
.appel__corps{position:relative; z-index:1; max-width:56ch; display:flex; flex-direction:column; gap:10px}
.appel h2{color:#DCE7F4; font-size:clamp(24px,2.9vw,34px)}
.appel p{color:#AFC6E0}
.appel .boutons{position:relative; z-index:1}
.appel .bouton--plein{background:#DCE7F3; color:var(--bleu-profond)}
.appel .bouton--plein:hover{background:#C8DCF0}
.appel .bouton--creux{color:#D5E1F0; border-color:rgba(213,225,240,.40)}
.appel .bouton--creux:hover{border-color:#D5E1F0; background:rgba(213,225,240,.12)}
.appel__filigrane{position:absolute; right:-40px; bottom:-60px; width:300px; opacity:.16; z-index:0; pointer-events:none}

/* ------------------------------------------------- 16. le pied ----------- */
.pied{background:var(--nuit); color:var(--sur-nuit-2); border-top:1px solid rgba(190,214,240,.14);
  padding-block:clamp(44px,5vw,64px) 28px}
.pied a{color:var(--sur-nuit-2); text-decoration:none}
.pied a:hover{color:var(--sur-nuit-chaud); text-decoration:underline}
.pied__haut{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px 24px}
@media (max-width:900px){ .pied__haut{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pied__haut{grid-template-columns:1fr} }
.pied__bloc{display:flex; flex-direction:column; gap:11px}
.pied__bloc--joindre{gap:13px}
.pied__bouton{align-self:flex-start; padding:12px 20px; font-size:15px; margin-top:3px}
.pied a.bouton--plein, .pied a.bouton--plein:hover{color:var(--sur-accent); text-decoration:none}
.pied__bloc h3{font:600 12.5px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--sur-nuit-chaud)}
.pied__bloc ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15.5px}
.pied .marque{color:var(--sur-nuit)}
.pied .marque__mot{color:var(--sur-nuit)}
.pied .marque__devise{color:var(--sur-nuit-chaud); font-size:13px}
.pied__mot{font-size:15.5px; color:var(--sur-nuit-2); max-width:34ch}
.pied__bas{
  margin-top:34px; padding-top:20px; border-top:1px solid rgba(190,214,240,.16);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center;
  font:400 14px/1.5 "IBM Plex Sans",sans-serif; color:var(--sur-nuit-2);
}
.pied__bas .repere{background:rgba(190,129,80,.14); color:var(--sur-nuit-chaud)}
.pied__langues{display:flex; gap:14px; font:500 13px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase}

/* ------------------------------------------------- 17. divers ------------ */
.saut{position:absolute; left:-9999px; top:0}
.saut:focus{
  left:12px; top:12px; z-index:100; position:fixed; background:var(--bleu); color:var(--sur-accent);
  padding:12px 18px; border-radius:var(--r-s); font:600 15px/1 "Sora",sans-serif; text-decoration:none;
}
.deux-colonnes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start}
@media (max-width:860px){ .deux-colonnes{grid-template-columns:1fr} }
.deux-colonnes--large-gauche{grid-template-columns:1.25fr 1fr}
@media (max-width:860px){ .deux-colonnes--large-gauche{grid-template-columns:1fr} }

/* Le sceau de la page « à propos » : le 8 en grand, la devise dessous. */
.sceau{display:flex; flex-direction:column; align-items:center; gap:18px;
  width:min(300px,70%); margin-inline:auto}
.sceau .une__filigrane{width:100%}
.sceau__devise{
  font:500 12.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent-vif);
  text-align:center;
}
.bande--nuit .sceau__devise{color:var(--sur-nuit-chaud)}
.encadre{
  background:var(--fond-2); border-left:3px solid var(--accent-vif); border-radius:0 var(--r-s) var(--r-s) 0;
  padding:18px 22px; font-size:16px; color:var(--ink-2);
}
.bande--nuit .encadre{background:rgba(125,170,220,.08); color:var(--sur-nuit-2)}
.tableau-identite{width:100%; border-collapse:collapse; font-size:16px}
.tableau-identite th,.tableau-identite td{text-align:left; padding:12px 0; border-top:1px solid var(--trait); vertical-align:top}
.tableau-identite th{font:600 13px/1.5 "IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); width:42%; padding-right:18px}
.defile{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ------------------------------------------- 15. la souscription au labo --
   Un parcours de caisse : les étapes en haut, le formulaire à gauche, le
   récapitulatif à droite, qui reste sous les yeux pendant qu'on remplit. */
.etapes{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px 28px; counter-reset:pas}
.etapes__pas:not([hidden]){counter-increment:pas}
.etapes__num::before{content:counter(pas)}
.etapes__pas{display:flex; align-items:center; gap:10px; color:var(--gris); font:500 14.5px/1.3 "IBM Plex Sans",sans-serif}
.etapes__pas[hidden]{display:none}
.etapes__num{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  border:1.5px solid var(--trait-fort); font:600 13px/1 "IBM Plex Mono",monospace; color:var(--gris);
}
.etapes__pas--ici{color:var(--ink); font-weight:600}
.etapes__pas--ici .etapes__num{background:var(--bleu); border-color:var(--bleu); color:var(--sur-accent)}
.etapes__pas--fait .etapes__num{border-color:var(--accent); color:var(--accent)}
.etapes__pas + .etapes__pas::before{content:""; width:22px; height:1.5px; background:var(--trait-fort); margin-right:6px}

.souscription__grille{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:clamp(22px,3vw,40px); align-items:start}
@media (max-width:900px){ .souscription__grille{grid-template-columns:1fr} }
.souscription__corps{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,26px); min-width:0}
.souscription__cote{position:sticky; top:24px; display:flex; flex-direction:column; gap:16px}
@media (max-width:900px){ .souscription__cote{position:static} }
.souscription__deja{color:var(--gris); font-size:15.5px}

.bloc{
  border:1px solid var(--trait); border-radius:var(--r); background:var(--fond-2);
  padding:clamp(18px,2.4vw,28px); margin:0; min-width:0;
}
.bloc__titre{
  display:flex; align-items:center; gap:12px; padding:0; margin-bottom:18px; float:left; width:100%;
  font:600 18.5px/1.3 "Sora",system-ui,sans-serif; color:var(--ink);
}
.bloc__titre + *{clear:both}
.bloc__num{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--bleu-pale); color:var(--accent); font:600 13px/1 "IBM Plex Mono",monospace;
}

/* les formules, en cartes à cocher */
.offres{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; padding-top:12px}
.offre{
  position:relative; display:flex; flex-direction:column; gap:6px; cursor:pointer;
  background:var(--carte); border:1.5px solid var(--trait-fort); border-radius:var(--r);
  padding:18px 18px 16px; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.offre:hover{border-color:var(--accent)}
.offre input{position:absolute; opacity:0; pointer-events:none}
.offre::after{
  content:""; position:absolute; top:16px; right:16px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--trait-champ); background:var(--fond);
}
.offre:has(input:checked){border-color:var(--bleu); box-shadow:0 0 0 1px var(--bleu), var(--ombre)}
.offre:has(input:checked)::after{border:5px solid var(--bleu); background:var(--sur-accent)}
.offre:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:3px}
.offre--fermee{cursor:not-allowed; opacity:.55}
.offre--fermee:hover{border-color:var(--trait-fort)}
.offre__badge{
  position:absolute; top:-10px; left:16px; background:var(--bleu); color:var(--sur-accent);
  border-radius:99px; padding:4px 10px; font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase;
}
.offre__badge--calme{background:var(--carte-2); color:var(--gris)}
.offre__nom{font:600 16.5px/1.3 "Sora",system-ui,sans-serif; color:var(--ink); padding-right:26px}
.offre__prix{font:600 30px/1.05 "Sora",system-ui,sans-serif; color:var(--ink); letter-spacing:-.03em; margin-top:4px; white-space:nowrap}
.offre__periode{font-size:14px; color:var(--gris); margin-bottom:8px}
.offre__ligne{font-size:14.5px; line-height:1.45; color:var(--ink-2); display:flex; gap:.5em}
.offre__ligne::before{content:"✓"; color:var(--accent); font-weight:700}

/* le mot de passe : bouton « afficher » et vérifications en direct */
.champ__mot{position:relative; display:block}
.champ__mot input{padding-right:52px; width:100%}
.voir-mdp{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  background:transparent; border:0; border-radius:8px; padding:0; cursor:pointer; color:var(--gris);
}
.voir-mdp:hover{color:var(--ink); background:var(--bleu-pale)}
.voir-mdp:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; color:var(--ink)}
.voir-mdp[aria-pressed="true"]{color:var(--accent)}
.voir-mdp svg{display:block; pointer-events:none}
input::-ms-reveal, input::-ms-clear{display:none}
.champ__aide{font-size:14px; color:var(--gris)}
.champ input[aria-invalid="true"]{border-color:var(--orange-clair); box-shadow:0 0 0 3px var(--orange-pale)}
.verifs{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px; font-size:14.5px; color:var(--gris)}
.verifs li{display:flex; gap:.5em; align-items:center}
.verifs li::before{content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--gris-2)}
.verifs li.ok{color:var(--ink-2)}
.verifs li.ok::before{content:"✓"; width:auto; height:auto; border:0; color:var(--vert); font-weight:700; font-size:13px; line-height:1}
.accord--erreur{color:var(--orange-clair)}
.accord--erreur input{outline:2px solid var(--orange-clair); outline-offset:2px}
.accord[hidden]{display:none}

/* le récapitulatif */
.recap{
  background:var(--carte); border:1px solid var(--trait-fort); border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; gap:16px; box-shadow:var(--ombre);
}
.recap__titre{font:600 13px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--gris)}
.recap__lignes{display:flex; flex-direction:column; gap:10px; margin:0}
.recap__lignes div{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:15px; line-height:1.45}
.recap__lignes dt{color:var(--gris); flex:0 0 auto}
.recap__lignes dd{margin:0; color:var(--ink); text-align:right}
.recap__total{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  border-top:1px solid var(--trait); padding-top:16px;
}
.recap__total span{display:flex; flex-direction:column; gap:4px; font-weight:600; color:var(--ink)}
.recap__total small{font-weight:400; font-size:13px; color:var(--gris)}
.recap__total strong{font:600 28px/1 "Sora",system-ui,sans-serif; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.recap__note{font-size:14px; line-height:1.55; color:var(--gris)}
.recap__bouton{width:100%; justify-content:center; text-align:center; line-height:1.3; padding-block:16px}
.recap__bouton[aria-busy="true"]{opacity:.75; cursor:progress}
.recap__sur{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; color:var(--gris)}
.recap__sur svg{width:15px; height:15px; color:var(--vert)}
.recap__sur[hidden]{display:none}
.confiance{list-style:none; padding:0 4px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; color:var(--ink-2)}
.confiance li{display:flex; gap:.6em}
.confiance li::before{content:"✓"; color:var(--accent); font-weight:700}

.encadre--erreur{border-left-color:var(--orange-clair)}
.encadre--erreur ul{margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
.encadre--erreur:focus{outline:none}

/* le tableau de bord de l'abonné */
.pastille{display:inline-flex; align-items:center; gap:7px; border-radius:99px; padding:5px 12px; font:600 13px/1 "IBM Plex Sans",sans-serif; background:var(--carte-2); color:var(--ink-2)}
.pastille::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gris-2)}
.pastille--ouvert::before{background:var(--vert)}
.pastille--attente::before{background:var(--orange-clair)}
.attente{display:flex; align-items:center; gap:14px; color:var(--gris)}
.attente::before{
  content:""; width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  border:2.5px solid var(--trait-fort); border-top-color:var(--accent); animation:tourne 1s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .attente::before{animation:none} }
@media (max-width:560px){ .etapes{flex-direction:column; gap:10px} .etapes__pas + .etapes__pas::before{display:none} }

/* ------------------------------------------------ 16. le catalogue des labs */
.envs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .envs{grid-template-columns:1fr} }
.env{position:relative; display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:var(--r); background:var(--carte); border:1.5px solid var(--trait-fort)}
.env--choisi{border-color:var(--bleu); box-shadow:0 0 0 1px var(--bleu), var(--ombre)}
.env--bientot{border-style:dashed; background:var(--fond-2)}
.env__etat{align-self:flex-start; font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:99px; background:var(--carte-2); color:var(--gris)}
.env__etat--ok{background:rgba(95,211,154,.14); color:var(--vert)}
.env__nom{font:600 17px/1.3 "Sora",system-ui,sans-serif; color:var(--ink); margin-top:4px}
.env__desc{font-size:14.5px; color:var(--gris)}
.env__pied{margin-top:auto; padding-top:8px; font:600 13px/1 "IBM Plex Mono",monospace; color:var(--accent)}

.labs{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.lab{
  display:flex; flex-direction:column; gap:9px; padding:22px; border-radius:var(--r); text-decoration:none; color:inherit;
  background:var(--carte); border:1px solid var(--trait); transition:border-color .15s, transform .15s, box-shadow .15s;
}
.lab:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--ombre-haute)}
.lab__haut{display:flex; align-items:center; gap:10px}
.lab__num{font:600 13px/1 "IBM Plex Mono",monospace; color:var(--gris)}
.lab__niv{font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:99px; background:var(--bleu-pale); color:var(--accent)}
.lab__niv--2{background:var(--orange-pale); color:var(--orange-clair)}
.lab__niv--3{background:rgba(194,20,42,.14); color:#E8818E}
.lab__fini{margin-left:auto; font:600 12px/1 "IBM Plex Sans",sans-serif; color:var(--vert)}
.lab__titre{font:600 18px/1.3 "Sora",system-ui,sans-serif; color:var(--ink)}
.lab__resume{font-size:15px; color:var(--gris); flex:1}
.lab__meta{font:500 12.5px/1.4 "IBM Plex Mono",monospace; color:var(--gris)}
.lab__barre{height:5px; border-radius:5px; background:var(--carte-2); overflow:hidden}
.lab__barre span{display:block; height:100%; background:linear-gradient(90deg,var(--bleu),var(--vert))}
.lab__action{font:600 14.5px/1 "Sora",system-ui,sans-serif; color:var(--accent); margin-top:4px}

/* --------------------------------------- 17. toutes les tailles d'écran --
   Ce qui suit fait tenir chaque page de 320 px à 2560 px :
   - un élément de grille peut rétrécir sous la largeur de son contenu
     (sinon une ligne de console élargit toute la page) ;
   - un mot trop long (une adresse, un numéro) passe à la ligne ;
   - sur téléphone, les rubriques tiennent sur une ligne qu'on fait glisser ;
   - sur grand écran, le texte des deux portes s'aligne sur la trame. */
.deux-colonnes > *, .grille > *, .formules > *, .fiches > *, .colonnes-2 > *, .limites > *, .portes > *,
.souscription__grille > *, .labs > *, .envs > *, .form > *{min-width:0}
p, li, dd, td, .repere, .encadre, .chapo{overflow-wrap:break-word}
.repere{overflow-wrap:anywhere}
.appel{overflow:hidden}
.console{max-width:100%}

@media (max-width:640px){
  .entete__rang{padding-bottom:6px; column-gap:8px; flex-wrap:wrap}
  .marque{flex:1 1 auto; min-width:0}
  .entete__fin{gap:6px; margin-left:0}
  .theme{width:34px; height:34px}
  .langues a{padding:7px 7px; font-size:12px}
  /* des boutons pleine largeur, faciles à toucher */
  .une .boutons .bouton, .appel .boutons .bouton{flex:1 1 100%}
  .tableau-identite th{width:auto}
}
@media (max-width:380px){
  .marque__mot{font-size:21px}
  .marque svg{width:32px; height:32px}
  .langues a{padding:8px 7px}
}

/* grands écrans : la trame s'élargit un peu, les lignes restent lisibles */
@media (min-width:1600px){
  :root{--large:1280px}
  body{font-size:18px}
}
@media (min-width:821px){
  .porte--claire{padding-left:max(clamp(24px,3.4vw,52px), calc((100vw - var(--large)) / 2 + var(--gouttiere)))}
  .porte--sombre{padding-right:max(clamp(24px,3.4vw,52px), calc((100vw - var(--large)) / 2 + var(--gouttiere)))}
}
.lab__niv--0{background:rgba(95,211,154,.14); color:var(--vert)}

/* le catalogue des labs : filtres */
.filtres{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:4px 0 18px}
.filtre__q{flex:1 1 260px; min-width:0; padding:11px 14px; border-radius:10px; border:1px solid var(--trait-champ); background:var(--carte); color:var(--ink); font:inherit}
.filtre__q::placeholder{color:var(--gris); opacity:1}
.filtre{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-2)}
.filtre span{font:600 11.5px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--gris)}
.filtre select{padding:9px 10px; border-radius:9px; border:1px solid var(--trait-champ); background:var(--carte); color:var(--ink); font:inherit; min-width:140px}
.filtre select option{color:var(--ink); background:var(--carte)}
.filtres__n{font:500 13px/1 "IBM Plex Mono",monospace; color:var(--gris); padding-bottom:10px}
.filtres__coach{margin-left:auto; padding-bottom:10px}
.lab__niv--4{background:rgba(155,89,255,.16); color:#C3A2FF}
.lab__niv--5{background:rgba(255,196,0,.14); color:#FFD666}
.lab__theme{font:500 11.5px/1 "IBM Plex Mono",monospace; color:var(--gris); margin-left:auto}
.lab__certifs{display:flex; flex-wrap:wrap; gap:5px}
.lab__certifs i{font:normal 500 11px/1 "IBM Plex Mono",monospace; padding:4px 7px; border-radius:6px; background:var(--carte-2); color:var(--ink-2)}
@media (max-width:640px){ .filtre{flex:1 1 45%} .filtre select{min-width:0; width:100%} .filtres__coach{margin-left:0} }

/* la préparation aux certifications */
.cq{display:grid; gap:18px}
.cq-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.cq-carte{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:14px; border:1px solid var(--trait-fort); background:var(--carte); color:var(--ink); transition:border-color .2s, transform .2s}
.cq-carte:hover, .cq-carte:focus-visible{border-color:var(--accent, #6BA3DC); transform:translateY(-2px)}
.cq-carte__haut{display:flex; justify-content:space-between; gap:8px}
.cq-editeur{font:600 11.5px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--gris)}
.cq-niv{font:500 11.5px/1 "IBM Plex Mono",monospace; padding:4px 8px; border-radius:99px; background:var(--carte-2); color:var(--ink-2)}
.cq-carte__nom{font:600 17px/1.25 "Sora",sans-serif}
.cq-carte__desc{font-size:14px; color:var(--ink-2); line-height:1.45}
.cq-meta{font:500 12.5px/1.3 "IBM Plex Mono",monospace; color:var(--gris)}
.cq-jauge, .cq-progres{display:block; height:7px; border-radius:7px; background:var(--carte-2); overflow:hidden}
.cq-jauge span, .cq-progres span{display:block; height:100%; background:linear-gradient(90deg,#3D7FC1,#3DDC84); transition:width .4s}
.cq-entete{display:flex; gap:20px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap}
.cq-entete > div:first-child{flex:1 1 420px}
.cq-score{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:130px; padding:16px; border-radius:14px; border:1px solid var(--trait-fort); background:var(--carte)}
.cq-score b{font:700 32px/1 "Sora",sans-serif}
.cq-score span{font:600 11.5px/1.6 "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--gris)}
.cq-score small{color:var(--gris)}
.cq-score--ok b{color:var(--vert)}
.cq-actions{display:flex; flex-wrap:wrap; gap:10px}
.cq-doms{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.cq-dom{padding:12px 14px; border-radius:12px; border:1px solid var(--trait-fort); background:var(--carte); display:grid; gap:8px}
.cq-dom__tete, .cq-dom__pied{display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:14px}
.cq-dom__tete span, .cq-dom__pied span{font:500 12px/1.3 "IBM Plex Mono",monospace; color:var(--gris)}
.cq-dom--ok .cq-jauge span{background:#3DDC84}
.cq-dom--moyen .cq-jauge span{background:#F2B84B}
.cq-dom--faible .cq-jauge span{background:#F25F5C}
.cq-lien{all:unset; cursor:pointer; color:var(--accent, #6BA3DC); font-weight:500; font-size:14px}
.cq-lien:hover, .cq-lien:focus-visible{text-decoration:underline}
.cq-lien--discret{color:var(--gris); font-size:13px}
.cq-labs{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px}
.cq-lab{display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:10px; border:1px solid var(--trait-fort); background:var(--carte); text-decoration:none; color:var(--ink)}
.cq-lab:hover{border-color:var(--accent, #6BA3DC)}
.cq-lab small{color:var(--gris); font-size:12.5px}
.cq-lab--fini span{color:var(--vert)}
.cq-plan ul{margin:6px 0; padding-left:20px; display:grid; gap:4px}
.cq-quiz{display:grid; gap:14px; max-width:860px}
.cq-quiz__tete{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center}
.cq-chrono{font:600 14px/1 "IBM Plex Mono",monospace; color:var(--accent-vif)}
.cq-question{font:500 18px/1.5 "IBM Plex Sans",sans-serif; margin:4px 0}
.cq-question code, .cq-option code, .cq-retour code, .cq-erreur code{font:14px "IBM Plex Mono",monospace; background:var(--carte-2); color:var(--ink); padding:1px 6px; border-radius:5px}
.cq-choix{display:grid; gap:8px}
.cq-option{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid var(--trait-fort); background:var(--carte); color:var(--ink); cursor:pointer; line-height:1.45}
.cq-option:hover{border-color:var(--accent)}
.cq-option input{margin-top:4px}
.cq-lettre{font:600 13px/1.6 "IBM Plex Mono",monospace; color:var(--gris)}
.cq-option--bonne{border-color:#3DDC84; background:rgba(61,220,132,.08)}
.cq-option--fausse{border-color:#F25F5C; background:rgba(242,95,92,.08)}
.cq-retour:empty{display:none}
.cq-retour{padding:12px 14px; border-radius:12px; border-left:4px solid; background:var(--carte); color:var(--ink)}
.cq-retour--ok{border-color:#3DDC84} .cq-retour--ko{border-color:#F25F5C}
.cq-retour p{margin:6px 0}
.cq-coach{margin-top:8px; padding:10px 12px; border-radius:10px; background:var(--orange-pale); border:1px solid color-mix(in srgb, var(--orange-clair) 45%, transparent); color:var(--ink)}
.cq-coach pre{overflow-x:auto; padding:8px 10px; border-radius:8px; background:var(--nuit); color:var(--sur-nuit); font:13px/1.45 "IBM Plex Mono",monospace}
.cq-erreur{padding:10px 14px; border-radius:10px; border:1px solid var(--trait-fort); background:var(--carte); margin-bottom:8px}
.cq-erreur summary{cursor:pointer; line-height:1.45}
.titre-4{font:600 15px/1.3 "Sora",sans-serif; margin:10px 0 0}
/* le tableau de bord, les nouveaux types de questions, les cartes mémoire */
.cq-filtres{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px}
.cq-filtres select, .cq-filtres input, .cq-demande input{font:inherit; font-size:14px; padding:8px 10px; border-radius:10px; border:1px solid var(--trait-champ, var(--trait-fort)); background:var(--carte); color:var(--ink); min-height:40px}
.cq-filtres input{flex:1 1 220px}
.cq-tableau{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch}
.cq-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:8px; padding:12px; border-radius:14px; border:1px solid var(--trait-fort); background:var(--carte)}
.cq-stats > div{display:flex; flex-direction:column; gap:2px}
.cq-stats b{font:700 22px/1.1 "Sora",sans-serif; color:var(--ink)}
.cq-stats span{font:500 12px/1.3 "IBM Plex Mono",monospace; color:var(--gris)}
.cq-stats__courbe{grid-column:1 / -1}
.cq-anneau__fond{fill:none; stroke:var(--carte-2); stroke-width:7}
.cq-anneau__val{fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .5s}
.cq-score--ok .cq-anneau__val, .cq-dom--ok .cq-anneau__val{stroke:var(--vert)}
.cq-dom--moyen .cq-anneau__val{stroke:var(--accent-vif)}
.cq-dom--faible .cq-anneau__val{stroke:var(--rouge-8)}
.cq-anneau text{font:700 17px "Sora",sans-serif; fill:var(--ink)}
.cq-anneau--petit text{font-size:11px}
.cq-dom__tete{justify-content:flex-start !important; align-items:center !important}
.cq-dom__tete > div{display:flex; flex-direction:column; gap:2px}
.cq-courbe{display:block; max-width:100%; height:auto}
.cq-courbe polyline{fill:none; stroke:var(--accent); stroke-width:2}
.cq-courbe circle{fill:var(--accent)}
.cq-courbe__seuil{stroke:var(--gris); stroke-dasharray:3 4; stroke-width:1}
.cq-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.cq-ordre{list-style:none; counter-reset:o; margin:0; padding:0; display:grid; gap:8px}
.cq-ordre__item{counter-increment:o; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--trait-fort); background:var(--carte); color:var(--ink); cursor:grab; touch-action:manipulation}
.cq-ordre__item::before{content:counter(o); font:600 13px "IBM Plex Mono",monospace; color:var(--gris); min-width:18px}
.cq-ordre__item--tire{opacity:.5}
.cq-ordre__poignee{color:var(--gris); letter-spacing:-2px}
.cq-ordre__texte{flex:1}
.cq-ordre__btns{display:flex; gap:4px}
.cq-mini{min-width:40px; min-height:40px; border-radius:9px; border:1px solid var(--trait-fort); background:var(--carte-2); color:var(--ink); font-size:16px; cursor:pointer}
.cq-mini:disabled{opacity:.35; cursor:default}
.cq-mini:focus-visible, .cq-case:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.cq-assoc{display:grid; gap:8px}
.cq-assoc__ligne{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--trait-fort); background:var(--carte); color:var(--ink)}
.cq-assoc__ligne select{font:inherit; font-size:14px; padding:8px; border-radius:9px; border:1px solid var(--trait-fort); background:var(--carte-2); color:var(--ink); min-height:40px; width:100%}
@media (max-width:560px){ .cq-assoc__ligne{grid-template-columns:1fr} }
.cq-console label{display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; background:var(--nuit); border:2px solid transparent}
.cq-console__invite{font:600 14px "IBM Plex Mono",monospace; color:var(--vert-nuit, #7FD1A8); white-space:nowrap}
.cq-console input{flex:1; min-width:0; border:0; background:transparent; color:var(--sur-nuit, #E3EAF4); font:14px "IBM Plex Mono",monospace; outline:none}
.cq-console label:focus-within{border-color:var(--accent-vif)}
.cq-console--ok{border-color:#3DDC84 !important} .cq-console--ko{border-color:#F25F5C !important}
.cq-raccourcis{margin:0}
@media (hover:none){ .cq-raccourcis{display:none} }
.cq-chrono--fin{color:var(--rouge-8)}
.cq-relecture{display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:8px}
.cq-case{min-height:48px; border-radius:10px; border:1px solid var(--trait-fort); background:var(--carte); color:var(--ink); font:600 14px "IBM Plex Mono",monospace; cursor:pointer}
.cq-case--faite{background:var(--carte-2); border-color:var(--accent)}
.cq-case--marque{border:2px solid var(--accent-vif)}
.cq-table{overflow-x:auto}
.cq-table table{border-collapse:collapse; width:100%; font-size:14px}
.cq-table th, .cq-table td{padding:8px 10px; border-bottom:1px solid var(--trait); text-align:left; color:var(--ink)}
.cq-table thead th{font:600 12px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--gris)}
.cq-table td .cq-jauge{display:inline-block; width:90px; vertical-align:middle}
@media (max-width:560px){ .cq-table th, .cq-table td{padding:8px 6px} .cq-table td .cq-jauge{width:44px} .cq-table thead th{letter-spacing:.02em} }
.cq-ligne--ok .cq-jauge span{background:#3DDC84} .cq-ligne--moyen .cq-jauge span{background:#F2B84B} .cq-ligne--faible .cq-jauge span{background:#F25F5C}
.cq-boites{display:flex; flex-wrap:wrap; gap:8px}
.cq-boite{display:flex; flex-direction:column; align-items:center; min-width:74px; padding:8px; border-radius:10px; border:1px solid var(--trait); background:var(--carte)}
.cq-boite b{font:700 18px "Sora",sans-serif; color:var(--ink)} .cq-boite small{color:var(--gris); font-size:12px}
.cq-flash{padding:18px; border-radius:16px; border:1px solid var(--trait-fort); background:var(--carte); color:var(--ink); display:grid; gap:12px; max-width:860px}
.cq-flash__verso{border-top:1px dashed var(--trait-fort); padding-top:12px}
.cq-suivi{display:grid; gap:6px; margin-top:8px}
.cq-suivi__moi{justify-self:end; margin:0; padding:6px 10px; border-radius:10px; background:var(--accent-plein); color:#fff; max-width:85%}
.cq-demande{display:flex; gap:8px; margin-top:10px}
.cq-demande input{flex:1; min-width:0}

/* ---- le catalogue des labs, rangé par blocs ---- */
.blocs{display:grid; gap:14px}
.blocs-nav{display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 18px}
.blocs-nav__lien{display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:99px; border:1px solid var(--trait); color:var(--ink-2); text-decoration:none; font:500 13px/1 "IBM Plex Sans",sans-serif; transition:border-color .15s, background .15s}
.blocs-nav__lien b{font:600 11.5px/1 "IBM Plex Mono",monospace; color:var(--gris)}
.blocs-nav__lien:hover{border-color:var(--accent); background:var(--bleu-pale)}
.blocs-nav__lien--multi{border-color:color-mix(in srgb, var(--orange-clair) 45%, var(--trait))}
.blocs-nav__lien--constructeur{border-color:color-mix(in srgb, var(--vert) 40%, var(--trait))}
.blocs-groupe{font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); margin:22px 0 2px; display:flex; align-items:center; gap:12px}
.blocs-groupe::after{content:""; flex:1; height:1px; background:var(--trait)}
.blocs > .blocs-groupe:first-child{margin-top:0}
.bloc{border:1px solid var(--trait); border-radius:16px; background:color-mix(in srgb, var(--carte) 55%, transparent); overflow:hidden; scroll-margin-top:90px;
  border-left:4px solid var(--accent)}
.bloc--multi{border-left-color:var(--orange-clair)}
.bloc--constructeur{border-left-color:var(--vert)}
.bloc__tete{all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:18px; padding:16px 20px; cursor:pointer}
.bloc__tete:hover{background:color-mix(in srgb, var(--bleu-pale) 60%, transparent)}
.bloc__tete:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.bloc__titres{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1}
.bloc__titre{font:600 19px/1.25 "Sora",system-ui,sans-serif; color:var(--ink)}
.bloc__desc{font-size:14.5px; color:var(--gris)}
.bloc__chiffres{display:flex; align-items:center; gap:12px; flex:none}
.bloc__n{font:500 12.5px/1 "IBM Plex Mono",monospace; color:var(--gris); white-space:nowrap}
.bloc__prog{width:90px; height:6px; border-radius:6px; background:var(--carte-2); overflow:hidden}
.bloc__prog span{display:block; height:100%; background:linear-gradient(90deg,var(--bleu),var(--vert))}
.bloc__fini{font:600 12.5px/1 "IBM Plex Mono",monospace; color:var(--vert); min-width:28px; text-align:right}
.bloc__fleche{font-size:20px; color:var(--gris); transition:transform .2s; line-height:1}
.bloc__tete[aria-expanded="false"] .bloc__fleche{transform:rotate(-90deg)}
.bloc__corps{padding:4px 20px 20px}
@media (max-width:640px){
  .bloc__tete{flex-wrap:wrap; gap:10px; padding:14px 16px}
  .bloc__chiffres{width:100%; order:3}
  .bloc__prog{flex:1}
  .bloc__corps{padding:4px 12px 14px}
  .blocs-nav{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px}
  .blocs-nav__lien{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){ .bloc__fleche, .blocs-nav__lien{transition:none} }
.bloc__corps[hidden]{display:none}
.bloc__titre, .bloc__desc{display:block; line-height:1.35}
.bloc__titres{gap:3px}
.bloc__tete{line-height:1.3}
.bloc__titre, .bloc__desc{margin:0}

/* thème clair : les pastilles de niveau gardent leur teinte, en plus foncé */
:root[data-theme="light"] .lab__niv--3{color:#A3172C}
:root[data-theme="light"] .lab__niv--4{color:#5B2DB3}
:root[data-theme="light"] .lab__niv--5{color:#765600}

/* ---------------------------------------------- 18. le menu principal ----
   La barre, à la manière de bamounbenelux.eu : fine, rubriques en petites
   capitales soulignées d'un trait chaud. Les menus déroulants, à la manière
   d'Apple : un grand volet sur toute la largeur descend sous la barre, la page
   derrière se floute, les liens arrivent en fondu les uns après les autres.
   Sous 1180 px, le bouton à trois barres ouvre un menu plein écran ; un groupe
   y glisse depuis la droite, avec un « ‹ Retour ».
   Sans JavaScript, les groupes s'ouvrent au clic et les rubriques passent à la ligne. */
.entete{background:color-mix(in srgb, var(--fond) 55%, transparent)}
.entete__rang{flex-wrap:nowrap; gap:12px; min-height:0; height:64px}
.marque{order:1; flex:none; padding:0}
.entete .marque svg{width:36px; height:36px}
.entete .marque__mot{font-size:23px}
.entete .marque__devise{display:none}
.nav{order:2; margin-left:auto; display:flex; align-items:center; gap:16px; flex:0 1 auto; min-width:0; flex-wrap:nowrap}
html:not(.js) .nav{flex-wrap:wrap; row-gap:6px}
.nav-plus{order:3; flex:none}
.nav-plus[hidden]{display:none}
.entete__fin{order:4; margin-left:4px; flex:none; gap:8px}

.nav a.nav__lien, .nav summary{
  display:inline-flex; align-items:center; gap:5px; padding:6px 0; background:none; border-radius:0;
  font:600 12px/1 "Sora",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; white-space:nowrap; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.nav summary{list-style:none; user-select:none}
.nav summary::-webkit-details-marker{display:none}
.nav a.nav__lien:hover, .nav summary:hover, .nav__groupe[open] > summary,
.nav a.nav__lien[aria-current="page"], .nav__groupe--ici > summary{color:var(--ink); background:none; border-bottom-color:var(--accent-vif)}
.nav summary:focus-visible, .nav a:focus-visible, .nav button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.nav__chevron{width:10px; height:10px; flex:none; transition:transform .25s}
.nav__groupe[open] .nav__chevron{transform:rotate(180deg)}
.nav__groupe{display:flex}
.nav__retour{display:none}

/* --- le volet, sur ordinateur : toute la largeur, sous la barre --- */
.nav__panneau{
  position:absolute; left:0; right:0; top:100%; z-index:80;
  background:color-mix(in srgb, var(--fond) 94%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--trait);
  animation:volet-descend .36s cubic-bezier(.4,0,.2,1);
  transform-origin:top;
}
@keyframes volet-descend{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
.nav__volet{
  max-width:var(--large); margin:0 auto; padding:38px var(--gouttiere) 52px;
  display:flex; gap:clamp(40px, 8vw, 120px);
}
.nav__col{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0}
.nav__titre{font:500 12px/1 "IBM Plex Sans",system-ui,sans-serif; color:var(--gris); margin:0 0 12px; letter-spacing:.01em}
.nav a.nav__item{
  display:inline-block; padding:4px 0; border:0; border-radius:0; background:none; text-decoration:none; white-space:normal;
  font:600 24px/1.2 "Sora",system-ui,sans-serif; letter-spacing:-.015em; text-transform:none; color:var(--ink);
  opacity:0; transform:translateY(-6px); animation:lien-arrive .4s cubic-bezier(.4,0,.2,1) forwards;
}
.nav a.nav__item--petit{font:600 13.5px/1.3 "Sora",system-ui,sans-serif; letter-spacing:0; color:var(--ink-2); padding:5px 0}
.nav a.nav__item:hover{color:var(--accent)}
.nav a.nav__item[aria-current="page"]{color:var(--accent-vif)}
@keyframes lien-arrive{to{opacity:1; transform:none}}
.nav__col > :nth-child(2){animation-delay:.04s} .nav__col > :nth-child(3){animation-delay:.08s}
.nav__col > :nth-child(4){animation-delay:.12s} .nav__col > :nth-child(5){animation-delay:.16s}
.nav__col + .nav__col > *{animation-delay:.14s}

/* le voile : la page derrière se floute et s'assombrit */
.nav-voile{
  position:fixed; inset:0; z-index:55; pointer-events:none; opacity:0;
  background:rgba(4,10,20,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:opacity .3s;
}
:root[data-theme="light"] .nav-voile{background:rgba(30,45,65,.18)}
html.nav-voile-on .nav-voile{opacity:1; pointer-events:auto}

/* le bouton à trois barres, qui devient une croix */
.nav-plus__b{display:flex; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:0 10px; cursor:pointer;
  background:var(--carte); border:1px solid var(--trait); border-radius:999px}
.nav-plus__b span{display:block; height:1.6px; border-radius:2px; background:var(--ink-2); transition:transform .3s, opacity .2s}
.nav-plus__b:hover span{background:var(--accent-vif)}
.nav-plus__b[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav-plus__b[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-plus__b[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.nav-plus__b:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* les langues et le thème, en pastilles rondes */
.entete .langues{border-radius:999px; padding:2px; gap:2px; background:var(--carte); border-color:var(--trait)}
.entete .langues a{border-radius:999px; padding:6px 9px; background:none}
.entete .langues a[aria-current="true"]{background:var(--accent-vif); color:var(--sur-accent)}
:root:not([data-theme="light"]) .entete .langues a[aria-current="true"]{color:#190C02}
.entete .theme{border-radius:999px; width:36px; height:36px}

/* --- sous 1180 px, avec JavaScript : le menu plein écran --- */
@media (max-width:1179px){
  html.js .nav-plus{display:block}
  html.js .nav{
    position:fixed; left:0; right:0; top:var(--entete-bas, 64px); bottom:0; z-index:90; margin:0;
    display:none; flex-direction:column; align-items:stretch; gap:0; overflow-x:hidden; overflow-y:auto;
    padding:22px var(--gouttiere) 40px; background:var(--fond);
  }
  html.js .nav.nav--ouverte{display:flex; animation:menu-entre .3s cubic-bezier(.4,0,.2,1)}
  @keyframes menu-entre{from{opacity:0; transform:translateY(-8px)}}
  html.nav-ouvert, html.nav-ouvert body{overflow:hidden}
  html.js .nav a.nav__lien, html.js .nav summary{
    width:100%; justify-content:space-between; padding:11px 0; border:0;
    font:600 26px/1.2 "Sora",system-ui,sans-serif; letter-spacing:-.015em; text-transform:none; color:var(--ink);
    opacity:0; animation:lien-arrive .4s cubic-bezier(.4,0,.2,1) forwards;
  }
  html.js .nav > :nth-child(2) > summary, html.js .nav > :nth-child(2){animation-delay:.03s}
  html.js .nav > :nth-child(3) > summary{animation-delay:.06s} html.js .nav > :nth-child(4) > summary{animation-delay:.09s}
  html.js .nav > :nth-child(5){animation-delay:.12s} html.js .nav > :nth-child(6) > summary{animation-delay:.15s}
  html.js .nav a.nav__lien[aria-current="page"], html.js .nav .nav__groupe--ici > summary{color:var(--accent-vif)}
  html.js .nav__chevron{width:16px; height:16px; transform:rotate(-90deg)}
  html.js .nav__groupe[open] .nav__chevron{transform:rotate(-90deg)}
  html.js .nav__groupe{display:block}
  /* un groupe ouvert glisse par-dessus la liste, depuis la droite */
  html.js .nav__panneau{
    position:fixed; left:0; right:0; top:var(--entete-bas, 64px); bottom:0; z-index:91; overflow-y:auto;
    background:var(--fond); border:0; -webkit-backdrop-filter:none; backdrop-filter:none;
    animation:sous-entre .34s cubic-bezier(.4,0,.2,1);
  }
  @keyframes sous-entre{from{transform:translateX(100%)}}
  html.js .nav__volet{flex-direction:column; gap:34px; padding:14px var(--gouttiere) 40px}
  html.js .nav__retour{
    display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-bottom:-14px; padding:8px 0;
    background:none; border:0; cursor:pointer; color:var(--gris); font:500 15px/1 "IBM Plex Sans",system-ui,sans-serif;
  }
  html.js .nav__retour svg{width:14px; height:14px}
  html.js .nav__retour:hover{color:var(--ink)}
  html.js .nav a.nav__item{font-size:28px; padding:6px 0}
  html.js .nav a.nav__item--petit{font-size:16px}
  .nav-voile{display:none}
}
@media (max-width:640px){
  .entete{position:sticky}
  .entete .marque__mot{font-size:21px}
  .entete .marque svg{width:32px; height:32px}
  .entete .langues a{padding:6px 7px}
}
@media (max-width:340px){ .entete .marque__mot{display:none} }
@media (prefers-reduced-motion:reduce){
  .nav__panneau, .nav a.nav__item, .nav.nav--ouverte, html.js .nav a.nav__lien, html.js .nav summary{animation:none!important; opacity:1!important; transform:none!important}
  .nav__chevron, .nav-voile, .nav-plus__b span{transition:none}
}
/* le flou de la barre ferait du menu plein écran un enfant de la barre : on le retire pendant qu'il est ouvert */
html.nav-ouvert .entete{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--fond)}
@media (max-width:1179px){ .nav-plus{order:5} .entete__fin{margin-left:auto} }

/* ------------------------------------------- 19. les trois activités ------
   Recrutement en bleu, formation réseau en orange, matériel déclassé en vert :
   les couleurs du site, une par activité, reprises partout où elle paraît
   (bouton, carte, onglet, parcours). */
.activite--recrutement, .bouton--recrutement, .parcours--recrutement, .parcours__onglet--recrutement, .flux--recrutement{
  --c:var(--accent); --c-plein:var(--bleu); --c-sur:var(--sur-accent); --c-pale:var(--bleu-pale)}
.activite--formation, .bouton--formation, .parcours--formation, .parcours__onglet--formation, .flux--formation{
  --c:var(--accent-vif); --c-plein:var(--orange-clair); --c-sur:#190C02; --c-pale:var(--orange-pale)}
.activite--materiel, .bouton--materiel, .parcours--materiel, .parcours__onglet--materiel, .flux--materiel{
  --c:var(--vert); --c-plein:var(--vert); --c-sur:#04140C; --c-pale:color-mix(in srgb, var(--vert) 14%, var(--carte))}
:root[data-theme="light"] .activite--formation, :root[data-theme="light"] .bouton--formation, :root[data-theme="light"] .parcours--formation,
:root[data-theme="light"] .parcours__onglet--formation, :root[data-theme="light"] .flux--formation,
:root[data-theme="light"] .activite--materiel, :root[data-theme="light"] .bouton--materiel, :root[data-theme="light"] .parcours--materiel,
:root[data-theme="light"] .parcours__onglet--materiel, :root[data-theme="light"] .flux--materiel{--c-sur:var(--sur-accent)}

.bouton--activite{background:var(--c-plein); color:var(--c-sur); border-color:transparent; box-shadow:var(--ombre); gap:9px}
.bouton--activite:hover{background:var(--c-plein); filter:brightness(1.08); box-shadow:var(--ombre-haute)}
.bouton--activite svg{width:19px; height:19px; flex:none}
.une--trois h1{font-size:clamp(36px, 5.6vw, 64px)}

/* les trois cartes */
.activites{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,24px)}
@media (max-width:1000px){ .activites{grid-template-columns:1fr} }
.activite{
  display:flex; flex-direction:column; gap:12px; padding:clamp(24px,2.6vw,32px); border-radius:var(--r-l);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c-plein) 11%, var(--carte)) 0%, var(--carte) 48%);
  border:1px solid var(--trait); border-top:4px solid var(--c-plein); box-shadow:var(--ombre);
  transition:transform .2s, box-shadow .2s;
}
.activite:hover{transform:translateY(-3px); box-shadow:var(--ombre-haute)}
.activite__tete{display:flex; align-items:center; justify-content:space-between}
.activite__signe{width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:var(--c-plein); color:var(--c-sur)}
.activite__signe svg{width:27px; height:27px}
.activite__num{font:600 15px/1 "IBM Plex Mono",monospace; color:var(--c); letter-spacing:.1em}
.activite h3{font-size:clamp(21px,1.9vw,24px); margin-top:4px}
.activite__pour{font:600 12px/1.3 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--c)}
.activite > p:not(.activite__pour){color:var(--gris); font-size:15.8px}
.activite__flux{list-style:none; padding:0; margin:6px 0 2px; display:flex; flex-wrap:wrap; gap:7px; counter-reset:mini}
.activite__flux li{display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 5px; border-radius:99px;
  background:var(--c-pale); color:var(--ink-2); font:500 13px/1.2 "IBM Plex Sans",sans-serif; counter-increment:mini}
.activite__flux li::before{content:counter(mini); width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-plein); color:var(--c-sur); font:600 11px/1 "IBM Plex Mono",monospace}
.activite__liens{margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px}
.activites__aussi{color:var(--gris); font-size:15.5px}
.activites__aussi a{color:var(--accent)}

/* les parcours, à onglets */
.parcours__onglets{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px}
html:not(.js) .parcours__onglets{display:none}
.parcours__onglet{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--trait-fort); background:var(--carte); color:var(--ink-2); font:600 15px/1 "Sora",system-ui,sans-serif;
  transition:background .2s, color .2s, border-color .2s;
}
.parcours__onglet svg{width:20px; height:20px; color:var(--c); flex:none}
.parcours__onglet:hover{border-color:var(--c-plein); color:var(--ink)}
.parcours__onglet[aria-selected="true"]{background:var(--c-plein); border-color:var(--c-plein); color:var(--c-sur)}
.parcours__onglet[aria-selected="true"] svg{color:inherit}
.parcours__onglet:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.parcours__panneau{background:var(--carte); border:1px solid var(--trait); border-top:4px solid var(--c-plein); border-radius:var(--r-l);
  padding:clamp(22px,3vw,40px); box-shadow:var(--ombre)}
html:not(.js) .parcours__panneau + .parcours__panneau{margin-top:22px}
.parcours__panneau[hidden]{display:none}
.parcours__titre{display:flex; align-items:center; gap:10px; margin-bottom:26px; font:600 19px/1.2 "Sora",system-ui,sans-serif; color:var(--ink)}
.parcours__titre svg{width:24px; height:24px; color:var(--c)}
html.js .parcours__titre{display:none}
.parcours__fin{margin-top:34px; padding-top:24px; border-top:1px dashed var(--trait-fort); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px}
.parcours__fin > div{max-width:62ch}
.parcours__fin-tag{display:block; font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--c); margin-bottom:8px}
.parcours__fin p{font-size:17px; color:var(--ink)}

/* le parcours lui-même : des étapes reliées, numérotées, avec qui s'en charge */
.flux{list-style:none; padding:0; display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0,1fr)); gap:26px 20px; counter-reset:flux; position:relative}
.flux__pas{position:relative; padding-top:66px; counter-increment:flux; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.flux__n{position:absolute; top:0; left:0; width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-plein); color:var(--c-sur); font:600 15px/1 "IBM Plex Mono",monospace;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c-plein) 16%, transparent)}
.flux__n::before{content:"0" counter(flux)}
.flux__pas::before{content:""; position:absolute; top:24px; left:62px; right:-14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--c-plein), color-mix(in srgb, var(--c-plein) 25%, transparent))}
.flux__pas::after{content:""; position:absolute; top:20px; right:-16px; width:8px; height:8px; border-top:2px solid var(--c-plein); border-right:2px solid var(--c-plein);
  transform:rotate(45deg); opacity:.55}
.flux__pas:last-child::before, .flux__pas:last-child::after{display:none}
.flux__qui{display:inline-block; padding:4px 9px; border-radius:99px; font:600 11px/1.2 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase;
  background:var(--c-pale); color:var(--c)}
.flux__qui--vous{background:var(--carte-2); color:var(--ink-2)}
.flux__qui--ensemble{background:transparent; color:var(--c); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c-plein) 55%, transparent)}
.flux__pas h3{font-size:18px; line-height:1.3}
.flux__pas p{color:var(--gris); font-size:15.3px}
@media (max-width:900px){
  .flux{grid-template-columns:1fr; gap:0}
  .flux__pas{padding:0 0 28px 70px; min-height:76px}
  .flux__pas::before{top:58px; bottom:4px; left:24px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--c-plein), color-mix(in srgb, var(--c-plein) 25%, transparent))}
  .flux__pas::after{display:none}
  .flux__pas:last-child{padding-bottom:0}
}
/* dans une bande sombre */
.bande--nuit .flux__pas p{color:var(--sur-nuit-2)}
.bande--nuit .flux__pas h3{color:var(--sur-nuit)}
@media (prefers-reduced-motion:reduce){ .activite, .parcours__onglet{transition:none} .activite:hover{transform:none} }
/* six étapes : deux rangées de trois ; la dernière de chaque rangée ne pointe vers rien */
@media (min-width:901px){ .flux--rangs .flux__pas:nth-child(3n)::before, .flux--rangs .flux__pas:nth-child(3n)::after{display:none} }
/* le menu : chaque activité garde sa couleur, sur son trait et dans son volet */
.nav__groupe--recrutement{--c:var(--accent); --c-plein:var(--bleu)}
.nav__groupe--formation{--c:var(--accent-vif); --c-plein:var(--orange-clair)}
.nav__groupe--materiel{--c:var(--vert); --c-plein:var(--vert)}
.nav__groupe--recrutement > summary:hover, .nav__groupe--recrutement[open] > summary, .nav__groupe--recrutement.nav__groupe--ici > summary,
.nav__groupe--formation > summary:hover, .nav__groupe--formation[open] > summary, .nav__groupe--formation.nav__groupe--ici > summary,
.nav__groupe--materiel > summary:hover, .nav__groupe--materiel[open] > summary, .nav__groupe--materiel.nav__groupe--ici > summary{border-bottom-color:var(--c-plein)}
.nav__groupe--recrutement .nav__col--grand .nav__titre, .nav__groupe--formation .nav__col--grand .nav__titre, .nav__groupe--materiel .nav__col--grand .nav__titre{color:var(--c)}
.nav__groupe--recrutement .nav__volet, .nav__groupe--formation .nav__volet, .nav__groupe--materiel .nav__volet{box-shadow:inset 0 3px 0 var(--c-plein)}
@media (max-width:1179px){ html.js .nav .nav__groupe--recrutement > summary, html.js .nav .nav__groupe--formation > summary, html.js .nav .nav__groupe--materiel > summary{box-shadow:inset 3px 0 0 var(--c-plein); padding-left:12px} }

/* ---------------------------------------- 20. entrer et sortir -----------
   Le lien « Espace labo » et le menu du compte dans l'en-tête (site et labo),
   la barre et le fil d'Ariane de l'espace labo, la carte des écrans de
   connexion, d'inscription, de mot de passe oublié et de déconnexion. */
.visuel-cache{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* le lien d'entrée : une pastille comme celles des langues et du thème */
.acces-entree{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 10px; flex:none;
  background:var(--carte); border:1px solid var(--trait); border-radius:999px; color:var(--ink-2); text-decoration:none;
  font:600 12px/1 "Sora",system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  transition:color .2s, border-color .2s;
}
.acces-entree svg{width:18px; height:18px; flex:none}
.acces-entree:hover{color:var(--ink); border-color:var(--accent-vif)}
.acces-entree:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.acces-entree[hidden]{display:none}

/* le menu du compte : un <details>, qui s'ouvre aussi sans JavaScript */
.compte{position:static; flex:none}
.entete__fin{position:relative}   /* le menu du compte s'aligne sur le bord droit de la barre */
.compte__b{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 10px 0 3px; cursor:pointer; list-style:none; user-select:none;
  background:var(--carte); border:1px solid var(--trait); border-radius:999px; color:var(--ink);
  font:600 13px/1 "Sora",system-ui,sans-serif; white-space:nowrap;
}
.compte__b::-webkit-details-marker{display:none}
.compte__b:hover, .compte[open] > .compte__b{border-color:var(--accent-vif)}
.compte__b:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.compte__b > svg{width:14px; height:14px; color:var(--gris); transition:transform .2s}
.compte[open] > .compte__b > svg{transform:rotate(180deg)}
.compte__avatar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--bleu); color:var(--sur-accent); font:600 11.5px/1 "Sora",system-ui,sans-serif; letter-spacing:.02em;
}
.compte__menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:120; width:min(290px, calc(100vw - 24px));
  background:var(--carte); border:1px solid var(--trait-fort); border-radius:var(--r); box-shadow:var(--ombre-haute);
  padding:6px; animation:menu-compte .18s cubic-bezier(.4,0,.2,1);
}
@keyframes menu-compte{from{opacity:0; transform:translateY(-6px)}}
.compte__qui{display:grid; gap:4px; padding:12px 12px 14px; border-bottom:1px solid var(--trait); margin-bottom:6px}
.compte__qui b{font:600 15.5px/1.3 "Sora",system-ui,sans-serif; color:var(--ink); overflow-wrap:anywhere}
.compte__qui small{font-size:13.5px; color:var(--gris); overflow-wrap:anywhere}
.compte__etat{justify-self:start; margin-top:6px; font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gris); border:1px solid var(--trait-fort); border-radius:99px; padding:5px 8px}
.compte__etat--ok{color:var(--vert); border-color:color-mix(in srgb, var(--vert) 55%, transparent)}
.compte__menu ul{list-style:none; margin:0; padding:0}
.compte__menu a, .compte__sortir{
  display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border-radius:9px; border:0; background:none; cursor:pointer;
  font:500 15px/1.3 "IBM Plex Sans",system-ui,sans-serif; color:var(--ink); text-decoration:none; text-align:left;
}
.compte__menu a svg, .compte__sortir svg{width:18px; height:18px; flex:none; color:var(--gris)}
.compte__menu a:hover, .compte__sortir:hover{background:var(--bleu-pale)}
.compte__menu a:focus-visible, .compte__sortir:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.compte__menu a[aria-current="page"]{color:var(--accent); font-weight:600}
.compte__menu a[aria-current="page"] svg{color:var(--accent)}
.compte__menu form{border-top:1px solid var(--trait); margin-top:6px; padding-top:6px}
/* Sur les pages du site, la barre est déjà pleine (cinq rubriques) : l'entrée
   y est une pastille ronde, le texte reste pour les lecteurs d'écran et en
   info-bulle. Dans l'espace labo, la place permet le texte, sauf au téléphone. */
.entete:not(.entete--labo) .acces-entree, .compte--site .compte__b{width:36px; padding:0; justify-content:center}
.entete:not(.entete--labo) .acces-entree span, .compte--site .compte__nom, .compte--site .compte__b > svg{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:640px){
  .acces-entree{width:36px; padding:0; justify-content:center}
  .acces-entree span, .compte__nom, .compte__b > svg{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .compte__b{padding:0 3px; width:36px; justify-content:center}
}
/* sur un téléphone, la barre porte une pastille de plus : on la resserre un peu,
   puis, sur les plus petits écrans, le logo seul reste (le nom revient au pied) */
@media (max-width:420px){
  .entete__rang{gap:7px}
  .entete__fin{gap:5px; margin-left:auto}
  .entete .marque{gap:7px}
  .entete .marque__mot{font-size:18px}
  .entete .marque svg{width:30px; height:30px}
  .entete .langues a{padding:6px 5px}
  .entete .langues{gap:0}
}
@media (max-width:374px){ .entete .marque__mot{display:none} }
@media (prefers-reduced-motion:reduce){ .compte__menu{animation:none} .compte__b > svg{transition:none} }

/* la barre de l'espace labo : logo → site, « Networking Lab », les rubriques de l'abonné */
.entete--labo .entete__fin{margin-left:auto}
.entete__espace{
  order:1; flex:none; padding-left:12px; border-left:1px solid var(--trait-fort); color:var(--gris); text-decoration:none;
  font:600 12px/1 "Sora",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.entete__espace:hover{color:var(--ink)}
.labo-nav{order:2; margin-left:auto; display:flex; align-items:center; gap:20px}
.labo-nav ~ .entete__fin{margin-left:10px}
.labo-nav a{
  padding:6px 0; border-bottom:2px solid transparent; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  font:600 12px/1 "Sora",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; transition:color .2s, border-color .2s;
}
.labo-nav a:hover, .labo-nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent-vif)}
.labo-nav a:focus-visible, .entete__espace:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (max-width:960px){ .labo-nav{display:none} .labo-nav ~ .entete__fin{margin-left:auto} }
@media (max-width:640px){ .entete__espace{display:none} }

body.labo{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh}
.labo__corps{flex:1 0 auto; padding-block:clamp(18px,3.4vw,34px) 72px}
.labo__corps:focus{outline:none}
.fil-labo{margin-bottom:clamp(18px,3vw,30px)}
.fil-labo ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font:500 14px/1.4 "IBM Plex Sans",system-ui,sans-serif; color:var(--gris)}
.fil-labo li{display:inline-flex; align-items:center; gap:8px; min-width:0}
.fil-labo li + li::before{content:"›"; color:var(--gris-2); font-size:16px; line-height:1}
.fil-labo a{color:var(--gris); text-decoration:none}
.fil-labo a:hover{color:var(--accent); text-decoration:underline}
.fil-labo [aria-current="page"]{color:var(--ink-2)}

.pied-labo{border-top:1px solid var(--trait); padding:20px 0 calc(20px + env(safe-area-inset-bottom, 0px)); font-size:14px; color:var(--gris)}
.pied-labo__rang{display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px}
.pied-labo__rang span{margin-right:auto}
.pied-labo a{color:var(--gris); text-decoration:none}
.pied-labo a:hover{color:var(--accent); text-decoration:underline}

/* la carte des écrans d'accès */
.acces{display:grid; justify-items:center; padding-block:clamp(4px,2vw,24px) 8px}
.acces__carte{
  position:relative; width:min(460px, 100%); display:grid; gap:22px; overflow:hidden;
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r-l); box-shadow:var(--ombre-haute);
  padding:clamp(24px,5vw,40px);
}
.acces__carte::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--bleu), var(--orange-clair))}
.acces__tete{display:grid; gap:10px}
.acces__tete h1{font:600 clamp(26px,4.2vw,32px)/1.15 "Sora",system-ui,sans-serif; letter-spacing:-.02em; margin:4px 0 0; color:var(--ink)}
.acces__tete p{margin:0; color:var(--gris); font-size:16px; line-height:1.55}
.acces__icone{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--bleu-pale); color:var(--accent)}
.acces__icone svg{width:24px; height:24px}
.acces__form{display:grid; gap:18px}
.acces__form .champ input{background:var(--fond-2)}
.acces__bouton{width:100%}
.acces__form .bouton:hover{transform:none}
.champ__ligne{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.champ__lien{font:500 14px/1.3 "IBM Plex Sans",system-ui,sans-serif}
.acces__message{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-s); border:1px solid; font-size:15px; line-height:1.5; color:var(--ink)}
.acces__message p{margin:0}
.acces__message svg{width:20px; height:20px; flex:none; margin-top:1px}
.acces__message a{color:inherit; font-weight:600; text-decoration:underline}
.acces__message:focus{outline:2px solid var(--accent); outline-offset:2px}
.acces__message--info{background:var(--bleu-pale); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.acces__message--info svg{color:var(--accent)}
.acces__message--erreur{background:var(--orange-pale); border-color:var(--orange-clair)}
.acces__message--erreur svg{color:var(--orange-clair)}
.acces__message--ok{background:color-mix(in srgb, var(--vert) 12%, var(--carte)); border-color:color-mix(in srgb, var(--vert) 60%, transparent)}
.acces__message--ok svg{color:var(--vert)}
.acces__pied{border-top:1px solid var(--trait); padding-top:18px; display:grid; gap:8px; color:var(--gris); font-size:15.5px}
.acces__pied p{margin:0}
.acces__retour{margin:22px 0 0; text-align:center}
.acces__retour a{color:var(--gris); text-decoration:none; font:500 15px/1.3 "IBM Plex Sans",system-ui,sans-serif}
.acces__retour a:hover{color:var(--accent); text-decoration:underline}
@media (max-width:480px){ .acces__carte{border-radius:var(--r); padding:22px 18px} }

/* les aides sous les champs : erreur, Verr. Maj, solidité */
.champ__erreur{color:var(--orange-clair); font-size:14px; font-weight:500; line-height:1.4}
.champ__erreur[hidden], .champ__maj[hidden]{display:none}
.champ__maj{display:flex; align-items:center; gap:6px; color:var(--accent-vif); font-size:14px; font-weight:600}
.champ__maj::before{content:"⇪"; font-size:15px}
.force{display:flex; align-items:center; gap:10px; min-height:20px}
.force__barres{display:flex; gap:4px; flex:none}
.force__barres i{width:30px; height:5px; border-radius:3px; background:var(--trait-fort)}
.force[data-niveau="0"] .force__barres i:nth-child(-n+1),
.force[data-niveau="1"] .force__barres i:nth-child(-n+1){background:var(--orange-clair)}
.force[data-niveau="2"] .force__barres i:nth-child(-n+2){background:var(--accent)}
.force[data-niveau="3"] .force__barres i:nth-child(-n+3),
.force[data-niveau="4"] .force__barres i{background:var(--vert)}
.force[data-niveau=""] .force__barres{opacity:.5}
.force__mot{font-size:13.5px; color:var(--gris)}

/* un bouton qui attend la réponse du serveur */
.en-attente{cursor:progress; opacity:.92}
.en-attente::before{content:""; width:15px; height:15px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:tourne .8s linear infinite; flex:none}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .en-attente::before{animation:none; border-right-color:currentColor; opacity:.6} }

/* le mot d'accueil, après l'inscription */
.bienvenue{display:flex; gap:18px; align-items:flex-start; padding:clamp(18px,2.6vw,26px); border-radius:var(--r);
  background:color-mix(in srgb, var(--vert) 8%, var(--fond-2)); border:1px solid color-mix(in srgb, var(--vert) 45%, var(--trait))}
.bienvenue .acces__icone{background:color-mix(in srgb, var(--vert) 16%, var(--carte)); color:var(--vert)}
.bienvenue p{margin:0; color:var(--ink-2)}
@media (max-width:560px){ .bienvenue{flex-direction:column} }

/* ===================================================== 21. vidéo de présentation */
.spot{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px}
.spot__cadre{position:relative; width:min(340px, 82vw); aspect-ratio:9/16; border-radius:26px; overflow:hidden; background:#06101E;
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(125,170,220,.22)}
.spot__video{display:block; width:100%; height:100%; object-fit:cover; background:#06101E}
.spot__son{position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  font:600 14px/1 "IBM Plex Sans",sans-serif; color:#fff; background:rgba(6,16,30,.78); border:1px solid rgba(190,214,240,.4);
  border-radius:999px; padding:9px 14px; cursor:pointer; backdrop-filter:blur(6px)}
.spot__son:hover{background:rgba(22,48,79,.9)}
.spot__son:focus-visible{outline:3px solid var(--bleu-clair); outline-offset:2px}
.spot__legende{font:400 14px/1.4 "IBM Plex Sans",sans-serif; color:var(--sur-nuit-2, var(--gris)); text-align:center}
.spot-bande__grille{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,6vw,80px); align-items:center}
.spot-bande .titre-2{color:var(--sur-nuit)}
.spot-bande .titre-2 em{font-style:normal; color:var(--sur-nuit-chaud)}
.spot-bande__texte{color:var(--sur-nuit-2); max-width:52ch; font-size:18px; line-height:1.6}
.spot-bande .bouton--creux{color:var(--sur-nuit); border-color:rgba(190,214,240,.34)}
.une--video .enveloppe{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width: 900px){
  .spot-bande__grille, .une--video .enveloppe{grid-template-columns:1fr}
  .spot{justify-self:center}
}
@media (prefers-reduced-motion: reduce){ .spot__video{animation:none} }

/* ------------------------------------------------------------------
   22. Les écrans d'accès du labo : un volet qui montre le labo (console
   vivante, constructeurs, atouts), le formulaire à côté. Le volet reste
   nuit dans les deux thèmes ; sur mobile il devient un bandeau compact.
   ------------------------------------------------------------------ */
.porte-labo{width:min(1060px, 100%); margin-inline:auto; display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr); align-items:stretch;
  border-radius:28px; overflow:hidden; border:1px solid var(--trait);
  background:color-mix(in srgb, var(--carte) 94%, transparent); box-shadow:0 40px 110px -30px rgba(2,6,12,.7)}
.porte-labo > .acces{padding:clamp(28px, 4vw, 52px); align-content:center; justify-items:stretch}
.porte-labo .acces__carte{width:100%; max-width:420px; margin-inline:auto; background:none!important; border:0; box-shadow:none; padding:0; overflow:visible;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important}
.porte-labo .acces__carte::before{display:none}
.porte-labo .acces__retour{margin-top:24px}
.porte-labo .acces__bouton{display:inline-flex; justify-content:center; align-items:center; gap:8px}

.porte-labo__volet{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:20px; padding:clamp(28px, 4vw, 48px);
  color:#E6EEF8; background:radial-gradient(120% 90% at 0% 0%, #1E4A80 0%, #0F2440 46%, #06101E 100%); isolation:isolate}
.porte-labo__volet::after{content:""; position:absolute; inset:auto -22% -32% auto; width:72%; aspect-ratio:1; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(208,53,15,.2), transparent); pointer-events:none}
.porte-labo__reseau{position:absolute; top:-8%; right:-16%; width:66%; opacity:.4; pointer-events:none; z-index:-1;
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent); mask-image:radial-gradient(closest-side, #000 55%, transparent)}
.porte-labo__liens line{stroke:rgba(150,190,235,.28); stroke-width:1.4}
.porte-labo__noeuds circle{fill:#0B1626; stroke:#6BA3DC; stroke-width:2}
.porte-labo__paquet{stroke:#C98B62; stroke-width:3; stroke-linecap:round; stroke-dasharray:6 400; stroke-dashoffset:406;
  animation:porte-paquet 4.5s linear infinite; animation-delay:var(--d, 0s)}
@keyframes porte-paquet{to{stroke-dashoffset:0}}

.porte-labo__oeil{margin:0 0 10px; display:flex; align-items:center; gap:10px; font:500 12px/1.4 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:#A9BCD3}
.porte-labo__oeil::before{content:""; width:22px; height:2px; border-radius:2px; background:#C98B62}
.porte-labo__titre{margin:0; font:700 clamp(28px, 3.3vw, 38px)/1.12 "Sora",sans-serif; letter-spacing:-.02em; color:#fff}
.porte-labo__titre em{font-style:normal; color:#E0A47A}
.porte-labo__chapo{margin:14px 0 0; max-width:38ch; color:#C3D2E4; font-size:16px; line-height:1.55}

/* la console : quatre lignes qui s'écrivent, puis un curseur qui clignote */
.porte-labo__console{border-radius:14px; overflow:hidden; border:1px solid rgba(107,163,220,.26); background:rgba(4,10,20,.72);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.porte-labo__console-barre{display:flex; align-items:center; gap:6px; padding:9px 12px; background:rgba(22,39,63,.9); border-bottom:1px solid rgba(107,163,220,.18)}
.porte-labo__console-barre i{width:9px; height:9px; border-radius:50%; background:#3A5A85}
.porte-labo__console-barre i:first-child{background:#C2142A}
.porte-labo__console-barre i:nth-child(2){background:#BE8150}
.porte-labo__console-barre span{margin-left:8px; font:500 11.5px/1 "IBM Plex Mono",monospace; letter-spacing:.06em; color:#94A5BB}
.porte-labo__console pre{margin:0; padding:14px 16px 16px; font:500 13px/1.7 "IBM Plex Mono",monospace; color:#C3CEDD; white-space:pre; min-height:calc(5 * 1.7em); overflow:hidden}
.porte-labo__console pre span{display:block; opacity:0; animation:porte-ligne .01s linear forwards}
.porte-labo__console b{font-weight:600; color:#6BA3DC}
.porte-labo__console em{font-style:normal; color:#5FD39A}
.porte-labo__console .l1{animation-delay:.4s} .porte-labo__console .l2{animation-delay:1.3s}
.porte-labo__console .l3{animation-delay:2.2s} .porte-labo__console .l4{animation-delay:3.4s} .porte-labo__console .l5{animation-delay:4.1s}
.porte-labo__console .l1, .porte-labo__console .l3{width:0; overflow:hidden; animation:porte-frappe .8s steps(26, end) forwards}
.porte-labo__console .l1{animation-delay:.4s} .porte-labo__console .l3{animation-delay:2.2s}
.porte-labo__console u{display:inline-block; width:8px; height:15px; vertical-align:-2px; background:#C3CEDD; text-decoration:none; animation:porte-curseur 1.05s steps(1) infinite}
@keyframes porte-ligne{to{opacity:1}}
@keyframes porte-frappe{from{opacity:1; width:0} to{opacity:1; width:27ch}}
@keyframes porte-curseur{50%{opacity:0}}

.porte-labo__points{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.porte-labo__points li{display:flex; align-items:center; gap:12px; font-size:15px; line-height:1.4; color:#DCE6F2}
.porte-labo__points svg{width:32px; height:32px; padding:7px; flex:none; border-radius:10px; color:#9CC4EE;
  background:rgba(107,163,220,.14); border:1px solid rgba(107,163,220,.25)}
.porte-labo__marques{margin-top:auto; display:grid; gap:9px}
.porte-labo__marques-titre{font:500 11.5px/1.4 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:#94A5BB}
.porte-labo__marques ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.porte-labo__marques li{font:500 12.5px/1 "IBM Plex Sans",sans-serif; color:#DCE6F2; padding:7px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(169,188,211,.2)}
.porte-labo__marques li.porte-labo__plus{background:none; border-style:dashed; color:#A9BCD3}

/* les champs avec leur pictogramme */
.champ-icone{position:relative; display:block}
.champ-icone > svg{position:absolute; left:14px; top:50%; translate:0 -50%; width:19px; height:19px; color:var(--gris); pointer-events:none; z-index:1; transition:color .15s}
.champ-icone input{padding-left:44px!important; width:100%}
.champ-icone:focus-within > svg{color:var(--accent)}

:root[data-theme="light"] .porte-labo{background:#F6F9FD; box-shadow:0 30px 90px -30px rgba(11,22,38,.35)}

@media (max-width: 880px){
  .porte-labo{grid-template-columns:1fr; border-radius:22px}
  .porte-labo__volet{gap:14px; padding:22px 24px 24px}
  .porte-labo__console, .porte-labo__points, .porte-labo__chapo{display:none}
  .porte-labo__titre{font-size:clamp(22px, 6vw, 28px)}
  .porte-labo__titre br{display:none}
  .porte-labo__marques{margin-top:4px}
  .porte-labo__reseau{width:72%; top:-30%; opacity:.32}
}
@media (max-width: 480px){
  .porte-labo{border-radius:20px; margin-inline:-4px; width:auto}
  .porte-labo > .acces{padding:24px 20px 26px}
  .porte-labo__marques li{font-size:12px; padding:6px 9px}
}
@media (prefers-reduced-motion: reduce){
  .porte-labo__paquet{animation:none; stroke-dashoffset:0; stroke-dasharray:none; opacity:.4}
  .porte-labo__console pre span, .porte-labo__console .l1, .porte-labo__console .l3{animation:none; opacity:1; width:auto}
  .porte-labo__console u{animation:none}
}