/* DataFish V4 : page « Audit & conseil », le parcours d'audit en six étapes (préfixe xau).
   Sans JavaScript : les six étapes s'affichent les unes sous les autres. Avec : une étape à la fois, le poisson suit l'étape choisie.
   L'aperçu du livrable reprend la charte de l'appli MaturIA (cartes blanches bordées, notes en ambre, couleurs des axes) :
   les contours ne sont permis qu'à l'intérieur de cette maquette d'écran.
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md, décision 3 à faire valider par Louis) : la maquette est ramenée à la
   palette du site. Plus de couleurs Tailwind : radar en quatre bleus (données #1F6FA8, IA #5B8DB8, processus #0B3A63, culture
   #9DB9D3), notes et barres en bleu d'accent, étiquettes d'état en marine ou en gris, plus d'orange, de vert ni de rouge.
   Fenêtre à plat sur blanc (sans ombre ni trois points), cartes brume sans filet, rayons 6 (3 pour les étiquettes), titres en 600.
   Avant : --xau-data #3B82F6, --xau-ia #8B5CF6, --xau-proc #F97316, --xau-cult #22C55E, --xau-amber #D97706, --xau-amber-2 #F59E0B,
   --xau-app-ink #0F172A, --xau-app-muted #64748B, --xau-app-line #E2E8F0, --xau-app-soft #F1F5F9, --xau-app-primary #1E2F48. */

.xau {
    --xau-data: #1F6FA8; --xau-ia: #5B8DB8; --xau-proc: #0B3A63; --xau-cult: #9DB9D3;
    --xau-amber: #1F6FA8; --xau-amber-2: #1F6FA8; --xau-app-ink: #081A2E; --xau-app-muted: #55687B;
    --xau-app-line: #E3E9EF; --xau-app-soft: #F3F6F9; --xau-app-primary: #081A2E;
}

