/* DataFish : page Automatisation & Agents IA.
   1. Simulateur du coût d'une tâche répétitive (préfixe xa), plus bas dans la page (V4.2), dans une section blanche (.xp-sim).
      Deux panneaux sans contour : la tâche et ce qu'elle coûte (fond marine). Seuls les champs, qui sont des commandes, ont
      un fond qui tranche sur leur panneau.
   2. En fin de fichier (V4.2) : le fil d'une demande (préfixe af), visuel du haut de page, et la section Collecte.
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md, sections 7 et 9) : plus de ronds à coche ni de pointillés (filets
   pleins d'un pixel, coches au trait), plus de poisson qui porte la demande, plus d'ombre, de pilule (999px) ni de pastille pastel ;
   verts et ambres ramenés au bleu, au marine et aux gris (les alertes sur #EAEFF4) ; rayons à 6 px (3 ou 4 px pour les petites
   étiquettes) ; titres et chiffres en 600. Les anciennes valeurs sont notées à côté des règles. */

/* --xa-accent : variante claire de --fish (#3A8CC8), réservée au fond marine où --fish manque de contraste pour les petits textes.
   07/10 (retour de Louis : le simulateur doit tenir en entier dans une fenêtre de 1366 x 650) : mise en page plus dense.
   À gauche, les champs sur trois lignes, puis la case « Le calcul » et son tiroir « Hypothèses ». À droite (marine), le coût
   et ses deux chiffres, la part confiée à l'automatisation à côté, la frise de l'année sur toute la largeur, puis le lien. */
