/* L'Atelier IT — par ContinuIT Delivery
   Palette : vert d'atelier (pale et frais) + bleu d'encre, sur papier tres legerement vert.
   Le navy/orange ContinuIT est reserve a la SEULE section "L'atelier et l'usine" :
   on doit VOIR qu'on change de monde. */

:root{
  --papier:#FBFDFB;
  --vert-voile:#EFF7F1;
  --vert-clair:#DCEFE3;
  --vert:#2E9E6B;
  --vert-fonce:#1E7A51;
  --bleu:#1B5FCC;
  --bleu-voile:#EAF1FD;
  --encre:#16324F;
  --encre-doux:#5B6D7E;
  --trait:#DDE7E0;
  --blanc:#fff;

  /* Emprunte a ContinuIT Delivery, uniquement pour la passerelle et le bandeau.
     --cid-orange est la teinte de marque, lisible sur le bloc sombre (#0B1B33) ; sur papier
     elle tombe a 1,94:1 et ne peut pas porter de texte. --cid-fonce est la MEME teinte
     descendue pour passer le seuil texte sur fond clair : c'est elle que porte le nom de la
     maison dans le bandeau. */
  --cid-nuit:#0B1B33;
  --cid-bleu:#1F4E8C;
  --cid-orange:#F59E5C;
  --cid-fonce:#9A4E1E;

  /* Emprunte a l'Accelerateur Business IA, uniquement pour le renvoi vers lui.
     Mesures sur papier : --accel-fonce 5,51:1 (texte, bordures), --accel 3,31:1
     (aplats et filets uniquement -- jamais de texte). Sur le bloc sombre,
     --accel-clair donne 8,32:1. */
  --accel:#0E96C8;
  --accel-fonce:#0A6F96;
  --accel-clair:#63C9EC;

  --ombre-douce:0 2px 4px rgba(22,50,79,.04), 0 8px 24px rgba(22,50,79,.06);
  --ombre-levee:0 6px 12px rgba(22,50,79,.07), 0 18px 40px rgba(22,50,79,.10);

  --rang:1120px;
  --titre:'Bricolage Grotesque', system-ui, sans-serif;
  --texte:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:92px}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu)}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--titre);line-height:1.08;margin:0 0 .35em;letter-spacing:-.022em}
h1{font-size:clamp(2.4rem,6vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.012em}
p{margin:0 0 1em;max-width:68ch}

.rang{width:100%;max-width:var(--rang);margin:0 auto;padding:0 28px}

.surtitre{font-family:var(--titre);font-weight:600;font-size:.95rem;color:var(--vert-fonce);
  margin:0 0 .5em;display:flex;align-items:center;gap:10px}
.surtitre::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--vert)}
.surtitre-clair{color:#8FD9B4}
.surtitre-clair::before{background:var(--cid-orange)}

/* ===== BOUTONS ===== */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:600;font-size:1rem;
  padding:.88em 1.7em;border-radius:12px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bouton-plein{
  background:linear-gradient(180deg,var(--vert) 0%,var(--vert-fonce) 100%);
  color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(30,122,81,.28);
}
.bouton-plein:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px rgba(30,122,81,.34)}
.bouton-clair{
  background:var(--blanc);color:var(--encre);border-color:var(--trait);
  box-shadow:var(--ombre-douce);
}
.bouton-clair:hover{transform:translateY(-2px);box-shadow:var(--ombre-levee);border-color:var(--vert)}
.bouton-petit{padding:.58em 1.15em;font-size:.92rem;border-radius:10px;white-space:nowrap}

