/* =========================================================================
   Thème Lex — orange et blanc (Johann, 30.09.2026)
   Posé APRÈS lex.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'orange, pour ce qui attend une décision, pour l'état
   actif et pour les actions (orange plein, texte blanc à 4.8:1) ; le vert pour ce qui est
   encaissé ; le rouge pour ce qui est en retard. Rien d'autre.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Le cyrillique d'Inter (lot D, 04.10.2026), chargé seulement quand une page en a besoin. */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-cyrillique.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --primaire:        #C8480C;
  --primaire-fonce:  #A13A08;
  --primaire-tint:   #FFEDD5;
  --encre:           #1C1917;
  --encre-douce:     #57534E;
  --encre-attenuee:  #6B655F;  /* #78716C faisait moins de 4,5:1 sur un bloc teinté (légende de la fiche courrier, banc du 08.10.2026) */
  --bordure:         #EFE6DF;
  --bordure-forte:   #DDD0C6;
  --fond:            #FFF7F1;
  --surface:         #ffffff;
  --surface-douce:   #FFFBF7;
  --accent:          #C8480C;
  --accent-texte:    #9A3412;
  --accent-tint:     #FFEDD5;
  --succes:          #15803d;
  --succes-tint:     #dcfce7;
  --avert:           #8a5306;  /* #B45309 faisait 4,4:1 sur --avert-tint (pastille « à confirmer », banc du 08.10.2026) */
  --avert-tint:      #FFEDD5;
  --danger:          #b91c1c;
  --danger-tint:     #fee2e2;
  --info:            #1d4ed8;
  --info-tint:       #dbeafe;
  --police:          "Inter", -apple-system, "Segoe UI", sans-serif;
  --police-marque:   "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:      #C8480C;
  color-scheme:      light;
}

/* Le mode sombre : choisi dans les paramètres (cookie lex_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: #FF8A3D; --filet-or: #3a3b3f; --filet-or-faible: #2a2b2e; --vert-profond: #17181a; --sur-vert: #f5f5f5;
  --primaire: #FF8A3D; --primaire-fonce: #F26B1D; --primaire-tint: #3A1D0C;
  --encre: #f5f5f5; --encre-douce: #c9c9c9; --encre-attenuee: #9a9a9a;
  --bordure: #2a2b2e; --bordure-forte: #3a3b3f; --fond: #0f0f10; --surface: #17181a; --surface-douce: #1d1e21;
  --accent: #FF8A3D; --accent-texte: #FDBA74; --accent-tint: #3A1D0C;
  --succes: #3fc27a; --succes-tint: #10271a; --danger: #ff5c5c; --danger-tint: #2b1414;
  --info: #7aa7ff; --info-tint: #141c2b; --avert: #f0b100; --avert-tint: #2a2410;
  accent-color: #FF8A3D;
}

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-inline-end: none; padding: 10px 12px 12px;
}
/* La marque : la pastille et « Lex » en Inter très gras (Johann, 04.10.2026). */
.laterale-logo { padding: 8px 10px 14px; display: flex; align-items: center; gap: 10px; }
.wordmark .picto { width: 28px; height: 28px; }
.wordmark .lettres { font-family: var(--police); font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-indent: 0; text-transform: none; color: var(--encre); }
.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-inline-start: 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(--primaire); color: #fff; border-inline-start: none; }
.laterale a.entree.active .icone { color: #fff; }
.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(200, 72, 12, .14); }
.recherche-globale .icone { inset-inline-start: 13px; top: 11px; }
.recherche-globale kbd { top: 10px; inset-inline-end: 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; inset-inline-end: 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; } }

/* ======================= 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(--primaire); border-color: var(--primaire); color: #fff; }
.btn-primaire:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: #fff; }
.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(200, 72, 12, .14); }
.filtre-pastille { border-radius: var(--rayon-pilule); padding: 5px 12px; font-weight: 500; }
.filtre-pastille.actif { background: var(--primaire); color: #fff; border-color: var(--primaire); }
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(200, 72, 12, .14);
}
.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(200, 72, 12, .14); }

/* ======================= É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 { inset-inline-end: -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. Lex 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-inline-start: 8px; padding-inline-end: 8px; }
  /* Le texte passe à la ligne aux espaces, jamais au milieu d'un mot : un mot qui ne tient pas fait déborder la liste,
     qui s'empile au téléphone debout et défile dans son cadre dès le téléphone couché (banc du 04.10.2026 :
     « Administration » sur sept lignes). */
  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: 800; letter-spacing: -.02em; text-indent: 0; text-transform: none; 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); }
:root[data-theme="sombre"] .laterale a.entree.active { background: var(--accent); color: #1C1917; }
:root[data-theme="sombre"] .laterale a.entree.active .icone { color: #1C1917; }
: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(--primaire); box-shadow: 0 0 0 3px rgba(200, 72, 12, .14); }
.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, #FFF7F1 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; } }

/* Lex : « Déposer » au centre de la barre basse, mis en avant (09 § 4.1). */
.onglets-bas .onglet-principal { color: var(--primaire); font-weight: 600; }
.onglets-bas .onglet-principal svg { background: var(--primaire); color: var(--surface); border-radius: 999px; padding: 6px; box-sizing: content-box; }

/* ======================= Paramètres de Lex ================================ */
.reglages-etroit { max-width: 520px; padding: 16px; }
.reglages-large { max-width: 560px; padding: 16px; display: grid; gap: 12px; }
.apropos__nom { font-family: var(--police-marque); font-size: 1.4rem; font-weight: 750; color: var(--primaire); }
.choix-apparence + .btn { margin-top: 12px; }

/* De droite à gauche (lot E) : le menu « + Nouveau » s'ouvre depuis son coin gauche. */
[dir="rtl"] .menu-nouveau-volet { transform-origin: top left; }


/* ======================= Thème sombre : ce que la vidéo du 08.10.2026 a montré (sur Phoss, même socle) ==
   Le voile « veine » de lex.css (`.contenu table.liste …`, spécificité 0,1,1) bat 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) : chaque tableau restait blanc en sombre, texte blanc dessus.
   Les règles ci-dessous s'écrivent à la spécificité du voile plus une. Mesuré par le banc :
   `--theme sombre`, constats « 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. Écrit en 0,2,1, la règle battrait `.btn-primaire` (0,1,0) : il 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-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);
}