/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PAGE AUTOMATISATIONS (23 sept. 2026).
   Chargée par cette page seulement. precision47.css donne la base et les
   révélations [data-rv] ; pages.css donne l'en-tête de page, la bande
   noire, l'appel compact et le pied.

   LE GESTE DE LA PAGE. Services montre qu'un relais existe ; ici, c'est
   la MATIÈRE qui se transforme. La même information entre brute, se
   structure, s'arrête sur une décision humaine, puis ressort scellée. Le
   dessin ne décore pas : il montre le changement d'état.

   Plancher du corps de texte : 1 rem (16 px). Les seules tailles plus
   petites de la page sont les étiquettes et les annotations mono
   (--t-annot, --t-label), qui ne portent jamais de phrase à lire.

   Le rouge ne sert qu'à une chose sur cette page — l'endroit où le
   système s'arrête et où une personne reprend la main. Et il n'est jamais
   seul : chaque point rouge porte aussi un mot et une forme distincte.
   ══════════════════════════════════════════════════════════════ */

.au-zone { --g: var(--sp-3); --c: calc((100% - 11 * var(--g)) / 12); padding: var(--sp-8) 0; }
.au-zone + .au-zone:not(.bande-noire) { border-top: 1px solid var(--pg-filet); }
/* `>` : les pistes qui portent leur propre cadre doivent rester des blocs. */
.au-zone > .cadre-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); align-items: start; }

.au-tete { grid-column: 1 / span 5; display: grid; gap: var(--sp-3); align-content: start; }
.au-tete-large { grid-column: 1 / span 8; }
.au-tete-colonne { grid-column: 1 / span 5; }
.au-tete h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.au-intro { max-width: 52ch; font-size: var(--t-lead); line-height: 1.55; }
.bande-noire .au-intro { color: var(--text); }

.au-micro { margin: 0; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-sourdine); }
.bande-noire .au-micro { color: var(--muted); }

.au-fermeture, .au-prudence, .au-note {
  grid-column: 1 / span 8; margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--pg-filet); max-width: 60ch;
}
.au-fermeture { font-size: var(--t-lead); line-height: 1.5; color: var(--pg-encre); }
.au-prudence, .au-note { font-size: 1rem; color: var(--pg-sourdine); }


/* ═══ ÉCRAN 1 — LE HÉROS ═══════════════════════════════════════
   Le titre sur sept colonnes ; à droite et plus bas, les quatre états
   de la même demande, empilés et reliés. Tout en HTML et en filets. */

.au-hero { padding: var(--sp-7) 0 var(--sp-6); }
.au-hero .cadre-section { align-items: start; row-gap: 0; }
.au-hero .label:first-child { grid-row: 1; }
.au-hero .fil-entree { grid-row: 2; margin-top: var(--sp-2); }
.au-hero h1 { grid-column: 1 / span 7; grid-row: 3; margin-top: var(--sp-4); font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 15ch; }
.au-hero .page-chapo { grid-column: 1 / span 6; grid-row: 4; margin-top: var(--sp-4); max-width: 46ch; }
.au-hero-lien { grid-column: 1 / span 6; grid-row: 5; margin-top: var(--sp-4); }
.au-micro-hero { grid-column: 1 / span 7; grid-row: 6; margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--pg-filet); line-height: 1.8; }

/* Les quatre états. Ils descendent dans la colonne de droite, décalés
   vers le bas : le héros ne devient pas un tableau de bord. */
.au-flux { grid-column: 9 / -1; grid-row: 3 / span 4; margin: var(--sp-5) 0 0; display: grid; justify-items: start; gap: 0; }
.au-cadre { display: grid; gap: 9px; width: 224px; padding: 16px 18px; border: 1px solid var(--pg-filet-fort); background: var(--pg-ivoire); }
.au-cadre-clos { border-color: var(--pg-encre); position: relative; }
.au-plein { display: block; width: 84px; height: 10px; background: var(--pg-encre); }
.au-plein.au-mini { width: 62px; height: 8px; margin-bottom: 2px; }
.au-ligne { display: block; height: 1px; background: var(--pg-filet-fort); }
.au-ligne.au-courte { width: 58%; }
.au-ligne.au-pleine { height: 6px; background: var(--pg-encre); }
.au-champ { display: grid; gap: 4px; }
.au-champ em { font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-sourdine); }
.au-champ b { display: block; height: 6px; background: var(--pg-encre); width: 72%; }
.au-champ:nth-of-type(2) b { width: 46%; }
.au-champ:nth-of-type(3) b { width: 34%; }
.au-sceau { position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; background: var(--pg-encre); }
.au-descente { width: 1px; height: 34px; margin-left: 28px; background: var(--pg-filet-fort); transform-origin: top center; }

