/* =========================================================================
   Agel Engineering. Cette feuille ne definit aucune valeur : elle consomme
   les jetons de design-system/tokens/. Une couleur ou un espacement se
   change la-bas, jamais ici.
   La grammaire vient du planning : une trame d un pixel, un trait de deux
   pixels pour le chemin critique, un losange pour le jalon, cinq phases.
   Le rayon dit le rang (28, 16, 12 px, pilules) ; pas d ombre, la
   profondeur vient des aplats ; seul le losange du jalon garde ses angles.
   Un seul moment bouge : le chemin critique du bandeau au chargement, et le
   deroule d une mission quand on l atteint (assets/vivant.js).
   ========================================================================= */

/* la police de donnee est declaree ici pour que les articles en beneficient
   sans qu il faille toucher a leur generateur */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");
@import url("../design-system/tokens/couleurs.css");
@import url("../design-system/tokens/typographie.css");
@import url("../design-system/tokens/espacement.css");
@import url("../design-system/tokens/formes.css");

:root{
  /* noms courts, valeurs tenues par la charte */
  --maroon:var(--ae-jalon);
  --maroon-clair:#7c2f3d;
  --rose:var(--ae-appui);
  --rose-pale:#f0cfd5;
  --blanc:#FFFFFF;
  --papier:var(--ae-papier);
  --encre:var(--ae-encre);
  --encre-2:#3f3a3b;
  --gris:var(--ae-acier);
  --ligne:var(--ae-trait);

  --f:var(--ae-police-titre);
  --fd:var(--ae-police-donnee);

  --u1:var(--ae-1); --u2:var(--ae-2); --u3:var(--ae-3); --u4:var(--ae-4);
  --u6:var(--ae-6); --u8:var(--ae-8); --u12:var(--ae-12); --u16:var(--ae-16);
  --page:var(--ae-page);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* noms attendus par la feuille interne des articles : ils tombent ainsi
     sur la charte au lieu de leurs valeurs de secours */
  --voile:#fbf3f4;
  --ink-2:#3f3a3b;
  --rose-4:var(--ae-appui);
  --rose-6:#f0cfd5;

  --filet:var(--ae-filet);
  --critique:var(--ae-critique);
  --rs:var(--ae-rayon-s); --r:var(--ae-rayon); --rl:var(--ae-rayon-l); --rp:var(--ae-rayon-pilule);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);font-family:var(--f);font-size:17px;
     line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
     font-variant-numeric:tabular-nums}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--u3)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:var(--rs)}
section[id],#haut,[id="contact-formulaire"]{scroll-margin-top:96px}

h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--maroon)}
h1{font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.035em;color:var(--blanc);max-width:15ch}
h2{font-size:clamp(28px,3.8vw,46px);letter-spacing:-.03em;max-width:20ch}
h3{font-size:19px;letter-spacing:-.01em}
p{max-width:64ch;color:var(--encre-2)}

/* ── En-tête ───────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;background:rgba(99,29,42,.93);
       -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.bar{max-width:var(--page);margin:0 auto;padding:var(--u2) var(--u3);
     display:flex;align-items:center;gap:var(--u4)}
.bar .logo img{height:44px;width:auto;max-width:none}
header .bar nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:nowrap}
header .bar nav a{font-size:15px;font-weight:500;color:var(--rose-pale);text-decoration:none;
                  padding:9px 12px;white-space:nowrap;border-radius:var(--rp);
                  transition:background 180ms var(--ease),color 180ms var(--ease)}
header .bar nav a:hover{color:var(--blanc);background:rgba(255,255,255,.1)}
#nav-principal{display:flex;gap:4px;margin-left:auto;align-items:center}
#nav-principal a{font-size:15px;font-weight:500;color:var(--rose-pale);text-decoration:none;
                 padding:9px 12px;white-space:nowrap;border-radius:var(--rp);
                 transition:background 180ms var(--ease),color 180ms var(--ease)}
#nav-principal a:hover{color:var(--blanc);background:rgba(255,255,255,.1)}
#nav-principal .btn{display:none}   /* le bouton du menu ne sert qu au telephone */
.menu{display:none;margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--rose);
      color:var(--blanc);font-family:var(--f);font-size:15px;font-weight:500;padding:9px 18px;
      cursor:pointer;align-items:center;gap:10px;border-radius:var(--rp)}
.menu .traits{display:inline-block;width:16px;height:11px;position:relative}
.menu .traits::before,.menu .traits::after{content:"";position:absolute;left:0;right:0;height:1.5px;
      background:var(--rose);transition:transform 180ms var(--ease)}
