/* Le Fil — habillage des écrans existants (spec 2026-10-07-le-fil-design § 8.5).
   Les écrans de fonction (planning, équipe, budget, infirmerie…) gardent leur DOM ; ils parlent le langage du Fil :
   têtes compactes, boutons à l'encre, filets plutôt qu'ombres, bandes calcaire / blanc, segments, champs à 44 px, chiffres en Inter.
   Toute règle est préfixée par [data-interface="fil"] : l'interface classique reste strictement identique.
   Les jetons historiques sont redéclarés SUR body (leurs valeurs dérivées sont résolues sur :root, donc inertes ailleurs) :
   un écran qui lit --accent, --texte, --ligne… se redessine sans règle dédiée. Aucun !important. */

/* ---------- 1. Jetons historiques → jetons du Fil ---------- */
/* le troisième niveau d'encre des modules est du texte lu (légendes, références) : il reste à ≥ 4,5:1 là où --f-encre-3 sert aux seuls repères */
[data-interface="fil"] body {
  --f-texte-3: color-mix(in srgb, var(--f-encre-2) 85%, var(--f-fond));
  --bg-0: var(--f-fond); --bg: var(--f-fond); --bg-1: var(--f-fond); --bg-2: var(--f-fond);
  --s1: var(--f-surface); --s2: var(--f-surface-2); --s3: var(--f-surface-2);
  --surface: var(--f-surface); --surface-2: var(--f-surface-2); --surface-3: var(--f-surface-2); --surface-hi: var(--f-surface-2);
  --glass: var(--f-surface); --glass-from: var(--f-surface); --glass-to: var(--f-surface);
  --texte: var(--f-encre); --texte-2: var(--f-encre-2); --texte-3: var(--f-texte-3);
  --text: var(--f-encre); --text-1: var(--f-encre); --text-2: var(--f-encre-2); --text-3: var(--f-texte-3);
  --txt-1: var(--f-encre); --txt-2: var(--f-encre-2); --txt-muted: var(--f-texte-3); --muted: var(--f-texte-3);
  --ligne: var(--f-filet); --ligne-2: var(--f-filet); --line: var(--f-filet); --line-2: var(--f-filet); --border: var(--f-filet);
  /* les actions sont à l'encre ; le pétrole disparaît des boutons, des liens et des bandes */
  --accent: var(--f-encre); --accent-2: var(--f-encre); --accent-deep: var(--f-encre); --sur-accent: var(--f-fond);
  --accent-fond: var(--f-surface-2); --accent-fond2: var(--f-surface-2); --accent-bg: var(--f-surface-2);
  --accent-filet: var(--f-filet); --accent-glow: var(--f-filet); --accent-survol: var(--f-encre-2);
  --accent-bande: var(--f-surface); --sur-portail: var(--f-encre); --portail-filet: var(--f-filet);
  --sur-profond-2: var(--f-encre-2); --pal-sur-profond-2: var(--f-encre-2); --pal-fond-profond: var(--f-surface);
  --pal-sur-profond: var(--f-encre); --pal-accent-sur-profond: var(--f-fait);
  --gold: var(--f-encre); --amber: var(--f-encre); --warm: var(--f-encre); --warm-bg: var(--f-surface-2); --warm-deep: var(--f-encre);
  /* un domaine n'a pas de couleur propre : il se lit à l'encre */
  --teinte: var(--f-encre); --teinte-fond: var(--f-surface);
  /* états : ambre = coûte aujourd'hui, brique = danger, sapin = fait */
  --ok: var(--f-fait); --alerte: var(--f-attention); --critique: var(--f-urgent); --crit: var(--f-urgent); --danger: var(--f-urgent); --warn: var(--f-attention);
  /* survol : un lavis calcaire et l'encre, jamais une couleur */
  --survol-fond: var(--f-surface-2); --survol-texte: var(--f-encre); --survol-filet: var(--f-encre-3);
  --survol-plein: var(--f-encre-2); --survol-plein-encre: var(--f-fond);
  --survol-fond-profond: var(--f-surface-2); --survol-texte-profond: var(--f-encre); --survol-filet-profond: var(--f-encre-3);
  /* filets plutôt qu'ombres */
  --shadow-card: none; --shadow-card-hover: none; --shadow-glass: none; --shadow-accent: none;
  --shadow-elevated: 0 0 0 1px var(--f-filet); --shadow-modal: 0 0 0 1px var(--f-filet);
  --ombre: transparent;
  /* les chiffres et le mono prennent Inter, à chasse fixe (tabulaire) */
  --mono: Inter, system-ui, sans-serif; --font-mono: Inter, system-ui, sans-serif;
}
[data-interface="fil"] [data-app] { font-variant-numeric: tabular-nums; }
[data-interface="fil"] [data-app] .mono, [data-interface="fil"] [data-app] [class*="mono"] { font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* ---------- 2. Tête de page compacte ---------- */
[data-interface="fil"] [data-app] .tete, [data-interface="fil"] [data-app] .page-tete { padding-block: 14px 10px; }
[data-interface="fil"] [data-app] .tete > .ariane, [data-interface="fil"] [data-app] .page-tete .ariane { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: var(--f-encre-3); flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
[data-interface="fil"] [data-app] .ariane > * { flex: none; }
[data-interface="fil"] [data-app] .ariane > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-interface="fil"] [data-app] .tete-ligne { align-items: center; gap: 10px 20px; }
/* surtitre : gardé pour les lecteurs d'écran, plus affiché (le titre de la barre haute dit déjà où l'on est) */
[data-interface="fil"] [data-app] :is(.tete, .page-tete, .bande) .kicker { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-interface="fil"] [data-app] .tete .page-titre, [data-interface="fil"] [data-app] .page-tete .page-titre, [data-interface="fil"] [data-app] .c-titre.page-titre { font: 400 30px/1.15 'Instrument Serif', Georgia, serif; letter-spacing: 0; margin: 0; color: var(--f-encre); text-wrap: pretty; }
[data-interface="fil"] [data-app] .tete .chapo, [data-interface="fil"] [data-app] .page-tete .chapo { margin: 4px 0 0; max-width: none; font: 400 15px/1.45 Inter, system-ui, sans-serif; color: var(--f-encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-interface="fil"] [data-app] .tete-note { font-size: 12px; }
/* plus de capitales espacées nulle part dans l'espace de travail : casse normale, interlettrage normal */
[data-interface="fil"] [data-app] *:not(.f-coquille *) { text-transform: none; letter-spacing: normal; font-variant-caps: normal; }
/* un titre d'écran ne dépasse jamais 30 px ; l'italique d'un titre garde sa taille */
[data-interface="fil"] [data-app] :is(h1, h2, h3):not(.f-titre, .f-titre-domaine) i, [data-interface="fil"] [data-app] .c-titre i { font-size: inherit; }
[data-interface="fil"] [data-app] :is(.pp-titre, .im-titre, .act-titre, .bonjour-titre, .conv-f-titre, .une-titre, .act-sit-m) { font-size: 30px; line-height: 1.15; letter-spacing: 0; }
[data-interface="fil"] [data-app] .faits { margin-top: 10px; border-top: 1px solid var(--f-filet); border-bottom: 0; }
[data-interface="fil"] [data-app] .faits li { padding: 10px 16px 10px 14px; border-left-color: var(--f-filet); }
[data-interface="fil"] [data-app] .faits span { font: 500 12px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--f-encre-2); }
[data-interface="fil"] [data-app] .faits b, [data-interface="fil"] [data-app] .faits b.mono { font: 600 18px/1.2 Inter, system-ui, sans-serif; color: var(--f-encre); }
[data-interface="fil"] [data-app] .faits small { font-size: 12px; }
[data-interface="fil"] [data-app] .faits .est-critique b { color: var(--f-urgent); }
[data-interface="fil"] [data-app] .faits .est-alerte b { color: var(--f-attention); }
[data-interface="fil"] [data-app] .faits .est-ok b { color: var(--f-fait); }
/* bandes d'en-tête : le blanc, un filet dessous (plus de teinte de domaine ni de pétrole) */
[data-interface="fil"] [data-app] :is(.bande, .bande-domaine, .bande-simple, .bande-profil) { background: var(--f-surface); color: var(--f-encre); border-bottom: 1px solid var(--f-filet); }
[data-interface="fil"] [data-app] .bande-portail { background: var(--f-surface); color: var(--f-encre); --portail-fond: var(--f-surface); border-bottom: 1px solid var(--f-filet); }
[data-interface="fil"] [data-app] .bande-domaine .page-titre { color: var(--f-encre); }

/* ---------- 3. Sous-navigations en segments ---------- */
[data-interface="fil"] [data-app] .sousnav { display: flex; gap: 4px; margin: 10px 0 12px; padding: 4px; width: fit-content; max-width: 100%; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface-2); }
[data-interface="fil"] [data-app] .sousnav a { min-height: 44px; padding: 0 14px; border-radius: 10px; font: 500 14px/1 Inter, system-ui, sans-serif; color: var(--f-encre-2); }
/* couleur.css pose ces couleurs sous :root:is([data-couleur…]) : le préfixe :root garde l'avantage sans !important */
:root[data-interface="fil"] [data-app] .sousnav a:is(:hover, :active, :focus-visible), :root[data-interface="fil"] [data-app] .bande-domaine .sousnav a:not(.est-actif):is(:hover, :active) { color: var(--f-encre); background: var(--f-surface); }
:root[data-interface="fil"] [data-app] .sousnav a.est-actif, :root[data-interface="fil"] [data-app] .bande-domaine .sousnav a.est-actif, :root[data-interface="fil"] [data-app] .bande-portail .sousnav a:is(.est-actif, :hover, :active) { background: var(--f-encre); color: var(--f-fond); }
:root[data-interface="fil"] [data-app] .bande-portail .sousnav a:not(.est-actif):is(:hover, :active) { background: var(--f-surface); color: var(--f-encre); }
[data-interface="fil"] [data-app] .sousnav a.est-actif::after { display: none; }
/* une sous-navigation d'un seul lien ne dit rien de plus que le titre : elle n'est plus dessinée */
[data-interface="fil"] [data-app] .sousnav:has(> a:only-child) { display: none; }
[data-interface="fil"] [data-app] .sousnav-moments a { font-size: 14px; padding: 0 14px; }