/* ===== EN-TETE ===== */
.entete{position:sticky;top:0;z-index:60;background:rgba(251,253,251,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.entete-rang{display:flex;align-items:center;gap:22px;height:80px}
.marque{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre)}
.marque-pastille{flex:none;width:42px;height:42px;border-radius:11px;
  background:var(--blanc) url('../img/logo-globe.png') center/76% no-repeat;
  border:1px solid var(--trait);box-shadow:var(--ombre-douce)}
.marque-texte{display:flex;flex-direction:column;line-height:1.12}
.marque-nom{font-family:var(--titre);font-weight:800;font-size:1.24rem;letter-spacing:-.02em}
.marque-it{color:var(--vert)}
.marque-sous{font-size:.72rem;color:var(--encre-doux)}
.menu{display:flex;gap:20px;margin-left:auto}
.menu a{color:var(--encre);text-decoration:none;font-size:.92rem;font-weight:500;
  padding:.3em 0;border-bottom:2px solid transparent;white-space:nowrap;transition:border-color .15s,color .15s}
.menu a:hover{border-bottom-color:var(--vert);color:var(--vert-fonce)}
.menu-bouton{display:none;background:var(--blanc);border:1px solid var(--trait);border-radius:10px;
  color:var(--encre);font-size:1.15rem;padding:.35em .6em;cursor:pointer;box-shadow:var(--ombre-douce)}

/* ===== OUVERTURE ===== */
.ouverture{position:relative;padding:clamp(60px,9vw,112px) 0 clamp(48px,7vw,84px);overflow:hidden}
.halo{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.halo-vert{width:520px;height:520px;background:#9FE0BE;top:-190px;right:-120px}
.halo-bleu{width:420px;height:420px;background:#AFC9F5;bottom:-220px;left:-140px;opacity:.4}
.ouverture-rang{position:relative;z-index:1}
.ouverture-tag{display:inline-block;font-family:var(--titre);font-weight:600;font-size:.92rem;
  color:var(--vert-fonce);background:var(--vert-clair);border-radius:999px;
  padding:.42em 1.05em;margin:0 0 1.2em}
.ouverture h1{max-width:17ch}
.ouverture-texte{font-size:1.14rem;max-width:60ch;margin-top:.9em;color:#44576A}
.ouverture-texte strong{color:var(--encre)}
.ouverture-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.9em;max-width:none}

.reperes{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:2.6em 0 0}
.reperes li{flex:1 1 200px;background:var(--blanc);border:1px solid var(--trait);
  border-radius:14px;padding:18px 20px;box-shadow:var(--ombre-douce)}
.repere-valeur{display:block;font-family:var(--titre);font-weight:700;font-size:1.05rem;color:var(--vert-fonce)}
.repere-quoi{display:block;color:var(--encre-doux);font-size:.9rem;margin-top:.15em}

/* ===== BANDEAU DES DEUX IMPASSES ===== */
.bandeau-impasses{background:var(--encre);color:#DCE6F0;padding:clamp(44px,6vw,70px) 0}
.bandeau-titre{color:var(--blanc);font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1.1em}
.impasses{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.impasse{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:22px 24px}
/* Les deux titres s'affichent EN VERT, ils ne sont pas barres. La version precedente les
   laissait en gris avec un line-through vert : a l'ecran, cela se lisait comme un texte raye
   d'un trait vert, pas comme un texte vert. Le vert clair (#8FD9B4, celui de .surtitre-clair)
   est choisi pour rester lisible sur le fond encre du bandeau -- le --vert plein est trop
   sombre sur ce fond. */
.impasse-titre{font-family:var(--titre);font-weight:600;font-size:1.06rem;color:#8FD9B4;
  margin:0 0 .45em}
.impasse-suite{color:#B9C9D8;font-size:.95rem;margin:0}
.bandeau-chute{font-family:var(--titre);font-weight:700;color:var(--blanc);
  font-size:clamp(1.15rem,2.2vw,1.5rem);margin:1.5em 0 0;max-width:none}

/* ===== BLOCS ===== */
.bloc{padding:clamp(56px,8vw,104px) 0}
.bloc-vert{background:var(--vert-voile);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.chapo{color:var(--encre-doux);font-size:1.06rem;max-width:60ch;margin-bottom:2.3em}

/* ===== CE QU'ON FABRIQUE ===== */
.commandes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.commande{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:28px 28px 26px;box-shadow:var(--ombre-douce);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
/* --vert-fonce et non --vert-clair : cette derniere est a 1,20:1 du blanc, soit MOINS
   contrastee que la bordure de repos (--trait, 1,27:1). La bordure ne changeait donc PAS
   visiblement au survol : seuls le soulevement et l'ombre se voyaient. D'ou le constat du
   proprietaire le 2026-09-24, « ca fait quelque chose, mais il faut que ca l'entoure plus
   fort » -- il decrivait exactement ce qui se passait. --vert-fonce donne 5,31:1. */
.commande:hover{transform:translateY(-4px);box-shadow:var(--ombre-levee);border-color:var(--vert-fonce)}
.commande-icone{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--vert-clair);color:var(--vert-fonce);margin-bottom:1em}
.commande-icone svg{width:22px;height:22px}
.commande h3{color:var(--encre)}
.commande p{color:var(--encre-doux);font-size:.97rem;margin:0}
.commande p strong{color:var(--encre)}
.commandes-note{margin-top:2em;font-size:1.02rem}

/* ===== POURQUOI ON VA VITE ===== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.duo-carte{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:26px 28px;box-shadow:var(--ombre-douce)}
.duo-carte h3{margin-bottom:.7em}
.duo-carte ul{list-style:none;padding:0;margin:0}
.duo-carte li{position:relative;padding-left:26px;margin-bottom:.6em;color:var(--encre-doux);font-size:.97rem}
.duo-carte li::before{position:absolute;left:0;top:.05em;font-weight:700}
.duo-ia{border-top:3px solid var(--vert)}
.duo-ia h3{color:var(--vert-fonce)}
.duo-ia li::before{content:"+";color:var(--vert)}
.duo-nous{border-top:3px solid var(--bleu)}
.duo-nous h3{color:var(--bleu)}
.duo-nous li::before{content:"\2022";color:var(--bleu)}
.vitesse-chute{margin-top:2em;font-size:1.06rem;max-width:74ch}
/* Les certifications vivent DANS "Pourquoi on code vite" : elles repondent a la question que
   la section pose deja (qu'est-ce qui fait qu'un outil sorti vite tient ?). Pas de section
   dediee, pas d'entree de menu -- le menu est deja au maximum de ce qu'il peut porter. */
.atouts-intro{margin-top:2.2em;margin-bottom:0;font-family:var(--titre);font-weight:600;font-size:1.06rem;max-width:74ch}
.reperes-atouts{margin-top:1.1em}

/* ===== L'ESCALIER — l'element fort de la page ===== */
.escalier{list-style:none;padding:0;margin:0}
.marche{display:flex;gap:0;align-items:stretch;background:var(--blanc);
  border:1px solid var(--trait);border-radius:16px;margin-bottom:16px;
  box-shadow:var(--ombre-douce);overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease}
.marche:hover{transform:translateY(-3px);box-shadow:var(--ombre-levee)}
.marche-rang{flex:none;width:74px;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:800;font-size:1.9rem;
  background:var(--vert-voile);color:var(--vert-fonce)}
.marche-texte{padding:26px 30px}
.marche h3{margin-bottom:.3em}
.marche p{margin:0;color:var(--encre-doux);font-size:1rem}
/* La montee : chaque marche part plus a droite, et la 3e est pleine */
.marche-1{margin-left:0;width:100%}
.marche-2{margin-left:5%;width:95%}
.marche-3{margin-left:10%;width:90%;
  background:linear-gradient(135deg,var(--vert) 0%,var(--vert-fonce) 100%);
  border-color:var(--vert-fonce);box-shadow:0 10px 30px rgba(30,122,81,.25)}
.marche-3 .marche-rang{background:rgba(255,255,255,.16);color:#fff}
.marche-3 h3{color:#fff}
.marche-3 p{color:#DFF3E8}

/* ===== COMMENT CA SE PASSE ===== */
.etapes{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 30px}
.etape{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:24px 26px;box-shadow:var(--ombre-douce);position:relative}
.etape-num{position:absolute;top:-14px;left:26px;width:30px;height:30px;border-radius:9px;
  background:var(--bleu);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:700;font-size:.95rem;box-shadow:0 4px 12px rgba(27,95,204,.3)}
.etape h3{margin-top:.35em}
.etape p{color:var(--encre-doux);font-size:.97rem;margin:.4em 0 0}
/* Nombre impair d'etapes : la derniere occupe la largeur au lieu de laisser un trou.
   Se desactive seule si on repasse a un nombre pair. */
.etapes > .etape:last-child:nth-child(odd){grid-column:1 / -1}

/* ===== PASSERELLE : le seul bloc sombre, aux couleurs ContinuIT ===== */
.bloc-sombre{background:var(--cid-nuit);color:#E8EDF5;padding:clamp(56px,8vw,104px) 0}
.bloc-sombre h2{color:#fff}
.trois-maisons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:2em 0 0}
.monde{padding:28px 30px;border-radius:16px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14)}
.monde h3{color:#8FD9B4}
.monde p{color:#B9C6D8;font-size:.99rem;margin:0}
.monde-cid{background:rgba(245,158,92,.07);border-color:rgba(245,158,92,.28)}
.monde-cid h3{color:var(--cid-orange)}
.monde-accel{background:rgba(14,150,200,.07);border-color:rgba(14,150,200,.30)}
.monde-accel h3{color:var(--accel-clair)}
.monde-lien{margin-top:1em!important}
.monde-lien a{color:var(--cid-orange);font-weight:600}
.monde-accel .monde-lien a{color:var(--accel-clair)}
.trois-maisons-note{margin-top:2em;font-size:1.08rem;color:#D5DEEA;max-width:74ch}
.trois-maisons-note strong{color:#fff}

/* ===== RENVOI VERS L'ACCELERATEUR BUSINESS IA =====
   Meme principe que la passerelle CID : on emprunte la couleur de l'autre maison
   pour que le visiteur VOIE qu'on l'envoie ailleurs. Ici sans fond teinte -- le
   renvoi ne doit pas peser plus lourd que le bloc de contact qui le suit. */
.bloc-renvoi .surtitre{color:var(--accel-fonce)}
.bloc-renvoi .surtitre::before{background:var(--accel)}
.bloc-renvoi .bouton-clair{border-color:var(--accel-fonce)}
.bloc-renvoi .bouton-clair:hover{border-color:var(--accel-fonce)}
.bloc-renvoi :focus-visible{outline-color:var(--accel-fonce)}

/* ===== FINAL ===== */
.bloc-final{text-align:center;background:var(--vert-voile);border-top:1px solid var(--trait)}
.bloc-final .surtitre{justify-content:center}
.bloc-final .chapo,.bloc-final p{margin-left:auto;margin-right:auto}
.bloc-final .ouverture-actions{justify-content:center}
.mention{color:var(--encre-doux);font-size:.93rem;margin-top:1.5em}

/* ===== PIED ===== */
/* ===== BANDEAU DES TROIS MAISONS =====
   Dispositif IDENTIQUE dans les trois depots (garde anti-divergence : tests/test-bandeau.mjs).
   Permanent et discret, en PIED de page : consignes-sections.md §7 -- jamais en haut, on ne
   fait pas sortir un lecteur avant qu'il ait lu.

   Ce bandeau pose son propre fond (--vert-voile) : toutes ses paires de contraste ont donc
   --vert-voile pour second terme, y compris l'anneau de focus et les filets. Mesures faites
   ici, sur CE site -- les valeurs de l'Accelerateur ne s'y transposent pas, son fond differe.
     --encre sur --vert-voile        12,00:1  phrase du bandeau
     --cid-fonce sur --vert-voile     5,53:1  nom de ContinuIT Delivery   PAIRE NEUVE
     --accel-fonce sur --vert-voile   5,16:1  nom de l'Accelerateur       PAIRE NEUVE
     --encre-doux sur --vert-voile    4,89:1  sous-titres <small> (seuil texte 4,5 : conforme)
     --vert-fonce sur --vert-voile    4,86:1  nom de L'Atelier IT, et ANNEAU DE FOCUS
     --vert sur --vert-voile          3,09:1  valeur qu'aurait prise l'anneau de focus GLOBAL
       (`:focus-visible{outline:3px solid var(--vert)}`, 3,30:1 sur --papier) s'il avait ete
       laisse tel quel : conforme au seuil 3:1 des indicateurs non textuels, mais DE 0,09.
       C'est le piege decrit au §3 des consignes, et il s'est deja paye trois fois sur ce
       chantier. Changer un fond, c'est changer le second terme de TOUTES ses paires.

   LES DEUX NOMS LIES NE SONT PLUS EN --bleu. Ils l'etaient parce que les liens de CE site
   sont bleus (`a{color:var(--bleu)}`, 5,41:1) et qu'un lien vert dans un pied de page vert
   ne se lirait pas comme un lien. Le dispositif demande fait desormais porter au NOM la
   couleur de sa maison : l'etat de lien ne peut donc plus passer par la couleur, et il passe
   par le soulignement au survol et par l'anneau au focus -- deux signaux non chromatiques,
   qui valent aussi pour un lecteur qui ne distingue pas ces teintes. En contrepartie le nom
   de la maison courante porte lui aussi sa couleur, et « vous y etes » se dit en capitales
   dans le <small> (voir la regle plus bas), non plus par une couleur d'encre a part.

   POURQUOI PAS LES TEINTES DE MARQUE TELLES QUELLES. Sur papier c'est l'inverse du site CID :
   il faut DESCENDRE la teinte, pas la monter. --cid-orange vaut 1,94:1 ici et --accel 3,10:1 :
   aucune des deux ne porte de texte. On prend la meme teinte assombrie (--cid-fonce,
   --accel-fonce, --vert-fonce). Regle valable pour les trois depots : couleur claire sur fond
   sombre, couleur foncee sur fond clair.
   Les pastilles suivent le nom en `currentColor` : elles valent donc exactement les trois
   paires de noms ci-dessus (4,86 a 5,53:1), la ou elles tombaient entre 1,94 et 3,10:1 en
   teintes de marque pleines -- la pastille ContinuIT, a 1,94:1, etait la plus faible du
   bandeau. Elles restent aria-hidden et strictement redondantes avec le nom ecrit a cote :
   l'information ne passe jamais par la couleur seule (1.4.1).
     --trait sur --vert-voile         1,16:1  filet bas, decoratif
   Les trois teintes foncees restent proches en luminance (1,06 a 1,14:1 entre elles) : en
   niveaux de gris les pastilles seraient encore confondues, comme l'etaient --vert et --accel.
   Le nom ecrit a cote est ce qui porte l'information ; la couleur n'est qu'un rappel.
   Les trois anneaux de marque de l'embleme sont du meme ordre, et pour la meme raison :
     #D97E4A (orange CID) sur --vert-voile         2,74:1
     #2E9E6B (vert Atelier) sur --vert-voile       3,09:1
     #0E96C8 (azur Accelerateur) sur --vert-voile  3,10:1 */
.bandeau{background:var(--vert-voile);border-bottom:1px solid var(--trait);padding:30px 0 26px}
.bandeau-rang{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
/* ===== L'EMBLEME DES TROIS MAISONS =====
   Trois anneaux borromeens -- aucun ne peut etre retire sans que les deux autres se separent --
   dans un anneau qui les contient : trois marques, une seule production. Les trois couleurs
   sont celles des trois maisons (orange CID, vert L'Atelier, azur Accelerateur).

   Il est EN LIGNE dans index.html, identique dans les trois depots, et ne depend d'aucun
   fichier. Un seul endroit a toucher pour le faire evoluer : la balise `.bandeau-logo`.

   L'ANNEAU CONTENANT EST EN `currentColor`, et c'est ici qu'il prend sa valeur. C'est la
   seule concession au site : un anneau navy sur le fond navy du site CID tombe a 1,74:1 --
   invisible. Le dessin reste identique partout ; seule sa couleur de cadre suit le fond,
   comme toute autre regle .bandeau* de cette feuille.
     --cid-bleu #1F4E8C sur --vert-voile   7,62:1  l'anneau contenant, ici

   Il ouvre le bandeau, sur sa PROPRE LIGNE, centre au-dessus de la phrase -- premier enfant
   de `.bandeau-rang`. Place entre deux marques il serait decale vers la droite : dans une
   rangee de trois marques de largeurs inegales, le milieu de la LISTE n'est pas le milieu de
   la LIGNE. tests/test-bandeau.mjs verrouille cette position.
   La boite fait 64 x 64 px a TOUTES les largeurs : c'est une contrainte de dessin stable.
   Aucun border-radius, aucun fond : ils rogneraient ou saliraient le dessin. */
.bandeau-logo{flex:none;display:block;width:64px;height:64px;color:var(--cid-bleu)}
.bandeau-phrase{margin:0;max-width:none;font-family:var(--titre);font-weight:600;
  font-size:1.02rem;color:var(--encre)}
.bandeau-marques{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px 34px;width:100%;max-width:880px;margin-top:2px}
.bandeau-marque{display:block;flex:0 1 auto;font-family:var(--titre);font-weight:600;font-size:.95rem;
  text-decoration:none;border-radius:8px}
/* CHAQUE NOM PORTE LA COULEUR DE SA MAISON, la courante comprise -- c'est le dispositif
   demande. La pastille suit en `currentColor` : une seule source de verite par maison, et
   plus de risque de voir le point et le nom diverger de deux nuances de vert. */
.bandeau-cid{color:var(--cid-fonce)}
.bandeau-atelier{color:var(--vert-fonce)}
.bandeau-accelerateur{color:var(--accel-fonce)}
a.bandeau-marque:hover{text-decoration:underline;text-underline-offset:4px}
.bandeau-marque small{display:block;font-family:var(--texte);font-weight:400;
  font-size:.82rem;line-height:1.4;color:var(--encre-doux)}
/* « VOUS Y ETES » EN CAPITALES : le marqueur de la marque courante ne passe plus par la
   couleur (elle porte desormais sa teinte de maison comme les deux autres). Il reprend la
   forme du badge `.maison-courante` de l'Accelerateur -- capitales, gras, corps reduit.
   Typographique et non chromatique, il tient en niveaux de gris comme en couleur, et il
   double `aria-current="page"` que lisent les technologies d'assistance. */
.bandeau-marque[aria-current="page"] small{font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.74rem}
.bandeau-pastille{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:8px;vertical-align:.08em;background:currentColor}
.bandeau :focus-visible{outline-color:var(--vert-fonce)}
/* L'ANNEAU DE FOCUS SUIT LE NOM, en `currentColor`. Un anneau orange autour d'un nom vert se
   voyait parfaitement mais jurait. Surtout, cette forme est SURE PAR CONSTRUCTION : un
   indicateur non textuel demande 3:1, un texte 4,5:1 ; toute couleur assez lisible pour ecrire
   le nom l'est donc a fortiori pour en tracer l'anneau. Mesures du jour sur le rendu :
   5,53:1 (ContinuIT), 4,86:1 (L'Atelier), 5,16:1 (Accelerateur).
   Le reste du bandeau garde l'anneau general defini juste au-dessus. */
.bandeau-marque:focus-visible{outline-color:currentColor}

@media (max-width:620px){
  .bandeau{padding:24px 0 22px}
  .bandeau-marques{flex-direction:column;gap:14px;max-width:340px}
}

.pied{border-top:1px solid var(--trait);background:var(--papier)}
.pied-rang{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;padding-top:24px;padding-bottom:28px}
.pied-marque{font-family:var(--titre);font-weight:600;margin:0}
.pied-menu{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
.pied-menu a{color:var(--encre-doux);text-decoration:none;font-size:.9rem}
.pied-menu a:hover{color:var(--vert-fonce)}
.pied-legal{margin:0;color:var(--encre-doux);font-size:.9rem}

/* ===== PETITS ECRANS ===== */
/* ENTETE -- ses points de rupture sont ceux du MENU, pas ceux des grilles : le menu deborde
   bien avant que les grilles n'aient besoin de passer en une colonne. Les deux etaient
   confondus dans un seul @media(max-width:900px), et l'entete debordait deja de la fenetre
   entre 901 et ~1100px avant meme l'ajout de "Ce qu'on cherche" (le bouton "Nous ecrire"
   sortait de l'ecran, sans barre de defilement pour le signaler).
   Mesures a 5 entrees. Libelles d'origine ("Ce qu'on developpe pour vous", "Ce que l'on optimise
   pour vous") : taille pleine il faut >=1522px, compacte (gap 14 / .86rem) >=1312px. Les seuils
   portent la marge de securite.
   Remesure le 2026-09-23 apres le recentrage IA ("Ce que l'on optimise pour vous" remplace par
   "L'IA dans vos processus", "L'atelier et l'usine" par "Les trois maisons") : toujours 5 entrees,
   mais 1242px requis au lieu de 1290 a taille pleine -- 48px de MOINS. Les seuils ci-dessous
   gardent donc leur marge, aucun n'a bouge.
   Toute entree ou tout libelle ajoute DOIT etre remesure ici :
   le debordement ne produit aucune barre de defilement (overflow-x:hidden sur body), donc il
   ne se signale pas tout seul. */
@media(min-width:1321px) and (max-width:1560px){.menu{gap:14px}.menu a{font-size:.86rem}.entete-rang{gap:14px}}
/* Bande serree : plutot que de replier le menu derriere un burger des 1320px (ce que les
   libelles longs imposeraient), on retrecit encore police et gouttieres. Le menu reste VISIBLE
   -- c'est le choix retenu : un visiteur doit voir les sections d'un coup d'oeil, pas les
   deviner derriere un bouton. */
@media(min-width:1141px) and (max-width:1320px){.menu{gap:9px}.menu a{font-size:.75rem}.entete-rang{gap:10px}}

@media(max-width:1140px){
  .menu{position:fixed;inset:80px 0 auto;flex-direction:column;gap:2px;
    background:var(--papier);border-bottom:1px solid var(--trait);
    padding:14px 28px 20px;transform:translateY(-130%);transition:transform .28s ease;z-index:50}
  .menu.ouvert{transform:none}
  .menu a{padding:.6em 0}
  .menu-bouton{display:inline-flex;order:3}
  .bouton-petit{margin-left:auto}
}

/* GRILLES -- seuil inchange (900px) : c'est la largeur a laquelle deux colonnes deviennent
   illisibles, independamment du menu. */
@media(max-width:900px){
  .commandes,.duo,.etapes,.impasses,.trois-maisons{grid-template-columns:1fr}
  .marche-1,.marche-2,.marche-3{margin-left:0;width:100%}
  .marche-texte{padding:22px 22px}
  .marche-rang{width:58px;font-size:1.5rem}
}
@media(max-width:520px){
  body{font-size:16px}
  .marque-sous{display:none}
  .ouverture-actions .bouton{width:100%}
  .halo{display:none}
}

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

/* ===== WIDGET ASSISTANT ===== */
.chat-bulle{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;
  border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--vert) 0%,var(--vert-fonce) 100%);
  box-shadow:0 8px 24px rgba(30,122,81,.35);
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.chat-bulle:hover{transform:translateY(-3px) scale(1.04)}
.chat-bulle svg{width:26px;height:26px}
.chat-panneau[hidden]{display:none}
.chat-panneau{position:fixed;right:22px;bottom:92px;z-index:70;width:min(360px,calc(100vw - 44px));
  background:var(--blanc);border:1px solid var(--trait);border-radius:18px;
  box-shadow:0 18px 50px rgba(22,50,79,.22);display:flex;flex-direction:column;overflow:hidden}
.chat-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;background:var(--vert-voile);border-bottom:1px solid var(--trait);
  font-family:var(--titre);font-weight:600;color:var(--encre)}
.chat-fermer{background:none;border:none;font-size:1.35rem;line-height:1;cursor:pointer;color:var(--encre-doux)}
.chat-fil{padding:14px 16px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.chat-msg{font-size:.94rem;padding:.62em .9em;border-radius:12px;max-width:88%;white-space:pre-wrap}
.chat-bot{background:var(--vert-voile);color:var(--encre);align-self:flex-start;border-bottom-left-radius:4px}
.chat-moi{background:var(--bleu);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-saisie{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--trait)}
.chat-saisie #chat-input{flex:1;min-width:0;border:1px solid var(--trait);border-radius:10px;
  padding:.6em .8em;font-family:var(--texte);font-size:.94rem;color:var(--encre);background:var(--papier)}
.chat-saisie #chat-input:focus{outline:none;border-color:var(--vert)}
#chat-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Bouton micro (dictee vocale). Injecte par chat.js seulement si le navigateur
   supporte la Web Speech API. En ecoute : pastille verte + pulsation, pour qu'on
   VOIE qu'on est ecoute (pulsation coupee si l'utilisateur limite les animations).
   Meme rayon que le champ de saisie (10px) : ici le vocabulaire est carre, pas rond. */
.chat-micro{flex:none;align-self:center;width:38px;height:38px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--blanc);border:1px solid var(--trait);color:var(--encre-doux);
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.chat-micro svg{width:18px;height:18px}
.chat-micro:hover{color:var(--vert-fonce);border-color:var(--vert)}
.chat-micro.ecoute{background:var(--vert);border-color:var(--vert);color:#fff;
  animation:chat-micro-pulse 1.5s ease-out infinite}
@keyframes chat-micro-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,158,107,.5)}
  70%{box-shadow:0 0 0 9px rgba(46,158,107,0)}
  100%{box-shadow:0 0 0 0 rgba(46,158,107,0)}
}
@media (prefers-reduced-motion:reduce){.chat-micro.ecoute{animation:none}}

.chat-mention{margin:0;padding:0 14px 12px;font-size:.72rem;color:var(--encre-doux);max-width:none}
@media(max-width:520px){
  .chat-panneau{right:12px;left:12px;width:auto;bottom:86px}
  .chat-bulle{right:14px;bottom:14px}
}

/* ===== PAGE LEGALE (confidentialite.html) =====
   Meme coque que le site, corps de lecture etroit. Les valeurs de contraste
   ci-dessous sont mesurees sur la palette de L'Atelier, pas heritees :
     --encre #16324F sur --papier #FBFDFB ........... 12,81:1  texte courant
     --encre sur --vert-voile #EFF7F1 ............... 12,00:1  texte sur bloc teinte
     --encre-doux #5B6D7E sur --papier .............. 5,22:1   date, chapeau
     --encre-doux sur --vert-voile .................. 4,89:1   libelles de ligne
     --vert-fonce #1E7A51 sur --papier .............. 5,19:1   titres de section
     --bleu #1B5FCC sur --papier .................... 5,78:1   liens
     --bleu sur --vert-voile ........................ 5,41:1   liens sur bloc teinte
   PIEGE DESAMORCE PLUS BAS : l'anneau de focus global est --vert #2E9E6B, qui vaut
   3,30:1 sur --papier mais tombe a 3,09:1 sur --vert-voile. Tout element qui pose
   ce fond redefinit donc son anneau en --vert-fonce (4,86:1). */
.entete-retour{margin-left:auto}

.page-legale{max-width:820px;padding-top:56px;padding-bottom:72px}
.page-legale h1{font-size:clamp(1.9rem,4.4vw,2.8rem);margin:0 0 .4rem}
.page-legale h2{font-size:1.25rem;margin:2.4rem 0 .8rem;padding-top:1.4rem;
  border-top:1px solid var(--trait);color:var(--vert-fonce)}
.page-legale h3{font-size:1.05rem;margin:1.6rem 0 .5rem;color:var(--encre)}
.page-legale p{line-height:1.7;max-width:none}
.page-legale ul{line-height:1.7;padding-left:1.2rem;max-width:none}
.page-legale li{margin:.4rem 0}
.legale-date{color:var(--encre-doux);font-size:.9rem;margin:0 0 2rem}
.legale-chapeau{font-size:1.05rem;color:var(--encre-doux)}

/* Tableaux : ils portent l'essentiel (finalites, sous-traitants, durees).
   overflow-x sur le conteneur — sur mobile la page ne doit jamais scroller
   horizontalement, c'est le tableau qui scrolle. */
.tab-legale{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem;display:block;overflow-x:auto}
.tab-legale th,.tab-legale td{border:1px solid var(--trait);padding:.7rem .9rem;
  text-align:left;vertical-align:top;font-size:.95rem;line-height:1.55}
.tab-legale thead th{background:var(--vert-voile);color:var(--encre);font-weight:600}
.tab-legale tbody th{background:var(--vert-voile);color:var(--encre-doux);font-weight:600;white-space:nowrap}
.tab-legale td{color:var(--encre)}
.tab-legale th :focus-visible,.tab-legale td :focus-visible{outline-color:var(--vert-fonce)}

/* ===== CONTOUR AU SURVOL SUR TOUTES LES FAMILLES DE BLOCS =====
   Retour proprietaire 2026-09-24 : « je passe dessus, il ne se passe rien », et pour la
   seule famille qui reagissait, « il faut aussi que ca l'entoure un peu plus fort ».

   LE DIAGNOSTIC, ET IL EXPLIQUE LES DEUX REMARQUES D'UN COUP.
   .commande etait la seule famille a porter un :hover, et sa bordure passait de --trait
   (#DDE7E0) a --vert-clair (#DCEFE3). Ces deux teintes sont a 1,20:1 du blanc :
   autrement dit la bordure ne changeait PAS visiblement, seuls le soulevement et l'ombre se
   voyaient. Le proprietaire a donc lu « il se passe quelque chose, mais pas de contour » --
   c'etait litteralement le cas. On prend --vert plein (3,38:1), une vraie bordure.

   Les autres familles n'avaient aucun etat : .impasse (les deux panneaux du bandeau),
   .duo-carte (la section IA), .etape (les cinq etapes), .monde (les trois maisons),
   .reperes li (les pastilles de certification).

   DEUX CONTEXTES, DEUX TEINTES. Sur fond clair, --vert. Sur fond sombre (.bandeau-impasses
   sur --encre, .bloc-sombre sur --cid-nuit), le vert fonce disparaitrait : on y prend le vert
   clair #8FD9B4, deja employe par les titres de ces blocs.
   Les trois maisons s'allument CHACUNE DANS SA COULEUR -- la couleur dit de quelle maison on
   parle, c'est tout le dispositif : 10,46:1 vert, 8,15:1 orange, 9,10:1 azur.

   :focus-within partout ou le bloc contient un lien : une affordance reservee a la souris
   est invisible au clavier.
   Toutes les mesures ci-dessus sont au-dessus du seuil 3:1 des indicateurs non textuels,
   et verifiees par assertion dans le script qui a genere ce bloc. */

/* -- fond clair -- */
.commande:hover,.commande:focus-within{border-color:var(--vert-fonce)}
.duo-carte,.etape,.reperes li{transition:border-color .25s,transform .25s,box-shadow .25s}
.duo-carte:hover,.duo-carte:focus-within,
.etape:hover,.etape:focus-within{border-color:var(--vert-fonce);transform:translateY(-4px);
  box-shadow:var(--ombre-levee)}
.reperes li:hover{border-color:var(--vert-fonce);transform:translateY(-2px);box-shadow:var(--ombre-douce)}

/* -- fond sombre -- */
.impasse,.monde{transition:border-color .25s,transform .25s,background-color .25s}
.impasse:hover,.impasse:focus-within{border-color:#8FD9B4;background:rgba(255,255,255,.08);
  transform:translateY(-3px)}
.monde:hover,.monde:focus-within{border-color:#8FD9B4;transform:translateY(-3px)}
.monde-cid:hover,.monde-cid:focus-within{border-color:var(--cid-orange)}
.monde-accel:hover,.monde-accel:focus-within{border-color:var(--accel-clair)}