/* DataFish : page « Applications & sites web sur mesure ».
   Élément interactif « De l'Excel à l'application » : comparateur avant / après à glisser.
   Sans JavaScript : le comparateur reste figé sur sa position de repos (--xp2-pos, définie ici selon la largeur ;
   le script la lit puis l'ajuste sur la jonction réelle entre deux blocs de la maquette). Préfixe : xp2.
   09/10 : le comparateur n'est plus sur la page (garde-manger : version courte et version longue) ; premier bloc de la page :
   « Tout au même endroit », statique, en fin de fichier (préfixe xp2u).
   14/10 (relecture du lot 2) : gris et bleus hors jetons ramenés aux jetons : filets #E3E9EF et en-tête #DCE6F0 en var(--b-rule),
   cellule #D6E4F0 en var(--b-hover), cellule #B9D0E4 en #9DB9D3.
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md, sections 7 et 9) : les deux visuels restent des écrans, à plat,
   dans la gamme marine et bleue. Plus d'ombre portée, de dégradé de fond, de pilule (999px) ni de pastille pastel ; rayons à 6 px
   (3 à 4 px pour les petites étiquettes) ; titres en 600 ; plus de poisson décoratif. Le tableur du comparateur (garde-manger)
   garde ses « couleurs sans légende », ramenées à des bleus et des gris. Les anciennes valeurs sont notées à côté de chaque règle. */

#avant-apres, #before-after { scroll-margin-top: calc(var(--header-h) + 24px); }
/* 14/10 : côté « avant » en gris de texte (avant : ambre #8A5A22 sur #FBEFE3) */
.xp2 { --xp2-a: #4A5E71; --xp2-a-soft: #EAEFF4; --xp2-h: 584px; position: relative; }

/* ---------- Barre au-dessus : les deux côtés, alignés sur les bords du comparateur ---------- */
.xp2-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px; margin: 0 0 16px; }
.xp2-side {
    display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none;
    font: 600 17px/1.2 var(--f-display); color: var(--ink); text-align: left; cursor: default; transition: opacity .3s var(--ease-out);
}
/* chaque côté n'occupe que son contenu : le centre de la barre reste libre pour l'encart « Faites glisser la poignée » */
.xp2-side--a { justify-self: start; }
.xp2-side--b { justify-self: end; text-align: right; }
.xp2-side > span { display: grid; gap: 2px; }
.xp2-side small { font: 600 11.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--xp2-a); }
.xp2-side--b small { color: var(--tide); }
/* 14/10 : rayon 6 (avant 12), pictogramme #6FB8E8 sur marine (avant #74C3EE) */
.xp2-side > i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--b-r-card); background: var(--xp2-a-soft); color: var(--xp2-a); }
.xp2-side--b > i { background: var(--ink); color: var(--b-accent-dark); }
.xp2-side > i svg { width: 21px; height: 21px; }
.xp2-side:disabled { opacity: 1; }
.xp2.is-ready .xp2-side { cursor: pointer; }
.xp2.is-ready .xp2-side:focus-visible { outline: 2px solid var(--tide); outline-offset: 4px; border-radius: var(--b-r-card); }
.xp2.is-b .xp2-side--a, .xp2.is-a .xp2-side--b { opacity: .45; }

/* ---------- Le comparateur ---------- */
.xp2-stage {
    --xp2-pos: 50%;
    /* 14/10 : à plat, rayon 6 (avant : rayon 22, ombre de 70 px) */
    position: relative; height: var(--xp2-h); overflow: hidden; border-radius: var(--b-r-card); background: var(--sea);
    touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate;
}
.xp2.is-ready .xp2-stage, .xp2.is-ready .xp2-knob { cursor: ew-resize; }
.xp2-layer { position: absolute; inset: 0; }
.xp2-before { z-index: 2; clip-path: inset(0 calc(100% - var(--xp2-pos)) 0 0); }
.xp2-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--xp2-pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(8, 26, 46, .12); pointer-events: none; } /* 14/10 : sans halo flou (avant : 0 0 18px) */
/* 14/10 : poignée carrée à rayon 6, sans ombre (avant : rond de 52 px, ombre de 24 px) */
.xp2-knob {
    position: absolute; z-index: 4; top: 50%; left: clamp(28px, var(--xp2-pos), calc(100% - 28px)); display: flex; align-items: center; justify-content: center; gap: 2px;
    width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 3px solid #fff; border-radius: var(--b-r-card); background: var(--ink); color: #fff;
    pointer-events: none;
}
.xp2-knob i { display: grid; width: 15px; height: 15px; }
.xp2-knob svg { width: 15px; height: 15px; }
.xp2-handle, .xp2-knob, .xp2-before { transition: left .5s var(--ease-out), clip-path .5s var(--ease-out); }
.xp2.is-gliding .xp2-handle, .xp2.is-gliding .xp2-knob, .xp2.is-gliding .xp2-before { transition-duration: .9s; }
.xp2.is-dragging .xp2-handle, .xp2.is-dragging .xp2-knob, .xp2.is-dragging .xp2-before { transition: none; }
.xp2.is-focus .xp2-knob { outline: 3px solid var(--fish); outline-offset: 3px; }
.xp2-range { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.xp2-sronly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pastilles numérotées : même numéro des deux côtés.
   14/10 : petits carrés à rayon 3, sans ombre ; le numéro choisi est cerclé d'un anneau net de 3 px (avant : ronds avec ombre de
   8 px, halo flou de 6 px bleu ou ambre) */