.menu .traits::before{top:1px}
.menu .traits::after{bottom:1px}
.menu[aria-expanded="true"] .traits::before{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded="true"] .traits::after{transform:translateY(-4px) rotate(-45deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--f);
     font-size:15px;font-weight:600;padding:13px 24px;min-height:48px;border:1px solid var(--rose);
     color:var(--blanc);background:transparent;text-decoration:none;white-space:nowrap;cursor:pointer;
     border-radius:var(--rp);transition:background 160ms var(--ease),color 160ms var(--ease)}
.btn:hover{background:var(--rose);color:var(--maroon)}
.btn.plein{background:var(--rose);color:var(--maroon)}
.btn.plein:hover{background:var(--rose-pale)}
.btn.encre{border-color:var(--maroon);color:var(--maroon)}
.btn.encre:hover{background:var(--maroon);color:var(--blanc)}
.btn.encre.plein{background:var(--maroon);color:var(--blanc)}
.btn.encre.plein:hover{background:var(--maroon-clair)}

/* ── Bandeau : l'axe des phases est la signature de la page ────────────── */
.hero{background:var(--maroon);color:var(--blanc);padding:var(--u16) 0 0;position:relative;overflow:hidden}
/* le moment orchestre de la page : un reseau de taches dont le chemin
   critique se trace et dont les jalons se posent, une fois, au chargement */
.hero .visu{position:absolute;right:max(24px,calc((100vw - var(--page)) / 2 + 24px));bottom:150px;
      width:min(27vw,340px);pointer-events:none}
.hero .visu svg{width:100%;height:auto;overflow:visible}
.hero p{color:var(--rose-pale);max-width:52ch;font-size:19px;margin-top:var(--u3)}
.hero .secteurs{margin-top:var(--u2);font-size:15px;color:var(--rose)}
.hero .actions{display:flex;gap:var(--u2);margin-top:var(--u6);flex-wrap:wrap}
.axe{margin-top:var(--u12);border-top:1px solid var(--maroon-clair);display:grid;
     grid-template-columns:repeat(5,1fr);position:relative}
/* le chemin critique se trace sur l axe au chargement */
.axe::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;
     background:var(--rose);transform-origin:left;animation:trace 1.6s var(--ease) .3s both}
@keyframes trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.axe div{padding:var(--u2) var(--u2) var(--u4) 0;font-size:14px;font-weight:500;color:var(--rose-pale);
         border-left:1px solid var(--maroon-clair);padding-left:var(--u2);position:relative}
.axe div:first-child{border-left:0;padding-left:0}
.axe div::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;z-index:1;
                 background:var(--rose);transform:rotate(45deg);
                 animation:jalon .5s var(--ease) both;animation-delay:calc(.35s + var(--i,0) * .3s)}
.axe div:nth-child(2){--i:1}.axe div:nth-child(3){--i:2}.axe div:nth-child(4){--i:3}.axe div:nth-child(5){--i:4}
@keyframes jalon{from{transform:rotate(45deg) scale(0)}70%{transform:rotate(45deg) scale(1.5)}to{transform:rotate(45deg) scale(1)}}
.axe div:first-child::before{left:-3px}

/* ── Sections ──────────────────────────────────────────────────────────── */
section{padding:var(--u16) 0}
.tete{margin-bottom:var(--u6)}
.tete p{margin-top:var(--u2)}

/* ── Tableaux : le livrable par métier, puis le métier par phase ───────── */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--blanc);
      border-radius:var(--r)}
table tr > :first-child{padding-left:var(--u3)}
table tr > :last-child{padding-right:var(--u3)}
thead th:first-child{border-top-left-radius:var(--r)}
thead th:last-child{border-top-right-radius:var(--r)}
tbody tr:last-child > *{border-bottom:0}
tbody tr:last-child > :first-child{border-bottom-left-radius:var(--r)}
tbody tr:last-child > :last-child{border-bottom-right-radius:var(--r)}
caption{text-align:left;font-size:14px;color:var(--gris);
        padding-bottom:var(--u2)}
th,td{text-align:left;padding:18px var(--u2) 18px 0;border-bottom:var(--filet) solid var(--ligne);
      vertical-align:baseline}
/* l en-tete d un tableau est une donnee, et son filet est le chemin critique */
thead th{font-size:13px;font-weight:600;color:var(--gris);padding-top:var(--u2);
         padding-bottom:var(--u2);background:var(--voile);border-bottom:var(--critique) solid var(--maroon)}