/* 14/10 : --xa-accent #6FB8E8, l'accent du site sur marine (avant #74C3EE) */
.xa-sim { --xa-accent: #6FB8E8; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: stretch; }
/* 30 px en haut : l'encart « Réglez les chiffres », posé à cheval sur le bord du panneau, garde de l'air au-dessus de « Votre tâche » */
.xa-in, .xa-out { min-width: 0; padding: 30px 26px 24px; border-radius: var(--b-r-card); } /* 14/10 : rayon 6 (avant 24) */
.xa-in { display: flex; flex-direction: column; background: var(--sea); }
.xa-out { display: flex; flex-direction: column; background: var(--ink); color: #fff; }

/* petits intitulés des panneaux */
/* 14/10 : étiquette de rubrique grise, 600 (avant : 700, bleu) */
body.v2 .xa-k { margin: 0 0 14px; font: 600 12px/1.2 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
body.v2 .xa-k--out { color: var(--xa-accent); }
body.v2 .xa-k--sub { margin: 0 0 6px; }

/* ---------- La tâche : champs ---------- */
.xa-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; align-items: end; }
.xa-f { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.xa-f--full { grid-column: 1 / -1; }
body.v2 .xa-lab { display: block; float: none; width: auto; margin: 0; padding: 0; font: 600 14px/1.3 var(--f-body); color: var(--ink); }
.xa-lab span { font-weight: 500; color: var(--muted); }
/* champ du nom de la tâche : au garde-manger depuis le 07/10 (pantryAutomation) */
body.v2 .xa-name {
    width: 100%; min-width: 0; height: 56px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--b-r-card); background: #fff;
    font: 500 16px/1 var(--f-body); color: var(--ink); box-shadow: none;
}
.xa-name::placeholder { color: var(--muted); }
.xa-name:focus-visible { outline: 2px solid var(--tide); outline-offset: 0; }
.xa-gm-in { max-width: 560px; }

.xa-step { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; height: 48px; padding: 4px; border-radius: var(--b-r-card); background: #fff; }
.xa-step:focus-within { box-shadow: 0 0 0 2px var(--tide); }
body.v2 .xa-btn {
    display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 4px;
    background: var(--sea); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease-out);
}
.xa-btn:hover { background: var(--tide-soft); }
.xa-btn:focus-visible { outline: 2px solid var(--tide); outline-offset: 1px; }
.xa-btn svg { width: 17px; height: 17px; }
.xa-val { display: flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 0; overflow: hidden; }
body.v2 .xa-val input {
    width: 3.4ch; min-width: 1.4ch; field-sizing: content; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
    font: 600 21px/1 var(--f-display); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    -moz-appearance: textfield; appearance: textfield;
}
.xa-val input::-webkit-outer-spin-button, .xa-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xa-val input:focus { outline: none; }
.xa-unit, .xa-val[data-u]::before { flex: none; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.xa-val[data-u]::before { content: attr(data-u); visibility: hidden; }

/* Fréquence : « 3 fois par » puis jour, semaine ou mois (mêmes colonnes que les champs du dessus) */
.xa-freq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xa-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; height: 48px; padding: 4px; border-radius: var(--b-r-card); background: #fff; }
.xa-seg label { position: relative; display: grid; min-width: 0; cursor: pointer; }
.xa-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.xa-seg span {
    display: grid; place-items: center; min-width: 0; padding: 0 2px; border-radius: 4px;
    font: 600 14px/1 var(--f-body); color: var(--ink); white-space: nowrap; transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.xa-seg label:hover span { background: var(--sea); }
.xa-seg input:checked + span { background: var(--ink); color: #fff; }
.xa-seg input:focus-visible + span { outline: 2px solid var(--tide); outline-offset: 1px; }

/* Le calcul, écrit en clair, calé en bas du panneau ; « Hypothèses + » en haut à droite de la case, le tiroir s'ouvre dessous */
.xa-calc { position: relative; margin-top: auto; padding: 13px 16px 14px; border-radius: var(--b-r-card); background: #fff; }
.xa-fields { margin-bottom: 16px; }
body.v2 .xa-formula { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
.xa-formula b { font-weight: 600; white-space: nowrap; }
.xa-hyp > summary {
    /* 14/10 : lien, sans pilule (avant : border-radius 999px) */
    position: absolute; top: 7px; right: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 3px 3px 3px 10px; border-radius: 4px;
    font: 600 13.5px/1.2 var(--f-body); color: var(--tide); cursor: pointer; list-style: none; user-select: none;
}
.xa-hyp > summary::-webkit-details-marker { display: none; }
.xa-hyp > summary::marker { content: ""; }
.xa-hyp > summary:focus-visible { outline: 2px solid var(--tide); outline-offset: 1px; }
.xa-hyp .df-plus { width: 22px; height: 22px; }
body.v2 .xa-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---------- Ce qu'elle coûte ---------- */
.xa-out-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.xa-cost { min-width: 0; container-type: inline-size; }
body.v2 .xa-sentence { margin: 0; font: 500 16px/1.4 var(--f-body); color: rgba(255, 255, 255, .82); }
.xa-before { display: block; overflow-wrap: anywhere; }
.xa-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 6px 0 0; }
.xa-row > span { font-size: 17px; color: rgba(255, 255, 255, .82); }
.xa-eq { white-space: nowrap; }
/* le grand chiffre : 4rem au plus, plus petit si le montant est long (--xa-len, nombre de caractères) pour tenir dans sa colonne */
.xa-big {
    display: block; margin: 0; font: 600 4rem/1 var(--f-display); letter-spacing: -.035em; color: #fff; white-space: nowrap;
    font-size: min(4rem, calc(100cqi / (var(--xa-len, 7) * .62)));
}
body.v2 .xa-est { margin: 8px 0 0; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .55); }
.xa-sim.is-empty .xa-sentence { color: #fff; }
.xa-sim.is-empty .xa-est, .xa-sim.is-empty .xa-stats, .xa-sim.is-empty .xa-year, .xa-sim.is-empty .xa-abs { display: none; }
.xa-year[hidden] { display: none; }

.xa-side { display: grid; gap: 16px; min-width: 0; }
.xa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.v2 .xa-stats p { display: grid; gap: 3px; margin: 0; padding: 10px 14px; border-radius: var(--b-r-card); background: rgba(255, 255, 255, .07); }
.xa-stats output { font: 600 26px/1 var(--f-display); letter-spacing: -.02em; color: #fff; }
.xa-stats span { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .68); }

/* Frise : une année de travail, un carré par jour, une colonne par semaine (toute la largeur du panneau) */
.xa-year { margin-top: 20px; }
.xa-cells {
    display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-template-columns: repeat(var(--xa-cols, 45), minmax(0, 1fr));
    gap: 3px;
}
.xa-cells i { display: block; aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, .09); transition: background-color .3s var(--ease-out); }
.xa-cells i.is-t, .xa-legend i.is-t { background: #fff; }
.xa-cells i.is-b, .xa-legend i.is-b { background: var(--xa-accent); }
body.v2 .xa-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.xa-legend span { display: inline-flex; align-items: center; gap: 7px; }
.xa-legend i { display: block; width: 10px; height: 10px; border-radius: 2px; }
body.v2 .xa-cap { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .55); }

/* Part absorbée par l'automatisation (à droite du coût) */
.xa-abs { min-width: 0; }
body.v2 .xa-abs-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff; }
.xa-abs-l output { font: 600 19px/1 var(--f-display); color: var(--xa-accent); font-variant-numeric: tabular-nums; }
.xa-range {
    --xa-p: 70%;
    display: block; width: 100%; height: 22px; margin: 0; padding: 0; background: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
/* 14/10 : piste à rayon 3 (avant 999px), curseur carré à rayon 6 sans ombre (avant : rond, ombre de 8 px) */
.xa-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--xa-accent) var(--xa-p), rgba(255, 255, 255, .18) var(--xa-p)); }
.xa-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--xa-accent) var(--xa-p), rgba(255, 255, 255, .18) var(--xa-p)); }
.xa-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: var(--b-r-card); background: #fff; box-shadow: none; }
.xa-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: var(--b-r-card); background: #fff; box-shadow: none; }
.xa-range:focus { outline: none; }
.xa-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--xa-accent); outline-offset: 2px; }
.xa-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--xa-accent); outline-offset: 2px; }
body.v2 .xa-abs-r { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.xa-abs-r b { color: #fff; font-weight: 600; white-space: nowrap; }

/* Passer à l'étape suivante */
body.v2 .xa-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding: 16px 0 0;
    font: 600 15.5px/1.35 var(--f-body); color: #fff; text-decoration: none;
}
.xa-cta span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--xa-accent) 60%, transparent); text-underline-offset: 5px; }
/* 14/10 : flèche nue (avant : rond blanc de 36 px, bleu clair au survol) */
.xa-cta i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--xa-accent); transition: transform .2s var(--ease-out); }
.xa-cta i svg { width: 18px; height: 18px; }
.xa-cta:hover span { text-decoration-color: #fff; }
.xa-cta:hover i { transform: translateX(3px); }
.xa-cta:focus-visible { outline: 2px solid var(--xa-accent); outline-offset: 4px; border-radius: 6px; }

/* Téléphone : rappel du montant en bas de l'écran pendant qu'on règle les champs (affiché par le script) */
.xa-float { display: none; }
@media (max-width: 980px) {
    body.v2 .xa-float {
        position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 40; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
        /* 14/10 : rayon 6, sans ombre (avant : rayon 16, ombre de 34 px) */
        max-width: 520px; margin: 0 auto; padding: 12px 18px; border-radius: var(--b-r-card); background: var(--ink); color: rgba(255, 255, 255, .82);
        font: 500 15px/1.3 var(--f-body);
        opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
        transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
    }
    body.v2 .xa-float.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .xa-float b { font: 600 22px/1 var(--f-display); letter-spacing: -.02em; color: #fff; white-space: nowrap; }
    .xa-float small { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
}
.xa-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .xa-cells i, .xa-seg span, .xa-btn, body.v2 .xa-float { transition: none; }
}
/* ordinateur étroit (981 à 1239 px) : deux panneaux de même largeur, sinon les compteurs et « semaine » débordent */
@media (max-width: 1239px) {
    .xa-sim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 980px) {
    .xa-sim { grid-template-columns: minmax(0, 1fr); }
    .xa-in, .xa-out { padding: 26px 28px; }
}
/* téléphone : le coût, ses deux chiffres, la frise, puis la part confiée à l'automatisation (ordre d'avant le 07/10) */
@media (max-width: 600px) {
    .xa-out-top, .xa-side { display: contents; }
    .xa-cost { order: 1; }
    .xa-stats { order: 2; margin-top: 20px; }
    .xa-year { order: 3; }
    .xa-abs { order: 4; margin-top: 20px; padding: 14px 16px 16px; border-radius: var(--b-r-card); background: rgba(255, 255, 255, .07); }
    .xa-cta { order: 5; }
}
@media (max-width: 520px) {
    .xa-in, .xa-out { padding: 22px 16px; border-radius: var(--b-r-card); }
    .xa-fields { gap: 16px 8px; }
    .xa-step { grid-template-columns: 38px minmax(0, 1fr) 38px; height: 52px; padding: 5px; border-radius: var(--b-r-card); }
    body.v2 .xa-btn { width: 38px; height: 38px; border-radius: 4px; }
    body.v2 .xa-val input { font-size: 20px; }
    .xa-unit, .xa-val[data-u]::before { font-size: 13px; }
    .xa-fields { grid-template-columns: minmax(0, 1fr); }
    .xa-seg { height: 52px; padding: 5px; border-radius: var(--b-r-card); }
    .xa-freq-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .xa-cells { gap: 2px; }
    .xa-stats p { padding: 12px 14px; }
}

/* Section du simulateur : fond écume depuis la passe de nuit du 06/10 (règles .xp-sim.df-sea en fin de fichier). */

/* Repère d'interaction (encart commun) : règles retirées le 14/10 (encarts .df-cue supprimés du site, v3-hint.mjs). Avant :
   .xp-sim .df-cue--l .df-cue-pill { left: 26px; } (28 px sous 980 px, 16 px sous 520 px) et .xp-sim .df-cue + .xa-sim .xa-in { padding-top: 30px; } */

/* =====================================================================================================================
   V4.2 : « le fil d'une demande », visuel du haut de page (préfixe af, maquette A du jury : .claude/maquette-agents-a.html).
   Posé directement sur la section blanche, sans cadre ni fond (retour de Louis : pas de « zone de dessin » autour des schémas) :
   4 cas en onglets, la ligne « qui fait quoi », 6 nœuds reliés en pointillés (tracés mesurés par le script), l'écran de
   l'étape et la colonne d'explication. Les blocs se distinguent par leur fond écume ; dans l'écran (écume), les contenus sont
   blancs (--sea redéfini dans .af-view). Sans contour ; au survol, seul le fond change. L'encart d'indication est posé sur une
   bande libre de 32 px au-dessus des onglets (hintClear dans automation.mjs, .df-cue--clear + .af-w).
   ===================================================================================================================== */
/* --af-sea : l'écume, gardée sous un autre nom pour les rares éléments qui restent écume dans l'écran (où --sea vaut blanc) */
.af-w { --af-k: 1; --af-sea: var(--sea); position: relative; padding: 0; }
/* grand écran : le visuel déborde du texte, au même endroit que le contenu de l'ancienne carte (-80 px + 32 px de retrait) */
@media (min-width: 1380px) { .af-w { margin: 0 -48px; } }

/* --- les 4 cas --- */
.af-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
body.v2 .af-tab { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; margin: 0; padding: 10px 14px; border: 0; border-radius: var(--b-r-card);
    background: var(--sea); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
body.v2 .af-tab:hover { background: var(--tide-soft); }
body.v2 .af-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.af-tab:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
/* 14/10 : pictogramme nu (avant : tuile blanche de 36 px à rayon 10 ; #74C3EE sur l'onglet choisi) */
.af-tab i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--tide); transition: color .2s; }
.af-tab[aria-selected="true"] i { color: var(--b-accent-dark); }
.af-tab svg { width: 19px; height: 19px; }
.af-tab span { min-width: 0; }
.af-tab b { display: block; font: 600 15px/1.25 var(--f-display); }
.af-tab small { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); }
.af-tab[aria-selected="true"] small { color: rgba(255, 255, 255, .72); }

