/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ (2026-10-11, passe a11y, V3). Chargée après les autres feuilles (index.html), avec js/accessibilite.js.
   1. ANNEAU DE FOCUS : une couleur unique, tirée de la couleur de marque mais éclaircie en sombre et assombrie en clair, pour
      tenir 3:1 contre le fond voisin dans les trois styles (Moderne, Mat, Papier) et les deux thèmes, quelle que soit la palette
      (mesuré : 2,19:1 en clair avec l'ancien anneau de marque translucide, ≥ 6:1 avec celui-ci). Seule la COULEUR est imposée :
      chaque composant garde son épaisseur et son décalage. Les éléments sans contour au clavier (champs, cellules, onglets)
      reçoivent le contour commun.
   2. Fenêtre focalisée par le module (data-a11y-cadre) : pas de cadre, le lecteur d'écran annonce son nom.
   3. Texte réservé aux lecteurs d'écran (.iku-sr) et lien d'évitement (.iku-evitement), visible seulement au clavier.
   4. Mouvement réduit du SYSTÈME (prefers-reduced-motion) : mêmes règles que le réglage « Animations : Réduites » de l'app
      (css/mouvement.css), qui ne couvrait jusqu'ici que des animations isolées sous la préférence du système.
   5. Cibles tactiles : zone de clic agrandie SANS bouger la mise en page (pseudo-élément), au moins 24 × 24 px (WCAG 2.5.8),
      44 px au téléphone sur les commandes des fenêtres.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* 1. Anneau de focus ─────────────────────────────────────────────────────────────────────────────────────────────── */
:root { --anneau-focus: color-mix(in srgb, var(--brand, #00b1cf) 42%, #fff); }
html[data-theme="light"] { --anneau-focus: color-mix(in srgb, var(--brand, #00b1cf) 52%, #000); }
/*  Papier clair : l'encre du rapport ; Papier sombre (« Encre ») : le papier. */
html[data-papier][data-theme="light"] { --anneau-focus: #1f2a44; }
html[data-papier][data-theme="dark"] { --anneau-focus: #f3ead8; }

:focus-visible { outline-color: var(--anneau-focus) !important; }
:where(textarea, summary, [role="tab"], [role="option"], [role="menuitem"], [role="menuitemradio"], [role="switch"],
       [role="checkbox"], [role="radio"], [role="slider"], [role="treeitem"], [role="link"]):focus-visible {
    outline: 2px solid var(--anneau-focus);
    outline-offset: 2px;
}
/*  Arrivée du lien d'évitement : le titre du contenu du hub montre où l'on est. Les conteneurs focalisés par programme
    (tabindex="-1" : voiles, menus, fenêtres) restent sans cadre, comme le veut la règle commune d'analyses.css. */
#hub-contenu:focus-visible { outline: 2px solid var(--anneau-focus); outline-offset: 4px; border-radius: 6px; }
/*  Cellule de grille (flèches, js/accessibilite.js) : contour à l'intérieur, la cellule voisine ne le masque pas. */
table.ftt td:focus-visible { outline: 2px solid var(--anneau-focus); outline-offset: -2px; }
table.ftt td:focus:not(:focus-visible) { outline: none; }
/*  Palette de commandes : le focus du champ se lit au filet de l'en-tête (choix de la palette) ; ce filet prend la couleur de
    l'anneau, qui tient 3:1 (la marque à 55 % ne les tenait pas en clair). */
.cpal-tete:focus-within { border-bottom-color: var(--anneau-focus) !important; }
/*  Champs dont la feuille du composant retire le contour (cellules de taux du pilotage, champ « Personnalisé », curseurs
    d'années) : le contour commun revient au clavier. */
.margin-edit-cell input:focus-visible, .custom-inline-input:focus-visible, .yrs .yrs-input:focus-visible {
    outline: 2px solid var(--anneau-focus) !important; outline-offset: 1px !important;
}

/* 2. Fenêtre focalisée par le module : pas de cadre ───────────────────────────────────────────────────────────────── */
[data-a11y-cadre]:focus, [data-a11y-cadre]:focus-visible { outline: none !important; }

/* 3. Lecteurs d'écran, lien d'évitement ───────────────────────────────────────────────────────────────────────────── */
.iku-sr {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.iku-evitement {
    position: fixed; left: 12px; top: 8px; z-index: 100000;
    padding: 10px 16px; border-radius: 10px; border: 0;
    background: var(--anneau-focus); color: #0b1220; font: 600 14px/1.2 var(--app-font, system-ui, sans-serif);
    transform: translateY(-160%); transition: transform .12s ease;
}
html[data-theme="light"] .iku-evitement { color: #fff; }
html[data-papier][data-theme="light"] .iku-evitement { color: #fff; }
.iku-evitement:focus, .iku-evitement:focus-visible { transform: none; outline: 2px solid var(--anneau-focus); outline-offset: 2px; }

/* 4. Mouvement réduit du système ─────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html *, html *::before, html *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
}

/* 4 bis. Contrastes mesurés dans les fenêtres du périmètre ───────────────────────────────────────────────────────────── */
/*  Choix actif en BLANC SUR LA MARQUE : la marque à 78-85 % (teal clair) donnait 3,4 à 4,2:1. La marque assombrie garde la teinte
    et passe au-dessus de 4,5:1. Apparence et « Personnaliser le hub » (Confort, FR, Moderne, Ce navigateur…), bouton « Volet » du
    pilotage, onglets du volet de croissance (Croissance, Marge…). Le sélecteur segmenté commun (.iku-seg) n'est pas touché ici. */
.appx-density-seg button.on,
.fintree-modetoggle button.on,
.cv-tab.on { background: color-mix(in srgb, var(--brand, #00b1cf) 66%, #000) !important; color: #fff !important; }
/*  Touches de la palette de commandes (Échap, Ctrl, Maj, Ctrl+K) : 4,4:1 en gris sur gris ; un cran plus clair (plus sombre en clair). */
.cpal kbd, .cpal-x-kbd, .cpal-loupe-kbd, .cpal-fab-kbd { color: color-mix(in srgb, var(--mut1, #8aa0ad) 60%, var(--tx1, #eafdff)) !important; }
html[data-theme="light"] .cpal kbd, html[data-theme="light"] .cpal-x-kbd,
html[data-theme="light"] .cpal-loupe-kbd, html[data-theme="light"] .cpal-fab-kbd { color: #3e4c55 !important; }

/*  Style Mat en sombre : le texte estompé (--color-text-dim, #6B8A9A) tombait à 4,0-4,4:1 sur les surfaces pleines du Mat (Reporting :
    libellés, mois, sous-titres ; plus clair que le verre du Moderne). Il remonte d'un cran, comme --verre-dim (tokens.css). */
:root[data-style="mat"]:not([data-theme="light"]):not([data-papier]) { --color-text-dim: #8AA3B0; }

/*  Reporting en clair : le vert des écarts favorables (#047857) faisait 4,1-4,3:1 sur le fond teinté des cartes. */
html[data-theme="light"] .rep-root, html[data-theme="light"] .rep-tour { --rep-ok: #03644a; }

/*  Pilotage, style Mat en clair : petits textes des chiffres du budget et vues non choisies (4,1-4,3:1 sur les tuiles grisées). */
html[data-style="mat"][data-theme="light"]:not([data-papier]) .fintree-rt small,
html[data-style="mat"][data-theme="light"]:not([data-papier]) .fintree-rt > span,
html[data-style="mat"][data-theme="light"]:not([data-papier]) .fintree-vtabs button:not(.on) { color: #3f5761 !important; }

/*  Présentations : liens en couleur de marque (« Importer une variante ») à 2,6-2,8:1 sur blanc ; le champ fichier caché dessous
    montre son focus sur l'étiquette (focus-within), à la couleur de l'anneau. */
html[data-theme="light"] .memo-lien { color: color-mix(in srgb, var(--brand, #00b1cf) 58%, #000) !important; }
.memo-import:focus-within { outline-color: var(--anneau-focus) !important; }

/*  Pilotage, style Mat en sombre : les chiffres en couleur de marque des lignes de total (EBE, résultat…) faisaient 4,3:1 sur leur
    bande teintée ; même règle que le Mat clair (style-mat.css, --mt-marque-texte), dans l'autre sens : la marque éclaircie. */
html[data-style="mat"]:not([data-theme="light"]) .ftt tbody tr:is(.ft-perc, .ft-major) > td > span[style*="color:#"]:not([style*="FD7358" i]) {
    color: color-mix(in srgb, var(--brand, #0AACA5) 72%, #fff) !important;
}
/*  Volet du pilotage en clair : « Graphique & valo » (repli du volet) à 2,9:1. */
html[data-theme="light"] .hyp-split-lbl { color: #4b5c65; }
/*  Synthèse du hub, style Mat en clair : les écarts des colonnes projetées (4,25:1 sur leur fond teinté). */
html[data-style="mat"][data-theme="light"] .hsf .hsf-proj, html[data-style="mat"][data-theme="light"] .hsf .hsf-proj span { color: #3f5761 !important; }

/*  Papier clair : pastille « Provisoire » et « Mettre à jour » (ambre #92600C sur crème, 4,4:1), écarts de concentration (0,9 d'opacité). */
html[data-papier][data-theme="light"] .recap-prov, html[data-papier][data-theme="light"] .recap-upd-lbl { color: #7a4f08 !important; }
html .intent-conc-fc.fc-down, html .intent-conc-fc.fc-up { opacity: 1 !important; }
/*  Papier sombre : bascule « EBE / Marge d'expl. » de la synthèse, choix non retenu à 4,49:1. */
html[data-papier][data-style]:not([data-theme="light"]) .hubsynth-tog button:not(.on) { color: var(--color-text-secondary) !important; }
/*  Mes clients : « /7 » de la position dans la liste (opacité 0,85). */
html .tcl-pager-pos small { opacity: 1 !important; }

/*  Hub : écart de concentration « stable » (gris moyen : 2,6-2,8:1 en clair) et sous-libellés du choix VE / VT (9 px, opacité 0,72). */
html .intent-conc-fc.fc-flat { opacity: 1 !important; }
html[data-theme="light"] .intent-conc-fc.fc-flat { color: #4b5c65 !important; }
html .intent-valo-vevt-opt small { opacity: .92 !important; }

/*  Mes clients : les petits textes à 50-62 % du texte principal (en-têtes, parts, légendes, lectures) tombaient à 2,9-4,4:1 sur les
    fonds teintés du clair et du Mat ; 76 % les remet au-dessus de 4,5:1 dans les trois styles, sans changer la hiérarchie. */
html .tcl-th, html .tcl-kpi-l, html .tcl-chart-title, html .tcl-lg, html .tcl-seg-option:not(.active), html .tcl-foot-seg-lbl,
html .tcl-kpi-d:not(.up):not(.down):not(.warn), html .tcl-client-sub, html .tcl-foot-pct, html .tcl-panel-sub,
html .tcl-chart-read:not(.warn), html .pcl-titre, html .tcl-pill.na {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 76%, transparent) !important;
}
html .tcl-yval-pct { opacity: .82 !important; }
html .pcl-total small { opacity: 1 !important; }
html[data-theme="light"] .tcl-kpi-d.warn { color: #8a3f06 !important; }
html[data-theme="light"] .tcl-chart-read.warn { color: #7c4d0b !important; }
html:not([data-theme="light"]) .tcl-seg-option.active { color: color-mix(in srgb, var(--mud-palette-info, #44C1A3) 55%, #fff) !important; }
html:not([data-theme="light"]) .tcl-pill.up { color: color-mix(in srgb, var(--mud-palette-tertiary, #0AACA5) 62%, #fff) !important; }
html:not([data-theme="light"]) .pcl-fiab.ok { color: color-mix(in srgb, var(--mud-palette-tertiary, #0AACA5) 62%, #fff) !important; }
html:not([data-theme="light"]) .tcl-hero-meta.trend-up { opacity: 1 !important; }
/*  Papier sombre (« Encre ») : sa propre teinte des choix non retenus (4,4:1) passe à l'encre secondaire. */
html[data-papier][data-style]:not([data-theme="light"]) .tcl-seg-option:not(.active) { color: var(--color-text-secondary) !important; }

/* 5. Cibles tactiles ─────────────────────────────────────────────────────────────────────────────────────────────── */
/*  Boutons-icônes de 13 à 22 px dans les fenêtres du périmètre : la zone de clic déborde de 6 px autour, sans rien déplacer. */
.ftt-tw, .finmod-trigger, .tcl-seg-option, .hyp-badge.is-badge, .finmod-x, .rep-x, .bk-modal-x, .fintree-pal-x, .hubp-x, .scen-dlg-x, .sa-x, .sharelink-x {
    position: relative;
}
.ftt-tw::after, .finmod-trigger::after, .tcl-seg-option::after, .hyp-badge.is-badge::after,
.finmod-x::after, .rep-x::after, .bk-modal-x::after, .fintree-pal-x::after, .hubp-x::after, .scen-dlg-x::after, .sa-x::after, .sharelink-x::after {
    content: ""; position: absolute; inset: -6px; border-radius: inherit; z-index: 1;   /* au-dessus du libellé voisin */
}
/*  Choix serrés côte à côte (Top 5 / 7 / 10) : 24 px de large au moins, la zone ne déborde qu'en hauteur (pas sur la voisine). */
.tcl-seg-option { min-width: 24px; }
.tcl-seg-option::after { inset: -4px 0; }
/*  Années du volet de croissance : les pastilles (35 × 15) font le même choix que le double curseur, avec une cible de 25 px. */
.yrs-tick { position: relative; }
.yrs-tick::after { content: ""; position: absolute; inset: -5px 0; }
/*  Les en-têtes de groupe du menu flottant : la ligne entière est cliquable (« Mon espace » mesurait 14 px de haut). */
.fec-fab-grp-h { min-height: 24px; }
/*  Arbre du pilotage : ses lignes de 20 px (rythme mesuré, cf. FinTreeTable) bornent la zone de clic du chevron et des boutons de
    ligne à 20 px de haut. Au doigt (pointeur grossier), ces boutons prennent 24 px, quitte à desserrer la ligne. */
@media (pointer: coarse) {
    .ftt-tw, .finmod-trigger { min-width: 24px; min-height: 24px; }
}
@media (max-width: 640px) {
    .rep-x::after, .bk-modal-x::after, .fintree-pal-x::after, .hubp-x::after, .finmod-x::after, .scen-dlg-x::after, .sa-x::after, .sharelink-x::after { inset: -11px; }
}