/* Page « Données & documents » (clé data, préfixe xn), 07/10/2026. Contenus : .claude/exp/data.mjs ; script : js/exp-data.js.
   09/10 (Louis : « trop compliqué, trop de texte, pas assez clair ») : le premier bloc de la page = les trois prestations
   (.xn-pr-*, fin du fichier). L'ancien premier bloc (« du vrac à une base de référence », .xn-*, et ses étapes en pastilles,
   .xn-pills) n'est plus que sur le garde-manger, qui appelle cette feuille ; ses règles sont gardées telles quelles ci-dessous.
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md, sections 7 et 9) : plus de dessin dans les trois cartes (un numéro
   « 01 » à la place, comme les cartes de l'accueil), coches au trait sans rond, plus d'animation au survol ; ancien bloc : plus
   d'ombre, de pilule (999px) ni de pastille pastel, voyant « suivi » carré en bleu (avant : rond vert qui pulsait), « Exemple
   fictif » en texte gris (avant : pilule ambre) ; rayons à 6 px (avant 11 à 18) ; titres en 600.

   ANCIEN PREMIER BLOC (garde-manger depuis le 09/10)
   Des tuiles en désordre se rangent dans une base en trois colonnes.
   État par défaut = état final (tout rangé) : sans script, sur téléphone et avec prefers-reduced-motion, rien ne bouge.
   Lecture (bureau, à partir de 761 px) : js/exp-data.js pose .is-armed et data-step sur .xn, et data-off sur chaque élément dont
   l'étape (data-s) n'est pas encore venue : tuile en vrac, colonne et fond de la base masqués, pastille du bas masquée.
   Géométrie à garder en phase avec .claude/exp/data.mjs : zone de 192 px, colonnes de (100 % - 52 px) / 3 espacées de 12 px,
   marge intérieure de 14 px, rangées de 40 px tous les 50 px à partir de 38 px ; tuiles en vrac de 248 px.
   Section blanche : la base est écume, ses tuiles blanches ; en vrac, les tuiles sont écume (ombre légère pour les distinguer
   quand elles se chevauchent, pas de contour). Hauteur totale à 1366 px : 192 + 12 + 30 = 234 px (budget du moteur : 290). */
.xn { --xn-col: calc((100% - 52px) / 3); position: relative; }
.xn-area { position: relative; height: 192px; }
.xn-board { position: absolute; inset: 0; border-radius: var(--b-r-card); background: var(--sea); transition: opacity .5s var(--ease-out); }
.xn-col { position: absolute; top: 13px; left: calc(14px + var(--c) * ((100% - 52px) / 3 + 12px)); width: var(--xn-col); font: 600 12px/1.2 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .45s var(--ease-out); }