tbody th{font-weight:600;color:var(--maroon);font-size:18px;width:38%}
tbody th a{text-decoration:none;border-bottom:var(--filet) solid var(--rose);padding-bottom:2px;
           transition:border-width 160ms var(--ease)}
tbody th a:hover{border-bottom-width:var(--critique)}
tbody td{color:var(--encre-2)}
tbody tr td,tbody tr th{transition:background 180ms var(--ease)}
tbody tr:hover td,tbody tr:hover th{background:var(--voile)}

.phases td{text-align:center;padding:var(--u2) 4px}
.phases thead th{text-align:center;font-size:13px}
.phases thead th:first-child{text-align:left}
.phases tbody th{width:32%;font-size:16px}
/* le jalon, atome de la marque : plein quand le metier porte la phase, vide en appui */
.marque-phase{display:inline-block;width:11px;height:11px;background:var(--maroon);
              transform:rotate(45deg)}
.marque-phase.appui{background:transparent;box-shadow:inset 0 0 0 1.5px var(--rose)}
.legende{margin-top:var(--u3);font-size:15px;color:var(--gris);display:flex;gap:var(--u4);
         flex-wrap:wrap;align-items:center}
.legende span{display:flex;align-items:center;gap:10px}

/* ── Le seul bloc contrasté : la mission ───────────────────────────────── */
.mission{background:var(--maroon);color:var(--blanc);border-top:0}
.mission h2{color:var(--blanc)}
.mission p{color:var(--rose-pale)}
.mission .contenu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--u12);
                  align-items:start}
.mission .etapes p{margin-top:var(--u3);max-width:48ch;padding:var(--u3);border-radius:var(--r);
      background:rgba(255,255,255,.07)}
.mission .etapes b{display:block;font-weight:600;color:var(--blanc);font-size:17px}
.mission figure{margin:0;background:var(--blanc);padding:var(--u3);border-radius:var(--rl)}
.mission figure svg{width:100%;height:auto}

/* ── Le livrable mensuel ───────────────────────────────────────────────── */
.livrable{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--u12);
          align-items:start}
.livrable figure{margin:0;background:var(--blanc);padding:var(--u3);border-radius:var(--rl)}
.livrable figure svg{width:100%;height:auto}
.livrable figcaption{margin-top:var(--u2);font-size:14px;color:var(--gris)}
.livrable ul{list-style:none;margin:0}
.livrable li{padding:var(--u2) 0 var(--u2) 26px;border-bottom:1px solid var(--ligne);color:var(--encre-2);
             position:relative}
.livrable li::before{content:"";position:absolute;left:2px;top:calc(var(--u2) + 9px);width:8px;height:8px;
             background:var(--maroon);transform:rotate(45deg)}
.livrable li:first-child::before{top:9px}
.livrable li:first-child{padding-top:0}

/* ── Schémas ───────────────────────────────────────────────────────────
   Un schéma est dessiné dans une boîte de 400 unités : à 390 px il s affiche
   à l échelle 1 et ses libellés gardent leur taille. Aucun n est masqué.
   -------------------------------------------------------------------------- */
figure.schema{margin:var(--u6) 0 0;max-width:480px}
@media (min-width:900px){
  /* sur ecran large, la legende se place a cote du schema : le schema garde sa
     taille de lecture et la colonne ne reste pas a moitie vide */
  figure.schema,.metier figure.schema{display:grid;grid-template-columns:480px minmax(0,1fr);
                                      gap:var(--u6);align-items:start;max-width:none}
  figure.schema figcaption{margin-top:0;font-size:16px;padding:var(--u3);border-radius:var(--r);
                           background:var(--voile)}
}
figure.schema img{width:100%;height:auto;border:0;background:var(--blanc);border-radius:var(--rl)}
figure.schema figcaption{margin-top:var(--u2);font-size:15px;color:var(--gris);max-width:52ch}
.metier figure.schema{margin:var(--u6) 0 var(--u2)}

/* Un schéma repliable : ouvert partout, refermé au téléphone par assets/menu.js.
   Sans script, tout reste visible. */
details.plie{border-top:var(--filet) solid var(--ligne)}
details.plie > summary{list-style:none;cursor:pointer;padding:14px 0;font-size:15px;
                       font-weight:600;color:var(--maroon);display:flex;align-items:center;gap:10px}
details.plie > summary::-webkit-details-marker{display:none}
details.plie > summary::before{content:"";width:9px;height:9px;background:var(--maroon);
                               transform:rotate(45deg);flex:0 0 auto}
