/* =========================================================================
   Thème Phoss — direction A « Papier clair » (26.09.2026)
   Posé APRÈS phoss.css : il redéfinit les jetons et rhabille les composants
   sans toucher aux règles responsive mesurées au banc. Référence visuelle :
   le système « Ui » de refero (canvas #f5f5f5, papier #fff, Geist, pilules).
   Un seul accent, l'ambre, pour ce qui attend une décision et pour l'état
   actif ; le noir profond pour les actions ; le vert pour ce qui est
   encaissé ; le rouge pour ce qui est en retard. Rien d'autre.
   ========================================================================= */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --primaire:        #0a0a0a;
  --primaire-fonce:  #262626;
  --primaire-tint:   #ededed;
  --encre:           #0a0a0a;
  --encre-douce:     #525252;
  --encre-attenuee:  #6b6b6b;  /* #737373 faisait 4,3:1 sur --fond : sous AA (banc du 08.10.2026) */
  --bordure:         #e5e5e5;
  --bordure-forte:   #d4d4d4;
  --fond:            #f5f5f5;
  --surface:         #ffffff;
  --surface-douce:   #fafafa;
  --accent:          #f0b100;
  --accent-texte:    #7a5a00;
  --accent-tint:     #fff4cc;
  --succes:          #15803d;
  --succes-tint:     #dcfce7;
  --avert:           #8a5306;  /* #a16207 faisait 4,4:1 sur --avert-tint (pastille « Haute », banc du 08.10.2026) */
  --avert-tint:      #fef3c7;
  --danger:          #b91c1c;
  --danger-tint:     #fee2e2;
  --info:            #1d4ed8;
  --info-tint:       #dbeafe;
  --police:          "Geist", "Inter", -apple-system, "Segoe UI", sans-serif;
  --police-marque:   "Geist", "Inter", -apple-system, "Segoe UI", sans-serif;
  --rayon:           12px;
  --rayon-carte:     18px;
  --rayon-pilule:    999px;
  --ombre-volet:     0 12px 32px rgba(10, 10, 10, .10);
  --barre-laterale:  224px;
  --bandeau:         58px;
  accent-color:      #0a0a0a;
  color-scheme:      light;
}

/* Le mode sombre : choisi dans les paramètres (cookie phoss_theme), posé sur
   <html> au rendu. Les composants lisent les jetons, rien n'est écrit en dur. */
:root[data-theme="sombre"] {
  /* Jetons hérités de Mydas, employés par quelques ornements : une valeur sombre, sinon ils restent
     dorés et verts sur fond noir. `color-scheme` : les contrôles natifs (sélecteur, date, barre de
     défilement) suivent le thème — sans lui, le sélecteur Android s'ouvre blanc sur un écran sombre. */
  color-scheme: dark;
  --ombre-volet: 0 12px 32px rgba(0, 0, 0, .55);
  --or: #f5b400; --filet-or: #3a3b3f; --filet-or-faible: #2a2b2e; --vert-profond: #17181a; --sur-vert: #f5f5f5;
  --primaire: #f5b400; --primaire-fonce: #d99f00; --primaire-tint: #2a2410;
  --encre: #f5f5f5; --encre-douce: #c9c9c9; --encre-attenuee: #9a9a9a;
  --bordure: #2a2b2e; --bordure-forte: #3a3b3f; --fond: #0f0f10; --surface: #17181a; --surface-douce: #1d1e21;
  --accent: #f5b400; --accent-texte: #f5d47a; --accent-tint: #2a2410;
  --succes: #3fc27a; --succes-tint: #10271a; --danger: #ff5c5c; --danger-tint: #2b1414;
  --info: #7aa7ff; --info-tint: #141c2b; --avert: #f0b100; --avert-tint: #2a2410;
  accent-color: #f5b400;
}

html, body { font-size: 14px; letter-spacing: -.005em; }
h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 600; }
a { color: var(--encre); }
a:hover { color: var(--encre); }
.legende { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-attenuee); font-weight: 500; }

