/* DataFish : page Formations, élément interactif « Composez votre parcours » (préfixe xt).
   Sans JavaScript : les règles :has() affichent la variante de chaque étape qui correspond aux choix.
   Avec JavaScript (.xt.is-ready) : l'attribut hidden prend le relais, les étapes qui changent sont animées.
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md, tâche L2-T2) : choix en rectangles à rayon 6 (avant : pilules
   999px et carrés d'icônes), numéros « 01 » en chiffres bleus (avant : ronds marine), fil, trait parcouru et point animé masqués
   (le fil devient un filet d'un pixel en tête de chaque étape, qui passe au bleu quand l'étape s'allume), plus de poisson au bout
   du fil, interrupteur à rayon 3, rayons 6 (avant 12 à 18), titres en 600 (avant 700), plus de #74C3EE ni de #3A8CC8. */

.xt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.xt [hidden] { display: none !important; }
.xt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Choix : public, objectif, point de départ ---------- */
.xt-ctrl { position: sticky; top: calc(var(--header-h, 80px) + 24px); display: grid; gap: 26px; }
.xt-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.xt-lg { float: left; width: 100%; margin: 0 0 10px; padding: 0 0 0 9px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xt-opts { position: relative; clear: both; display: grid; gap: 4px; }
.xt-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.xt-opt {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; padding: 11px 16px 11px 12px; border-radius: var(--b-r-card);
    font: 600 16px/1.3 var(--f-body); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.xt-opt:hover { background: var(--b-mist); }
.xt-opt > i { display: grid; place-items: center; width: 24px; height: 24px; color: var(--b-accent); transition: color .2s var(--ease-out); }
.xt-opt > i svg { width: 19px; height: 19px; }
.xt-in:checked + .xt-opt { background: var(--b-night); color: #fff; }
.xt-in:checked + .xt-opt > i { color: var(--b-accent-dark); }
.xt-in:focus-visible + .xt-opt, .xt-in:focus-visible + label .xt-sw-k { outline: 2px solid var(--tide); outline-offset: 2px; }

/* interrupteur « Vous partez de zéro » (14/10 : rectangle à rayon 3, sans ombre ; avant : pilule) */
.xt-sw { position: relative; }
.xt-sw label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 14px 16px 14px 12px; border-radius: var(--b-r-card); background: var(--b-mist); cursor: pointer; }
.xt-sw-t { display: grid; gap: 2px; min-width: 0; }
.xt-sw-t b { font: 600 16px/1.3 var(--f-body); color: var(--ink); }
.xt-sw-t small { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.xt-sw-k { position: relative; flex: none; width: 44px; height: 26px; border-radius: 3px; background: #C9D3DD; transition: background-color .25s var(--ease-out); }
.xt-sw-k::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 2px; background: #fff; transition: transform .25s var(--ease-out); }
.xt-in:checked + label .xt-sw-k { background: var(--b-night); }
.xt-in:checked + label .xt-sw-k::after { transform: translateX(18px); }

/* ---------- Le parcours ---------- */
.xt-out { min-width: 0; }
.xt-sum { margin: 0 0 22px; font: 600 clamp(1.2rem, 1.8vw, 1.45rem)/1.35 var(--f-display); letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.xt-sum em { font-style: normal; color: var(--b-accent); }

.xt-route { position: relative; }
/* 14/10 : fil, trait parcouru et point animé masqués (le script les pose encore, sans effet visible). Avant : fil de 2 px
   en #EAEFF4 du numéro 1 au poisson, trait bleu qui se remplit, point bleu à halo. */
.xt-route::before { content: none; }
.xt-fill, .xt-dot { display: none; }

.xt-steps { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.xt-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
/* numéro en chiffres bleus, sans rond ; allumé : il passe en marine */
.xt-node { position: relative; z-index: 1; display: block; justify-self: start; margin-top: 20px; font: 500 15px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--b-accent); transition: color .35s var(--ease-out); }
.xt-node.is-lit { color: var(--b-night); }
.xt-card { overflow: hidden; border-radius: var(--b-r-card); background: var(--b-mist); }
.xt-v { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14.5rem); gap: 18px; padding: 18px 18px 18px 22px; }
.xt-sum .xt-v { display: inline; padding: 0; }
.xt-txt { min-width: 0; }
.xt-fmt { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--b-accent); }
.xt-fmt i { display: grid; flex: none; width: 16px; height: 16px; }
.xt-fmt i svg { width: 16px; height: 16px; }
.xt-more summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; border-radius: 4px; }
.xt-more summary::-webkit-details-marker { display: none; }
.xt-more summary:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
.xt .xt-h { margin: 0; font: 600 18px/1.3 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
/* « + » du socle (.df-plus, v3.css) : devient « − » à l'ouverture ; ici sur fond blanc, la carte étant brume */
.xt-plus { margin-top: -1px; background: #fff; }
.xt-p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.xt-get { align-self: start; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--b-r-card); background: #fff; }
/* coche au trait, nue (avant : rond marine de 24 px) */
.xt-get i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--b-accent); transition: color .3s var(--ease-out); }
.xt-card.is-lit .xt-get i { color: var(--b-night); }
.xt-get i svg { width: 16px; height: 16px; stroke-width: 2; }
.xt-get span { display: grid; gap: 3px; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.xt-get small { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }

/* arrivée : des équipes autonomes (14/10 : le poisson dans un rond marine devient un carré bleu de 7 px, écho du pixel du poisson ;
   le span .xt-end-fish, vide, reste le dernier arrêt du script) */
.xt-end { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: center; margin: 12px 0 0; }
.xt-end-fish { display: block; width: 7px; height: 7px; background: var(--b-accent); }
.xt-end > span:last-child { display: grid; gap: 1px; }
.xt-end b { font: 600 17px/1.3 var(--f-display); color: var(--ink); }
.xt-end small { font-size: 14px; color: var(--muted); }

/* le kit : ce que chacun garde, une ligne par étape */
.xt-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0 64px; padding: 0; list-style: none; }
.xt-k { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 14px 9px 12px; border-radius: var(--b-r-card); background: var(--b-mist); font: 600 14px/1.3 var(--f-body); color: var(--ink); transition: background-color .35s var(--ease-out), color .35s var(--ease-out); }
.xt-k-n { flex: none; font: 500 13px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--b-accent); transition: color .35s var(--ease-out); }
.xt-kit .xt-v { display: inline; padding: 0; }
.xt-k.is-lit { background: var(--b-hover); }
.xt-k.is-lit .xt-k-n { color: var(--b-night); }
.xt-k.is-pop { animation: xt-pop .45s var(--ease-out); }
@keyframes xt-pop { 0% { opacity: .5; } 100% { opacity: 1; } }

/* pied : faits utiles et rendez-vous */
.xt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin: 30px 0 0 64px; padding: 20px 22px; border-radius: var(--b-r-card); background: var(--b-mist); }
.xt-facts { display: grid; gap: 8px; flex: 1 1 22rem; margin: 0; padding: 0; list-style: none; }
.xt-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.xt-facts i { display: grid; flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--b-accent); }
.xt-facts i svg { width: 18px; height: 18px; }
.xt-foot .cta-button { flex: none; }