.xp2-pin {
    display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 3px;
    font: 600 11.5px/1 var(--f-body); font-style: normal; color: #fff;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.xp2-pin--a { background: var(--xp2-a); }
.xp2-pin--b { background: var(--tide); }
.xp2[data-hl="1"] .xp2-pin[data-n="1"], .xp2[data-hl="2"] .xp2-pin[data-n="2"], .xp2[data-hl="3"] .xp2-pin[data-n="3"], .xp2[data-hl="4"] .xp2-pin[data-n="4"] {
    box-shadow: 0 0 0 3px rgba(31, 111, 168, .35);
}
.xp2[data-hl] .xp2-pin--a[data-n] { box-shadow: none; }
.xp2[data-hl="1"] .xp2-pin--a[data-n="1"], .xp2[data-hl="2"] .xp2-pin--a[data-n="2"], .xp2[data-hl="3"] .xp2-pin--a[data-n="3"], .xp2[data-hl="4"] .xp2-pin--a[data-n="4"] { box-shadow: 0 0 0 3px rgba(74, 94, 113, .35); }
.xp2-pin--m { display: none; }

/* ================= Avant : le tableur =================
   14/10 : écran ramené à la gamme marine et bleue. Gris du logiciel aux neutres du site ; icône du fichier en bleu d'accent (avant :
   vert #2E7D4F) ; les « couleurs sans légende » des statuts restent cinq teintes différentes, mais bleues et grises (avant : jaune
   #FFE66E, vert #BFE7B8, rouge #F4A79C, orange #FFCB8A, bleu #B9D8F5) ; erreur #REF! en marine gras et coin de commentaire en bleu
   (avant : rouges #C62828 et #D93025) ; ligne surlignée en gris de survol (avant : jaune #FFF3B0). */
.xp2-xl { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; background: #fff; font: 400 12.5px/1 var(--f-body); color: var(--ink); }
.xp2-xl-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 16px; height: 44px; background: var(--b-mist); }
.xp2-xl-ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 4px; background: var(--b-accent); color: #fff; }
.xp2-xl-ico svg { width: 15px; height: 15px; }
.xp2-xl-file { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.xp2-xl-lock { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-left: 6px; padding: 5px 10px 5px 5px; border-radius: 4px; background: var(--xp2-a-soft); font-size: 12px; font-weight: 600; color: var(--xp2-a); white-space: nowrap; }
.xp2-xl-lock i { display: grid; width: 14px; height: 14px; }
.xp2-xl-lock svg { width: 14px; height: 14px; }
.xp2-xl-fx { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px 0 0; border-bottom: 1px solid var(--b-rule); overflow: hidden; }
.xp2-xl-ref { flex: none; width: 70px; height: 100%; display: grid; place-items: center; border-right: 1px solid var(--b-rule); font-size: 12px; color: var(--b-text); }
.xp2-xl-fx > i { font: italic 600 12px/1 Georgia, serif; color: var(--b-faint); }
.xp2-xl-fx code { overflow: hidden; font: 400 12.5px/1 var(--f-body); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.xp2-xl-grid { overflow: hidden; }
.xp2-sr-row { display: grid; grid-template-columns: 34px 96px 172px 104px 104px 102px 86px 92px minmax(170px, 1fr); height: 27px; }
.xp2-sr-row > span { position: relative; overflow: hidden; padding: 0 7px; border-right: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule); line-height: 26px; white-space: nowrap; text-overflow: ellipsis; }
.xp2-rn { background: var(--b-mist); text-align: center; font-size: 11px; color: var(--b-faint); }
.xp2-sr-letters { height: 22px; }
.xp2-sr-letters > span { background: var(--b-mist); line-height: 21px; text-align: center; font-size: 11px; color: var(--b-faint); }
.xp2-sr-head > span.xp2-c { background: var(--b-rule); font-weight: 600; }
.xp2-sr-row.is-hl > span.xp2-c { background: var(--b-hover); }
.xp2-num { text-align: right; font-variant-numeric: tabular-nums; }
.xp2-sr-head .xp2-num { text-align: left; }
.xp2-f-y { background: var(--b-hover) !important; }
.xp2-f-g { background: #9DB9D3 !important; }
.xp2-f-gt { color: var(--b-accent); font-weight: 700; }
.xp2-f-r { background: #9DB9D3 !important; }
.xp2-f-o { background: var(--b-rule) !important; }
.xp2-f-b { background: #C9D6E2 !important; }
.xp2-f-x { color: var(--b-faint); text-decoration: line-through; }
.xp2-err { color: var(--ink); font-weight: 700; }
.xp2-tri { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 8px solid var(--b-accent); border-left: 8px solid transparent; }
.xp2-sr-row .xp2-pin { position: absolute; top: 2px; right: 3px; width: 21px; height: 21px; }
.xp2-rn { position: relative; }
.xp2-rn .xp2-pin { right: auto; left: 50%; margin-left: -10.5px; }
.xp2-sr-row > span.xp2-c:has(.xp2-pin) { padding-right: 30px; }
/* Le commentaire de Sophie, rattaché à la cellule B12 (triangle rouge), posé dans les lignes vides sous les données */
/* 14/10 : note sur le gris de survol, sans ombre, filet bleu-gris (avant : jaune #FFF9C9, ombre de 18 px, texte #3B3A2A, filet #B7A94A) */
.xp2-xl-note {
    position: absolute; z-index: 1; top: 434px; left: 318px; width: 214px; padding: 10px 12px 11px; border-radius: 3px; background: var(--b-hover);
    font-size: 12.5px; line-height: 1.4; color: var(--ink); white-space: normal;
}
.xp2-xl-note::before { content: ""; position: absolute; left: 0; top: -42px; width: 1px; height: 42px; background: #9DB9D3; transform-origin: 50% 100%; transform: rotate(-22deg); }
.xp2-xl-note b { display: block; margin-bottom: 3px; font-weight: 600; }
.xp2-xl-note .xp2-pin { position: absolute; top: -10px; right: -10px; }
/* 14/10 : onglet actif en bleu d'accent (avant : vert #2E7D4F) */
.xp2-xl-tabs { display: flex; align-items: stretch; height: 34px; padding: 0 0 0 34px; background: var(--b-mist); overflow: hidden; }
.xp2-xl-tabs span { display: flex; align-items: center; flex: none; padding: 0 14px; font-size: 12px; color: var(--b-text); white-space: nowrap; }
.xp2-xl-tabs span.is-on { background: #fff; font-weight: 600; color: var(--b-accent); box-shadow: inset 0 -2px 0 var(--b-accent); }
.xp2-xl-tabs .xp2-xl-add svg { width: 14px; height: 14px; }

/* ================= Après : l'application =================
   14/10 : fond uni (avant : halo radial #CFE0EE), fenêtre à plat à rayon 6 (avant : rayon 16, ombre de 50 px), rayons intérieurs à
   6 ou 4 px, initiales en carrés à rayon 4 (avant : ronds), statuts en étiquettes à rayon 3 (avant : pilules), titres en 600. */
.xp2-app {
    display: grid; grid-template-columns: minmax(0, 1fr) 194px; align-items: center; gap: 22px; height: 100%; padding: 24px;
    background: var(--sea);
    font: 400 13px/1.35 var(--f-body); color: var(--ink);
}
.xp2-win { display: grid; grid-template-rows: 48px minmax(0, 1fr); height: 100%; min-width: 0; overflow: hidden; border-radius: var(--b-r-card); background: #fff; }
.xp2-win-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 16px; border-bottom: 1px solid var(--b-rule); }
.xp2-logo { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 4px; background: var(--ink); font: 600 11px/1 var(--f-display); color: #fff; }
.xp2-win-top > b { font: 600 14px/1 var(--f-display); white-space: nowrap; }
.xp2-win-app { padding-left: 11px; margin-left: 2px; box-shadow: inset 1px 0 0 var(--b-rule); font-size: 13px; color: var(--muted); white-space: nowrap; }
.xp2-win-bell { display: grid; margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.xp2-win-bell svg { width: 18px; height: 18px; }
.xp2-av { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 4px; background: var(--tide-soft); font: 600 10.5px/1 var(--f-body); color: var(--tide); }
.xp2-av--me { background: var(--ink); color: #fff; }
.xp2-win-body { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 320px); min-height: 0; }
.xp2-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; background: var(--b-mist); }
.xp2-rail span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--b-r-card); color: var(--b-faint); }
.xp2-rail span.is-on { background: var(--tide-soft); color: var(--tide); }
.xp2-rail svg { width: 19px; height: 19px; }

.xp2-list > * { flex: none; }
.xp2-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 18px 0; overflow: hidden; }
.xp2-list-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xp2-list-top > b { font: 600 19px/1.1 var(--f-display); letter-spacing: -.01em; }
.xp2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; height: 34px; padding: 0 14px; border-radius: var(--b-r-card); background: var(--ink); font: 600 12.5px/1 var(--f-body); color: #fff; white-space: nowrap; }
.xp2-btn svg { width: 15px; height: 15px; }
.xp2-btn--sm { height: 32px; padding: 0 12px; }
.xp2-btn--ghost { background: var(--sea); color: var(--ink); }
.xp2-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--b-r-card); background: var(--b-mist); color: var(--b-faint); }
.xp2-search svg { flex: none; width: 16px; height: 16px; }
.xp2-search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp2-chips { display: flex; gap: 6px; overflow: hidden; }
/* 14/10 : filtres de l'écran à rayon 4 (avant : pilules 999px), compteur actif #6FB8E8 (avant #74C3EE) */
.xp2-chips span { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px; border-radius: 4px; background: var(--b-mist); font-size: 12px; font-weight: 600; white-space: nowrap; }
.xp2-chips em { font-style: normal; font-weight: 600; color: var(--muted); }
.xp2-chips span.is-on { background: var(--ink); color: #fff; }
.xp2-chips span.is-on em { color: var(--b-accent-dark); }
.xp2-rows { display: grid; gap: 2px; }
.xp2-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px 54px 88px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; }
.xp2-row + .xp2-row { box-shadow: 0 -1px 0 var(--b-rule); }
.xp2-row.is-on, .xp2-row.is-on + .xp2-row { box-shadow: none; }
.xp2-row.is-on { background: var(--sea); box-shadow: inset 3px 0 0 var(--tide); }
.xp2-row-c { display: grid; min-width: 0; }
.xp2-row-c b, .xp2-row-c small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp2-row-c b { font-size: 13.5px; font-weight: 600; }
.xp2-row-c small { font-size: 12px; color: var(--muted); }
.xp2-row-d { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 14/10 : étiquettes à rayon 3 (avant : pilules) ; « Terminée » en marine (avant : vert #DDF0E3 / #1F6B3F), « À facturer » en
   filet gris (avant : ambre) */
.xp2-st { display: inline-flex; align-items: center; justify-self: start; height: 22px; padding: 0 9px; border-radius: 3px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.xp2-st--todo { background: var(--b-mist); color: var(--b-text); }
.xp2-st--run { background: var(--tide-soft); color: var(--tide); }
.xp2-st--done { background: var(--ink); color: #fff; }
.xp2-st--bill { background: transparent; color: var(--b-text); box-shadow: inset 0 0 0 1px var(--b-rule); }

/* La fiche */
.xp2-card { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 18px 18px 18px; box-shadow: inset 1px 0 0 var(--b-rule); overflow: hidden; }
.xp2-card-m { display: none; }
.xp2-card-ref { font-size: 12px; font-weight: 600; color: var(--muted); }
.xp2-card-h { display: flex; align-items: center; gap: 10px; margin-top: -8px; }
.xp2-card-h b { font: 600 21px/1.15 var(--f-display); letter-spacing: -.015em; }
.xp2-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.xp2-card-tags span { padding: 3px 9px; border-radius: 3px; background: var(--sea); font-size: 11.5px; font-weight: 600; }
.xp2-presence { display: flex; align-items: center; gap: 0; }
.xp2-presence .xp2-av { width: 24px; height: 24px; margin-right: -6px; box-shadow: 0 0 0 2px #fff; font-size: 9.5px; }
.xp2-presence .xp2-av:first-child { background: var(--ink); color: #fff; }
.xp2-presence small { margin-left: 14px; font-size: 12px; color: var(--muted); }
/* 14/10 : voyant de présence carré, en bleu d'accent (avant : rond vert #2FA36B) */
.xp2-presence small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--b-accent); vertical-align: 1px; }
.xp2-presence .xp2-pin { margin-left: 8px; }
.xp2-stat { display: grid; gap: 8px; }
.xp2-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.xp2-steps > span { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; padding-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--b-faint); white-space: nowrap; box-shadow: inset 0 4px 0 var(--b-rule); }
.xp2-steps > span.is-done { color: var(--ink); box-shadow: inset 0 4px 0 var(--tide); }
.xp2-steps > span.is-now { color: var(--tide); box-shadow: inset 0 4px 0 var(--fish); }
.xp2-steps > span > i { display: none; flex: none; width: 12px; height: 12px; color: var(--tide); }
.xp2-steps > span.is-done > i { display: grid; }
.xp2-steps i svg { width: 12px; height: 12px; }
.xp2-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; padding: 10px 14px; border-radius: var(--b-r-card); background: var(--b-mist); }
.xp2-fields div { min-width: 0; }
.xp2-fields dt { font-size: 11.5px; color: var(--muted); }
.xp2-fields dd { margin: 2px 0 0; overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.xp2-hist { display: grid; gap: 7px; }
.xp2-hist-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.xp2-hist > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; }
.xp2-hist .xp2-av { width: 24px; height: 24px; font-size: 10px; }
.xp2-hist p { margin: 0; font-size: 12.5px; line-height: 1.4; }
.xp2-hist p b { font-weight: 700; }
.xp2-hist p em { margin-left: 6px; font-style: normal; font-size: 11.5px; color: var(--muted); }
.xp2-hist p span { display: block; color: var(--b-text); }
.xp2-acts { display: flex; gap: 8px; margin-top: auto; }
.xp2-acts .xp2-btn { flex: 1 1 auto; min-width: 0; }
.xp2-acts .xp2-btn--ghost { flex: 0 0 auto; }

/* Le téléphone du technicien.
   14/10 : l'écran seul, à plat, sans coque dessinée ni ombre (avant : coque marine de 8 px à rayon 34, ombre de 50 px, écran à rayon 27) */
.xp2-phone { position: relative; justify-self: center; width: 194px; height: 412px; padding: 0; border-radius: var(--b-r-card); background: #fff; }
.xp2-phone-scr { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 14px 14px; overflow: hidden; border-radius: var(--b-r-card); background: #fff; }
.xp2-phone-bar { display: flex; align-items: center; justify-content: space-between; margin: -2px 4px 4px; font-size: 11px; font-weight: 600; }
.xp2-phone-bar i { width: 16px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.xp2-phone-scr > small { font-size: 11px; color: var(--muted); }
.xp2-phone-hi { margin-top: -6px; font: 600 18px/1.15 var(--f-display); letter-spacing: -.01em; }
.xp2-phone-n { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 11.5px; color: var(--muted); }
.xp2-phone-n svg { width: 14px; height: 14px; color: var(--tide); }
/* Une intervention : heure et statut sur la première ligne, le client en entier sur la seconde */
.xp2-job { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h s" "c c"; align-items: center; gap: 5px 6px; padding: 9px 10px; border-radius: var(--b-r-card); background: var(--sea); }
.xp2-job em { grid-area: h; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--tide); }
.xp2-job > span { display: contents; }
.xp2-job b { grid-area: c; overflow: hidden; font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.xp2-job .xp2-st { grid-area: s; justify-self: end; height: 19px; padding: 0 7px; font-size: 10.5px; }
.xp2-job .xp2-st--todo { background: #fff; }
.xp2-job.is-on { background: var(--ink); color: #fff; }
.xp2-job.is-on em { color: var(--b-accent-dark); }
.xp2-btn--full { width: 100%; height: 38px; margin-top: auto; border-radius: var(--b-r-card); background: var(--tide); font-size: 12px; }
.xp2-pin--d { position: absolute; top: 18px; right: -10px; }

/* ---------- Point par point, sous le comparateur ---------- */
.xp2-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
/* 14/10 : cartes à rayon 6 (avant 18) ; numéro en chiffre bleu, sans rond (avant : rond marine de 30 px) */
.xp2-keys li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-content: start; padding: 18px 18px 20px; border-radius: var(--b-r-card); background: var(--sea); transition: background-color .25s var(--ease-out); }
.xp2.is-ready .xp2-keys li { cursor: pointer; }
.xp2-keys li:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
.xp2-keys li.is-on { background: var(--tide-soft); }
.xp2-keys-n { grid-row: span 2; display: block; width: auto; height: auto; padding-top: 2px; font: 500 15px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--b-accent); }
.xp2-keys p { margin: 0; }
.xp2-keys small { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.xp2-keys-a { font-size: 14px; line-height: 1.45; color: var(--muted); }
.xp2-keys-a small { color: var(--xp2-a); }
.xp2-keys-b { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.xp2-keys-b small { color: var(--tide); }

/* Repère d'interaction (encart commun, centré) : sur ordinateur, le comparateur n'a pas de bande libre ; la pastille se range
   entre « Le tableur partagé » et « L'application métier », centrée sur la même ligne que les libellés Avant / Après.
   Sous 1024 px, elle reprend sa place à cheval sur le haut du comparateur, au-dessus d'une bande libre (hintClear: "mobile"). */
/* 14/10 : règle de l'encart .df-cue-pill retirée (encarts supprimés du site, v3-hint.mjs). Avant :
   @media (min-width: 1024px) { .xp-w-applications .df-cue-pill { top: 21px; } } */

/* ---------- Tablette : la liste s'efface, la fiche et le téléphone restent ---------- */
@media (max-width: 1023px) {
    .xp2-stage { --xp2-pos: 68%; }
    .xp2-win-body { grid-template-columns: 56px minmax(0, 1fr); }
    .xp2-list { display: none; }
    .xp2-card { box-shadow: none; }
    .xp2-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- Téléphone : l'après devient la vue mobile de l'application ---------- */
@media (max-width: 640px) {
    .xp2 { --xp2-h: 580px; }
    /* repos à 86 % : la poignée et sa surbrillance (halo de 12 px) restent entières dans le comparateur */
    .xp2-stage { --xp2-pos: 86%; }
    .xp2-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .xp2-side { gap: 9px; font-size: 14.5px; }
    .xp2-side > i { width: 36px; height: 36px; border-radius: var(--b-r-card); }
    .xp2-side > i svg { width: 18px; height: 18px; }
    .xp2-side small { font-size: 10.5px; }
    .xp2-stage { border-radius: var(--b-r-card); }
    .xp2-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; left: clamp(25px, var(--xp2-pos), calc(100% - 25px)); }
    .xp2-xl-top { flex-wrap: wrap; align-content: center; row-gap: 6px; height: 72px; padding: 0 12px; }
    .xp2-xl-file { flex: 1 1 auto; max-width: calc(100% - 34px); }
    .xp2-xl-lock { margin-left: 0; }
    .xp2-xl-fx code { font-size: 12px; }
    .xp2-sr-row { grid-template-columns: 28px 86px 150px 90px 96px 80px 86px 92px 170px; }
    .xp2-xl-note { top: 456px; left: 118px; width: 190px; padding: 8px 10px; font-size: 12px; }
    .xp2-xl-note::before { top: -32px; height: 32px; left: 146px; transform: none; }
    .xp2-xl-note .xp2-pin { right: auto; left: -10px; }
    .xp2-xl-tabs { padding-left: 28px; }
    .xp2-app { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .xp2-phone { display: none; }
    .xp2-win { border-radius: var(--b-r-card); }
    .xp2-win-top { padding: 0 12px; }
    .xp2-win-app, .xp2-win-bell { display: none; }
    .xp2-win-top .xp2-av--me { margin-left: auto; }
    .xp2-win-body { grid-template-columns: minmax(0, 1fr); }
    .xp2-rail { display: none; }
    .xp2-card { gap: 11px; padding: 12px 14px 14px; }
    .xp2-card-m { display: flex; }
    .xp2-card-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--tide); }
    .xp2-card-back svg { width: 15px; height: 15px; }
    .xp2-card-h b { font-size: 19px; }
    .xp2-pin--m { display: inline-grid; }
    .xp2-steps > span { font-size: 10.5px; }
    .xp2-fields { gap: 8px 10px; padding: 10px 12px; }
    .xp2-acts .xp2-btn--ghost, .xp2-card-tags { display: none; }
    .xp2-keys { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
    .xp2-keys li { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .xp2-handle, .xp2-knob, .xp2-before, .xp2-pin, .xp2-keys li, .xp2-side { transition: none !important; }
}

/* « Après la mise en service » (section #maintenance) : composant du moteur depuis la V4.2, styles dans v3-expert.css (.xp-after-*). */

/* V4.3, revue mobile des pages d'expertise (06/10) : boutons « Avant » et « Après » (36 à 42 px de haut), zone de clic de 44 px */
@media (max-width: 768px) {
    .xp2-side { position: relative; }
    .xp2-side::after { content: ""; position: absolute; inset: -4px 0; }
}

/* =====================================================================================================================
   Passe de nuit du 06/10 : comparateur en version courte (.xp2--mini), visuel du haut de page. Même mécanique et même script
   que l'ancien, moins haut (240 px : le premier bloc, étapes comprises, tient dans une fenêtre de 1366 x 650) et avec moins
   d'éléments : un tableur de quelques lignes (sans barre de formule, commentaire, onglets ni pastilles), une application
   réduite à la liste (3 interventions) et à la fiche (client, statut, deux champs), sans menu latéral, historique ni téléphone.
   La position de repos est calculée par le script sur la jonction liste / fiche (sinon --xp2-pos).
   Même barre Avant / Après que l'ancien : l'encart « Faites glisser la poignée » s'y range au centre (règle
   .xp-w-applications .df-cue-pill plus haut). Fiche : marge gauche élargie pour que la poignée, au repos sur son bord, ne
   couvre pas le texte ; avatar poussé à droite de la barre de l'application (sans la cloche de l'ancien).
   ===================================================================================================================== */
.xp2--mini { --xp2-h: 240px; }
.xp2--mini .xp2-bar { margin-bottom: 10px; }
.xp2--mini .xp2-xl { grid-template-rows: auto minmax(0, 1fr) auto; }
/* 07/10 au soir : ajouts visibles seulement quand le comparateur est grand (deux colonnes, plus bas) : filtres, personnes présentes,
   bouton de la fiche, 1er et 4e champs */
.xp2--mini .xp2-chips, .xp2--mini .xp2-presence, .xp2--mini .xp2-acts, .xp2--mini .xp2-fields > div:nth-child(3n+1) { display: none; }
.xp2--mini .xp2-xl-top { height: 40px; }
.xp2--mini .xp2-sr-row { grid-template-columns: 30px 84px 168px 104px 104px 96px 80px 92px minmax(150px, 1fr); height: 26px; }
.xp2--mini .xp2-app { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
.xp2--mini .xp2-win { grid-template-rows: 44px minmax(0, 1fr); }
.xp2--mini .xp2-win-body { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.xp2--mini .xp2-list { gap: 10px; padding: 12px 16px 0; }
.xp2--mini .xp2-list-top > b { font-size: 17px; }
.xp2--mini .xp2-row { padding: 6px 10px; }
.xp2--mini .xp2-row:nth-child(n+3) { display: none; } /* 07/10 : la 3e intervention était coupée (17 px sur 46) ; elle reste dans le code */
.xp2--mini .xp2-card { gap: 9px; padding: 12px 16px 12px 36px; }
.xp2--mini .xp2-win-top .xp2-av--me { margin-left: auto; }
.xp2--mini .xp2-card-h b { font-size: 19px; }
.xp2--mini .xp2-card-tags { display: none; }
.xp2--mini .xp2-card-h { margin-top: 0; }
.xp2--mini .xp2-fields { gap: 6px 12px; padding: 8px 12px; }
/* 07/10 au soir : étapes du statut un peu plus petites, « Planifiée » n'est plus coupée (fiche de 300 px sur tablette) */
.xp2--mini .xp2-steps { gap: 4px; }
.xp2--mini .xp2-steps > span { font-size: 11px; }
/* tablette : la liste reste (fiche plus étroite) ; la poignée se pose sur leur jonction */
@media (max-width: 1023px) {
    .xp2--mini .xp2-list { display: flex; }
    .xp2--mini .xp2-win-body { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
    /* 07/10 au soir : fiche élargie (320 px) ; la liste perd la colonne des dates, les noms des clients restent entiers */
    .xp2--mini .xp2-row { grid-template-columns: minmax(0, 1fr) 28px 88px; }
    .xp2--mini .xp2-row-d { display: none; }
    .xp2--mini .xp2-card { box-shadow: inset 1px 0 0 var(--b-rule); }
}
@media (max-width: 640px) {
    .xp2.xp2--mini { --xp2-h: 360px; }
    .xp2--mini .xp2-stage { --xp2-pos: 86%; }
    .xp2--mini .xp2-xl-top { height: 72px; }
    .xp2--mini .xp2-sr-row { grid-template-columns: 28px 86px 150px 90px 96px 80px 86px 92px 170px; }
    .xp2--mini .xp2-app { padding: 12px; }
    .xp2--mini .xp2-list { display: none; }
    .xp2--mini .xp2-win-body { grid-template-columns: minmax(0, 1fr); }
    .xp2--mini .xp2-card { padding-left: 16px; box-shadow: none; }
}

/* 07/10 au soir (Louis : le bloc « est devenu trop petit et on ne comprend plus bien ce qu'on fait ») : premier bloc en deux
   colonnes à partir de 1200 px (how.side, v3-expert.css) : « Ce que nous faisons » à gauche, le comparateur à droite, 404 px de
   haut (240 avant) ; le bloc entier, titre compris, tient dans une fenêtre de 1366 x 650 (583 px utiles). Le tableur montre toutes
   ses lignes et ses onglets ; l'application, trois filtres et quatre interventions (sans les colonnes des initiales et des dates,
   faute de place), et la fiche en entier (personnes présentes, statut, quatre champs, bouton). Fiche de 310 px (360 avant) ; la
   poignée se pose toujours sur la jonction liste / fiche (js/exp-applications.js). Libellés Avant / Après un peu plus petits :
   l'encart « Faites glisser la poignée » se range entre eux sans les toucher (FR et EN). */
@media (min-width: 1200px) {
    .xp-how-sec--side .xp2--mini { --xp2-h: 404px; }
    .xp-how-sec--side .xp2--mini .xp2-win-body { grid-template-columns: minmax(0, 1fr) minmax(0, 310px); }
    .xp-how-sec--side .xp2--mini .xp2-list { gap: 10px; }
    .xp-how-sec--side .xp2--mini .xp2-chips { display: flex; }
    .xp-how-sec--side .xp2--mini .xp2-chips span { padding: 0 9px; }
    .xp-how-sec--side .xp2--mini .xp2-row:nth-child(n+3) { display: grid; }
    .xp-how-sec--side .xp2--mini .xp2-row { grid-template-columns: minmax(0, 1fr) 88px; }
    .xp-how-sec--side .xp2--mini .xp2-row > .xp2-av, .xp-how-sec--side .xp2--mini .xp2-row-d { display: none; }
    .xp-how-sec--side .xp2--mini .xp2-card { padding-left: 30px; }
    /* colonnes du tableur resserrées : au repos, la colonne des statuts (couleurs sans légende) reste visible à gauche de la poignée */
    .xp-how-sec--side .xp2--mini .xp2-sr-row { grid-template-columns: 28px 72px 150px 96px 100px 90px 76px 88px minmax(140px, 1fr); }
    .xp-how-sec--side .xp2-side { gap: 10px; font-size: 15.5px; }
    .xp-how-sec--side .xp2-side > i { width: 38px; height: 38px; border-radius: var(--b-r-card); }
    .xp-how-sec--side .xp2-side > i svg { width: 19px; height: 19px; }
    .xp-how-sec--side .xp2-side small { font-size: 11px; }
    /* encart centré sur la barre : règle retirée le 14/10 (encarts supprimés du site) ; avant .xp-how-sec--side.xp-w-applications .df-cue-pill { top: 19px; } */
    .xp-how-sec--side .xp2--mini .xp2-card-tags { display: flex; margin-top: -2px; }
    .xp-how-sec--side .xp2--mini .xp2-presence { display: flex; }
    .xp-how-sec--side .xp2--mini .xp2-presence small { margin-left: 12px; line-height: 1.3; }
    .xp-how-sec--side .xp2--mini .xp2-fields > div:nth-child(3n+1) { display: block; }
    .xp-how-sec--side .xp2--mini .xp2-acts { display: flex; }
}

/* Passe de nuit du 06/10 : « Après la mise en service » portait ici une note de plus (reprise d'applications existantes), avec un
   écart sous le titre resserré. 07/10 au soir (rythme vertical unique) : règles retirées, la section n'est plus sur la page (sa
   version d'Applications est au garde-manger, réglée par .xp-after.xp-gm .xp-after-notes dans v3-expert.css). */

/* =====================================================================================================================
   09/10 (Louis) : « Tout au même endroit », premier bloc de la page (exp/applications.mjs, oneTool), à la place du comparateur
   « Du tableur à l'application » (au garde-manger, avec les étapes « Ce que nous faisons »). Louis : le comparateur n'était « pas
   forcément très parlant pour un lambda », et on ne transforme pas que des tableurs : ce sont les tâches faites à la main ou entre
   plusieurs outils qui se retrouvent au même endroit.
   Vocabulaire du « versus » (v3-expert.css, .xp-pair) : une carte coupée en deux fonds, sans contour (écume à gauche, marine à
   droite), et la pastille blanche à flèche sur la jointure ; empilée sous 768 px (pastille tournée vers le bas).
   À gauche, cinq outils posés en désordre et reliés par des pointillés, quand la zone fait au moins 460 px de large (requête de
   conteneur sur .xp2u-mess) ; plus étroite, ils passent en ligne, sans pointillés. À droite, une seule fenêtre « Votre outil ».
   Survol du bloc (souris) : les pointillés défilent et les outils de gauche s'estompent, la pastille passe en bleu, la carte
   marine s'éclaire et les lignes de l'outil s'allument l'une après l'autre (coche redessinée). Les cartes ne bougent pas.
   Sans animation si prefers-reduced-motion. Préfixe : xp2u.
   14/10 (direction « premium sobre ») : plus de dessin. À gauche, les cinq outils rangés en tuiles nettes, sans rotation ni
   pointillés (le désordre est dit par la légende) ; pictogrammes nus en gris (avant : carrés ambre #FBEFE3 / #8A5A22). Petit titre
   « Aujourd'hui » précédé d'un carré gris de 7 px, « Avec DataFish » sans poisson (comme les colonnes du versus). Jointure carrée
   à rayon 6, sans ombre. À droite, la fenêtre reste un écran, à plat (sans ombre), logo de l'outil en pictogramme (avant : le
   poisson), coches au trait sans rond, « Relié à vos logiciels » en simple ligne (avant : pilule). Rayons 6 (avant 20, 14, 12).
   Au survol, seuls des fonds changent et les coches se redessinent ; plus de pointillés qui défilent.
   ===================================================================================================================== */
.xp2u { display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); }
.xp2u-a, .xp2u-b { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px 28px; }
.xp2u-a { grid-column: 1; grid-row: 1; padding-right: 44px; border-radius: var(--b-r-card) 0 0 var(--b-r-card); background: var(--sea); }
.xp2u-b { grid-column: 3; grid-row: 1; padding-left: 44px; border-radius: 0 var(--b-r-card) var(--b-r-card) 0; background: var(--ink); color: #fff; transition: background-color .45s var(--ease-out); }
.df-sea .xp2u-a { background: #fff; }
.xp2u-to {
    grid-column: 2; grid-row: 1; z-index: 1; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -20px;
    border-radius: var(--b-r-card); background: #fff; color: var(--tide);
    transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.xp2u-to svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }

/* petits titres des deux cartes, comme les colonnes du versus (.xp-pairs-labels de v3-expert.css) */
.xp2u-k { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase; }
.xp2u-a .xp2u-k { color: var(--muted); }
.xp2u-a .xp2u-k i { flex: none; width: 7px; height: 7px; background: var(--b-faint); }
.xp2u-b .xp2u-k { color: var(--signal); }
.xp2u-b .xp2u-k i { display: none; }
.xp2u-cap { margin: 0; font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.xp2u-a .xp2u-cap { color: var(--muted); }
.xp2u-b .xp2u-cap { font-weight: 600; color: #fff; }

/* Aujourd'hui : les cinq outils, chacun dans sa tuile (deux colonnes, une seule quand la carte est étroite) */
.xp2u-mess { display: flex; align-items: center; flex: 1; }
.xp2u-tools { display: grid; flex: 1; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.xp2u-tools li {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--b-r-card); background: #fff;
    font: 600 14.5px/1.2 var(--f-body); color: var(--ink); white-space: nowrap; transition: opacity .45s var(--ease-out);
}
.df-sea .xp2u-tools li { background: var(--sea); }
.xp2u-tools i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--b-faint); }
.xp2u-tools i svg { width: 19px; height: 19px; }

/* Avec DataFish : une seule fenêtre, « Votre outil » (un écran, à plat) */
.xp2u-win { display: flex; flex-direction: column; flex: 1; min-height: 0; border-radius: var(--b-r-card); background: #fff; color: var(--ink); overflow: hidden; }
.xp2u-win-top { display: flex; flex: none; align-items: center; gap: 10px; height: 42px; margin: 0; padding: 0 14px; background: var(--sea); }
.xp2u-logo { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 4px; background: var(--ink); color: var(--b-accent-dark); }
.xp2u-logo svg { display: block; width: 16px; height: 16px; }
.xp2u-win-top b { font: 600 15px/1.2 var(--f-display); letter-spacing: -.005em; }
/* 14/10 (relecture du lot 2) : les trois carrés d'équipe (.xp2u-team) ne sont plus rendus (exp/applications.mjs). Avant :
   .xp2u-team { display: flex; gap: 3px; margin-left: auto; } ; i { width: 20px; height: 20px; border-radius: 4px; background:
   var(--tide-soft); }, le deuxième #9DB9D3, le troisième var(--tide). */
.xp2u-rows { display: grid; gap: 0; margin: 0; padding: 6px 14px 4px; list-style: none; }
.xp2u-rows li {
    display: grid; grid-template-columns: 20px auto minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 40px; padding: 0 4px;
    box-shadow: inset 0 -1px 0 var(--b-rule); transition: background-color .35s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms);
}
.xp2u-rows li:last-child { box-shadow: none; }
.xp2u-rows i { display: grid; place-items: center; width: 20px; height: 20px; color: var(--tide); }
.xp2u-rows i svg { width: 18px; height: 18px; }
.xp2u-rows span { font: 600 14.5px/1.2 var(--f-body); color: var(--ink); white-space: nowrap; }
.xp2u-rows em { justify-self: end; width: min(100%, 118px); height: 6px; border-radius: 2px; background: var(--b-rule); }
.xp2u-rows li:nth-child(2) em { width: min(100%, 84px); }
.xp2u-rows li:nth-child(3) em { width: min(100%, 100px); }
.xp2u-rows li:nth-child(4) em { width: min(100%, 70px); }
.xp2u-rows b { display: grid; place-items: center; width: 18px; height: 18px; color: var(--tide); }
.xp2u-rows b svg { width: 16px; height: 16px; }
.xp2u-rows b path { stroke-dasharray: 21; stroke-dashoffset: 0; }
.xp2u-link { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: auto 18px 14px; padding: 0; font: 600 12.5px/1.2 var(--f-body); color: var(--tide); }
.xp2u-link i { display: grid; flex: none; width: 15px; height: 15px; }
.xp2u-link i svg { width: 15px; height: 15px; }

/* Survol (souris seulement) : seuls des fonds changent et les coches se redessinent ; les cartes ne bougent pas */
@media (hover: hover) {
    .xp2u:hover .xp2u-tools li { opacity: .72; }
    .xp2u:hover .xp2u-to { background: var(--tide); color: #fff; }
    .xp2u:hover .xp2u-to svg { transform: translateX(2px); }
    .xp2u:hover .xp2u-b { background: var(--b-night-2); }
    .xp2u:hover .xp2u-rows li { background: var(--b-mist); }
    .xp2u:hover .xp2u-rows b path { animation: xp2u-tick .5s var(--ease-out) calc(var(--i, 0) * 110ms + 80ms) both; }
}
@keyframes xp2u-tick { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }

/* Téléphone et petite tablette : les deux cartes l'une sous l'autre, la jointure tournée vers le bas */
@media (max-width: 768px) {
    .xp2u { grid-template-columns: minmax(0, 1fr); }
    .xp2u-a { grid-column: 1; grid-row: 1; padding: 20px 20px 34px; border-radius: var(--b-r-card) var(--b-r-card) 0 0; }
    .xp2u-to { grid-column: 1; grid-row: 2; justify-self: center; margin: -20px 0; }
    .xp2u-to svg, .xp2u:hover .xp2u-to svg { transform: rotate(90deg); }
    .xp2u-b { grid-column: 1; grid-row: 3; padding: 34px 20px 20px; border-radius: 0 0 var(--b-r-card) var(--b-r-card); }
    .xp2u-tools li { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .xp2u-rows b path { animation: none !important; }
    .xp2u-b, .xp2u-to, .xp2u-to svg, .xp2u-tools li, .xp2u-rows li { transition: none; }
}
/* 14/10 : règles retirées avec le dessin (gardées ici pour mémoire) :
   .xp2u-mess { position: relative; min-height: 200px; container-type: inline-size; }
   .xp2u-lines path { stroke: #C98A3E; stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 4 6; } (pointillés entre les outils)
   @container (min-width: 460px) { .xp2u-tools li { position: absolute; left: var(--x); top: var(--y); } }, et transform: rotate(var(--r))
   .xp2u-tools li { box-shadow: 0 8px 18px -10px rgba(11, 34, 57, .35); }  .xp2u-tools i { background: #FBEFE3; color: #8A5A22; }
   .xp2u-to { box-shadow: 0 6px 18px rgba(11, 34, 57, .16); }  .xp2u-win { box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .55); }
   .xp2u-rows b { border-radius: 50%; background: var(--tide); color: #fff; }  .xp2u-link { border-radius: 999px; background: var(--sea); }
   @keyframes xp2u-march (pointillés qui défilent au survol) ; survol de la carte marine en #164371. */