/* Le seul rouge du premier écran — et il porte son mot. */
.au-etat-humain { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.au-joint { width: 15px; height: 15px; background: var(--red); }
.au-marque { font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-encre); }

html[data-motion="on"] .au-flux .au-etat { opacity: 0; transform: translateY(12px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
html[data-motion="on"] .au-flux .au-descente { transform: scaleY(0); transition: transform 420ms var(--ease-out); }
html[data-motion="on"] .au-flux .au-champ b, html[data-motion="on"] .au-cadre-clos .au-ligne.au-pleine, html[data-motion="on"] .au-sceau { transform: scaleX(0); transform-origin: left center; transition: transform 460ms var(--ease-out); }
html[data-motion="on"] .au-joint { transform: scale(0); transition: transform 380ms var(--ease-spring) 1680ms; }
html[data-motion="on"] .au-marque { opacity: 0; transition: opacity 500ms var(--ease-out) 1840ms; }
html[data-motion="on"] .au-flux .au-etat:nth-of-type(1) { transition-delay: 340ms; }
html[data-motion="on"] .au-flux .au-descente:nth-of-type(1) { transition-delay: 700ms; }
html[data-motion="on"] .au-flux .au-etat:nth-of-type(2) { transition-delay: 880ms; }
html[data-motion="on"] .au-flux .au-champ:nth-of-type(1) b { transition-delay: 1120ms; }
html[data-motion="on"] .au-flux .au-champ:nth-of-type(2) b { transition-delay: 1240ms; }
html[data-motion="on"] .au-flux .au-champ:nth-of-type(3) b { transition-delay: 1360ms; }
html[data-motion="on"] .au-flux .au-descente:nth-of-type(2) { transition-delay: 1500ms; }
html[data-motion="on"] .au-flux .au-etat:nth-of-type(3) { transition-delay: 1620ms; }
html[data-motion="on"] .au-flux .au-descente:nth-of-type(3) { transition-delay: 2020ms; }
html[data-motion="on"] .au-flux .au-etat:nth-of-type(4) { transition-delay: 2160ms; }
html[data-motion="on"] .au-cadre-clos .au-ligne.au-pleine:nth-of-type(1) { transition-delay: 2340ms; }
html[data-motion="on"] .au-cadre-clos .au-ligne.au-pleine:nth-of-type(2) { transition-delay: 2440ms; }
html[data-motion="on"] .au-sceau { transition-delay: 2560ms; }
html[data-motion="on"].pret .au-flux .au-etat { opacity: 1; transform: none; }
html[data-motion="on"].pret .au-flux .au-descente { transform: none; }
html[data-motion="on"].pret .au-flux .au-champ b,
html[data-motion="on"].pret .au-cadre-clos .au-ligne.au-pleine,
html[data-motion="on"].pret .au-sceau { transform: none; }
html[data-motion="on"].pret .au-joint { transform: none; }
html[data-motion="on"].pret .au-marque { opacity: 1; }


/* ═══ ÉCRAN 2 — LÀ OÙ LE TRAVAIL RALENTIT ══════════════════════
   Le filet de circulation descend le long des trois situations et se
   brise à chacune : le pont, c'est une personne. */

.au-situations { position: relative; grid-column: 7 / -1; padding-left: var(--sp-5); }
.au-circulation { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--pg-filet-fort); transform-origin: top center; }
.au-situation { position: relative; padding: var(--sp-4) 0; border-top: 1px solid var(--pg-filet); }
.au-situation:first-child { border-top: 0; padding-top: 0; }
/* Le carré creux masque le filet : la circulation s'interrompt. */
.au-pont { position: absolute; left: calc(-1 * var(--sp-5) + 1px); top: var(--sp-4); width: 13px; height: 13px; border: 1px solid var(--pg-encre); background: var(--pg-ivoire); }
.au-situation:first-child .au-pont { top: 2px; }
.au-situation h3 { font-size: clamp(1.12rem, 1.6vw, 1.38rem); line-height: 1.2; letter-spacing: -0.022em; }
.au-situation p { margin-top: 10px; max-width: 48ch; font-size: 1rem; }

html[data-motion="on"] [data-rv="situations"] .au-circulation { transform: scaleY(0); transition: transform 1100ms var(--ease-out) 160ms; }
html[data-motion="on"] [data-rv="situations"] .au-situation > *:not(.au-pont) { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
html[data-motion="on"] [data-rv="situations"] .au-pont { transform: scale(0); transition: transform 360ms var(--ease-spring); }
html[data-motion="on"] [data-rv="situations"] .au-situation:nth-child(2) > *:not(.au-pont) { transition-delay: 420ms; }
html[data-motion="on"] [data-rv="situations"] .au-situation:nth-child(3) > *:not(.au-pont) { transition-delay: 700ms; }
html[data-motion="on"] [data-rv="situations"] .au-situation:nth-child(4) > *:not(.au-pont) { transition-delay: 980ms; }
html[data-motion="on"] [data-rv="situations"] .au-situation:nth-child(2) .au-pont { transition-delay: 560ms; }
html[data-motion="on"] [data-rv="situations"] .au-situation:nth-child(3) .au-pont { transition-delay: 840ms; }
html[data-motion="on"] [data-rv="situations"] .au-situation:nth-child(4) .au-pont { transition-delay: 1120ms; }
html[data-motion="on"] [data-rv="situations"].vu .au-circulation { transform: none; }
html[data-motion="on"] [data-rv="situations"].vu .au-situation > *:not(.au-pont) { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="situations"].vu .au-pont { transform: none; }


/* ═══ ÉCRAN 3 — LE RELAIS, BANDE NOIRE ═════════════════════════
   Cinq stations sur un fil continu. Sous chacune, la matière : elle
   part vide, se remplit, signale ce qui manque, puis se scelle. La
   quatrième station est l'arrêt — rouge, encadrée, et nommée. */

.au-relais { padding: var(--sp-8) 0; }
.au-piste { margin-top: var(--sp-7); }
.au-stations { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-3); padding: 84px 0 0; margin: 0; list-style: none; }
.au-piste-fil { position: absolute; left: 0; right: 0; top: 54px; height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.au-station { position: relative; display: flex; flex-direction: column; gap: 10px; }
/* La matière se pose au bas de la station la plus haute : les cinq
   états se lisent alors sur une même ligne. */
.au-matiere { margin-top: auto; }
.au-noeud { position: absolute; left: 0; top: -35px; width: 11px; height: 11px; background: var(--ink); }
.au-station b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.au-station p { max-width: 30ch; font-size: 1rem; color: var(--text); }

/* L'arrêt ne tient pas qu'au rouge : carré plus grand, cadre de repère
   et mot explicite au-dessus du nom de l'étape. */
.au-st-humaine .au-noeud { width: 17px; height: 17px; top: -38px; background: var(--red); }
.au-st-humaine .au-noeud::before { content: ""; position: absolute; inset: -6px; border: 1px solid var(--red); }
/* Le mot de l'arrêt vit sur le rail, à côté du carré rouge : il ne
   décale pas le titre de l'étape, et le sens ne tient donc jamais à
   la seule couleur. */
.au-arret { position: absolute; left: 0; top: -62px; white-space: nowrap; font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }

.au-matiere { display: grid; gap: 5px; width: 76px; padding-top: var(--sp-3); }
.au-m-ligne { display: block; height: 5px; }
.au-m-vive { background: var(--ink); }
.au-m-vide { background: var(--ligne-ivoire); }
.au-m-ligne.au-courte { width: 62%; }
/* Ce qui manque est signalé, sans rouge : un contour vide suffit. */
.au-m-manque { background: none; border: 1px dashed var(--ligne-ivoire-forte); height: 5px; }
.au-matiere-tenue { padding-left: 10px; border-left: 1px solid var(--red); }
.au-matiere-close { position: relative; }
.au-m-sceau { position: absolute; right: -16px; top: 0; width: 9px; height: 9px; background: var(--ink); }
.au-piste-demande { position: absolute; left: 0; top: 50px; width: 9px; height: 9px; background: var(--ink); opacity: 0; }

.au-principe { margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--ligne-ivoire-forte); max-width: 62ch; }
.au-principe h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -0.024em; }
.au-principe p { margin-top: 10px; color: var(--text); }