/* ---------- 4. Volets : l'alternance calcaire / blanc, des filets ---------- */
[data-interface="fil"] [data-app] .volet { padding-block: 28px; border-top: 1px solid var(--f-filet); }
[data-interface="fil"] [data-app] .volet.est-profond { background: var(--f-surface); }
[data-interface="fil"] [data-app] .volet-mot { font: 400 24px/1.2 'Instrument Serif', Georgia, serif; letter-spacing: 0; margin: 0 0 8px; }
[data-interface="fil"] [data-app] .volet-phrase { font-size: 15px; line-height: 1.45; max-width: 52ch; padding-left: 12px; border-left: 2px solid var(--f-filet); }
[data-interface="fil"] [data-app] .volet.est-profond :is(.gravite-critique, .rub-etat-critique) { background: var(--f-urgent); color: var(--f-fond); border-radius: 6px; }
[data-interface="fil"] [data-app] .portail { background: var(--f-surface); color: var(--f-encre); border-top: 1px solid var(--f-filet); }
[data-interface="fil"] [data-app] :is(.portail-mot, .portail-entree b) { font-size: 24px; line-height: 1.2; letter-spacing: 0; }

/* ---------- 5. Boutons : casse normale, encre, rayon 14, 44 px ---------- */
/* :root devant : les feuilles de module posent la casse des boutons avec des sélecteurs plus précis */
:root[data-interface="fil"] [data-app] :is(button, .c-btn, .sf-btn, .btn, [role="button"], input[type="submit"], input[type="button"]) { font-family: Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; min-height: 44px; }
[data-interface="fil"] [data-app] :is(.c-btn, .sf-btn, .btn, [class*="-btn"]:not(.pg-seg-btn, .pg-nav-btn, .f-bouton), input[type="submit"]) { border-radius: 14px; font-size: 14px; font-weight: 500; }
[data-interface="fil"] [data-app] :is(.c-btn, .sf-btn, .btn) { padding: 0 18px; white-space: normal; text-align: center; }
[data-interface="fil"] [data-app] :is(.c-btn, .sf-btn, .btn):not(.c-btn-plein, .sf-btn-primary, .btn-primary, .sf-btn-danger) { background: var(--f-surface); color: var(--f-encre); border: 1px solid var(--f-filet); }
[data-interface="fil"] [data-app] :is(.c-btn, .sf-btn, .btn):not(.c-btn-plein, .sf-btn-primary, .btn-primary, .sf-btn-danger):hover { background: var(--f-surface-2); color: var(--f-encre); border-color: var(--f-encre-3); }
[data-interface="fil"] [data-app] :is(.c-btn-plein, .sf-btn-primary, .btn-primary) { background: var(--f-encre); color: var(--f-fond); border: 1px solid var(--f-encre); font-weight: 600; }
[data-interface="fil"] [data-app] :is(.c-btn-plein, .sf-btn-primary, .btn-primary):hover { background: var(--f-encre-2); border-color: var(--f-encre-2); color: var(--f-fond); }
[data-interface="fil"] [data-app] .sf-btn-danger { background: var(--f-surface); border: 1px solid var(--f-urgent); color: var(--f-urgent); }
[data-interface="fil"] [data-app] .c-btn.petit, [data-interface="fil"] [data-app] .sf-btn-sm, [data-interface="fil"] [data-app] .sf-btn-soft { padding: 0 14px; font-size: 14px; }
[data-interface="fil"] [data-app] .c-btn .ico, [data-interface="fil"] [data-app] .c-btn:hover .ico { transform: none; }
[data-interface="fil"] [data-app] a.sf-btn { display: inline-flex; align-items: center; justify-content: center; }
/* boutons glyphes (✎, ×, +) : carrés de 44 px */
[data-interface="fil"] [data-app] :is(.trb-del, .inf-urg-manage-btn) { min-width: 44px; border-radius: 14px; }
/* boutons discrets (liens-boutons, bascules) : la zone tactile grandit, le trait ne change pas */
[data-interface="fil"] [data-app] :is(.hub-plan-open, .hub-acc-head, .reu-fold-toggle) { display: inline-flex; align-items: center; }