details.plie[open] > summary::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--rose)}
.mission details.plie{border-top-color:var(--maroon-clair)}
.mission details.plie > summary{color:var(--blanc)}
.mission details.plie > summary::before{background:var(--rose)}
@media (max-width:700px){
  /* au telephone le schema prend toute la largeur : il gagne les 48 px de
     gouttiere, et ses libelles restent a leur taille de dessin */
  figure.schema,.metier figure.schema{margin-left:calc(var(--u3) * -1 + 6px);
                                      margin-right:calc(var(--u3) * -1 + 6px);max-width:none}
  figure.schema img{border-radius:var(--r)}
  figure.schema figcaption{padding:0 var(--u2)}
  /* les deux schemas mis en ligne suivent la meme regle : ils prennent la
     largeur, sinon leurs libelles tombent sous huit pixels et demi */
  .mission figure,.livrable figure{margin-left:calc(var(--u3) * -1 + 6px);
                                   margin-right:calc(var(--u3) * -1 + 6px);padding:10px 0;border:0;
                                   border-radius:var(--r)}
}

/* ── Questions ─────────────────────────────────────────────────────────── */
details.qa{background:var(--blanc);border-radius:var(--r);margin-bottom:8px;padding:0 var(--u3)}
details.qa summary{list-style:none;cursor:pointer;padding:var(--u3) var(--u6) var(--u3) 0;
                   font-size:18px;font-weight:600;color:var(--maroon);position:relative}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after,details.qa summary::before{content:"";position:absolute;right:8px;
                   background:var(--maroon);border-radius:2px;transition:opacity 180ms var(--ease),transform 220ms var(--ease)}
details.qa summary::after{top:50%;width:13px;height:1.5px;margin-top:-1px}
details.qa summary::before{top:50%;right:14px;width:1.5px;height:13px;margin-top:-7px}
details.qa[open] summary::before{opacity:0;transform:rotate(90deg)}
details.qa p{padding:0 var(--u6) var(--u4) 0}

/* ── Les notes : une liste de lecture dans un panneau, pas des cartes ──── */
.derniers{background:var(--blanc);border-radius:var(--rl);padding:var(--u1) var(--u4)}
.derniers a.derniere{display:block;padding:var(--u3) 0;text-decoration:none;
                 border-top:var(--filet) solid var(--ligne)}
.derniers a.derniere:first-child{border-top:0}
.derniers .rubrique{display:block;font-size:14px;color:var(--gris)}
.derniers h3{margin-top:6px;font-size:19px;color:var(--maroon);
             border-bottom:var(--filet) solid transparent;display:inline-block;
             transition:border-color 160ms var(--ease)}
.derniers a.derniere:hover h3{border-bottom-color:var(--rose);border-bottom-width:var(--critique)}
.derniers p{margin-top:6px;color:var(--encre-2);max-width:68ch}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact{background:var(--maroon);color:var(--blanc)}
.contact h2{color:var(--blanc)}
.contact p{color:var(--rose-pale)}
.contact .colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--u12);
                   align-items:start}
.utile{list-style:none;margin-top:var(--u6);border-top:var(--filet) solid var(--maroon-clair)}
.utile li{position:relative;padding:14px 0 14px var(--u3);font-size:16px;color:var(--rose-pale);
          border-bottom:var(--filet) solid var(--maroon-clair)}
.utile li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;
                  background:var(--rose);transform:rotate(45deg)}
.formulaire{background:var(--blanc);padding:var(--u6);border-radius:var(--rl)}
.champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--u3)}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.plein{grid-column:1 / -1}
.champ label{font-size:14px;font-weight:600;color:var(--encre-2)}
.champ input,.champ select,.champ textarea{font-family:var(--f);font-size:16px;color:var(--encre);
  background:var(--papier);border:var(--filet) solid var(--ligne);border-radius:var(--rs);padding:12px 14px;
  width:100%;min-width:0;transition:border-color 180ms var(--ease),background 180ms var(--ease)}
.champ textarea{resize:vertical;line-height:1.6}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--maroon);background:var(--blanc);
  outline:3px solid rgba(223,153,166,.45);outline-offset:0}