/* ======================= Coque : barre latérale en cartes ================ */
.laterale {
  background: var(--fond); background-image: none;
  border-right: none; padding: 10px 12px 12px;
}
.laterale-logo { padding: 8px 10px 14px; }
.wordmark .lettres { font-family: var(--police); font-weight: 700; letter-spacing: .16em; font-size: 13px; }
.laterale-menu { padding: 0; }
.laterale-carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte); padding: 6px; margin-bottom: 10px;
}
.laterale-groupe { padding: 6px 10px 4px; }
.laterale-groupe:first-child { padding-top: 6px; }
.laterale a.entree {
  padding: 8px 10px; margin: 1px 0; border-left: none; border-radius: 11px;
  color: var(--encre-douce); font-weight: 500;
  transition: background-color 150ms cubic-bezier(.22, 1, .36, 1), color 150ms cubic-bezier(.22, 1, .36, 1);
}
.laterale a.entree:hover { background: var(--fond); color: var(--encre); }
.laterale a.entree.active { background: var(--encre); color: var(--surface); border-left: none; }
.laterale a.entree.active .icone { color: var(--accent); }
.laterale-pied { border-top: none; padding: 0; }

/* ======================= Coque : bandeau épuré ============================ */
.bandeau { background: var(--fond); border-bottom: none; height: var(--bandeau); gap: 12px; padding: 0 20px 0 8px; }
.recherche-globale { max-width: 460px; }
.recherche-globale input {
  height: 38px; padding: 0 64px 0 36px; border-radius: var(--rayon-pilule);
  background: var(--surface); border: 1px solid var(--bordure);
  transition: border-color 150ms, box-shadow 150ms;
}
.recherche-globale input:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(10, 10, 10, .08); }
.recherche-globale .icone { left: 13px; top: 11px; }
.recherche-globale kbd { top: 10px; right: 12px; border-radius: 6px; background: var(--fond); }
.bandeau-compte { gap: 8px; }
.contenu { padding: 6px 24px 28px; }

/* Le menu « Nouveau » : un details natif, au clavier comme au doigt. */
.menu-nouveau { position: relative; }
.menu-nouveau > summary { list-style: none; cursor: pointer; }
.menu-nouveau > summary::-webkit-details-marker { display: none; }
.menu-nouveau-volet {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 190px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 14px; box-shadow: var(--ombre-volet);
  transform-origin: top right;
  animation: menu-ouvre 250ms cubic-bezier(.22, 1, .36, 1);
}
.menu-nouveau-volet a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; color: var(--encre); font-weight: 500; text-decoration: none;
}
.menu-nouveau-volet a:hover { background: var(--fond); text-decoration: none; }
.menu-nouveau-volet a .icone { width: 16px; height: 16px; color: var(--encre-attenuee); }
@keyframes menu-ouvre { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }

/* ======================= L'anneau métal (metal-fx, porté en CSS) ========= */
/* Un anneau d'acier qui tourne lentement autour du bouton principal. Porté
   depuis metal-fx (React, WebGL) en CSS pur : conic-gradient animé par une
   propriété enregistrée, masqué en anneau d'un pixel et demi. Il s'arrête
   dès que le système demande moins de mouvement. */