html[data-motion="on"] [data-rv="piste"] .au-piste-fil { transform: scaleX(0); transition: transform 1800ms var(--ease-out); }
html[data-motion="on"] [data-rv="piste"] .au-station > * { opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
html[data-motion="on"] [data-rv="piste"] .au-noeud { transform: scale(0); transition: transform 360ms var(--ease-spring); }
html[data-motion="on"] [data-rv="piste"] .au-st-1 > * { transition-delay: 200ms; }
html[data-motion="on"] [data-rv="piste"] .au-st-2 > * { transition-delay: 840ms; }
html[data-motion="on"] [data-rv="piste"] .au-st-3 > * { transition-delay: 1480ms; }
html[data-motion="on"] [data-rv="piste"] .au-st-4 > * { transition-delay: 2200ms; }
html[data-motion="on"] [data-rv="piste"] .au-st-5 > * { transition-delay: 3100ms; }
html[data-motion="on"] [data-rv="piste"].vu .au-piste-fil { transform: none; }
html[data-motion="on"] [data-rv="piste"].vu .au-station > * { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="piste"].vu .au-piste-demande { animation: au-voyage 4800ms var(--ease-out) 300ms forwards; }
@keyframes au-voyage {
  0%   { opacity: 1; left: 0; }
  20%  { left: 20%; }
  40%  { left: 40%; }
  56%  { left: 61%; }
  70%  { left: 61%; }          /* l'arrêt : une personne tranche */
  90%  { opacity: 1; left: calc(100% - 9px); }
  100% { opacity: 0; left: calc(100% - 9px); }
}


/* ═══ ÉCRAN 4 — EXEMPLES DE SYSTÈMES ═══════════════════════════
   Quatre rangées éditoriales, alternées sur la grille. Les actions
   prises en charge pendent à un filet : c'est la ligne de travail. */

.au-rangs { grid-column: 1 / -1; margin-top: var(--sp-4); }
.au-rang:last-child { padding-bottom: var(--sp-3); }
.au-rang {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-3);
  padding: var(--sp-6) 0; border-top: 1px solid var(--pg-encre); align-items: start;
}
.au-rang-nom { grid-column: 1 / span 4; grid-row: 1; font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.12; letter-spacing: -0.028em; text-wrap: balance; }
.au-rang-texte { grid-column: 6 / span 4; grid-row: 1; max-width: 42ch; font-size: 1rem; }
.au-actions { grid-column: 1 / span 9; grid-row: 2; position: relative; padding-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 10px var(--sp-3); }
.au-actions-fil { position: absolute; left: 0; right: 0; top: var(--sp-3); height: 1px; background: var(--pg-filet-fort); transform-origin: left center; }
.au-action { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-texte); }
.au-action i { width: 7px; height: 7px; background: var(--pg-encre); }
.au-resultat { grid-column: 10 / -1; grid-row: 1; display: grid; gap: 8px; align-content: start; font-size: 1rem; color: var(--pg-encre); }
/* Miroir : le nom bascule à droite, le résultat à gauche, la ligne de
   travail suit. L'alternance est dans la grille, pas dans un décor. */
