/* DataFish : page « Prévisions & statistiques », graphique de prévision interactif (préfixe xf).
   Au repos (sans JavaScript), tout est visible : graphique complet, décision, réglages. Le script ne fait qu'ajouter l'interaction.
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md, tâche L2-T2) : graphique en marine, bleu et gris. Historique en
   marine plein, prévision en bleu d'accent (les tirets de la prévision restent : ils distinguent la prévision de l'historique),
   fourchette en bleu translucide, seuil et capacité en gris, alerte (rupture, sous le seuil, surcharge) en filet plein marine.
   Avant : seuil, alerte et dépassement en ambre (#C07A2C, #8A5A22, #F3C58E, #F6D3AA), bande en #3A8CC8. Rayons 6 (avant 10 à 24),
   plus de pilule (999px), plus de poisson dans « La décision », titres en 600 (avant 700), mention « exemple » en texte gris. */

.xf { position: relative; padding: clamp(14px, 2.2vw, 28px); border-radius: var(--b-r-card); background: var(--b-mist); }

/* Choix du cas (14/10 : rectangles à rayon 6, comme les filtres ; avant : pilules) */
.xf-cases { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.xf-case {
    display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: var(--b-r-card);
    background: #fff; font: 600 15px/1 var(--f-body); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.xf-case i { display: grid; place-items: center; width: 20px; height: 20px; color: var(--b-accent); transition: color .2s; }
.xf-case i svg { width: 19px; height: 19px; }
.xf-case:hover { background: var(--b-hover); }
.xf-case[aria-pressed="true"] { background: var(--b-night); color: #fff; }
.xf-case[aria-pressed="true"] i { color: var(--b-accent-dark); }
.xf-case:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
/* sans JavaScript : réglages visibles mais inactifs */
.xf-case:disabled { cursor: default; }
.xf-case:disabled:not([aria-pressed="true"]) { opacity: .6; }
.xf-case:disabled:hover:not([aria-pressed="true"]) { background: #fff; }
.xf-sw:has(input:disabled) { opacity: .6; cursor: default; }
.xf-range:disabled { opacity: .6; cursor: default; }
/* 14/10 : « Exemple, données fictives » en texte gris (avant : pilule #FBEFE3, texte #8A5A22, rond #C07A2C) */
.xf-demo { flex: none; display: inline-flex; align-items: center; margin: 0; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--b-faint); }

/* Graphique et décision côte à côte ; dessous, les réglages alignés sur les mêmes colonnes */
.xf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px 16px; align-items: start; }
.xf-fig { min-width: 0; margin: 0; padding: 20px 22px 18px; border-radius: var(--b-r-card); background: #fff; }
.xf-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 4px; }
/* titre sur une ligne, unité dessous : même hauteur pour les trois cas */
.xf-cap { align-items: flex-start; }
.xf-cap-t { display: grid; gap: 1px; min-width: 0; }
.xf-cap b { font: 600 17px/1.3 var(--f-display); color: var(--ink); }
.xf-cap small { font-size: 14px; color: var(--muted); }
.xf-plot { position: relative; margin: 0 -6px; border-radius: var(--b-r-card); touch-action: pan-y; }
.xf-plot:focus { outline: none; }
/* graphique à lire semaine par semaine (survol, toucher, flèches) : curseur en croix une fois le script prêt */
.xf.is-ready .xf-plot { cursor: crosshair; }
.xf-plot:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.xf-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
/* état au repos (sans JavaScript) : une version large et une version pour téléphone ; le script les remplace par un tracé à la taille réelle */
.xf-rest-s { display: none; }
@media (max-width: 600px) { .xf-rest-l { display: none; } .xf-rest-s { display: block; } }

/* éléments du tracé (SVG) */
.xf-gl { stroke: #E3E9EF; stroke-width: 1; }
.xf-axis, .xf-tick { stroke: #C9D3DD; stroke-width: 1; }
.xf-yl, .xf-xl, .xf-xt { font: 500 12px var(--f-body); fill: var(--b-faint); }
.xf-xl--now { font-weight: 600; fill: var(--ink); }
.xf-xt { font-size: 11.5px; }
.xf-zone { fill: var(--b-hover); opacity: .8; }
.xf-zline { stroke: var(--b-accent); stroke-width: 1; opacity: .5; }
.xf-zl { font: 600 11.5px var(--f-body); fill: var(--b-accent); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.xf-ref { fill: none; stroke: var(--b-faint); stroke-width: 1.2; stroke-dasharray: 4 4; }
.xf-refl { font: 600 12px var(--f-body); fill: var(--b-faint); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.xf-over { fill: var(--b-night); opacity: .14; }
.xf-band { fill: var(--b-accent); opacity: .16; }
.xf-now { stroke: var(--ink); stroke-width: 1; opacity: .3; }
.xf-nowl { font: 600 12px var(--f-body); fill: var(--ink); }
.xf-hist { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.xf-fc { fill: none; stroke: var(--b-accent); stroke-width: 2.2; stroke-dasharray: 6 4; stroke-linejoin: round; stroke-linecap: round; }
.xf-dot { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.xf-mark { stroke: var(--b-night); stroke-width: 1.2; }
.xf-markl { font: 600 12px var(--f-body); fill: var(--b-night); }
.xf-markl--low { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.xf-hov { stroke: var(--ink); stroke-width: 1; opacity: .3; }
.xf-hdot, .xf-hdot-h { stroke: #fff; stroke-width: 2; }
.xf-hdot { fill: var(--b-accent); }
.xf-hdot-h { fill: var(--ink); }
.xf-tip rect { fill: var(--b-night); }
.xf-tip text { font: 500 12.5px var(--f-body); fill: var(--b-on-dark-2); }
.xf-tip .xf-tip-b { font-weight: 600; fill: #fff; }

/* légende */
.xf-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; min-height: 21px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.xf-legend li { display: inline-flex; align-items: center; gap: 7px; }
.xf-legend i { display: inline-block; flex: none; width: 18px; height: 0; }
.xf-lg-hist { border-top: 2px solid var(--ink); }
.xf-lg-fc { border-top: 2px dashed var(--b-accent); }
.xf-legend .xf-lg-band { height: 12px; border-radius: 2px; background: rgba(31, 111, 168, .16); }
.xf-lg-ref { border-top: 1.5px dashed var(--b-faint); }
.xf-legend .xf-lg-mark { width: 0; height: 14px; margin: 0 4px; border-left: 1.5px solid var(--b-night); }
.xf-help { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.xf:not(.is-ready) .xf-help { display: none; }

/* la décision : hauteur de son contenu, le chiffre clé juste sous le texte (14/10 : rayon 6, étiquette sans poisson) */
.xf-dec { min-width: 0; padding: 24px 22px 22px; border-radius: var(--b-r-card); background: var(--b-night); color: #fff; }
.xf-dec-lab { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-accent-dark); }
/* 14/10 : .xf-dec-fish n'est plus rendu (forecasting.mjs) ; avant : poisson de 30 px en #74C3EE devant le libellé */
body.v2 .xf-dec-h { margin: 0; font: 600 24px/1.2 var(--f-display); letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.xf-dec-p { margin: 10px 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--b-on-dark-2); }
.xf-dec-note { margin: -6px 0 18px; padding: 9px 11px; border-radius: var(--b-r-card); background: var(--b-night-2); font-size: 13.5px; line-height: 1.45; color: var(--b-on-dark-2); }
.xf-dec-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 12px 14px; border-radius: var(--b-r-card); background: var(--b-night-2); }
.xf-dec-stat small { flex-basis: 100%; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--b-on-dark-2); }
.xf-dec-stat b { font: 600 20px/1.3 var(--f-display); font-variant-numeric: tabular-nums; color: #fff; }
.xf-dec-stat span { flex-basis: 100%; font-size: 13.5px; line-height: 1.45; color: var(--b-on-dark-2); }

.xf-hz { min-width: 0; padding: 0 4px 2px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }
.xf-hz label { font: 600 14.5px/1.3 var(--f-body); color: var(--ink); }
.xf-h-out { font: 600 15px/1.3 var(--f-display); color: var(--b-accent); }
.xf-hz-min, .xf-hz-max { font-size: 12px; color: var(--muted); }
.xf-hz-max { justify-self: end; }
/* curseur de l'horizon (14/10 : piste à plat de 4 px, sans dégradé ni pilule ; bouton à rayon 4 sans ombre portée) */
.xf-range { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.xf-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #C9D3DD; }
.xf-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 4px; background: var(--b-night); box-shadow: 0 0 0 3px #fff; -webkit-appearance: none; appearance: none; }
.xf-range::-moz-range-track { height: 4px; border-radius: 2px; background: #C9D3DD; }
.xf-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--b-night); }
.xf-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 4px; background: var(--b-night); box-shadow: 0 0 0 3px #fff; }
.xf-range:focus { outline: none; }
.xf-range:focus-visible { outline: 2px solid var(--tide); outline-offset: 4px; border-radius: var(--b-r-card); }

.xf-evf { min-width: 0; margin: 0; padding: 0; border: 0; }
.xf-evf legend { margin: 0 0 10px; padding: 0; font: 600 14.5px/1.3 var(--f-body); color: var(--ink); }
.xf-evs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.xf-evs li { display: flex; }
.xf-sw { position: relative; display: flex; flex: 1; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--b-r-card); background: #fff; cursor: pointer; }
.xf-sw input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.xf-sw:has(input:focus-visible) { outline: 2px solid var(--tide); outline-offset: 2px; }
/* interrupteur (14/10 : rectangle à rayon 3, sans ombre ; avant : pilule et ombre portée du bouton) */
.xf-sw-t { position: relative; flex: none; width: 36px; height: 20px; border-radius: 3px; background: #C9D3DD; transition: background-color .2s var(--ease-out); }
.xf-sw-t::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 2px; background: #fff; transition: transform .2s var(--ease-out); }
.xf-sw input:checked + .xf-sw-t { background: var(--b-night); }
.xf-sw input:checked + .xf-sw-t::after { transform: translateX(16px); }
.xf-sw-l { display: grid; min-width: 0; }
.xf-sw-l b { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.xf-sw-l small { font-size: 13px; line-height: 1.35; color: var(--muted); }

/* annonce pour les lecteurs d'écran */
.xf-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* changement de cas : fondu court */
.xf.is-swap .xf-plot, .xf.is-swap .xf-dec-body { animation: xf-in .4s var(--ease-out); }
@keyframes xf-in { from { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
    .xf.is-swap .xf-plot, .xf.is-swap .xf-dec-body { animation: none; }
    .xf-sw-t, .xf-sw-t::after { transition: none; }
}
@media (max-width: 1000px) {
    .xf-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .xf-hz { max-width: 440px; padding-top: 4px; }
}
@media (max-width: 680px) {
    .xf { padding: 12px; }
    /* cas : trois boutons de même largeur sur une ligne, le texte peut passer à la ligne */
    .xf-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
    .xf-case { justify-content: center; min-height: 48px; padding: 6px 8px; font-size: 13.5px; line-height: 1.2; text-align: center; }
    .xf-case i { display: none; }
    .xf-fig { padding: 14px 12px 12px; }
    .xf-cap b { font-size: 16px; }
    .xf-grid { gap: 12px; }
    /* décision compacte, juste sous le graphique */
    .xf-dec { padding: 16px 16px 14px; }
    .xf-dec-lab { margin-bottom: 8px; }
    body.v2 .xf-dec-h { font-size: 20px; }
    .xf-dec-p { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; }
    .xf-dec-note { margin: -4px 0 12px; font-size: 13px; }
    .xf-dec-stat { padding: 9px 12px; }
    .xf-dec-stat b { font-size: 17px; }
    .xf-dec-stat span { font-size: 13px; }
    .xf-evs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .xf-evf { margin-top: 6px; }
    .xf-hz { max-width: none; padding: 4px 4px 8px; }
    .xf-legend { gap: 6px 14px; font-size: 13px; }
}

/* 14/10 : règles du repère d'interaction retirées (encarts .df-cue supprimés du site, v3-hint.mjs). Avant :
   .xp-w-forecasting .df-cue-pill { right: clamp(14px, 2.2vw, 28px); } et, sous 680 px, { right: 12px; } */

/* V4.3, revue mobile des pages d'expertise (06/10) : curseur de l'horizon (28 px de haut), zone de clic de 44 px ; marge intérieure
   compensée par une marge négative, la piste et le bouton du curseur ne bougent pas */
@media (max-width: 768px) {
    .xf-range { box-sizing: content-box; height: 28px; padding-block: 8px; margin-block: -8px; }
}

/* ================= Version compacte du premier bloc (V4.3, passe de nuit du 06/10, préfixe xfm) =================
   Une seule idée : l'historique, la prévision et sa fourchette, puis la décision. Graphique (fond brume) et décision (marine)
   côte à côte ; environ 270 px de haut à 1366 (repère : la section tient dans une fenêtre de 1366 x 650). Le dessin reprend les
   classes de l'ancien graphique (.xf-hist, .xf-band...). Le visuel suit les étapes « ce que nous faisons » (js/exp-forecasting.js,
   fin du fichier) : data-step = étape en cours. Sans script : état final. Les règles .xf-* au-dessus servent aussi à l'ancien
   graphique, rangé au garde-manger. 14/10 : rayon 6 (avant 18), titre en 600. */
.xfm { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.xfm-fig { min-width: 0; margin: 0; padding: 14px 18px 12px; border-radius: var(--b-r-card); background: var(--b-mist); }
.xfm-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 2px; }
.xfm-cap-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.xfm-cap b { font: 600 16px/1.3 var(--f-display); color: var(--ink); }
.xfm-cap small { font-size: 13.5px; color: var(--muted); }
.xfm-plot { margin: 0 -6px; }
.xfm-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.xfm-legend { margin-top: 4px; font-size: 12.5px; }
/* sur le fond brume du graphique : les étiquettes du tracé gardent un détourage de la couleur du fond */
.xfm :is(.xf-zl, .xf-refl, .xf-markl--low) { stroke: var(--b-mist); }
.xfm-dec { display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; }
.xfm-dec > * { transition: opacity .5s var(--ease-out); }
body.v2 .xfm-dec .xf-dec-h { font-size: 22px; }
.xfm-dec .xf-dec-p { margin: 10px 0 0; }
/* lecture : l'historique se dessine, puis la prévision et sa fourchette apparaissent, puis la décision */
.xfm .xf-hist { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out); }
.xfm :is(.xf-dot, .xf-band, .xf-fc) { transition: opacity .6s var(--ease-out); }
.xfm :is(.xf-mark, .xf-markl) { transition: opacity .4s var(--ease-out) .5s; }
.xfm.is-armed[data-step="0"] .xf-hist { stroke-dashoffset: 1; transition-duration: 0s; }
.xfm.is-armed[data-step="0"] .xf-dot { opacity: 0; transition-duration: 0s; }
.xfm.is-armed:is([data-step="0"], [data-step="1"]) :is(.xf-band, .xf-fc, .xf-mark, .xf-markl) { opacity: 0; transition-duration: 0s; transition-delay: 0s; }
.xfm.is-armed:is([data-step="0"], [data-step="1"], [data-step="2"]) .xfm-dec > * { opacity: 0; transition-duration: 0s; }
@media (max-width: 1100px) {
    .xfm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .xfm-fig { padding: 12px 12px 10px; }
    .xfm-dec { padding: 16px; }
    body.v2 .xfm-dec .xf-dec-h { font-size: 19px; }
}