@property --angle-metal { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-metal { position: relative; isolation: isolate; }
.btn-metal::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--angle-metal), #dcdcdc, #8f8f8f, #fafafa, #6d6d6d, #e9e9e9, #a0a0a0, #dcdcdc);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tourne-metal 5s linear infinite;
  opacity: .9;
}
.btn-metal:hover::before { animation-duration: 2.2s; }
@keyframes tourne-metal { to { --angle-metal: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn-metal::before { animation: none; } }

/* ======================= Boutons en pilules ============================== */
.btn {
  height: 34px; padding: 0 16px; border-radius: var(--rayon-pilule);
  border-color: var(--bordure); font-weight: 500;
  transition: background-color 150ms, border-color 150ms, color 150ms, transform 120ms;
}
.btn:hover { border-color: var(--bordure-forte); background: var(--surface-douce); }
.btn-primaire { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.btn-primaire:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: var(--surface); }
.btn-secondaire { color: var(--encre); border-color: var(--bordure-forte); }
.btn-secondaire:hover { background: var(--fond); color: var(--encre); }
.btn-danger { color: var(--danger); border-color: var(--bordure); }
.btn-danger:hover { background: var(--danger-tint); border-color: var(--danger-tint); color: var(--danger); }
.btn-discret { border-color: transparent; }
.btn.desactive { opacity: .45; pointer-events: none; }
.btn-icone { width: 34px; min-width: 34px; }

/* ======================= Cartes, sections, fiches ========================= */
.carte { border-radius: var(--rayon-carte); }
.carte-entete { padding: 12px 18px; }
.fiche-section { padding: 18px; }
.fiche-entete { align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.fiche-titre { font-size: 22px; letter-spacing: -.02em; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fiche-actions { gap: 8px; }
.fiche-detail { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 0; }
.fiche-detail dt { color: var(--encre-attenuee); }
.fiche-detail dd { margin: 0; }
.grille-fiche { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.grille-tableau-bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .grille-fiche, .grille-tableau-bord { grid-template-columns: 1fr; } .index-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.liste-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-simple li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.liste-simple li:last-child { border-bottom: none; }
.lien-discret { color: var(--encre-douce); }
.prose { white-space: normal; }

/* ======================= Tableau de bord ================================= */
.index-chiffres {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  background: transparent; border: none; overflow: visible; margin-bottom: 0;
}
a.indicateur-carte { display: block; color: var(--encre); text-decoration: none; transition: border-color 150ms, transform 150ms; }
a.indicateur-carte:hover { border-color: var(--bordure-forte); text-decoration: none; transform: translateY(-1px); }
.indicateur-carte { padding: 16px 18px; }
.indicateur-carte .libelle { font-size: 11px; }
.indicateur-carte .valeur { font-size: 1.65rem; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; }
.indicateur-carte .texte-attenue { margin-top: 4px; font-size: 12px; }
.graphe-carte .graphe-barres { width: 100%; height: auto; display: block; margin-top: 6px; }
.graphe-barres .barre { fill: #d4d4d4; transition: fill 150ms; }
.graphe-barres .barre:hover { fill: var(--encre); }
.graphe-barres .barre--courante { fill: var(--accent); }
.graphe-barres .axe { font-family: var(--police); font-size: 11px; fill: var(--encre-attenuee); }

/* ======================= Listes, filtres, recherche ======================= */
.barre-actions { gap: 8px; margin-bottom: 14px; }
.champ-recherche {
  height: 34px; padding: 0 14px; min-width: 200px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-pilule); background: var(--surface); font: inherit; color: var(--encre);
}
.champ-recherche:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(10, 10, 10, .08); }
.filtre-pastille { border-radius: var(--rayon-pilule); padding: 5px 12px; font-weight: 500; }
.filtre-pastille.actif { background: var(--encre); color: var(--surface); border-color: var(--encre); }
table.liste th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-attenuee); font-weight: 500; }
table.liste td { padding-top: 9px; padding-bottom: 9px; }
table.liste tbody tr:hover td { background: var(--surface-douce); }
table.liste tfoot .total td { font-weight: 600; border-top: 1px solid var(--bordure-forte); }
.ligne-inactive td { color: var(--encre-attenuee); }
.compteur { font-variant-numeric: tabular-nums; }

/* ======================= Pastilles de statut ============================= */
.pastille { font-size: 12px; padding: 2px 10px; }
.pastille-statut { background: var(--fond); color: var(--encre-douce); border-color: var(--bordure); }
.statut-brouillon, .statut-annulee, .statut-dormant { color: var(--encre-douce); background: var(--fond); border-color: var(--bordure); }
.statut-envoye, .statut-a_facturer, .statut-a_relancer { color: var(--accent-texte); background: var(--accent-tint); border-color: transparent; }
.statut-accepte, .statut-encaissee, .statut-actif { color: var(--succes); background: var(--succes-tint); border-color: transparent; }
.statut-facturee, .statut-prospect { color: var(--info); background: var(--info-tint); border-color: transparent; }
.statut-refuse, .statut-expire { color: var(--danger); background: var(--danger-tint); border-color: transparent; }
.pastille-role { background: var(--fond); border-color: var(--bordure); color: var(--encre-douce); }
.pastille-role.pastille-accent { background: var(--accent-tint); color: var(--accent-texte); }

/* ======================= Champs ========================================== */
.champ label { font-size: 12.5px; color: var(--encre-douce); }
.champ input, .champ select, .champ textarea, .champ-nu {
  height: 36px; padding: 7px 12px; border-radius: 10px;
  background: var(--fond); border: 1px solid transparent;
  transition: border-color 150ms, background-color 150ms, box-shadow 150ms;
}
.champ input:focus, .champ select:focus, .champ textarea:focus, .champ-nu:focus {
  outline: none; background: var(--surface); border-color: var(--encre); box-shadow: 0 0 0 3px rgba(10, 10, 10, .08);
}
.champ textarea { min-height: 84px; }
.champ .aide { font-size: 12px; color: var(--encre-attenuee); margin-top: 4px; }
.champ-court { max-width: 120px; }

/* ======================= Onglets en pilules ============================== */
.onglets { display: inline-flex; gap: 2px; padding: 4px; background: var(--fond); border-radius: var(--rayon-pilule); border: none; }
.onglet { border: none; border-radius: var(--rayon-pilule); padding: 6px 14px; background: transparent; color: var(--encre-douce); font-weight: 500; }
.onglet.actif { background: var(--surface); color: var(--encre); box-shadow: 0 1px 2px rgba(10, 10, 10, .08); }

/* ======================= États vides ===================================== */
.etat-vide { border-radius: var(--rayon-carte); background: var(--surface-douce); }
.etat-vide--veine::before, .etat-vide--veine::after { display: none; }
.vd-veine { display: none; }

/* ======================= Navigation basse (téléphone) ==================== */
@media (max-width: 720px) {
  .bandeau { padding: 0 12px; height: 52px; }
  .contenu { padding: 6px 14px 104px; }
  .index-chiffres { grid-template-columns: 1fr 1fr; gap: 10px; }
  .indicateur-carte { padding: 12px 14px; }
  .indicateur-carte .valeur { font-size: 1.3rem; }
  .onglets-bas { background: var(--surface); border-top: 1px solid var(--bordure); border-radius: 22px 22px 0 0; }
  .onglets-bas .onglet { color: var(--encre-attenuee); border-radius: 14px; }
  .onglets-bas .onglet.actif { color: var(--encre); }
  .onglets-bas .onglet.actif .icone { color: var(--accent-texte); }
  .fiche-titre { font-size: 19px; }
  .menu-nouveau-volet { right: -8px; }
}

/* ======================= Entre 720 et 1024 px (tablette, téléphone couché) ===== */
/* Mesuré au banc le 27.09.2026 : à 768 px, le compte (nom, langues,
   déconnexion) sortait du bandeau de 48 px ; les onglets des paramètres
   tenaient sur une ligne de 881 px ; le fil d'Ariane rognait son premier
   lien de 27 px en téléphone couché. */
.bandeau > * { min-width: 0; }
.recherche-globale { flex: 1 1 140px; }
.onglets { display: flex; flex-wrap: wrap; }
@media (max-width: 1024px) {
  .bandeau-compte > *:not(form:last-of-type) { display: none; }
  .recherche-globale kbd { display: none; }
}
@media (max-width: 960px) {
  .fil-ariane { display: none; }
  .contenu { padding: 6px 16px 24px; }
}

/* ======================= Plus de motif : le papier, rien d'autre ============== */
/* Le socle peignait le marbre doré de Mydas (Veine d'Or) derrière l'application,
   la connexion et les états vides. Phoss est un papier clair : aucune image. */
body, body.connexion, .app, .contenu, .laterale, .bandeau, .connexion-scene, .etat-vide,
.etat-vide--veine, .cadre-or, .vd-tranche, .vd-veine, .vd-coin { background-image: none; }
body { background: var(--fond); }
.contenu .carte, .contenu .carte > *, .contenu .fiche-corps, table.liste, table.liste tr,
table.liste td, table.liste th, .liste--empilable tr { background-image: none; }
body::before, body::after, .app::before, .app::after, .contenu::before, .contenu::after,
.laterale::before, .laterale::after, .connexion-scene::before, .connexion-scene::after,
.etat-vide--veine::before, .etat-vide--veine::after { display: none; content: none; }

/* Le graphe : des barres plates, l'axe des mois en HTML pour que le texte garde
   sa taille à tous les formats. */
.graphe-carte .graphe-barres { height: 150px; }
.graphe-axe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 6px; }
.graphe-axe span { text-align: center; font-size: 12px; color: var(--encre-attenuee); }
@media (max-width: 720px) {
  .graphe-carte .graphe-barres { height: 110px; }
  .graphe-axe span:nth-child(odd) { visibility: hidden; }
  .col-optionnelle { display: none; }
  /* Quatre colonnes tiennent sur 390 px si le nom du client s'enroule et que
     les cellules resserrent leurs marges — sinon « Total » sortait du cadre. */
  table.liste th, table.liste td { padding-left: 8px; padding-right: 8px; }
  /* Le texte passe à la ligne, mais plus au milieu d'un mot (« Menuiseri/e Praz », 04.10.2026) : c'était
     `overflow-wrap: anywhere` qui faisait tenir de force une liste de plus en plus étroite. Une liste qui ne
     tient plus s'empile en cartes au téléphone debout (phoss.js) ; la coupure n'existe plus que dans la pile. */
  table.liste td:not(.num):not(.cel-actions):not(.tabulaire) { white-space: normal; }
  table.liste td.cel-titre { white-space: nowrap; }
  .pastille { padding: 2px 8px; font-size: 11.5px; }
}