.au-rang-miroir .au-rang-nom { grid-column: 9 / -1; }
.au-rang-miroir .au-rang-texte { grid-column: 4 / span 4; }
.au-rang-miroir .au-actions { grid-column: 4 / -1; }
.au-rang-miroir .au-resultat { grid-column: 1 / span 3; }

html[data-motion="on"] [data-rv="rang"] .au-actions-fil { transform: scaleX(0); transition: transform 760ms var(--ease-out) 180ms; }
html[data-motion="on"] [data-rv="rang"] .au-action { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
html[data-motion="on"] [data-rv="rang"] .au-action:nth-of-type(1) { transition-delay: 420ms; }
html[data-motion="on"] [data-rv="rang"] .au-action:nth-of-type(2) { transition-delay: 540ms; }
html[data-motion="on"] [data-rv="rang"] .au-action:nth-of-type(3) { transition-delay: 660ms; }
html[data-motion="on"] [data-rv="rang"] .au-action:nth-of-type(4) { transition-delay: 780ms; }
html[data-motion="on"] [data-rv="rang"] .au-action:nth-of-type(5) { transition-delay: 900ms; }
html[data-motion="on"] [data-rv="rang"].vu .au-actions-fil { transform: none; }
html[data-motion="on"] [data-rv="rang"].vu .au-action { opacity: 1; transform: none; }


/* ═══ ÉCRAN 5 — CONTRÔLE, FIABILITÉ ET IA ══════════════════════
   Un dossier technique ouvert : le principe à gauche, cinq lignes de
   conduite à droite. Le repère rouge ne marque que l'arrêt et l'alerte. */

.au-conduite { grid-column: 7 / -1; grid-row: 1 / span 2; }
.au-controle .au-tete-colonne { grid-row: 1; }
.au-regle { position: relative; padding: var(--sp-4) 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--pg-filet); }
.au-regle:first-child { border-top: 0; padding-top: 0; }
.au-repere { position: absolute; left: 0; top: calc(var(--sp-4) + 5px); width: 9px; height: 9px; background: var(--pg-filet-fort); }
.au-regle:first-child .au-repere { top: 5px; }
.au-regle-arret .au-repere, .au-regle-alerte .au-repere { background: var(--red); }
.au-regle h3 { font-size: clamp(1.02rem, 1.35vw, 1.15rem); font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
.au-regle p { margin-top: 10px; max-width: 54ch; font-size: 1rem; }

.au-ia { grid-column: 1 / span 5; grid-row: 2; align-self: start; margin-top: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--pg-encre); }
.au-ia h3 { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.2; letter-spacing: -0.022em; }
.au-ia p { margin-top: 10px; font-size: 1rem; }