/* ---------- 6. Champs de formulaire à 44 px ---------- */
[data-interface="fil"] [data-app] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"]), select) { min-height: 44px; font: 400 16px/1.3 Inter, system-ui, sans-serif; border-radius: 14px; border: 1px solid var(--f-filet); background: var(--f-surface); color: var(--f-encre); }
[data-interface="fil"] [data-app] textarea { font: 400 16px/1.45 Inter, system-ui, sans-serif; border-radius: 14px; border: 1px solid var(--f-filet); background: var(--f-surface); color: var(--f-encre); }
[data-interface="fil"] [data-app] :is(input, select, textarea):focus-visible { outline: 2px solid var(--f-encre); outline-offset: 2px; border-color: var(--f-encre-3); }

/* ---------- 7. Cartes à filets, plus d'ombres ---------- */
[data-interface="fil"] [data-app] :is(.cartes > li, .cartes > a) { border-left-width: 1px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); box-shadow: none; }
[data-interface="fil"] [data-app] :is(.cartes b, .cartes h3) { color: var(--f-encre); font-size: 18px; }
[data-interface="fil"] [data-app] :is(.pl-scroll, .pg-scroll) { box-shadow: none; }
[data-interface="fil"] [data-app] .mission.est-suivante { box-shadow: none; }