.champ .err{display:none;font-size:14px;color:var(--maroon)}
.champ.ko input,.champ.ko textarea{border-color:var(--maroon);border-left-width:3px}
.champ.ko .err{display:block}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pied-formulaire{display:flex;align-items:center;gap:var(--u3);margin-top:var(--u4);flex-wrap:wrap}
.pied-formulaire small{font-size:14px;color:var(--gris);max-width:42ch}
.pied-formulaire .btn[disabled]{opacity:.45;pointer-events:none}
.note{display:none;margin-top:var(--u3);padding:12px 16px 12px 14px;font-size:15px;
      border-left:3px solid var(--maroon);border-radius:var(--rs)}
.note.ok,.note.ko,.note.attente{display:block;color:var(--maroon);background:#fbf3f4}
.note.ok::before{content:"";display:inline-block;width:9px;height:9px;background:var(--maroon);
                 transform:rotate(45deg);margin-right:10px}
.note.attente{border-left-color:var(--ligne);color:var(--gris);background:transparent}

/* ── Pages de métier ───────────────────────────────────────────────────── */
.hero.court{padding:var(--u12) 0 var(--u8)}
.hero.court h1{font-size:clamp(28px,4vw,44px);max-width:20ch}
.fil{font-size:15px;color:var(--rose-pale);margin-bottom:var(--u3)}
.fil a{text-decoration:none;border-bottom:var(--filet) solid var(--rose)}
.fil a:hover{border-bottom-width:var(--critique);color:var(--blanc)}
.metier{padding:var(--u6);background:var(--blanc);border-radius:var(--rl);margin-bottom:var(--u4)}
.metier:last-child{margin-bottom:0}
.metier .intro{font-size:19px;color:var(--encre);max-width:58ch;margin-top:var(--u2)}
.metier h3{margin:var(--u6) 0 var(--u2);color:var(--encre);font-size:17px}
.metier ul{list-style:none;margin:0}
.metier li{padding:12px 0 12px 26px;border-bottom:1px solid var(--ligne);color:var(--encre-2);position:relative}
.metier li:last-child{border-bottom:0}
.metier li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;
                   background:var(--maroon);transform:rotate(45deg)}
.reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--u4);margin-top:var(--u6)}
.reperes div{padding:var(--u3);border-radius:var(--r);background:var(--voile)}
.reperes b{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--maroon);margin-bottom:6px}
.reperes b::before{content:"";width:8px;height:8px;background:var(--maroon);transform:rotate(45deg);flex:0 0 auto}
.reperes p{font-size:16px;max-width:none}
.suite{display:flex;gap:var(--u4);flex-wrap:wrap;margin-top:var(--u4)}
.suite a{font-weight:600;color:var(--maroon);text-decoration:none;border:1px solid var(--rose);
         padding:11px 20px;border-radius:var(--rp);background:var(--blanc);
         transition:background 160ms var(--ease),color 160ms var(--ease)}
.suite a:hover{background:var(--maroon);color:var(--blanc);border-color:var(--maroon)}

/* ── Pied ──────────────────────────────────────────────────────────────── */
footer{background:var(--maroon);color:var(--rose-pale);padding:var(--u8) 0 var(--u6);
       border-top:1px solid var(--maroon-clair)}
.pied{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--u6);align-items:start}
.pied img{height:38px;width:auto;max-width:none;margin-bottom:var(--u2)}
.pied a{color:var(--rose-pale);text-decoration:none;border-bottom:1px solid transparent}
.pied a:hover{color:var(--blanc);border-bottom-color:var(--rose)}
.pied p,.pied li{font-size:15px;color:var(--rose-pale)}
.pied ul{list-style:none}
.pied li{padding:3px 0}
.pied .mention{margin-top:var(--u4);font-size:14px;color:var(--rose)}
.pied{grid-template-columns:1.4fr 1fr 1fr 1fr}