/* ═══ ÉCRAN 6 — AUTOMATISATION OU APPLICATION ══════════════════
   Deux champs de largeurs inégales, reliés par une ligne centrale. */

.au-deux { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); padding-top: var(--sp-5); align-items: start; }
.au-axe { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pg-filet-fort); transform-origin: left center; }
.au-axe i { position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; margin-left: -5px; background: var(--pg-encre); }
.au-champ-a { grid-column: 1 / span 4; padding-top: var(--sp-4); }
.au-champ-b { grid-column: 7 / span 6; padding-top: var(--sp-4); }
.au-champ-nom { font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-sourdine); margin-bottom: var(--sp-2); }
.au-deux h3 { font-size: clamp(1.18rem, 1.9vw, 1.5rem); line-height: 1.18; letter-spacing: -0.024em; text-wrap: balance; }
.au-deux h3 + p { margin-top: 12px; max-width: 46ch; font-size: 1rem; }
.au-suite { margin-top: var(--sp-3); }

html[data-motion="on"] [data-rv="deux"] .au-axe { transform: scaleX(0); transition: transform 900ms var(--ease-out); }
html[data-motion="on"] [data-rv="deux"] .au-axe i { transform: scale(0); transition: transform 360ms var(--ease-spring) 820ms; }
html[data-motion="on"] [data-rv="deux"] .au-champ-a > *, html[data-motion="on"] [data-rv="deux"] .au-champ-b > * { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
html[data-motion="on"] [data-rv="deux"] .au-champ-a > * { transition-delay: 320ms; }
html[data-motion="on"] [data-rv="deux"] .au-champ-b > * { transition-delay: 620ms; }
html[data-motion="on"] [data-rv="deux"].vu .au-axe { transform: none; }
html[data-motion="on"] [data-rv="deux"].vu .au-axe i { transform: none; }
html[data-motion="on"] [data-rv="deux"].vu .au-champ-a > *,
html[data-motion="on"] [data-rv="deux"].vu .au-champ-b > * { opacity: 1; transform: none; }


/* ═══ ÉCRAN 7 — LE MANDAT ══════════════════════════════════════
   Trois verbes en grands repères. Sous eux, l'information : éparse,
   puis alignée, puis mise en service. Aucun numéro. */

.au-phases { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); padding-top: var(--sp-6); margin-top: var(--sp-3); }
.au-phases-fil { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pg-encre); transform-origin: left center; }
.au-phase { position: relative; padding-top: var(--sp-2); }
.au-verbe { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.au-phase p { margin-top: var(--sp-3); max-width: 42ch; font-size: 1rem; }
.au-grains { display: flex; align-items: flex-end; gap: 9px; height: 34px; margin-top: var(--sp-4); }
.au-grains i { display: block; width: 9px; height: 9px; background: var(--pg-filet-fort); }
/* Éparse : chaque grain à sa hauteur. Alignée : tous sur la même ligne. */
.au-grains-eparse i:nth-child(1) { margin-bottom: 18px; }
.au-grains-eparse i:nth-child(2) { margin-bottom: 4px; }
.au-grains-eparse i:nth-child(3) { margin-bottom: 25px; }
.au-grains-eparse i:nth-child(4) { margin-bottom: 11px; }
.au-grains-eparse i:nth-child(5) { margin-bottom: 0; }
.au-grains-alignee { position: relative; }
.au-grains-alignee::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--pg-filet-fort); }
.au-grains-alignee i { background: var(--pg-encre); }
.au-grains-service { position: relative; }
.au-grains-service::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--pg-encre); }
.au-grains-service i { background: var(--pg-encre); }
.au-grains-service .au-terminal { width: 13px; height: 13px; }