/* ---------- Les six étapes ---------- */
.xau-rail { position: relative; margin: 0 0 22px; padding-top: 36px; }
.xau-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.xau-step {
    display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; padding: 0 6px 12px; border-radius: var(--b-r-card);
    color: var(--ink); text-align: center; text-decoration: none;
}
.xau-n {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 9px; border-radius: var(--b-r-card); background: var(--sea);
    font: 600 17px/1 var(--f-display); color: var(--muted); transition: background-color .3s, color .3s;
}
.xau-step b { font: 600 16px/1.25 var(--f-display); letter-spacing: -.012em; }
.xau-step small { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.xau-step:hover .xau-n { background: var(--tide-soft); color: var(--tide); }
.xau-step.is-done .xau-n { background: var(--tide-soft); color: var(--tide); }
.xau-step.is-on .xau-n { background: var(--ink); color: #fff; }
.xau-step:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
/* le trait qui relie les étapes, et sa partie parcourue */
.xau-line { position: absolute; top: calc(36px + 22px); left: calc((100% - 40px) / 12); right: calc((100% - 40px) / 12); height: 3px; border-radius: 3px; background: var(--sea); }
.xau-line u { display: block; height: 100%; border-radius: inherit; background: var(--tide); transform: scaleX(var(--xau-p, 0)); transform-origin: left; transition: transform .8s var(--ease-out); }
/* le poisson, au-dessus de l'étape choisie (seulement avec JavaScript) */
.xau-fish { position: absolute; top: 2px; left: 0; display: none; width: 42px; color: var(--fish); transform: translateX(var(--xau-x, 0)); transition: transform .9s var(--ease-out); }
.xau.is-ready .xau-fish { display: block; }
.xau-fish > span { display: block; transition: transform .25s; }
.xau-fish.is-left > span { transform: scaleX(-1); }
.xau-fish svg { display: block; width: 100%; height: auto; }

/* ---------- Le panneau de l'étape ---------- */
.xau-panel {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start;
    padding: clamp(22px, 3.4vw, 44px); border-radius: var(--b-r-card); background: var(--sea); scroll-margin-top: calc(var(--header-h, 80px) + 20px);
}
.xau-panel + .xau-panel { margin-top: 14px; }
.xau.is-ready .xau-panel:not(.is-on) { display: none; }
.xau.is-ready .xau-panel { margin-top: 0; }
.xau.is-measuring .xau-panel { display: grid !important; }
.xau-panel:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
.xau-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
body.v2 .xau-txt h3 { margin: 8px 0 12px; font: 600 clamp(24px, 2.3vw, 30px)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.xau-p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.xau-facts { display: grid; gap: 8px; margin: 22px 0 0; }
.xau-facts > div { padding: 12px 16px 13px; border-radius: var(--b-r-card); background: #fff; }
.xau-facts dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xau-facts dt i { display: grid; place-items: center; width: 18px; height: 18px; color: var(--tide); }
.xau-facts dt svg { width: 17px; height: 17px; }
.xau-facts dd { margin: 5px 0 0 26px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.xau-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; }
.xau-go { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--f-body); text-decoration: none; }
.xau-go i { display: grid; place-items: center; width: 16px; height: 16px; }
.xau-go svg { width: 16px; height: 16px; }
.xau-go--next { min-height: 44px; padding: 0 18px 0 20px; border-radius: var(--b-r-card); background: var(--b-accent); color: #fff; transition: background-color .2s; }
.xau-go--next:hover { background: var(--b-accent-hover); color: #fff; }
.xau-go--prev { justify-content: center; width: 44px; height: 44px; border-radius: var(--b-r-card); background: #fff; color: var(--tide); transition: background-color .2s, color .2s; }
.xau-go--prev:hover { background: var(--tide-soft); color: var(--ink); }
.xau-go:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }

.xau-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin: 18px 0 0; padding: 0 6px; }
.xau-foot p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.xau-foot-fish { flex: none; width: 26px; color: var(--fish); }
.xau-foot-fish svg { display: block; width: 100%; height: auto; }
.xau-foot-links { gap: 24px !important; }

/* ---------- Aperçu du livrable : la fenêtre MaturIA ---------- */
.xau-app {
    min-width: 0; overflow: hidden; border-radius: var(--b-r-card); background: #fff; color: var(--xau-app-ink); font: 14px/1.4 var(--f-body);
    pointer-events: none; user-select: none;
}
.xau-app *, .xau-app *::before, .xau-app *::after { box-sizing: border-box; }
.xau-app svg { display: block; }
.xau-app p, .xau-app ul, .xau-app ol, .xau-app dl, .xau-app dd, .xau-app blockquote { margin: 0; }
.xau-app ul, .xau-app ol { padding: 0; list-style: none; }
.xau-app-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--xau-app-line); background: #fff; }
/* 14/10 : trois points de fenêtre retirés du balisage (audit.mjs) ; avant : .xau-dots, trois ronds #C8D2DC de 10 px */
.xau-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.xau-m { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--xau-app-primary); font-size: 12px; color: #fff; }
.xau-crumb em { padding: 2px 8px; border-radius: 3px; background: var(--xau-app-soft); font-style: normal; font-weight: 500; color: var(--xau-app-muted); }
/* « Exemple, données fictives » : texte gris, sans fond (avant : pilule ambre #FEF3C7, texte #92400E) */
.xau-fict { margin-left: auto; padding: 0; background: none; font-size: 11.5px; font-weight: 500; color: var(--b-faint); white-space: nowrap; }
.xau-app-body { display: grid; align-content: start; gap: 10px; padding: 16px; }
.xau-card { padding: 12px 14px; border: 0; border-radius: var(--b-r-card); background: var(--b-mist); } /* avant : blanche, filet #E2E8F0, rayon 14 */
.xau-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px !important; font-size: 13.5px; font-weight: 600; }
.xau-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xau-two--r { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
/* étiquettes d'état : « Validée » en bleu, « Prioritaire » en marine, « À valider » en gris (avant : vert, orange et gris ardoise) */
.xau-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.xau-pill--ok { background: #fff; color: var(--b-accent); }
.xau-pill--warn { background: var(--b-night); color: #fff; }
.xau-pill--muted { background: #fff; color: var(--b-faint); }
.xau-chip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--xau-app-line); border-radius: 3px; background: #fff; font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; color: var(--xau-app-ink); }
.xau-chip--fill { border-color: transparent; background: #fff; }
/* étiquettes d'axe, aux couleurs de l'appli */
/* 14/10 : étiquettes d'axe sur blanc, texte marine, point de légende au bleu de l'axe (avant : fonds et textes Tailwind par axe) */
.xau-ax { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 3px; background: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--b-night); }
.xau-ax::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--xau-data); }
.xau-ax--ia::before { background: var(--xau-ia); }
.xau-ax--proc::before { background: var(--xau-proc); }
.xau-ax--cult::before { background: var(--xau-cult); }
.xau-track { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--xau-app-line); }
.xau-track u { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--xau-data); transform: scaleX(var(--v, 0)); transform-origin: left; }

/* 1. cadrage */
.xau-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
.xau-info dt { font-size: 12px; color: var(--xau-app-muted); }
.xau-info dd { margin-top: 2px !important; font-size: 14px; font-weight: 500; }
.xau-goals { display: grid; gap: 9px; }
.xau-goals li { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.35; }
.xau-goals i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--b-accent); } /* coche au trait (avant : rond vert) */
.xau-goals svg { width: 16px; height: 16px; stroke-width: 2; }
.xau-bars { display: grid; gap: 11px; }
.xau-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 42% 14px; align-items: center; gap: 10px; font-size: 12.5px; }
.xau-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xau-bars b { font-size: 12.5px; text-align: right; }