/* --- le fil : qui fait quoi, puis les 6 nœuds --- */
.af-rail { margin-top: 34px; }
.af-groups, .af-nodes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.af-groups { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.af-g { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; text-align: center; }
.af-g--ai { grid-column: 2 / 5; padding: 0 calc(100% / 6); color: var(--ink); }
.af-g--ai::before, .af-g--ai::after { content: ""; flex: 1; height: 1px; background: var(--b-rule); } /* 14/10 : filet d'un pixel (avant : 2 px #B4CDE2) */
.af-stage { position: relative; }
.af-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
/* 14/10 : liaisons en filet plein d'un pixel (avant : pointillés #9DBBD4 de 2,5 px), partie parcourue en bleu de 1,5 px */
.af-l { fill: none; stroke: var(--b-rule); stroke-width: 1; }
.af-lp { fill: none; stroke: var(--fish); stroke-width: 1.5; }
.af-nodes { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.af-nodes li { margin: 0; padding: 0; }
body.v2 .af-n { display: grid; justify-items: center; align-content: start; gap: 10px; width: 100%; margin: 0; padding: 0 6px; border: 0; background: none;
    font: inherit; color: var(--ink); text-align: center; cursor: pointer; }
.af-n:focus-visible { outline: none; }
.af-n:focus-visible .af-c { outline: 2px solid var(--tide); outline-offset: 4px; }
/* 14/10 : carrés à rayon 6, sans halo (avant : ronds de 58 px, halo de 6 px et ombre de 22 px sur l'étape en cours) */
.af-c { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--b-r-card); background: var(--sea); color: var(--b-faint); transition: background-color .35s var(--ease-out), color .35s var(--ease-out); }
.af-c svg { width: 24px; height: 24px; }
.af-n:hover .af-c { background: var(--tide-soft); }
.af-n.is-done .af-c { color: var(--tide); }
.af-n.is-on .af-c { background: var(--ink); color: var(--b-accent-dark); }
.af-n.is-skip .af-c { background: var(--b-mist); color: #C9D6E2; }
.af-num { position: absolute; top: -4px; right: -6px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 3px;
    background: var(--tide-soft); font: 600 11.5px/1 var(--f-body); color: var(--ink); transition: background-color .35s, color .35s; }
.af-n.is-done .af-num { background: var(--tide); color: #fff; }
.af-n.is-on .af-num { background: var(--fish); color: #fff; }
.af-nl { display: grid; gap: 2px; max-width: 160px; }
.af-nl b { font: 600 14.5px/1.25 var(--f-display); color: var(--muted); transition: color .35s; }
.af-n.is-on .af-nl b, .af-n.is-done .af-nl b { color: var(--ink); }
.af-nl small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
/* le poisson en pixels de la charte portait la demande d'un nœud à l'autre : retiré le 14/10 (plus rendu par automation.mjs).
   Avant : .af-fish { position: absolute; z-index: 2; width: 28px; height: 14px; color: var(--fish); opacity: 0; } */

/* --- l'écran (ce que fait le scénario) et la colonne d'explication --- */
/* grand écran : l'écran couvre l'explication et les commandes (calées sur son bas) ; le temps de traitement et l'imprévu
   passent dessous, côte à côte et de même hauteur. L'écran n'est plus étiré sur 4 lignes : sa hauteur est celle de l'étape la
   plus haute du cas (min-height posée par fit() dans js/exp-automation.js), plus de grand blanc sous le contenu. */
.af-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr auto;
    grid-template-areas: "scr head" "scr ctrl" "time sw"; column-gap: 28px; row-gap: 16px; margin-top: 32px; }
.af-head { grid-area: head; }
.af-kind { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 3px; background: var(--sea); font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--tide); }
.af-kind[data-k="ai"] { background: var(--ink); color: #fff; }
.af-kind[data-k="human"] { color: var(--ink); }
body.v2 .af-head h3 { margin: 10px 0 6px; font: 600 21px/1.2 var(--f-display); color: var(--ink); }
body.v2 .af-head p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }

.af-ctrl { grid-area: ctrl; display: flex; align-items: center; gap: 8px; }
body.v2 .af-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--b-r-card); background: var(--sea);
    font: 600 14px/1 var(--f-body); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease-out); }