html[data-motion="on"] [data-rv="phases"] .au-phases-fil { transform: scaleX(0); transition: transform 1200ms var(--ease-out); }
html[data-motion="on"] [data-rv="phases"] .au-phase > * { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
html[data-motion="on"] [data-rv="phases"] .au-phase-1 > * { transition-delay: 240ms; }
html[data-motion="on"] [data-rv="phases"] .au-phase-2 > * { transition-delay: 720ms; }
html[data-motion="on"] [data-rv="phases"] .au-phase-3 > * { transition-delay: 1200ms; }
html[data-motion="on"] [data-rv="phases"].vu .au-phases-fil { transform: none; }
html[data-motion="on"] [data-rv="phases"].vu .au-phase > * { opacity: 1; transform: none; }


/* ═══ ÉCRAN 8 — SAVOIR SI ÇA VAUT LA PEINE ═════════════════════
   Une ligne de décision, deux zones. Carré plein d'un côté, carré
   creux de l'autre : ni coche verte, ni croix rouge. */

.au-ligne-decision { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); margin-top: var(--sp-3); }
.au-decision-axe { position: absolute; left: calc(6 * var(--c) + 5.5 * var(--g)); top: 0; bottom: 0; width: 1px; background: var(--pg-encre); transform-origin: top center; }
.au-zone-a { grid-column: 1 / span 5; }
.au-zone-b { grid-column: 8 / span 5; }
.au-zone-nom { font-family: var(--f-mono); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--pg-filet); }
.au-criteres { list-style: none; margin: 0; padding: 0; display: grid; }
.au-criteres li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--pg-filet); font-size: 1rem; }
.au-criteres li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 10px; }
.au-criteres-oui li::before { background: var(--pg-encre); }
.au-criteres-attente li::before { border: 1px solid var(--pg-filet-fort); }