/* ---------- Sans JavaScript : la bonne variante par :has() ---------- */
.xt:not(.is-ready):has(#xt-p-dir:checked) .xt-v[data-p]:not([data-p~="dir"]),
.xt:not(.is-ready):has(#xt-p-man:checked) .xt-v[data-p]:not([data-p~="man"]),
.xt:not(.is-ready):has(#xt-p-met:checked) .xt-v[data-p]:not([data-p~="met"]),
.xt:not(.is-ready):has(#xt-p-tech:checked) .xt-v[data-p]:not([data-p~="tech"]),
.xt:not(.is-ready):has(#xt-o-ia:checked) .xt-v[data-o]:not([data-o~="ia"]),
.xt:not(.is-ready):has(#xt-o-data:checked) .xt-v[data-o]:not([data-o~="data"]),
.xt:not(.is-ready):has(#xt-o-auto:checked) .xt-v[data-o]:not([data-o~="auto"]),
.xt:not(.is-ready):has(#xt-d:checked) .xt-v[data-d]:not([data-d~="zero"]),
.xt:not(.is-ready):has(#xt-d:not(:checked)) .xt-v[data-d]:not([data-d~="deja"]) { display: none; }

/* navigateurs sans :has() et sans JavaScript : le parcours par défaut (équipes métier, IA au quotidien, de zéro) */
@supports not selector(:has(a)) {
    .xt:not(.is-ready) .xt-v[data-p]:not([data-p~="met"]),
    .xt:not(.is-ready) .xt-v[data-o]:not([data-o~="ia"]),
    .xt:not(.is-ready) .xt-v[data-d]:not([data-d~="zero"]) { display: none; }
}

/* ---------- Avec JavaScript : entrée douce des étapes qui changent ---------- */
.xt-v.is-in { animation: xt-in .5s var(--ease-out) both; }
.xt-sum .xt-v.is-in { animation-name: xt-fade; }
@keyframes xt-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes xt-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .xt-v.is-in, .xt-k.is-pop { animation: none; }
    .xt-node, .xt-opt, .xt-sw-k, .xt-sw-k::after, .xt-k, .xt-k-n, .xt-plus, .xt-get i { transition: none; }
}

@media (max-width: 1100px) {
    .xt { grid-template-columns: minmax(0, 1fr); }
    .xt-ctrl { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
    .xt-sw { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .xt-ctrl { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .xt-lg { margin-bottom: 8px; padding-left: 0; }
    .xt-opts { display: flex; flex-wrap: wrap; gap: 6px; }
    .xt-opt { display: inline-flex; padding: 8px 14px; background: var(--b-mist); font-size: 15px; }
    .xt-opt > i { display: none; }
    .xt-sw label { padding: 10px 14px; }
    .xt-sw-t small { display: none; }
    .xt-sum { margin-bottom: 16px; }
    .xt-v { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 16px 16px 18px; }
    .xt-foot { margin-left: 0; }
    .xt-kit { margin-left: 64px; }
}
@media (max-width: 520px) {
    .xt-step, .xt-end { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; }
    .xt-node { margin-top: 18px; font-size: 14px; }
    .xt-kit { display: flex; flex-wrap: wrap; margin-left: 46px; }
    .xt-foot { padding: 18px; }
    .xt-foot .cta-button { width: 100%; justify-content: center; }
}

/* 14/10 : règle du repère d'interaction retirée (encarts .df-cue supprimés du site, v3-hint.mjs). Avant :
   .xp-w-training .df-cue--l .df-cue-pill { left: 0; } */

/* Contrôle final V4.3 (06/10) : les commandes du simulateur (566 px, collées à 94 px du haut) ne collent que si la fenêtre les montre
   en entier ; sur un écran plus bas (portable 1366 x 768 : environ 650 px de fenêtre utile), elles défilent avec la page, comme avant. */
@media (max-height: 700px) { .xt-ctrl { position: static; } }

/* V4.3, revue mobile des pages d'expertise (06/10) : zones de clic de 44 px */
@media (max-width: 768px) {
    /* « + » des étapes du parcours (titre de 23 px) : zone étendue sur l'air au-dessus et au-dessous, le titre ne bouge pas */
    .xt-more summary { position: relative; }
    .xt-more summary::after { content: ""; position: absolute; inset: -10px 0 -11px; }
}
@media (max-width: 760px) {
    /* choix (36 px de haut) : 4 px de plus de chaque côté ; écart entre deux rangées porté de 6 à 8 px pour que les
       zones ne se recouvrent pas (seul déplacement : 2 px par rangée) */
    .xt-opts { row-gap: 8px; }
    .xt-opt { position: relative; }
    .xt-opt::after { content: ""; position: absolute; inset: -4px 0; }
}

/* ==========================================================================================================================
   Passe de nuit du 06/10/2026 : premier bloc compact « Composez votre parcours » (préfixe xtc, .claude/exp/training.mjs)
   Deux rangées de choix (public, objectif), puis 4 étapes : ce que vos équipes gardent. Une seule animation : chaque étape
   s'allume à son tour, au rythme des étapes « Ce que nous faisons » à l'apparition (événement « xp-how » du moteur commun),
   puis quand on change de choix (js/exp-training.js).
   Le bloc lui-même ne bouge pas. Sans JavaScript, les règles :has() montrent la bonne variante de chaque étape.
   L'ancien parcours (préfixe xt, plus haut) n'est plus que sur le garde-manger.
   14/10 (direction « premium sobre ») : choix en rectangles à rayon 6 sur brume, choix actif en marine (avant : pilules 999px,
   pictogramme dans un rond blanc) ; étapes en quatre colonnes, filet d'un pixel en tête, numéro « 01 » en bleu (avant : ronds
   marine sur un fil, trait bleu et point animé, poisson au bout) ; une étape allumée : son filet passe au bleu (2 px, sans
   décalage) ; titres en 600. Le trait et le point (.xtc-line, .xtc-fill, .xtc-dot) restent dans le balisage, masqués.
   ========================================================================================================================== */
.xtc [hidden] { display: none !important; }
.xtc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* choix : libellé à gauche, rectangles à droite */
.xtc-ctrl { display: grid; gap: 10px; }
.xtc-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.xtc-lg { float: left; width: 8.5rem; margin: 0; padding: 14px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xtc-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 8.5rem; }
.xtc-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.xtc-opt {
    display: inline-flex; align-items: center; gap: 9px; min-height: 42px; margin: 0; padding: 0 16px 0 12px; border-radius: var(--b-r-card);
    background: var(--b-mist); font: 600 14.5px/1.2 var(--f-body); color: var(--ink); cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.xtc-opt > i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--b-accent); transition: color .2s var(--ease-out); }
.xtc-opt > i svg { width: 17px; height: 17px; }
.xtc-opt:hover { background: var(--b-hover); }
.xtc-in:checked + .xtc-opt { background: var(--b-night); color: #fff; }
.xtc-in:checked + .xtc-opt > i { color: var(--b-accent-dark); }
.xtc-in:focus-visible + .xtc-opt { outline: 2px solid var(--tide); outline-offset: 2px; }

/* les 4 étapes */
.xtc-route { margin-top: 26px; }
.xtc-get { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xtc-rail { position: relative; }
.xtc-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.xtc-step { display: grid; justify-items: start; align-content: start; gap: 10px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--b-rule); transition: box-shadow .35s var(--ease-out); }
.xtc-step:has(.xtc-n.is-lit) { box-shadow: inset 0 1px 0 var(--b-accent); border-top-color: var(--b-accent); }
.xtc-n { display: block; font: 500 15px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--b-accent); }
.xtc-k { display: block; padding-right: 14px; font: 600 17px/1.3 var(--f-display); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.xtc-step.is-pop .xtc-k { animation: xtc-pop .45s var(--ease-out); }
@keyframes xtc-pop { 0% { opacity: .35; } 100% { opacity: 1; } }
.xtc-v.is-in { animation: xt-fade .45s var(--ease-out) both; }
/* 14/10 : trait, partie parcourue et point masqués (avant : fil de 2 px #EAEFF4, trait bleu, point bleu à halo) ;
   poisson du bout (.xtc-end) retiré du balisage (training.mjs) */
.xtc-line, .xtc-fill, .xtc-dot { display: none; }

/* faits utiles */
.xtc-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 22px 0 0; padding: 0; list-style: none; }
.xtc-facts li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.xtc-facts i { display: grid; flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--b-accent); }
.xtc-facts i svg { width: 18px; height: 18px; }

/* sans JavaScript : la bonne variante par :has() */
.xtc:not(.is-ready):has(#xtc-p-dir:checked) .xtc-v[data-p]:not([data-p="dir"]),
.xtc:not(.is-ready):has(#xtc-p-man:checked) .xtc-v[data-p]:not([data-p="man"]),
.xtc:not(.is-ready):has(#xtc-p-met:checked) .xtc-v[data-p]:not([data-p="met"]),
.xtc:not(.is-ready):has(#xtc-p-tech:checked) .xtc-v[data-p]:not([data-p="tech"]),
.xtc:not(.is-ready):has(#xtc-o-ia:checked) .xtc-v[data-o]:not([data-o="ia"]),
.xtc:not(.is-ready):has(#xtc-o-data:checked) .xtc-v[data-o]:not([data-o="data"]),
.xtc:not(.is-ready):has(#xtc-o-auto:checked) .xtc-v[data-o]:not([data-o="auto"]) { display: none; }
/* navigateurs sans :has() et sans JavaScript : le parcours par défaut (équipes métier, IA au quotidien) */
@supports not selector(:has(a)) {
    .xtc:not(.is-ready) .xtc-v[data-p]:not([data-p="met"]),
    .xtc:not(.is-ready) .xtc-v[data-o]:not([data-o="ia"]) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .xtc-step.is-pop .xtc-k, .xtc-v.is-in { animation: none; }
    .xtc-step, .xtc-opt, .xtc-opt > i { transition: none; }
}

/* tablette : libellés au-dessus des choix */
@media (max-width: 1023px) {
    .xtc-ctrl { gap: 16px; }
    .xtc-lg { float: none; width: auto; padding: 0 0 8px; }
    .xtc-opts { margin-left: 0; }
}
/* téléphone : choix sans pictogramme, étapes l'une sous l'autre (numéro à gauche, filet en tête) ; zones de clic de 44 px */
@media (max-width: 760px) {
    .xtc-opts { row-gap: 8px; }
    .xtc-opt { position: relative; min-height: 36px; padding: 0 14px; font-size: 14.5px; }
    .xtc-opt::after { content: ""; position: absolute; inset: -4px 0; }
    .xtc-opt > i { display: none; }
    .xtc-route { margin-top: 24px; }
    .xtc-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .xtc-step { grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 0 14px; }
    .xtc-k { padding-right: 0; font-size: 16.5px; }
    .xtc-facts { flex-direction: column; margin-top: 18px; }
}