@media (max-width:900px){
  body{font-size:16px}
  /* 96 px en haut et en bas, c est un cinquieme d ecran perdu par section */
  section{padding:var(--u8) 0}
  .hero{padding:var(--u8) 0 0}
  .tete{margin-bottom:var(--u4)}
  .metier{padding:var(--u4) var(--u3);margin-bottom:var(--u4)}
  .hero .visu{display:none}
  .menu{display:inline-flex}
  .bar{gap:var(--u2);flex-wrap:wrap}
  .bar > .btn{display:none}
  #nav-principal{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:4px;
                 margin:var(--u2) 0 var(--u1);padding:10px;border-radius:var(--r);
                 background:rgba(255,255,255,.06);border:1px solid var(--maroon-clair)}
  #nav-principal.ouvert{display:flex;animation:ouvre 240ms var(--ease)}
  @keyframes ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  #nav-principal a{padding:14px 16px;font-size:17px;border-radius:var(--rs)}
  #nav-principal .btn{display:inline-flex;margin:var(--u2) 0 var(--u1);justify-content:center}
  /* au telephone les cinq phases deviennent des pastilles, toutes visibles */
  .axe{display:flex;flex-wrap:wrap;gap:8px;border-top:0;margin-top:var(--u8);padding-bottom:var(--u6)}
  .axe::after{display:none}
  .axe div,.axe div:first-child{border-left:0;padding:8px 14px 8px 30px;border-radius:var(--rp);white-space:nowrap;
           background:rgba(255,255,255,.07);border:1px solid rgba(223,153,166,.3);font-size:13px}
  .axe div::before,.axe div:first-child::before{top:50%;left:13px;margin-top:-4px;width:8px;height:8px}
  .mission .contenu,.livrable,.contact .colonnes{grid-template-columns:1fr;gap:var(--u6)}
  .utile{margin-top:var(--u4)}
  .utile li{padding:10px 0 10px var(--u3);font-size:15px}
  .utile li::before{top:17px}
  /* le reste des cibles : 44 px de haut, obtenus par du remplissage.
     Le trait passe en soulignement : un border-bottom se pose au bas de la
     boite, donc onze pixels sous le texte, alors que le soulignement suit la
     ligne de base. */
  .menu{padding:12px 16px}
  .fil a,.suite a,.apres a,.pied p a,.legende a,
  section p a,.metier li a{display:inline-block;padding:11px 0;border-bottom:0;
       text-decoration:underline;text-decoration-color:var(--rose);
       text-decoration-thickness:var(--filet);text-underline-offset:4px}
  .fil a:hover,.suite a:hover,.apres a:hover,.pied p a:hover,.legende a:hover,
  section p a:hover,.metier li a:hover{text-decoration-thickness:var(--critique)}

  .fil{margin-bottom:var(--u2)}
  .suite{gap:var(--u2) var(--u4);margin-top:var(--u2)}
  .champs{grid-template-columns:1fr}
  .formulaire{padding:var(--u4)}
  .reperes{grid-template-columns:1fr;gap:var(--u3)}
  .pied{grid-template-columns:1fr 1fr;gap:var(--u3) var(--u4)}
  .derniers{grid-template-columns:1fr}
  .pied > div:first-child{grid-column:1 / -1}
  .pied li{padding:0}
  .pied li a{display:block;padding:12px 0}
  .pied li.mention{padding:12px 0}
  tbody th{width:auto;display:block;border-bottom:0;padding-bottom:4px}
  tbody td{display:block;padding-top:0}
  thead{display:none}
  tbody tr{display:block;border-bottom:1px solid var(--ligne);padding:6px var(--u3) 10px}
  tbody tr:last-child{border-bottom:0}
  table tr > :first-child,table tr > :last-child{padding-left:0;padding-right:0}
  /* un lien de tableau est une cible de 44 px : le texte ne grossit pas, la
     zone atteignable oui. Le trait est un soulignement : une ombre interne se
     posait au bas de la boite, quinze pixels sous le texte. */
  tbody th a{display:block;width:fit-content;padding:11px 0;border-bottom:0;
             box-shadow:none;text-decoration:underline;
             text-decoration-color:var(--rose);
             text-decoration-thickness:var(--filet);text-underline-offset:4px}
  tbody th a:hover{text-decoration-thickness:var(--critique)}
  tbody th,tbody td{border-bottom:0}
  .phases tbody th{width:auto}
  .phases tbody tr{display:block}
  .phases tbody td:empty{display:none}   /* une phase sans intervention ne se liste pas */
  .phases tbody td{display:inline-flex;align-items:center;gap:8px;width:auto;margin:2px 14px 2px 0;
                   padding:2px 0;font-size:13px;color:var(--gris);
                   text-align:left}
  .phases tbody td::after{content:attr(data-phase)}
}
/* ── Les sequences se dessinent quand on les atteint (assets/vivant.js) ── */
html.js svg.trace .tr{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
            transition:stroke-dashoffset 1.4s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
html.js svg.trace.vu .tr{stroke-dashoffset:0}
html.js svg.trace .pop{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(.4s + var(--i,0) * 40ms)}
html.js svg.trace.vu .pop{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation:none !important}
  html.js svg.trace .tr{stroke-dashoffset:0}
  html.js svg.trace .pop{opacity:1}
}

/* texte reserve aux lecteurs d ecran */
.lecture{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.apres{margin-top:var(--u4);color:var(--gris);font-size:16px}