body.v2 .af-btn:hover { background: var(--tide-soft); }
body.v2 .af-btn:disabled { opacity: .4; cursor: default; background: var(--sea); }
.af-btn:focus-visible, .af-sw:focus-visible, .af-go:focus-visible, .af-stop:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.af-btn svg { width: 18px; height: 18px; }
body.v2 .af-play { display: inline-flex; gap: 8px; width: auto; padding: 0 16px 0 13px; border-radius: var(--b-r-card); }
.af-count { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.af-time { grid-area: time; padding: 14px 16px 15px; border-radius: var(--b-r-card); background: var(--sea); }
body.v2 .af-time-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font: 600 15px/1.2 var(--f-display); color: var(--ink); }
/* 14/10 : « Exemple » en texte gris (avant : pilule ambre #FBEFE3 / #8A5A22) */
.af-ex { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: none; font: 500 12px/1.4 var(--f-body); color: var(--b-faint); white-space: nowrap; }
.af-ex::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.af-bar + .af-bar { margin-top: 11px; }
body.v2 .af-bar-t { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 5px; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.af-bar-t b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-track { height: 8px; border-radius: 2px; background: #fff; }
.af-track i { display: block; width: 100%; height: 100%; border-radius: 2px; background: #C9D6E2; }
.af-bar--ag .af-track i { width: 0; min-width: 4px; background: var(--fish); transition: width .6s var(--ease-out); }
body.v2 .af-time-n { margin: 11px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.af-time-n .df-link { font-size: 13px; }

body.v2 .af-sw { grid-area: sw; align-self: start; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--b-r-card);
    background: var(--sea); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .2s var(--ease-out); }
body.v2 .af-sw:hover { background: var(--tide-soft); }
.af-sw-t { flex: 1; min-width: 0; }
.af-sw-t b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.af-sw-t small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
/* 14/10 : interrupteur rectangulaire, sans ombre (avant : pilule #C5D5E3 et rond blanc ombré) */
.af-tog { position: relative; flex: none; width: 40px; height: 24px; border-radius: 4px; background: #C9D6E2; transition: background-color .2s; }
.af-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 3px; background: #fff; transition: transform .2s var(--ease-out); }
.af-sw[aria-checked="true"] .af-tog { background: var(--tide); }
.af-sw[aria-checked="true"] .af-tog::after { transform: translateX(16px); }
/* grand écran (suite, après les règles de base qu'il remplace) : commandes calées sur le bas de l'écran ; les deux barres
   de temps côte à côte ; l'imprévu prend la hauteur du bloc de temps (hauts et bas alignés) */
@media (min-width: 1024px) {
    .af-ctrl { align-self: end; }
    .af-time { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
    body.v2 .af-time-h, body.v2 .af-time-n { grid-column: 1 / -1; }
    .af-bar + .af-bar { margin-top: 0; }
    body.v2 .af-sw { align-self: stretch; }
}
/* sans JavaScript : l'étape 1 reste lisible, les commandes (inopérantes) sont masquées */
html:not(.js) .af-ctrl, html:not(.js) .af-sw { display: none; }

.af-scr { grid-area: scr; position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--b-r-card); background: var(--sea); overflow: hidden; }
.af-scr-h { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 18px; background: var(--b-hover); font-size: 13.5px; color: var(--muted); }
.af-scr-h i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 4px; background: var(--ink); color: var(--b-accent-dark); }
.af-scr-h i svg { width: 16px; height: 16px; }
.af-scr-h b { min-width: 0; overflow: hidden; font-weight: 600; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.af-st { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-weight: 600; white-space: nowrap; }
.af-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fish); }
/* 14/10 : voyants en bleu et gris (avant : ambre #D08A2E en attente, vert #1D7A55 terminé, #9FB6C9 arrêté) */
.af-st[data-s="wait"]::before { background: #9DB9D3; }
.af-st[data-s="done"]::before { background: var(--b-accent); }
.af-st[data-s="stop"]::before { background: #C9D6E2; }
/* dans l'écran, les blocs de contenu (écume ailleurs) passent en blanc ; les pastilles qui étaient blanches passent en écume */
.af-view { --sea: #fff; flex: 1; padding: 18px 20px 20px; }
.af-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }

/* contenus de l'écran (body.v2 : les marges par défaut des p, ul et h4 ne s'appliquent pas) */
body.v2 .af-lead { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.af-mail { padding: 14px 16px; border-radius: var(--b-r-card); background: var(--sea); }
.af-mail-h { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 10px; }
.af-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 4px; background: var(--tide-soft); font: 600 13px/1 var(--f-display); color: var(--tide); }
.af-mail-h b { display: block; font-size: 15px; line-height: 1.3; }
.af-mail-h small, .af-mail-h time { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); }
body.v2 .af-subj { margin: 0 0 6px; font: 600 15.5px/1.35 var(--f-display); color: var(--ink); }
body.v2 .af-txt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.af-txt mark { padding: 1px 3px; border-radius: 3px; background: rgba(31, 111, 168, .14); color: inherit; }
.af-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.af-f { min-width: 0; padding: 8px 11px; border-radius: var(--b-r-card); background: var(--sea); }
.af-f small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.af-f b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
body.v2 .af-rows, body.v2 .af-done { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.v2 .af-r { display: grid; grid-template-columns: auto minmax(0, 1fr) 22px; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: var(--b-r-card); background: var(--sea); font-size: 14.5px; line-height: 1.4; }
.af-tool { justify-self: start; min-width: 70px; padding: 3px 8px; border-radius: 3px; background: var(--af-sea); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--tide); text-align: center; white-space: nowrap; }
/* 14/10 : coche au trait bleu, sans rond (avant : rond vert #DDF0E6 / #1D7A55) ; alertes sur #EAEFF4, coche marine (avant : ambre) */
.af-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 0; background: none; color: var(--b-accent); }
.af-ok svg { width: 16px; height: 16px; stroke-width: 2.2; }
body.v2 .af-r.is-warn, body.v2 .af-done li.is-warn { background: var(--b-hover); }
.af-r.is-warn .af-ok, .af-done li.is-warn .af-ok { background: none; color: var(--ink); }
.af-r.is-muted { color: var(--muted); }
.af-r.is-muted .af-ok { background: none; color: #9DB9D3; }
.af-draft { padding: 14px 16px; border-radius: var(--b-r-card); background: var(--sea); }
body.v2 .af-draft-h { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.af-draft-h b { color: var(--ink); }
.af-type { min-height: 4.8em; }
.af-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--tide); }
.af-att { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 11px; border-radius: 4px; background: var(--af-sea); font-size: 13.5px; font-weight: 600; }
.af-att svg { width: 15px; height: 15px; color: var(--tide); }
body.v2 .af-calc { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
/* 14/10 : alerte sur #EAEFF4, texte marine, pictogramme bleu (avant : ambre #FBEFE3, #6E4718, #B06F24) */
body.v2 .af-flag { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--b-r-card); background: var(--b-hover); font-size: 14px; line-height: 1.45; color: var(--ink); }
.af-flag svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--b-accent); }
.af-tb { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; }
.af-tb th { padding: 0 8px 8px 0; border: 0; background: none; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; text-align: left; color: var(--muted); }
.af-tb td { padding: 8px 8px 8px 0; border: 0; border-top: 1px solid var(--b-rule); vertical-align: middle; }
.af-tb .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-tb th:last-child, .af-tb td:last-child { padding-right: 0; }
.af-tb tr.is-warn td { background: var(--b-hover); }
.af-tb tr.is-warn td:first-child { box-shadow: -8px 0 0 var(--b-hover); }
.af-tb .af-ok { display: inline-grid; vertical-align: middle; }
.af-tot { display: grid; justify-content: end; gap: 3px; margin-top: 10px; font-size: 14px; }
body.v2 .af-tot p { display: flex; justify-content: space-between; gap: 24px; margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.af-tot p b { color: var(--ink); }
body.v2 .af-doc-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin: 0 0 12px; }
.af-doc-h b { font: 600 16px/1.3 var(--f-display); }
.af-doc-h span { font-size: 13.5px; color: var(--muted); }
.af-minis { display: grid; gap: 8px; }
.af-m { padding: 10px 12px; border-radius: var(--b-r-card); background: var(--sea); }
.af-m.is-warn { background: var(--b-hover); }
body.v2 .af-m-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 3px; }
.af-m-h b { font-size: 14.5px; }
.af-m-h small { font-size: 12.5px; font-weight: 600; color: var(--tide); }
.af-m.is-warn .af-m-h small { color: var(--ink); }
body.v2 .af-m > p:last-child { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
body.v2 .af-note-l { margin: 0; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.5; }
.af-note-l li + li { margin-top: 6px; }
.af-appr { display: grid; gap: 14px; }
body.v2 .af-who { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--muted); }
.af-who .af-av { width: 32px; height: 32px; font-size: 12px; }
.af-who b { color: var(--ink); }
body.v2 .af-appr h4 { margin: 0; font: 600 17px/1.3 var(--f-display); color: var(--ink); }
body.v2 .af-appr ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.4; }
.af-appr li { display: flex; align-items: baseline; gap: 10px; }
.af-appr li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--tide); transform: translateY(-1px); }
.af-appr li.is-warn { color: var(--ink); font-weight: 600; } /* 14/10 : point d'attention en marine gras (avant : ambre #6E4718, puce #D08A2E) */
.af-appr li.is-warn::before { background: var(--ink); }
.af-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.v2 .af-go, body.v2 .af-stop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: var(--b-r-card); font: 600 15px/1 var(--f-body); cursor: pointer; transition: background-color .2s var(--ease-out); }
body.v2 .af-go { background: var(--tide); color: #fff; }
body.v2 .af-go:hover { background: var(--b-accent-hover); }
.af-go svg { width: 17px; height: 17px; }
body.v2 .af-stop { background: var(--sea); color: var(--ink); }
body.v2 .af-stop:hover { background: var(--tide-soft); }
body.v2 .af-done li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: var(--b-r-card); background: var(--sea); font-size: 14.5px; line-height: 1.4; }
/* le tampon de fin (bilan) peut passer sur deux lignes : rayon fixe plutôt que pilule */
/* 14/10 : tampon sur #EAEFF4, texte marine (avant : vert #DDF0E6 / #1D7A55, rayon 14) */
body.v2 .af-stamp { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px 5px 8px; border-radius: var(--b-r-card); background: var(--b-hover); font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.af-stamp.is-stop { background: var(--b-mist); color: var(--muted); }
.af-stamp .af-ok { flex: none; width: 20px; height: 20px; background: none; }
body.v2 .af-view .af-tb + .af-stamp { margin: 12px 0 0; }
body.v2 .af-more { margin: 12px 0 0; font-size: 14.5px; }

body.v2 .af-foot { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.af-foot .df-link { font-size: 14px; }
/* la mention sous le visuel s'aligne sur son bord gauche quand il déborde du texte */
@media (min-width: 1380px) { body.v2 .af-foot { margin-left: -48px; margin-right: -48px; } }
.af-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* apparitions : seulement quand l'écran change (jamais au survol) ; rien en mouvement réduit (ni poisson ni trait animé).
   Décalage de 140 ms entre deux éléments (300 ms auparavant) : l'écran se remplit en moins d'une demi-seconde ; la frappe
   progressive du brouillon (js/exp-automation.js, renderView) suit le même décalage. */
@media (prefers-reduced-motion: no-preference) {
    .af-view.is-anim .af-i { animation: af-in .4s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 140ms * var(--af-k)); }
    .af-view.is-anim tr.af-i { animation-name: af-fade; }
    .af-view.is-anim .af-r .af-ok { animation: af-pop .3s var(--ease-out) both; animation-delay: calc((var(--d, 0) * 140ms + 300ms) * var(--af-k)); }
    .af-view.is-anim mark { animation: af-mark .6s ease both; animation-delay: calc(400ms * var(--af-k)); }
    .af-st[data-s="run"]::before { animation: af-blink 1.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .af-c, .af-num, .af-nl b, .af-tab, .af-tab i, .af-bar--ag .af-track i, .af-tog, .af-tog::after { transition: none; }
}
@keyframes af-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes af-fade { from { opacity: 0; } }
@keyframes af-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes af-mark { from { background-color: transparent; } }
@keyframes af-blink { 50% { opacity: .35; } }

/* tablette : l'explication passe au-dessus de l'écran, les commandes dessous */
@media (max-width: 1023px) {
    .af-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head head" "scr scr" "ctrl ctrl" "time sw"; }
    body.v2 .af-sw { align-self: start; }
    body.v2 .af-head p { max-width: 60ch; }
}
/* téléphone */
@media (max-width: 760px) {
    .af-w { padding: 0; }
    .af-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
    body.v2 .af-tab { gap: 9px; min-height: 58px; padding: 8px 10px; }
    .af-tab i { width: 22px; height: 22px; }
    .af-tab svg { width: 17px; height: 17px; }
    .af-tab b { font-size: 14px; }
    .af-tab small { font-size: 12.5px; }
    .af-rail { margin-top: 26px; }
    .af-groups, .af-nl { display: none; }
    body.v2 .af-n { padding: 0; }
    .af-c { width: 40px; height: 40px; }
    .af-c svg { width: 18px; height: 18px; }
    .af-num { top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10.5px; }
    .af-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scr" "ctrl" "time" "sw"; row-gap: 14px; margin-top: 22px; }
    body.v2 .af-head h3 { margin-top: 8px; font-size: 18.5px; }
    body.v2 .af-head p { font-size: 14.5px; }
    .af-scr-h { min-height: 44px; padding: 8px 12px; font-size: 13px; }
    .af-view { padding: 14px 12px 14px; }
    .af-mail, .af-draft { padding: 12px; }
    body.v2 .af-txt { font-size: 14.5px; }
    .af-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.v2 .af-r { grid-template-columns: minmax(0, 1fr) 22px; gap: 4px 10px; padding: 9px 10px; font-size: 14px; }
    .af-r .af-tool { grid-column: 1; }
    .af-r .af-rt { grid-column: 1; }
    .af-r .af-ok { grid-column: 2; grid-row: 1 / span 2; }
    .af-tb { font-size: 13px; }
    .af-hide-m { display: none; }
    body.v2 .af-go, body.v2 .af-stop { min-height: 42px; padding: 0 15px; font-size: 14.5px; }
}

/* =====================================================================================================================
   V4.2 : Collecte, veille et enrichissement (section #collecte, fond écume). Un petit schéma en trois lignes au lieu d'une
   07/10 (décision A de Louis) : la section n'est plus sur la page Automatisation ; elle est rendue au garde-manger (id gm-collecte,
   fond écume ou blanc selon sa place), son contenu nourrit la page « Données & documents ». Règles gardées pour le garde-manger.
   rangée de trois colonnes de texte : la source, ce qui est automatisé, là où ça arrive chez vous, reliés par des pointillés
   (même trait que le fil d'une demande). En-têtes de colonnes une fois en haut ; sur téléphone, chaque ligne devient une carte
   (ce qui est automatisé, puis la source et la destination côte à côte, avec leur intitulé).
   ===================================================================================================================== */
.xa-col { --xa-cf: minmax(0, 1fr) 56px minmax(0, 1.45fr) 56px minmax(0, 1fr); }
body.v2 .xa-cf-heads { display: grid; grid-template-columns: var(--xa-cf); margin: 0 0 12px; font: 600 12px/1.2 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xa-cf-heads span { padding-left: 18px; }
.xa-cf-heads span:nth-child(2) { grid-column: 3; }
.xa-cf-heads span:nth-child(3) { grid-column: 5; }
body.v2 .xa-cf { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* les trois blocs d'une ligne ont la même hauteur (contenu centré), les pointillés restent au milieu */
body.v2 .xa-cf-row { display: grid; grid-template-columns: var(--xa-cf); align-items: stretch; margin: 0; padding: 0; }
.xa-cf-dots { align-self: center; }
/* 14/10 : rayons 6, pictogrammes nus (avant : rayons 14 et 18, tuiles d'icône écume ou marine #74C3EE), liaisons en filet plein
   d'un pixel (avant : pointillés #9DBBD4 qui défilaient) */
body.v2 .xa-cf-end { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 12px 18px; border-radius: var(--b-r-card); background: #fff; font: 600 15px/1.35 var(--f-body); color: var(--ink); }
.xa-cf-end i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--tide); }
.xa-cf-end i svg { width: 19px; height: 19px; }
.xa-cf-end > span { min-width: 0; }
/* intitulé de colonne dans chaque pastille : lu par les lecteurs d'écran, affiché seulement sur téléphone */
.xa-cf-end small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.xa-cf-mid { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 14px; min-width: 0; padding: 18px; border-radius: var(--b-r-card); background: #fff; }
.xa-cf-mid i { display: grid; place-items: center; width: 24px; height: 24px; color: var(--tide); }
.xa-cf-mid i svg { width: 22px; height: 22px; }
body.v2 .xa-cf-mid p { margin: 0; }
.xa-cf-mid b { display: block; font: 600 17px/1.3 var(--f-display); color: var(--ink); }
.xa-cf-mid p > span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.xa-cf-dots { display: block; height: 1px; margin: 0 8px; background: var(--b-rule); transition: background-color .3s var(--ease-out); }
.xa-col-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 22px; }
body.v2 .xa-col-note { max-width: 72ch; margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.xa-col-note .df-link { font-size: 15px; }
body.v2 .xa-col-foot .xp-tags { margin: 0 !important; padding-top: 0; }

@media (max-width: 1023px) {
    .xa-col { --xa-cf: minmax(0, 1fr) 28px minmax(0, 1.35fr) 28px minmax(0, 1fr); }
    body.v2 .xa-cf-end { padding: 12px 14px; font-size: 14.5px; }
    .xa-cf-end i { display: none; }
    .xa-cf-dots { margin: 0 4px; }
}
@media (max-width: 760px) {
    body.v2 .xa-cf-heads, .xa-cf-dots { display: none; }
    body.v2 .xa-cf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "mid mid" "src dst"; align-items: stretch; gap: 10px; padding: 16px; border-radius: var(--b-r-card); background: #fff; }
    .xa-cf-mid { grid-area: mid; padding: 0 0 4px; border-radius: 0; background: none; }
    .xa-cf-src { grid-area: src; }
    .xa-cf-dst { grid-area: dst; }
    body.v2 .xa-cf-end { align-items: flex-start; padding: 10px 12px; border-radius: var(--b-r-card); background: var(--sea); font-size: 14px; }
    .xa-cf-end small { position: static; display: block; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; white-space: normal; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
    .xa-cf-mid i { width: 22px; height: 22px; }
    .xa-cf-mid b { font-size: 16.5px; }
}

/* Collecte : comme les mini-scénarios de la V4, une ligne s'anime à la fois quand la liste est à l'écran (js/exp-automation.js,
   .is-playing puis .is-lit sur la source, le traitement et l'arrivée), et la ligne survolée aussi. Aucun bloc ne se déplace :
   seuls les pointillés défilent et les pastilles s'allument. Mouvement réduit : couleurs seulement, pointillés fixes.
   14/10 : plus rien ne défile ; la ligne en cours a ses filets en bleu et ses fonds au gris de survol. */
.xa-cf-end, .xa-cf-end i, .xa-cf-mid i { transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.xa-cf-row:is(.is-playing, :hover, :focus-within) .xa-cf-dots { background: var(--fish); }
body.v2 .xa-cf-row:is(:hover, :focus-within) .xa-cf-end, body.v2 .xa-cf-end.is-lit { background: var(--b-hover); }
.xa-cf-row:is(:hover, :focus-within) .xa-cf-end i, .xa-cf-end.is-lit i { color: var(--ink); }
.xa-cf-row:is(:hover, :focus-within) .xa-cf-mid i, .xa-cf-mid.is-lit i { color: var(--ink); }
@media (max-width: 760px) {
    body.v2 .xa-cf-row:is(:hover, :focus-within) .xa-cf-end, body.v2 .xa-cf-end.is-lit { background: var(--tide-soft); }
}
@media (prefers-reduced-motion: reduce) {
    .xa-cf-dots { transition: none; }
}

/* V4.3, revue mobile des pages d'expertise (06/10) : zones de clic de 44 px, sans rien déplacer */
@media (max-width: 768px) {
    /* précédent / lancer / suivant (40 px) : 2 px de plus tout autour (8 px d'écart entre eux) */
    body.v2 .af-btn { position: relative; }
    body.v2 .af-btn::after { content: ""; position: absolute; inset: -2px; }
    /* curseur « Part confiée à l'agent » (22 px) : marge intérieure compensée, la piste ne bouge pas */
    .xa-range { box-sizing: content-box; height: 22px; padding-block: 11px; margin-block: -11px; }
    /* valeur saisissable des compteurs (25 px de haut) : marge intérieure compensée ; le cadre ne coupe plus qu'à l'horizontale */
    .xa-val { overflow: clip visible; }
    body.v2 .xa-val input { padding-block: 10px; margin-block: -10px; }
}
@media (max-width: 760px) {
    /* les 6 étapes du fil (40 px de haut) : marge intérieure compensée, pastilles, tracé et poisson inchangés */
    body.v2 .af-n { padding-block: 2px; margin-block: -2px; }
}
@media (max-width: 520px) {
    /* boutons des compteurs (38 px) et choix jour / semaine / mois (42 px de haut) */
    body.v2 .xa-btn { position: relative; }
    body.v2 .xa-btn::after { content: ""; position: absolute; inset: -3px; }
    .xa-seg label::after { content: ""; position: absolute; inset: -1px 0; }
}

/* =====================================================================================================================
   Passe de nuit du 06/10 : le fil en version courte (préfixe afm), visuel du haut de page, posé sur la section blanche.
   Quatre temps sur une ligne, reliés par un pointillé : qui fait quoi (intitulé), la pastille, le titre et un fait concret
   (carte écume). Le poisson en pixels porte la demande d'une pastille à l'autre (js/exp-automation.js, bloc « fil court » :
   .is-play sur .afm, puis .is-on sur le temps en cours et .is-done sur ceux déjà passés). Sans JavaScript ou en mouvement
   réduit : pastilles marine, sans poisson. Les blocs ne bougent pas ; au survol, seule la pastille change de fond.
   ===================================================================================================================== */
/* 14/10 (direction « premium sobre ») : quatre colonnes éditoriales posées sur un filet d'un pixel, sans pastille ronde, sans
   pointillé et sans poisson. Dans chaque colonne : qui fait quoi (étiquette), le pictogramme nu en bleu, le titre et le fait concret
   (carte écume). En lecture (.is-play), le temps en cours prend un trait d'accent de 2 px en tête (indicateur d'état, pas un cadre)
   et sa carte passe au gris de survol ; ceux déjà passés gardent un filet bleu et une coche au trait. Sans JavaScript ou en
   mouvement réduit : les quatre temps en bleu, sans état. Ancien rendu (pastilles rondes marine à halo, coche dans un rond, ligne de
   pointillés #9DBBD4, poisson) : historique git et garde-manger (fil d'origine). */
.afm { --afm-gap: 16px; position: relative; }
body.v2 .afm-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--afm-gap); margin: 0; padding: 0; list-style: none; }
body.v2 .afm-st { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); align-content: start; min-width: 0; margin: 0; padding: 16px 0 0; box-shadow: inset 0 1px 0 var(--b-rule); text-align: left;
    transition: box-shadow .35s var(--ease-out); }
.afm-k { display: block; font: 600 12px/1.2 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.afm-k[data-k="ai"] { color: var(--tide); }
.afm-c { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--tide); transition: color .35s var(--ease-out); }
.afm-c svg { display: block; width: 26px; height: 26px; }
.afm-c em { display: none; width: 18px; height: 18px; color: var(--tide); font-style: normal; }
.afm-c em svg { width: 18px; height: 18px; }
body.v2 .afm-st b { display: block; margin: 12px 0 0; font: 600 16.5px/1.25 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
body.v2 .afm-st p { display: grid; align-content: center; margin: 10px 0 0; padding: 12px 14px; border-radius: var(--b-r-card); background: var(--sea); font-size: 14.5px; line-height: 1.4; color: var(--ink);
    transition: background-color .35s var(--ease-out); }
.afm-line { display: none; }
/* en lecture : au repos en gris, le temps en cours marqué d'un trait d'accent, ceux déjà passés d'un filet bleu et d'une coche */
.afm.is-play .afm-c { color: var(--b-faint); }
.afm.is-play .afm-st.is-done { box-shadow: inset 0 1px 0 var(--tide); }
.afm.is-play .afm-st.is-done .afm-c { color: var(--tide); }
.afm.is-play .afm-st.is-done .afm-c em { display: grid; }
.afm.is-play .afm-st.is-on { box-shadow: inset 0 2px 0 var(--tide); }
.afm.is-play .afm-st.is-on .afm-c { color: var(--tide); }
body.v2 .afm.is-play .afm-st.is-on p { background: var(--b-hover); }
/* téléphone : les quatre temps l'un sous l'autre, chacun sous son filet */
@media (max-width: 760px) {
    .afm { --afm-gap: 22px; }
    body.v2 .afm-rail { grid-template-columns: minmax(0, 1fr); }
    .afm-c svg { width: 22px; height: 22px; }
    body.v2 .afm-st p { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .afm-c, .afm-st, .afm-st p { transition: none; }
}

/* Passe de nuit du 06/10 : alternance des fonds après le retrait de la section « constat ». Le simulateur passe sur fond
   écume (panneau de la tâche en blanc, ses champs en écume) et la Collecte sur fond blanc (pastilles et cartes en écume) :
   les cartes prennent l'autre teinte que leur section. */
.xp-sim.df-sea .xa-in { background: #fff; }
body.v2 .xp-sim.df-sea .xa-name, .xp-sim.df-sea .xa-step, .xp-sim.df-sea .xa-seg, .xp-sim.df-sea .xa-calc { background: var(--sea); }
body.v2 .xp-sim.df-sea .xa-btn, .xp-sim.df-sea .xa-seg label:hover span { background: #fff; }
body.v2 .xp-sim.df-sea .xa-btn:hover { background: var(--tide-soft); }
.xp-sim.df-sea .xa-seg input:checked + span { background: var(--ink); color: #fff; }
body.v2 .xa-col:not(.df-sea) .xa-cf-end { background: var(--sea); }
.xa-col:not(.df-sea) .xa-cf-mid { background: var(--sea); }
body.v2 .xa-col:not(.df-sea) .xa-cf-row:is(:hover, :focus-within) .xa-cf-end, body.v2 .xa-col:not(.df-sea) .xa-cf-end.is-lit { background: var(--tide-soft); }

/* Passe de nuit du 06/10 : la Collecte tient dans une fenêtre de 1366 x 650 (titre compris) : en-tête et lignes resserrés,
   contenu inchangé (même écart sous le titre que le premier bloc, .xp-how-sec .hm-head dans v3-expert.css). */
.xa-col .hm-head { margin-bottom: 1.75rem; } /* 07/10 au soir : 28 px à toutes les largeurs (rythme vertical unique) */
.xa-col .xa-cf-mid { padding: 14px 18px; }
.xa-col .xa-col-foot { margin-top: 16px; }

/* 07/10 (retour de Louis : le premier bloc était un peu plus petit que ceux des autres pages, il ne remplissait pas une fenêtre
   de 1366 x 650) : sur ordinateur, le fil court est plus grand et plus aéré, sans élément de plus. Tablette et téléphone inchangés.
   14/10 : pictogramme de 32 px, titre de 18,5 px, carte du fait concret plus grande (plus de pastilles de 80 px ni de halo). */
@media (min-width: 1024px) {
    .afm-k { font-size: 12.5px; }
    .afm-c { margin-top: 18px; }
    .afm-c svg { width: 32px; height: 32px; }
    body.v2 .afm-st { padding-top: 20px; }
    body.v2 .afm-st b { margin-top: 16px; font-size: 18.5px; }
    body.v2 .afm-st p { margin-top: 14px; padding: 19px 20px; font-size: 15.5px; line-height: 1.45; }
    .xp-w-automation .xp-how { margin-top: 24px; } /* 07/10 au soir : 44 px avant, place du paragraphe how.p */
}
/* 07/10 au soir (contenu explicatif) : le paragraphe de « Ce que nous faisons » (how.p) tient sur une ligne, sur toute la largeur */
@media (min-width: 1024px) { body.v2 .xp-w-automation .xp-how-p { max-width: none; } }