html[data-motion="on"] [data-rv="decision"] .au-decision-axe { transform: scaleY(0); transition: transform 1000ms var(--ease-out); }
html[data-motion="on"] [data-rv="decision"] .au-criteres li { opacity: 0; transform: translateY(8px); transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); }
html[data-motion="on"] [data-rv="decision"] .au-criteres li:nth-child(1) { transition-delay: 240ms; }
html[data-motion="on"] [data-rv="decision"] .au-criteres li:nth-child(2) { transition-delay: 340ms; }
html[data-motion="on"] [data-rv="decision"] .au-criteres li:nth-child(3) { transition-delay: 440ms; }
html[data-motion="on"] [data-rv="decision"] .au-criteres li:nth-child(4) { transition-delay: 540ms; }
html[data-motion="on"] [data-rv="decision"] .au-criteres li:nth-child(5) { transition-delay: 640ms; }
html[data-motion="on"] [data-rv="decision"].vu .au-decision-axe { transform: none; }
html[data-motion="on"] [data-rv="decision"].vu .au-criteres li { opacity: 1; transform: none; }


/* ═══ ÉCRAN 9 — DEUX FAÇONS DE COMMENCER ═══════════════════════ */

.au-formule { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-3); border-top: 1px solid var(--pg-encre); }
.au-formule-legere { grid-column: 1 / span 4; }
.au-formule-complete { grid-column: 6 / span 7; }
.au-formule h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.14; letter-spacing: -0.026em; }
.au-formule-complete h3 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
.au-cond { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-sourdine); }
.au-formule > p { max-width: 46ch; font-size: 1rem; }
.au-formule-complete > p { max-width: 54ch; font-size: 1rem; }
.au-precision { color: var(--pg-sourdine); }
.au-formule .lien-mono { margin-top: var(--sp-2); }


/* ═══ LES QUESTIONS ════════════════════════════════════════════
   `<details>` natifs : utilisables au clavier, annoncés par le
   navigateur, et ouverts sans JavaScript si besoin. */

.au-faq { grid-column: 1 / -1; }
.au-faq details { border-top: 1px solid var(--pg-filet-fort); }
.au-faq details:last-child { border-bottom: 1px solid var(--pg-filet-fort); }
.au-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 44px; padding: 18px 0; cursor: pointer; list-style: none;
  color: var(--pg-encre); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.02em;
}
.au-faq summary::-webkit-details-marker { display: none; }
.au-faq summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid var(--pg-encre); transition: background var(--dur) var(--ease); }
.au-faq details[open] summary::after { background: var(--pg-encre); }
.au-faq details > p { margin: 0; padding: 0 0 var(--sp-4); max-width: 68ch; }


/* ═══ TÉLÉPHONE ET TABLETTE ════════════════════════════════════
   Les deux parcours horizontaux deviennent de vraies séquences
   verticales. Aucune typographie n'est réduite pour sauver une
   composition. */

@media (max-width: 1100px) {
  .au-rang-nom, .au-rang-miroir .au-rang-nom { grid-column: 1 / span 5; }
  .au-rang-texte, .au-rang-miroir .au-rang-texte { grid-column: 7 / span 6; }
  .au-actions, .au-rang-miroir .au-actions { grid-column: 1 / span 5; }
  .au-resultat, .au-rang-miroir .au-resultat { grid-column: 7 / span 6; }
  .au-champ-a { grid-column: 1 / span 5; }
  .au-champ-b { grid-column: 7 / span 6; }
  .au-formule-legere { grid-column: 1 / span 5; }
  .au-formule-complete { grid-column: 7 / span 6; }
  .au-situations { grid-column: 6 / -1; }
  .au-conduite { grid-column: 6 / -1; }
  .au-ia { grid-column: 1 / span 5; }
}