/* ======================= Écrans publics (connexion) ====================== */
.connexion-scene { background: var(--fond); background-image: none; }
.cadre-or::before, .cadre-or::after { display: none; }
.connexion-filigrane { display: none; }
.connexion-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 22px; box-shadow: var(--ombre-volet); }
.connexion-embleme { width: 56px; height: 56px; color: var(--encre); }
.connexion-embleme canvas { display: block; width: 56px; height: 56px; }
.connexion-marque { font-family: var(--police); font-weight: 700; letter-spacing: .18em; color: var(--encre); }
.connexion-org { color: var(--encre-attenuee); }
.connexion-filet { background: var(--accent); }
.demo-compte { border-radius: 12px; }
.demo-compte:hover { background-color: var(--fond); border-color: var(--bordure-forte); }
.demo-compte--admin { border-color: var(--bordure-forte); }

/* ======================= Ce que le sombre ajuste ========================= */
:root[data-theme="sombre"] .graphe-barres .barre { fill: #34363a; }
:root[data-theme="sombre"] .graphe-barres .barre--courante { fill: var(--accent); }
:root[data-theme="sombre"] .btn-metal::before { background: conic-gradient(from var(--angle-metal), #ffe28a, #b98700, #fff4c2, #8f6a00, #ffd45c, #c99a00, #ffe28a); }
/* Encre sombre sur l'or : l'or pâle `--accent-texte` sur `--accent` faisait 1,3:1 (banc du 08.10.2026). */
:root[data-theme="sombre"] .laterale a.entree.active { background: var(--accent); color: var(--fond); }
:root[data-theme="sombre"] .laterale a.entree.active .icone { color: var(--fond); }
:root[data-theme="sombre"] .btn-primaire { background: var(--accent); border-color: var(--accent); color: #0f0f10; }
:root[data-theme="sombre"] .btn-primaire:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: #0f0f10; }
:root[data-theme="sombre"] .filtre-pastille.actif { background: var(--accent); color: #0f0f10; border-color: var(--accent); }
:root[data-theme="sombre"] .recherche-globale input:focus, :root[data-theme="sombre"] .champ input:focus,
:root[data-theme="sombre"] .champ select:focus, :root[data-theme="sombre"] .champ textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 180, 0, .18); }
:root[data-theme="sombre"] .flash { background: var(--surface); color: var(--encre); border: 1px solid var(--bordure); }
:root[data-theme="sombre"] .flash-error { background: var(--danger-tint); color: var(--danger); }
:root[data-theme="sombre"] .connexion-marque, :root[data-theme="sombre"] .connexion-embleme { color: var(--encre); }
:root[data-theme="sombre"] .onglets-bas .onglet.actif { color: var(--accent); }
:root[data-theme="sombre"] .pastille-statut { border-color: transparent; }
:root[data-theme="sombre"] img.picto, :root[data-theme="sombre"] .etat-vide-mosaique { filter: invert(1) hue-rotate(180deg); }

/* ======================= Le choix d'apparence (paramètres) =============== */
.choix-apparence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 360px; }
.carte-choix { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--bordure); border-radius: 14px; cursor: pointer; font-weight: 500; }
.carte-choix.actif { border-color: var(--encre); box-shadow: 0 0 0 3px rgba(10, 10, 10, .08); }
.carte-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.carte-choix .apercu { display: block; width: 100%; height: 56px; border-radius: 10px; border: 1px solid var(--bordure); }
.apercu-clair { background: linear-gradient(135deg, #f5f5f5 0 40%, #fff 40% 100%); }
.apercu-sombre { background: linear-gradient(135deg, #0f0f10 0 40%, #17181a 40% 100%); }

/* ======================= Les tuiles ne coupent jamais un montant ============ */
/* Le socle posait des points de suspension sur la valeur d'une tuile dès que
   la fenêtre se resserrait : un montant tronqué est un montant faux. La
   valeur se réduit, passe à la ligne si besoin, et les tuiles passent à deux
   colonnes plus tôt. */
.index-chiffres .valeur, .indicateur-carte .valeur {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  font-size: clamp(1.1rem, 1.4vw + .45rem, 1.65rem);
}
@media (max-width: 1180px) { .contenu .index-chiffres { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .contenu .index-chiffres { grid-template-columns: 1fr; } }


/* ======================= Thème sombre : ce que la vidéo du 08.10.2026 a montré ==================
   Johann a filmé www.phoss.tech au téléphone : les lignes d'une facture sur fond blanc, libellés gris
   dessus, et chaque tableau avec. Le voile « veine » de phoss.css (`.contenu table.liste …`, spécificité
   0,1,1) battait la remise à zéro écrite en 0,0,1 plus haut, et le cadre défilant posé par script
   sépare la carte du tableau (`.carte > *` ne l'atteint pas). Les règles ci-dessous s'écrivent à la
   spécificité du voile plus une. Mesuré par le banc : `--theme sombre`, constat « bloc clair en thème
   sombre » et « texte illisible ». */
:root[data-theme="sombre"] .contenu table.liste,
:root[data-theme="sombre"] .contenu table.liste th,
:root[data-theme="sombre"] .contenu table.liste td,
:root[data-theme="sombre"] .contenu .carte .fiche-corps,
:root[data-theme="sombre"] .contenu .carte > .fiche-corps,
:root[data-theme="sombre"] .contenu .carte,
:root[data-theme="sombre"] .vd-coin, :root[data-theme="sombre"] .vd-veine,
:root[data-theme="sombre"] .etat-vide--veine::before,
:root[data-theme="sombre"] .laterale::before { background-image: none; }

/* Un bouton secondaire se voit : sur une surface sombre, un filet `--bordure` (#2a2b2e sur #17181a)
   est invisible, et « Continuer » paraissait du texte posé là. */
/* Écrit en 0,2,1, cette règle battrait `.btn-primaire` (0,1,0) : le bouton principal est nommé à part. */
:root[data-theme="sombre"] .btn:not(.btn-primaire):not(.btn-danger) { background: var(--surface-douce); border-color: var(--bordure-forte); }
:root[data-theme="sombre"] .btn:not(.btn-primaire):not(.btn-danger):hover { background: var(--surface); border-color: var(--encre-attenuee); }
:root[data-theme="sombre"] .btn-primaire { background: var(--primaire); border-color: var(--primaire); color: var(--fond); }
:root[data-theme="sombre"] .btn-primaire:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: var(--fond); }
:root[data-theme="sombre"] .btn-discret { background: transparent; border-color: transparent; }
:root[data-theme="sombre"] .btn-discret:hover { background: var(--surface-douce); }

/* Un champ se distingue de sa carte : fond de page, filet fort. */
:root[data-theme="sombre"] .champ input, :root[data-theme="sombre"] .champ select,
:root[data-theme="sombre"] .champ textarea, :root[data-theme="sombre"] .champ-nu,
:root[data-theme="sombre"] .champ-recherche, :root[data-theme="sombre"] .selecteur-saisie {
  background: var(--fond); border-color: var(--bordure-forte); color: var(--encre);
}
:root[data-theme="sombre"] .selecteur-liste, :root[data-theme="sombre"] .selecteur-option {
  background: var(--surface); color: var(--encre);
}