/* une tuile : pictogramme, nom et précision, puis l'étiquette de la source (en vrac) ou la coche (rangée), à la même place */
.xn-t {
    position: absolute; z-index: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    left: calc(14px + var(--c) * ((100% - 52px) / 3 + 12px)); top: calc(38px + var(--r) * 50px); width: var(--xn-col); height: 40px;
    padding: 0 12px 0 6px; border-radius: var(--b-r-card); background: #fff; box-shadow: none;
    transition: left .9s var(--ease-out), top .9s var(--ease-out), width .9s var(--ease-out), transform .9s var(--ease-out), background-color .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity .5s var(--ease-out);
    transition-delay: calc(var(--k) * 70ms);
}
/* doublon : glisse sur la tuile de même place, puis s'efface (il reste dans la page, masqué) */
.xn-t[data-m] {
    z-index: 0; opacity: 0; visibility: hidden; transform: scale(.94);
    transition-property: left, top, width, transform, background-color, opacity, visibility;
    transition-duration: .9s, .9s, .9s, .9s, .5s, .45s, 0s;
    transition-delay: calc(var(--k) * 70ms), calc(var(--k) * 70ms), calc(var(--k) * 70ms), calc(var(--k) * 70ms), calc(var(--k) * 70ms), calc(var(--k) * 70ms + .6s), calc(var(--k) * 70ms + 1.05s);
}
.xn-ic { display: grid; place-items: center; width: 28px; height: 28px; color: var(--tide); } /* 14/10 : pictogramme nu (avant : tuile écume à rayon 8) */
.xn-ic svg { width: 17px; height: 17px; }
.xn-tx { display: grid; min-width: 0; }
.xn-v1, .xn-v2 { grid-area: 1 / 1; display: grid; min-width: 0; transition: opacity .4s var(--ease-out); }
.xn-v1 { opacity: 0; }
.xn-tx b { overflow: hidden; font: 600 14px/1.2 var(--f-body); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.xn-tx small { overflow: hidden; font-size: 12px; line-height: 1.25; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.xn-v1 b { font-size: 13.5px; font-weight: 500; }
.xn-tag, .xn-ok { grid-area: 1 / 3; justify-self: end; transition: opacity .4s var(--ease-out), background-color .4s var(--ease-out), color .4s var(--ease-out); }
.xn-tag { padding: 3px 8px; border-radius: 3px; background: var(--tide); font: normal 600 11.5px/1.2 var(--f-body); color: #fff; opacity: 0; }
.xn-ok { display: grid; place-items: center; width: 20px; height: 20px; color: var(--tide); } /* 14/10 : coche nue (avant : rond plein) */
.xn-ok svg { width: 16px; height: 16px; }

/* bas du bloc : ce qui a été fait, le suivi, et la mention « exemple » */
.xn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; }
.xn-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border-radius: 4px; background: var(--sea); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); transition: opacity .45s var(--ease-out); }
.xn-chip > i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--tide); }
.xn-chip > i svg { width: 15px; height: 15px; }
.xn-chip--live { background: var(--ink); color: #fff; }
.xn-chip--live > i { color: var(--b-accent-dark); }
.xn-live { width: 7px; height: 7px; background: var(--b-accent-dark); } /* 14/10 : avant rond vert #2E9D6A */
.xn-ex { display: inline-flex; align-items: center; margin-left: auto; padding: 0; font-size: 12px; font-weight: 500; color: var(--b-faint); } /* 14/10 : avant pilule ambre */

/* lecture, sur ordinateur et tablette : états intermédiaires (data-off), une transition au chargement est évitée (.xn-init) */
@media (min-width: 761px) {
    .xn.xn-init .xn-t, .xn.xn-init .xn-board, .xn.xn-init .xn-col, .xn.xn-init .xn-chip, .xn.xn-init :is(.xn-v1, .xn-v2, .xn-tag, .xn-ok, .xn-ic) { transition: none !important; }
    /* en vrac : tuile écume, tournée, de largeur fixe ; les données dans les deux tiers gauches, les documents en tas à droite */
    .xn-t[data-off] { left: calc(var(--px) * (64% - 248px)); top: var(--y0); width: 248px; transform: rotate(var(--r0)); background: var(--sea); box-shadow: none; } /* 14/10 : sans ombre */
    .xn-t[data-off][data-c="2"] { left: calc(64% + var(--px) * (36% - 248px)); }
    .xn-t[data-m][data-off] { opacity: 1; visibility: visible; transition-delay: 0s; }
    .xn-t[data-off] .xn-v1 { opacity: 1; }
    .xn-t[data-off] .xn-v1 + .xn-v2 { opacity: 0; }
    .xn-t[data-off] .xn-tag { opacity: 1; }
    .xn-t[data-off] .xn-ok { opacity: 0; }
    /* avant la 1re étape : rien n'est encore branché (tuiles atténuées, étiquettes grises) */
    .xn.is-armed[data-step="0"] .xn-t { opacity: .62; }
    .xn.is-armed[data-step="0"] .xn-tag { background: var(--b-rule); color: var(--muted); }
    .xn :is(.xn-board, .xn-col, .xn-chip)[data-off] { opacity: 0; }
}
/* 14/10 : le voyant ne pulse plus (avant : halo vert rgba(46, 157, 106, .25) de 5 px, animation xn-live de 1,6 s) */

/* tablette : colonnes plus étroites, textes un peu plus petits */
@media (max-width: 1100px) {
    .xn-tx b { font-size: 13px; }
    .xn-tx small { font-size: 11.5px; }
    .xn-t { gap: 8px; padding-right: 10px; }
}
/* tablette, en vrac : tuiles plus étroites (moins de chevauchements quand la bande se resserre) */
@media (min-width: 761px) and (max-width: 1100px) {
    .xn-t[data-off] { left: calc(var(--px) * (64% - 226px)); width: 226px; }
    .xn-t[data-off][data-c="2"] { left: calc(64% + var(--px) * (36% - 226px)); }
}

/* téléphone : la base rangée seule, en liste (pas d'animation, doublons masqués), colonnes l'une sous l'autre */
@media (max-width: 760px) {
    .xn-area { display: grid; gap: 8px; height: auto; padding: 14px; border-radius: var(--b-r-card); background: var(--sea); }
    .xn-board { display: none; }
    .xn-col { position: static; width: auto; margin-top: 8px; }
    .xn-col[data-c="0"] { margin-top: 0; }
    .xn-t { position: static; width: auto; height: 44px; transform: none; }
    .xn-t[data-m], .xn-v1 { display: none; }
    .xn-ex { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .xn-t, .xn-board, .xn-col, .xn-chip, .xn :is(.xn-v1, .xn-v2, .xn-tag, .xn-ok, .xn-ic) { transition: none !important; }
}
/* 07/10 : étapes « Ce que nous faisons » en trois axes, termes techniques en pastilles sous la phrase (rendues dans la phrase par
   .claude/exp/data.mjs, le moteur commun n'a pas de champ pour elles). Pastilles blanches sur les cartes écume des étapes, calées
   en bas de carte pour rester alignées d'une étape à l'autre ; rien ne bouge au survol. */
.xp-w-data .xp-how-steps p { display: flex; flex-direction: column; flex: 1 1 auto; }
/* 14/10 : termes techniques en texte gris, comme .xp-tags (avant : pilules blanches 999px, 600, marine) */
.xn-pills { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 10px; }
.xn-pills > span { padding: 0; font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; color: var(--b-faint); }

/* ---------- Premier bloc depuis le 09/10 : les trois prestations ----------
   Trois cartes écume sur la section blanche (sans contour) : petit dessin, nom, ce que nous faisons, puis ce que vous y gagnez
   (bande blanche à coche, calée en bas : quatre rangées partagées par les cartes d'une même ligne, sous-grille). Une colonne
   sous 900 px. Au survol, DANS la carte seulement (la carte ne bouge pas) : un petit carré parcourt le trait pointillé du dessin,
   les coches se redessinent, le résultat « respire ». Rien sans survol ni avec prefers-reduced-motion.
   Hauteur visée à 1366 x 650 : titre et cartes sous 583 px (mesure dans le résultat de l'agent du 09/10).
   14/10 (direction « premium sobre ») : le petit dessin laisse la place à un numéro « 01 » (compteur CSS, gris), comme les cartes
   de l'accueil ; plus rien ne bouge au survol ; la bande du gain garde une coche au trait, sans rond. Rayons 6 (avant 18 et 12). */
.xn-pr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: xn-pr; }
.xn-pr-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 22px 20px; border-radius: var(--b-r-card); background: var(--sea); counter-increment: xn-pr; }
@supports (grid-template-rows: subgrid) {
    .xn-pr-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; }
}
.xn-pr-art { display: block; margin: 0 0 6px; }
.xn-pr-art::before { content: counter(xn-pr, decimal-leading-zero); display: block; font: 500 13px/1 var(--b-f-head); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--b-faint); }
body.v2 .xn-pr-h { margin: 0; font: 600 19px/1.25 var(--f-display); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.xn-pr-do { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* bandes de même hauteur sur une ligne de cartes (étirées dans leur rangée), texte centré : une bande d'une ligne ne flotte pas plus bas */
.xn-pr-gain { display: flex; align-items: center; gap: 10px; align-self: stretch; margin: 6px 0 0; padding: 11px 14px; border-radius: var(--b-r-card); background: #fff; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.xn-pr-gain > i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--tide); }
.xn-pr-gain > i svg { width: 18px; height: 18px; }
.xn-pr-gain > span { text-wrap: balance; }
/* libellés pour les lecteurs d'écran seulement : 09/10 (relecture) classe commune .df-sr de v3.css (l'ancienne .xn-sr d'ici en était
   une copie) */

/* dessins (viewBox 200 x 72) : plus rendus depuis le 14/10 (ART de exp/data.mjs, gardé). Règles retirées : feuilles blanches à
   ombre portée (drop-shadow), traits #D3DEE7, point ambre #E0A458, fond #F4F9FD, trait pointillé et petit carré qui le parcourait,
   coches redessinées et résultat qui « respirait » au survol de la carte (animations xn-run, xn-tick, xn-pop). */

/* tablette étroite et téléphone : une carte par ligne */
@media (max-width: 900px) {
    .xn-pr { grid-template-columns: minmax(0, 1fr); }
    .xn-pr-card { display: flex; grid-row: auto; }
}
@media (max-width: 760px) {
    .xn-pr-card { gap: 8px; padding: 18px 18px 16px; }
    body.v2 .xn-pr-h { font-size: 18px; }
}

/* ---------- 13/10 : les sources de données à brancher (section #sources, .xn-src-*) ----------
   Même principe que la matrice d'outils de Technologies (.tk-mx de v3-tech.css, feuille non chargée ici) : une colonne par usage,
   des tuiles écume sur la section blanche, sans contour, sans logo (le nom de la source, puis à quoi elle sert). Les rangées sont
   partagées d'une colonne à l'autre (sous-grille) : 4 sources au plus par colonne, à garder en phase avec SRC de
   .claude/exp/data.mjs. Deux colonnes sous 1100 px, une sous 760 px. Aucun script, rien ne bouge. */
.xn-src { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto repeat(4, auto); gap: 8px 12px; }
.xn-src-g { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; min-width: 0; }
body.v2 .xn-src-g h3 { align-self: end; margin: 0 0 2px; font: 600 16px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.xn-src-l { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; margin: 0; padding: 0; list-style: none; }
.xn-src-l li { min-width: 0; padding: 12px 14px 13px; border-radius: var(--b-r-card); background: var(--sea); } /* 14/10 : rayon 6 (avant 12) */
.xn-src-l b { display: block; margin-bottom: 3px; font: 600 15.5px/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.xn-src-l span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.xn-src-note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) {
    .xn-src { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 24px 12px; }
    .xn-src-g { grid-row: auto; grid-template-rows: none; align-content: start; }
    body.v2 .xn-src-g h3 { margin-bottom: 4px; }
    .xn-src-l { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 760px) {
    .xn-src { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}