@media (max-width: 860px) {
  .au-zone { padding: var(--sp-6) 0; }
  .au-zone > .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .au-tete, .au-tete-large, .au-tete-colonne, .au-situations, .au-conduite, .au-ia,
  .au-rangs, .au-deux, .au-phases, .au-ligne-decision, .au-faq,
  .au-formule-legere, .au-formule-complete,
  .au-fermeture, .au-prudence, .au-note { grid-column: auto; }

  /* Héros : le texte, puis les quatre états à pleine largeur. */
  .au-hero { padding: var(--sp-5) 0 var(--sp-4); }
  .au-hero .cadre-section { grid-template-columns: 1fr; }
  .au-hero h1, .au-hero .page-chapo, .au-hero-lien, .au-flux, .au-micro-hero { grid-column: auto; grid-row: auto; max-width: none; }
  .au-hero h1 { font-size: clamp(2.1rem, 8.6vw, 2.9rem); margin-top: var(--sp-3); }
  .au-flux { margin-top: var(--sp-5); justify-items: start; }
  .au-cadre { width: min(280px, 100%); }
  .au-micro-hero { margin-top: var(--sp-5); }

  /* Les situations : le filet reste, les ponts aussi. */
  .au-situations { padding-left: var(--sp-4); margin-top: var(--sp-2); }
  .au-pont { left: calc(-1 * var(--sp-4) + 1px); }
  .au-circulation { left: 6px; }
  .au-situation p { max-width: none; }

  /* Le relais devient vertical : le fil descend, les stations s'empilent. */
  .au-piste { margin-top: var(--sp-5); }
  .au-stations { grid-template-columns: 1fr; row-gap: var(--sp-5); padding: 0 0 0 30px; }
  .au-piste-fil { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: center top; }
  .au-noeud { left: -30px; top: 4px; }
  .au-st-humaine .au-noeud { left: -33px; top: 1px; }
  .au-station p { max-width: none; }
  /* En pile, le mot de l'arrêt revient dans le flux : il n'a plus de rail
     au-dessus de lui où se poser. */
  .au-arret { position: static; display: block; margin-bottom: 2px; }
  .au-matiere { margin-top: var(--sp-1); }
  .au-piste-demande { left: 1px; top: 0; }
  .au-principe { margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-4); }

  /* Les rangées : une colonne, le filet d'actions reste. */
  .au-rang { grid-template-columns: 1fr; row-gap: var(--sp-3); padding: var(--sp-5) 0; }
  .au-rang-nom, .au-rang-texte, .au-actions, .au-resultat,
  .au-rang-miroir .au-rang-nom, .au-rang-miroir .au-rang-texte,
  .au-rang-miroir .au-actions, .au-rang-miroir .au-resultat { grid-column: auto; }
  .au-rang-texte, .au-resultat { max-width: none; }

  /* Choix, mandat et décision : en pile, l'axe change d'orientation. */
  .au-deux { grid-template-columns: 1fr; padding-top: var(--sp-4); }
  .au-champ-a, .au-champ-b { grid-column: auto; padding-top: var(--sp-3); }
  .au-champ-b { border-top: 1px solid var(--pg-filet); }
  .au-axe i { left: 0; margin-left: 0; }
  .au-phases { grid-template-columns: 1fr; row-gap: var(--sp-5); padding-top: var(--sp-4); }
  .au-phase p { max-width: none; }
  .au-ligne-decision { grid-template-columns: 1fr; }
  .au-decision-axe { display: none; }
  .au-zone-a, .au-zone-b { grid-column: auto; }
  .au-zone-b { padding-top: var(--sp-3); border-top: 1px solid var(--pg-encre); }
  .au-conduite { margin-top: var(--sp-2); }
  .au-regle p { max-width: none; }
  .au-ia { margin-top: var(--sp-4); }
}

@media (max-width: 480px) {
  .au-micro-hero, .au-micro { line-height: 1.9; }
  .au-grains { gap: 7px; }
}


/* ═══ MOUVEMENT RÉDUIT ═════════════════════════════════════════
   `data-motion` n'est jamais posé à « on » dans ce cas, ce qui neutralise
   toutes les règles ci-dessus. Le voyage de la demande est coupé ici par
   sécurité et le parcours reste dans son état final. */
@media (prefers-reduced-motion: reduce) {
  .au-piste-demande { animation: none !important; opacity: 0 !important; }
  .au-circulation, .au-piste-fil, .au-actions-fil, .au-axe, .au-phases-fil,
  .au-decision-axe, .au-descente, .au-pont, .au-joint { transform: none !important; }
}