/* 2. entretiens */
.xau-done .xau-card-h b { font-size: 15px; color: var(--xau-app-ink); }
.xau-people { display: grid; grid-template-columns: repeat(12, minmax(0, 30px)); justify-content: space-between; gap: 6px; }
.xau-people li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: #fff; font-size: 11px; font-weight: 600; color: var(--b-faint); }
.xau-people li.is-done { background: var(--xau-app-primary); color: #fff; }
.xau-qsec { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--xau-app-muted); }
.xau-q { margin-top: 8px !important; font-size: 14px; font-weight: 500; line-height: 1.4; }
.xau-qh { margin-top: 2px !important; font-size: 12px; color: var(--xau-app-muted); }
.xau-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.xau-scale span { padding: 5px 2px; border: 1px solid var(--xau-app-line); border-radius: 4px; background: #fff; color: var(--b-faint); text-align: center; }
.xau-scale b { display: block; font-size: 15px; line-height: 1.2; }
.xau-scale small { display: block; overflow: hidden; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.xau-scale span.is-on { border-color: var(--b-accent); background: var(--b-hover); color: var(--b-night); }
.xau-irr blockquote { padding-left: 12px; border-left: 2px solid var(--b-accent); font-size: 14px; line-height: 1.5; }
.xau-who { margin-top: 7px !important; font-size: 12px; color: var(--xau-app-muted); }

/* 3. analyse */
.xau-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.xau-kpi { padding: 10px 9px; }
/* espacement serré : « Processus » tient dans la tuile */
.xau-kpi small { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--xau-app-muted); }
.xau-kpi small::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--xau-app-primary); }
.xau-kpi--data small::before { background: var(--xau-data); }
.xau-kpi--ia small::before { background: var(--xau-ia); }
.xau-kpi--proc small::before { background: var(--xau-proc); }
.xau-kpi--cult small::before { background: var(--xau-cult); }
.xau-kpi b { display: block; margin: 3px 0 7px; font: 600 20px/1.2 var(--f-display); color: var(--xau-amber); }
.xau-kpi .xau-track u { background: var(--xau-amber-2); }
.xau-kpi > span { display: block; margin-top: 5px; font-size: 11px; color: var(--xau-app-muted); }
/* tuiles les plus étroites (fenêtre de 1101 à 1160 px ou de 561 à 640 px) : même réglage que sur téléphone */
@media (min-width: 1101px) and (max-width: 1160px), (min-width: 561px) and (max-width: 640px) {
    .xau-kpi small { font-size: 9.5px; letter-spacing: 0; }
}
.xau-radar { width: 100%; max-width: 220px; height: auto; margin: 0 auto; overflow: visible; }
.xau-ring { fill: none; stroke: #DCE3EA; stroke-width: 1; }
.xau-you polygon { fill: rgba(31, 111, 168, .14); stroke: var(--xau-data); stroke-width: 1.5; stroke-linejoin: round; }
.xau-you circle { stroke: #fff; stroke-width: 1.5; }
.xau-c-data { fill: var(--xau-data); } .xau-c-ia { fill: var(--xau-ia); } .xau-c-proc { fill: var(--xau-proc); } .xau-c-cult { fill: var(--xau-cult); }
.xau-axl { font-size: 12px; fill: #55687B; }
.xau-pains { display: grid; gap: 10px; }
.xau-pains li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--xau-app-line); font-size: 13px; line-height: 1.4; }
.xau-pains li:last-child { padding-bottom: 0; border-bottom: 0; }
.xau-pains b { flex: none; padding: 1px 8px; border-radius: 3px; background: #fff; font-size: 12px; font-weight: 600; color: var(--b-night); }

/* 4. restitution */
.xau-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xau-view-h { font-size: 16px; font-weight: 600; }
.xau-recos { display: grid; gap: 8px; }
.xau-recos li { padding: 10px 14px; }
.xau-recos li.is-prio { background: var(--b-hover); box-shadow: inset 2px 0 0 var(--b-accent); } /* avant : fond #FFFBEB, filet #FDE68A */
.xau-reco-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.xau-reco-h b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.xau-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px !important; }
.xau-deliv ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.xau-deliv li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.xau-deliv li > i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--b-accent); }
.xau-deliv li > i svg { width: 16px; height: 16px; }
.xau-deliv li > span { flex: 1; min-width: 0; }
.xau-deliv em { padding: 1px 7px; border-radius: 3px; background: #fff; font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--b-faint); }

/* 5. feuille de route */
.xau-matrix { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.xau-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: var(--xau-app-muted); }
.xau-x { grid-column: 2; font-size: 12px; text-align: center; color: var(--xau-app-muted); }
/* 14/10 : quadrants en blanc et bleu clair (avant : orange, vert, rouge et bleu Tailwind), séparés de 2 px */
.xau-quads { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 6.4; }
.xau-quad { display: grid; place-items: start; padding: 7px 10px; font-size: 11.5px; font-weight: 600; }
.xau-quad--0 { border-radius: 6px 0 0 0; background: #fff; color: var(--b-night); }
.xau-quad--1 { justify-items: end; border-radius: 0 6px 0 0; background: rgba(31, 111, 168, .12); color: var(--b-accent); }
.xau-quad--2 { align-items: end; border-radius: 0 0 0 6px; background: #fff; color: var(--b-faint); }
.xau-quad--3 { justify-items: end; align-items: end; border-radius: 0 0 6px 0; background: #fff; color: var(--b-faint); }
.xau-dot { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--b-accent); font-size: 11px; font-style: normal; font-weight: 600; color: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff; }
.xau-dot.is-later { width: 12px; height: 12px; background: #C9D3DD; }
.xau-order li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--xau-app-line); font-size: 13px; }
.xau-order li:first-child { padding-top: 0; }
.xau-order li:last-child { padding-bottom: 0; border-bottom: 0; }
.xau-order li > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--xau-app-primary); font-size: 11px; font-style: normal; font-weight: 600; color: #fff; }
.xau-order li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xau-order li > em { grid-column: 3; }
.xau-order li > b { grid-column: 4; }

/* 6. suivi */
.xau-gantt { position: relative; padding-bottom: 26px; --gl: 40%; }
.xau-g-head { display: grid; grid-template-columns: var(--gl) minmax(0, 1fr); padding-bottom: 6px; border-bottom: 1px solid var(--xau-app-line); }
.xau-g-q { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 11px; font-weight: 600; color: var(--xau-app-muted); }
.xau-g-q span { padding-left: 6px; }
.xau-gantt li { display: grid; grid-template-columns: var(--gl) minmax(0, 1fr); align-items: center; height: 32px; border-bottom: 1px solid var(--xau-app-line); }
.xau-gantt li > span:first-child { overflow: hidden; padding-right: 10px; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.xau-g-track { position: relative; height: 100%; background-image: linear-gradient(90deg, var(--xau-app-line) 1px, transparent 1px); background-size: 25% 100%; }
.xau-g-bar { position: absolute; top: 10px; height: 12px; overflow: hidden; border-radius: 3px; }
.xau-g-bar u { display: block; width: 100%; height: 100%; transform: scaleX(var(--v, 0)); transform-origin: left; }
/* 14/10 : barres en marine, bleu et gris (avant : vert, bleu et ardoise Tailwind), « Aujourd'hui » en filet plein marine (avant : tirets rouges) */
.xau-g-bar--ok { background: #DCE3EA; } .xau-g-bar--ok u { background: var(--b-night); }
.xau-g-bar--info { background: rgba(31, 111, 168, .2); } .xau-g-bar--info u { background: var(--xau-data); }
.xau-g-bar--muted { background: #DCE3EA; } .xau-g-bar--muted u { background: #9DB0C2; }
.xau-today { position: absolute; top: 44px; bottom: 24px; left: calc(14px + (100% - 28px) * (.4 + .6 * var(--t))); border-left: 1px solid var(--b-night); }
.xau-today em { position: absolute; bottom: -18px; left: -40px; width: 80px; font-size: 10.5px; font-style: normal; font-weight: 600; text-align: center; color: var(--b-night); }
.xau-prog { display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; height: 150px; }
.xau-prog li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; width: 76px; height: 100%; }
.xau-prog b { font: 600 16px/1.2 var(--f-display); color: var(--xau-amber); }
.xau-prog i { display: block; width: 44px; height: calc(var(--h) * 100px); border-radius: 3px 3px 0 0; background: var(--xau-app-primary); transform-origin: bottom; }
.xau-prog li.is-next b { color: var(--b-faint); }
.xau-prog li.is-next i { border: 1px solid #C9D3DD; background: none; }
.xau-prog span { font-size: 12px; color: var(--xau-app-muted); }

/* ---------- Mouvement : seulement sur action (ou à l'apparition du parcours), jamais pour masquer l'état de repos ---------- */
@media (prefers-reduced-motion: no-preference) {
    .xau-panel.is-anim { animation: xau-in .5s var(--ease-out); }
    /* à la première apparition, seuls les barres et le radar se dessinent : rien de ce qui est déjà lu ne disparaît */
    .xau-panel.is-grow .xau-track u, .xau-panel.is-grow .xau-g-bar u { animation: xau-grow 1s var(--ease-out) both; animation-delay: calc(.2s + var(--i, 0) * 80ms); }
    .xau-panel.is-grow .xau-prog i { animation: xau-rise .9s var(--ease-out) both; animation-delay: calc(.35s + var(--i) * 160ms); }
    .xau-panel.is-grow .xau-you { transform-box: view-box; transform-origin: 110px 110px; animation: xau-grow-r 1s var(--ease-out) .2s both; }
    .xau-panel.is-anim .xau-track u, .xau-panel.is-anim .xau-g-bar u { animation: xau-grow 1s var(--ease-out) both; animation-delay: calc(.2s + var(--i, 0) * 80ms); }
    .xau-panel.is-anim .xau-people li.is-done { animation: xau-pop .4s var(--ease-out) both; animation-delay: calc(.1s + var(--i) * 55ms); }
    .xau-panel.is-anim .xau-scale span.is-on { animation: xau-pick .45s ease-out .75s both; }
    .xau-panel.is-anim .xau-irr { animation: xau-in .5s var(--ease-out) .9s both; }
    .xau-panel.is-anim .xau-you { transform-box: view-box; transform-origin: 110px 110px; animation: xau-grow-r 1s var(--ease-out) .2s both; }
    .xau-panel.is-anim .xau-pains li, .xau-panel.is-anim .xau-recos li, .xau-panel.is-anim .xau-order li { animation: xau-in .45s var(--ease-out) both; animation-delay: calc(.35s + var(--i) * 90ms); }
    .xau-panel.is-anim .xau-dot { animation: xau-pop .45s var(--ease-out) both; animation-delay: calc(.2s + var(--i) * 90ms); }
    .xau-panel.is-anim .xau-prog i { animation: xau-rise .9s var(--ease-out) both; animation-delay: calc(.35s + var(--i) * 160ms); }
}
@keyframes xau-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes xau-grow { from { transform: scaleX(0); } }
@keyframes xau-grow-r { from { transform: scale(.15); } }
@keyframes xau-rise { from { transform: scaleY(0); } }
@keyframes xau-pop { from { opacity: 0; scale: .3; } }
@keyframes xau-pick { from { border-color: #E3E9EF; background: #fff; color: #55687B; } }
@media (prefers-reduced-motion: reduce) {
    .xau-line u, .xau-fish, .xau-fish > span, .xau-n { transition: none; }
}

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1100px) {
    /* une colonne : le texte, l'aperçu, puis les boutons pour passer à l'étape suivante */
    .xau-panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .xau-txt { display: contents; }
    .xau-txt > * { max-width: 680px; }
    /* l’aperçu vient juste après le paragraphe : il reste à l’écran quand on change d’étape */
    .xau-app { order: 1; margin-top: 20px; }
    .xau-facts { order: 2; margin-top: 18px; }
    .xau-nav { order: 3; }
}
@media (max-width: 760px) {
    .xau-rail { padding-top: 0; }
    .xau-line, .xau.is-ready .xau-fish { display: none; }
    .xau-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .xau-step { justify-content: flex-start; padding: 10px 4px 12px; background: var(--sea); }
    .xau-step.is-on { background: var(--ink); color: #fff; }
    .xau-step.is-on .xau-n { background: #fff; color: var(--ink); box-shadow: none; }
    .xau-n { width: 34px; height: 34px; margin-bottom: 5px; background: #fff; font-size: 15px; }
    .xau-step b { font-size: 14px; }
    .xau-step small { display: none; }
    .xau-panel { padding: 22px 18px; }
    .xau-p { font-size: 16px; }
    .xau-foot { padding: 0; }
    .xau-foot p { align-items: flex-start; }
}
@media (max-width: 560px) {
    .xau-app-body { padding: 12px; }
    .xau-crumb > span { display: none; }
    .xau-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xau-two, .xau-two--r, .xau-deliv ul { grid-template-columns: minmax(0, 1fr); }
    .xau-people { grid-template-columns: repeat(6, minmax(0, 30px)); }
    .xau-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xau-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xau-kpi small { font-size: 9.5px; letter-spacing: 0; }
    .xau-quads { aspect-ratio: 16 / 11; }
    .xau-quad { font-size: 11px; }
    .xau-order li > span { white-space: normal; }
    .xau-gantt { --gl: 46%; }
    .xau-today { left: calc(14px + (100% - 28px) * (.46 + .54 * var(--t))); }
    .xau-reco-h { flex-direction: column; gap: 5px; }
}

/* 14/10 : règles de l'encart « Cliquez sur une étape » retirées (encarts .df-cue supprimés du site, v3-hint.mjs). Avant :
   @media (min-width: 761px) and (max-width: 1023px) { .df-cue.df-cue--clear-m + .xau { padding-top: 0; } }
   .xp-w-audit .df-cue--r .df-cue-pill { right: 0; } */

/* ---------- Partie « Conseil » (V4.2, étude .claude/etudes-vague2/conseil.md ; préfixe xau-co) ----------
   Feuille de route en trois temps (Décider, Mener, Tenir le cap), deux cartes par temps, puis la bande « Tout au long ».
   Cartes sur fond écume, sans contour ; rien ne se déplace au survol. Sur ordinateur, titres et tiroirs « En pratique »
   s'alignent d'une colonne à l'autre (subgrid : une rangée de tête, puis 2 cartes de 2 rangées ; « Vous obtenez » est dans le tiroir depuis le 07/10) ; ouvrir un
   tiroir allonge la rangée sans décaler les cartes voisines. Un seul effet : les traits entre les pastilles se remplissent une
   fois à l'apparition (js/exp-audit.js : .is-run, puis .is-idle). Sans script, tout est affiché d'emblée.
   14/10 (direction « premium sobre ») : numéros « 01 » en chiffres bleus, sans rond (avant : pastille marine de 34 px), plus de trait
   entre les têtes de colonnes (avant : trait de 2 px qui se remplissait), cartes à rayon 6 (avant 18), pictogrammes nus (avant :
   carrés blancs ou écume de 40 px), « En pratique + » en lien souligné (avant : pastille blanche 999px à rond bleu clair),
   étiquettes en petites capitales grises, titres en 600. À l'apparition, seuls les numéros passent du gris au bleu. */
body.v2 #conseil, body.v2 .xau-co-card[id], body.v2 .xau-co-band[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.xau-co-cols { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.xau-co-col { min-width: 0; }
.xau-co-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* tête de colonne : pastille, verbe et moment, trait vers la colonne suivante */
.xau-co-head { display: grid; grid-template-columns: 28px auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: baseline; margin: 0 0 14px; }
.xau-co-rail { display: contents; }
.xau-co-n {
    grid-column: 1; grid-row: 1; align-self: baseline; font: 500 15px/1.2 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums;
    color: var(--b-accent); transition: color .35s ease;
}
.xau-co-head > b { grid-column: 2; grid-row: 1; font: 600 20px/1.2 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
.xau-co-head > small { grid-column: 2; grid-row: 2; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.xau-co-rail > i { grid-column: 3; grid-row: 1 / span 2; display: none !important; height: 2px; margin: 0 -16px 0 6px; border-radius: 2px; background: rgba(31, 111, 168, .28); overflow: hidden; } /* 14/10 : plus affiché */
.xau-co-rail > i > u { display: block; width: 100%; height: 100%; background: var(--tide); transform-origin: left center; }

/* carte */
.xau-co-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: var(--b-r-card); background: var(--sea); }
.xau-co-h { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 18px/1.3 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
.xau-co-h > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--b-accent); }
.xau-co-h > i svg { width: 22px; height: 22px; }
.xau-co-p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.xau-co-get { display: grid; align-content: start; gap: 6px; margin: 16px 0 0; }
.xau-co-get > small { font: 600 12px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xau-co-get > span { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.xau-co-get > span > i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--tide); }
.xau-co-get svg { display: block; width: 100%; height: 100%; }
.xau-co-get path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* tiroir « En pratique » : un lien souligné suivi d'un + (14/10 ; avant : pastille blanche, 999px), visible cliquable d'emblée */
.xau-co-more { align-self: start; margin: 16px 0 0; }
.xau-co-more > summary {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none;
    color: var(--b-accent); font: 600 14.5px/1.2 var(--f-body); cursor: pointer; list-style: none; user-select: none;
}
.xau-co-more > summary > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.xau-co-more > summary:hover { color: var(--b-night); }
.xau-co-more > summary::-webkit-details-marker { display: none; }
.xau-co-more > summary::marker { content: ""; }
.xau-co-more > summary > i { display: grid; place-items: center; width: 16px; height: 16px; color: inherit; transition: transform .25s ease; }
.xau-co-more > summary > i svg { width: 14px; height: 14px; }
.xau-co-more > summary:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.xau-co-more[open] > summary > i { transform: rotate(45deg); }
.xau-co-drawer .xau-co-p { margin: 14px 0 0; } /* finition 25/09 : le paragraphe est en tête du tiroir */
.xau-co-drawer ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.xau-co-drawer li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.xau-co-drawer li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; background: var(--b-accent); } /* 14/10 : carré (avant : rond de 6 px) */
.xau-co-drawer .df-link { display: inline-block; margin-top: 12px; font-size: 15px; }
.xau-co-more[open] .xau-co-drawer { animation: xau-co-open .3s ease both; }
@keyframes xau-co-open { from { opacity: 0; } }

/* survol ou focus d'une carte : la coche se redessine (14/10 : plus de tuile d'icône qui s'éclaire ni de pastille de colonne) */
.xau-co-card:hover .xau-co-get path, .xau-co-card:focus-within .xau-co-get path,
.xau-co-band:hover .xau-co-get path, .xau-co-band:focus-within .xau-co-get path { animation: xau-co-tick .4s ease-out; }
@keyframes xau-co-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* bande « Tout au long » : fond bleu clair (la carte « Selon votre maturité » qui suit est marine)
   14/10 : fond de carte (blanc sur la section écume), rayon 6, pictogramme nu (avant : #EAEFF4, rayon 18, tuile de 42 px) */
.xau-co-band {
    display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start;
    margin-top: 16px; padding: 22px 26px; border-radius: var(--b-r-card); background: var(--sea);
}
.xau-co-band-ic { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; color: var(--b-accent); }
.xau-co-band-ic svg { width: 22px; height: 22px; }
.xau-co-band-t small { display: block; font: 600 12px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xau-co-band-t h3 { margin: 6px 0 0; font: 600 19px/1.3 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
.xau-co-band-t p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.xau-co-band-r > .xau-co-more { margin-top: 4px; }
/* 07/10 (corrections finales) : « Vous obtenez » en tête du tiroir (cartes et bande), puis le paragraphe et les puces */
.xau-co-drawer > .xau-co-get { margin: 14px 0 0; }
.xau-co-drawer > .xau-co-get + .xau-co-p { margin-top: 12px; }

/* remplissage à l'apparition (seulement avec le script) */
html.js .xau-co:not(.is-run) .xau-co-n { color: var(--b-faint); }
html.js .xau-co:not(.is-run) .xau-co-rail > i > u { transform: scaleX(0); }
.xau-co.is-run:not(.is-idle) .xau-co-n { transition-delay: calc(var(--c) * .45s); }
.xau-co.is-run:not(.is-idle) .xau-co-rail > i > u { transition: transform .6s cubic-bezier(.4, 0, .2, 1) calc(var(--c) * .45s + .25s); }
@media (prefers-reduced-motion: reduce) {
    .xau-co-n, .xau-co-rail > i > u, .xau-co-more > summary > i { transition: none !important; }
    .xau-co-get path, .xau-co-more[open] .xau-co-drawer { animation: none !important; }
}

/* tablette : chaque temps est un bloc, ses deux cartes côte à côte (alignées entre elles) */
@media (min-width: 768px) and (max-width: 1023px) {
    .xau-co-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .xau-co-band { grid-template-columns: auto minmax(0, 1fr); }
    .xau-co-band-r { grid-column: 2; }
    @supports (grid-template-rows: subgrid) {
        .xau-co-list { grid-template-rows: repeat(2, auto); row-gap: 0; }
        .xau-co-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    }
}
/* ordinateur : trois colonnes, rangées partagées */
@media (min-width: 1024px) {
    .xau-co-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
    .xau-co-list { gap: 16px; }
    .xau-co-col:last-child .xau-co-rail > i { visibility: hidden; }
    @supports (grid-template-rows: subgrid) {
        .xau-co-col { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } /* 07/10 : tête + 2 cartes de 2 rangées */
        .xau-co-head { margin-bottom: 0; }
        .xau-co-list { display: contents; }
        .xau-co-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; margin-top: 16px; }
    }
}
/* téléphone : une colonne, dans l'ordre */
@media (max-width: 767px) {
    .xau-co-card { padding: 20px 18px; }
    .xau-co-band { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 18px; }
}

/* V4.3, revue mobile des pages d'expertise (06/10) : zones de clic de 44 px, sans rien déplacer ; aperçu MaturIA sans texte coupé */
@media (max-width: 768px) {
    /* « En pratique » (38 px de haut) */
    .xau-co-more > summary { position: relative; }
    .xau-co-more > summary::after { content: ""; position: absolute; inset: -13px 0; } /* 14/10 : lien de 17 px (avant : pastille de 38 px, -3px) */
    /* « Découvrir MaturIA » (20 px) et lien du tiroir (24 px) : marge intérieure compensée par une marge négative */
    .xau-foot-links .df-link { padding-block: 12px; margin-block: -12px; }
    .xau-co-drawer .df-link { padding-block: 10px; margin: 2px 0 -10px; }
}
@media (max-width: 560px) {
    /* planning de l'aperçu : intitulés sur deux lignes (ils étaient coupés par des points de suspension), comme la liste des priorités */
    .xau-gantt li > span:first-child { white-space: normal; line-height: 1.2; }
}
@media (max-width: 400px) {
    /* indicateurs, trois par ligne : « PROCESSUS » dépassait de 7 px à 360 px */
    .xau-kpi { padding-inline: 5px; }
    /* barre de la fenêtre : l'étape (« Feuille de route », 112 px) passait sous « Exemple, données fictives » (jusqu'à 40 px à 360,
       10 px à 390). Sous 400 px, la marque « M » s'efface comme les pastilles et le nom de l'entreprise sous 560 px ; l'étape garde
       sa largeur et la mention passe sur deux lignes si besoin (barre de 40 px inchangée) */
    .xau-m { display: none; }
    .xau-crumb { flex-shrink: 0; }
    .xau-fict { white-space: normal; text-align: right; }
}

/* ==========================================================================================================================
   Passe de nuit du 06/10/2026 : premier bloc compact « Le parcours d'audit » (préfixe xac, .claude/exp/audit.mjs)
   À gauche les 4 livrables sur un fil et la note MaturIA, à droite une seule fenêtre MaturIA (classes xau-app, xau-card,
   xau-order et radar, plus haut). Une seule animation, à l'apparition, au rythme des étapes « Ce que nous faisons »
   (événement « xp-how » du moteur commun, js/exp-audit.js) : un point descend le fil ; au 3e livrable le radar se dessine,
   au 4e les projets se rangent. Rien n'est masqué au repos : sans script ou avec
   mouvement réduit, tout est affiché. Le bloc lui-même ne bouge pas. L'ancien parcours (préfixe xau) n'est plus que sur le
   garde-manger.
   ========================================================================================================================== */
/* 14/10 (direction « premium sobre ») : mêmes couleurs que .xau (voir l'en-tête du fichier) ; livrables numérotés « 01 » en chiffres
   bleus, sans rond ni fil (avant : pastilles marine de 34 px reliées par un trait, point bleu qui descendait le fil ; les éléments
   .xac-line, .xac-fill et .xac-dot restent dans le balisage pour js/exp-audit.js, mais ne s'affichent plus), petit poisson de la note
   retiré (audit.mjs), fenêtre sans ombre, étiquette « Ce que vous recevez » en gris, titres en 600. À l'apparition, au rythme des
   étapes « Ce que nous faisons », les numéros passent du gris au bleu, puis le radar se dessine et les projets se rangent. */
.xac {
    --xau-data: #1F6FA8; --xau-ia: #5B8DB8; --xau-proc: #0B3A63; --xau-cult: #9DB9D3;
    --xau-amber: #1F6FA8; --xau-amber-2: #1F6FA8; --xau-app-ink: #081A2E; --xau-app-muted: #55687B;
    --xau-app-line: #E3E9EF; --xau-app-soft: #F3F6F9; --xau-app-primary: #081A2E;
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center;
}
.xac-side { min-width: 0; }
.xac-get { margin: 0 0 14px; font: 600 12px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xac-rail { position: relative; }
.xac-steps { position: relative; z-index: 1; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.xac-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.xac-n { font: 500 14px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--b-accent); transition: color .35s var(--ease-out); }
.xac.is-wait .xac-n:not(.is-lit) { color: var(--b-faint); }
.xac-step b { font: 600 18px/1.3 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
.xac-step.is-pop b { animation: xac-pop .45s var(--ease-out); }
@keyframes xac-pop { 0% { opacity: .35; transform: translateX(-4px); } 100% { opacity: 1; transform: none; } }
/* trait vertical qui relie les pastilles ; partie parcourue et point posés par le script (14/10 : masqués, voir plus haut) */
.xac-line, .xac-fill, .xac-dot { display: none !important; }
.xac-line { position: absolute; top: 17px; bottom: 17px; left: 16px; width: 2px; border-radius: 2px; background: var(--tide-soft); }
.xac-fill { position: absolute; top: 17px; left: 16px; width: 2px; height: 0; border-radius: 2px; background: var(--fish); opacity: 0; pointer-events: none; transition: width .42s cubic-bezier(.45, 0, .35, 1), height .42s cubic-bezier(.45, 0, .35, 1), opacity .5s ease; }
.xac-dot { position: absolute; z-index: 0; top: 0; left: 0; transition: transform .42s cubic-bezier(.45, 0, .35, 1), opacity .3s ease; width: 10px; height: 10px; border-radius: 50%; background: var(--fish); box-shadow: 0 0 0 5px rgba(31, 111, 168, .18); opacity: 0; pointer-events: none; } /* 14/10 (relecture du lot 2) : #1F5F99 et #3A8CC8 au bleu d'accent */
.xac-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* 14/10 : .xac-note-fish n'est plus rendu (audit.mjs) */
.xac-note-fish { flex: none; width: 26px; margin-top: 2px; color: var(--fish); }
.xac-note-fish svg { display: block; width: 100%; height: auto; }
.xac-note .df-link { white-space: nowrap; }

/* la fenêtre MaturIA : radar et premiers projets côte à côte */
/* 14/10 : sans ombre (avant : 0 18px 44px et 0 2px 6px) */
.xau-app-body.xac-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; padding: 14px; }
.xac-score { display: inline-flex; align-items: baseline; gap: 6px; }
.xac-score small { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--xau-app-muted); }
.xac-score b { font: 600 18px/1.2 var(--f-display); color: var(--xau-amber); }
.xac .xau-radar { max-width: 150px; }
.xac .xau-axl { font-size: 15px; }
.xac .xau-order li { padding: 7px 0; }
.xac .xau-order li:first-child { padding-top: 2px; }

/* l'animation : le radar et les projets attendent le point (seulement pendant l'animation, posée par le script) */
@media (prefers-reduced-motion: no-preference) {
    .xac .xau-you { transform-box: view-box; transform-origin: 110px 110px; transition: transform .9s var(--ease-out), opacity .3s ease; }
    .xac.is-wait:not(.is-r) .xau-you { transform: scale(.15); opacity: 0; transition: none; }
    .xac .xau-order li { transition: opacity .4s ease, transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
    .xac.is-wait:not(.is-o) .xau-order li { opacity: 0; transform: translateY(6px); transition: none; }
}
@media (prefers-reduced-motion: reduce) {
    .xac-n { transition: none; }
    .xac-step.is-pop b { animation: none; }
}

/* tablette et téléphone : les livrables, puis la fenêtre */
@media (max-width: 1023px) {
    .xac { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
    .xau-app-body.xac-body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .xac-step b { font-size: 17px; }
}
@media (max-width: 768px) {
    /* « Découvrir MaturIA » : zone de clic de 44 px sans rien déplacer */
    .xac-note .df-link { padding-block: 12px; margin-block: -12px; }
}

/* Partie Conseil sur fond écume (passe de nuit du 06/10, CONSEIL_SEA dans audit.mjs) : les cartes prennent l'autre teinte
   (14/10 : pictogrammes et « En pratique » sans tuile, plus rien à repeindre en écume) */
.xau-co.df-sea .xau-co-card, .xau-co.df-sea .xau-co-band { background: #fff; }
/* marges resserrées sur ordinateur (contenu inchangé) : la partie Conseil gagne en hauteur */
@media (min-width: 1024px) {
    .xau-co .hm-head { margin-bottom: 1.75rem; }
    .xau-co-card { padding: 18px 20px; }
    .xau-co-get, .xau-co-more { margin-top: 12px; }
    .xau-co-band { margin-top: 12px; padding: 18px 24px; }
    /* 07/10 : la 3e colonne de la bande commence au même x que le contenu des cartes de la 3e colonne (« En pratique » alignés) :
       largeur de bande W = 100% + 48px, carte (W - 32px) / 3, marge intérieure de carte 20px, de bande 24px */
    .xau-co-band { grid-template-columns: auto minmax(0, 1fr) calc(100% / 3 - 38.67px); }
    @supports (grid-template-rows: subgrid) {
        .xau-co-card { margin-top: 12px; }
    }
}
/* 07/10, retours de Louis :
   - parcours compact : le point qui descend le fil passait SUR le chiffre des pastilles (z-index 2, au-dessus de la liste). Il passe
     maintenant dessous (z-index 0, la liste .xac-steps est à 1) : on le voit glisser sur le trait entre deux pastilles, il entre
     sous la pastille, qui s'allume (is-lit) ; le chiffre reste toujours lisible. Géométrie inchangée (centre du trait = centre des
     pastilles = 17 px).
   - partie Conseil sur fond écume : au survol (ou au clic sur « En pratique », focus-within) de la bande « Tout au long », son
     pictogramme passait en blanc sur la tuile écume (la règle .xau-co.df-sea, plus bas dans le fichier, gardait le fond écume) :
     blanc sur blanc. Survol rétabli : tuile marine, pictogramme blanc. Même correction pour les cartes (tuile bleu clair,
     pictogramme bleu, comme prévu par la règle de survol des cartes).
   - « En pratique » de la bande : le tiroir s'ouvrait dans la seule 3e colonne (319 px, à droite), loin du titre. Sur ordinateur,
     le bouton reste aligné sur ceux des cartes de la 3e colonne, et le tiroir ouvert s'étend vers la gauche jusqu'à l'aplomb du
     titre (colonnes 2 et 3) ; ses puces passent sur trois colonnes. Calcul : grille de la bande = pictogramme 42 px, écart 22 px,
     colonne 2 (1fr), colonne 3 (C3 = 100 % / 3 - 38,67 px de la largeur intérieure) ; colonne 2 + écart = 2 x C3 + 52 px, où
     C3 = largeur du tiroir fermé (100 %). */
/* 14/10 : règles de survol des tuiles d'icônes retirées (pictogrammes nus) */
@media (min-width: 1024px) {
    /* 14/10 : pictogramme de 24 px au lieu de 42 : le titre commence 18 px plus à gauche (avant : 300% + 52px, -200% - 52px) */
    .xau-co-band .xau-co-drawer { position: relative; width: calc(300% + 70px); margin-left: calc(-200% - 70px); padding-top: 4px; }
    .xau-co-band .xau-co-drawer ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}

/* 18/10 (Constantin) : l'aperçu MaturIA du premier bloc montre un Gantt des recommandations (formations comprises), figé.
   Plus de place pour le Gantt que pour le radar ; libellés sur deux lignes au besoin ; pas de repère « Aujourd'hui ». */
.xau-app-body.xac-body--gantt { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.xac .xac-gantt { padding-bottom: 12px; --gl: 46%; }
.xac .xac-gantt li { height: auto; min-height: 34px; align-items: stretch; }
.xac .xac-gantt li > span:first-child { align-self: center; padding: 5px 10px 5px 0; white-space: normal; line-height: 1.25; }
.xac .xac-gantt .xau-g-bar { top: calc(50% - 6px); }
@media (max-width: 560px) {
    .xau-app-body.xac-body--gantt { grid-template-columns: minmax(0, 1fr); }
}