/* ---------- 8. Surfaces pétrole résiduelles ---------- */
[data-interface="fil"] [data-app] :is(.plan-tete-edition, .rec-sheet-head) { background: var(--f-surface-2); color: var(--f-encre); border: 1px solid var(--f-filet); border-radius: 14px; }
[data-interface="fil"] [data-app] :is(.rec-sheet-title, .rec-sheet-close) { color: var(--f-encre); }

/* ---------- 9. Pied de page : discret, sans chevauchement ---------- */
[data-interface="fil"] [data-app] footer.foot-strip { padding: 14px 20px 18px; border-top: 1px solid var(--f-filet); margin-top: 24px; min-width: 0; flex-wrap: wrap; gap: 8px 16px; }
[data-interface="fil"] [data-app] footer.foot-strip > span { font: 400 12px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--f-encre-3); }
[data-interface="fil"] [data-app] footer.foot-strip .foot-update-btn { min-height: 44px; padding: 0 14px; border-radius: 14px; font: 400 12px/1 Inter, system-ui, sans-serif; color: var(--f-encre-3); border: 1px solid var(--f-filet); background: transparent; }

/* ---------- 10. Retouches d'écrans ---------- */
/* Infirmerie : le numéro à dix chiffres du centre antipoison dépassait sa case (le libellé sortait de la tuile). */
[data-interface="fil"] [data-app] .inf-urg-ext { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
[data-interface="fil"] [data-app] .inf-urg-btn { flex-wrap: wrap; min-width: 0; }