/* ============================================================================
   CEDRUS Design — couche de thème de l'espace client
   ----------------------------------------------------------------------------
   À charger APRÈS `assets/styles.css`, `assets/espace-commun.css` et après le
   script Tailwind CDN, dans cet ordre :

       <script src="https://cdn.tailwindcss.com"></script>
       <link rel="stylesheet" href="assets/styles.css">
       <link rel="stylesheet" href="assets/cedrus-design.css">   <-- ici

   Ce fichier ne fait que de l'apparence : aucune règle ne déplace un élément
   hors de son flux, aucune ne masque quoi que ce soit. Retirer la ligne
   <link> rétablit exactement l'état antérieur — c'est la condition pour
   pouvoir déployer sans filet.

   Ce qu'il NE peut pas faire : réorganiser une mise en page écrite en classes
   utilitaires Tailwind (grilles, marges, ordre des blocs). Ces changements
   demandent une retouche du HTML — voir PLAN-DEPLOIEMENT.md, étape 3.
   ========================================================================== */

:root {
  /* Palette CEDRUS — reprise de tailwind.config.js et de la charte du site */
  --cdz-vert: #3E9364;
  --cdz-vert-clair: #4FA36F;
  --cdz-vert-fonce: #357A56;
  --cdz-vert-pale: #BFE6AE;
  --cdz-vert-fond: #F0FDF4;
  --cdz-or: #D4A853;
  /* Or lisible : #8A6620 tient 5,25:1 sur blanc, 4,92:1 sur --cdz-or-fond et
     4,77:1 sur l'ivoire du compte de résultat (l'ancien #B08A3E : 3,21:1). */
  --cdz-or-texte: #8A6620;
  --cdz-or-fond: #FEF7E7;
  --cdz-encre: #0B1420;
  --cdz-nuit: #0F1D2E;
  --cdz-gris: #6B7280;
  /* --cdz-gris-clair (2,54:1 sur blanc) ne sert plus qu'au décor : filets,
     icônes inertes. Tout texte lu passe par --cdz-gris-texte (5,98:1 sur
     blanc, 5,44:1 sur le crème de la page). */
  --cdz-gris-clair: #9CA3AF;
  --cdz-gris-texte: #5B6472;
  --cdz-papier: #F8FAF9;
  --cdz-filet: rgba(11, 20, 32, .08);
  --cdz-filet-fort: rgba(11, 20, 32, .12);
  --cdz-alerte: #991B1B;
  --cdz-alerte-fond: #FEE2E2;
  --cdz-attente: #B45309;
  --cdz-attente-fond: #FEF3C7;

  /* Bleu de la tuile « Trésorerie » : le liseré est décoratif, le libellé est
     du texte (7,21:1 sur blanc). */
  --cdz-bleu: #3B6FA0;
  --cdz-bleu-texte: #2F5A83;

  /* Le gris des textes secondaires de styles.css (#6B7280) tombe à 4,40:1 sur le
     crème de la page : on le remplace ici, la feuille de thème passant après. */
  --muted: #5B6472;

  /* Trois rayons, pas un de plus : cartes et tuiles 12 px, fenêtres 16 px, boutons
     et champs 8 px. Les pastilles et onglets en forme de gélule restent hors échelle. */
  --cdz-r-carte: 12px;
  --cdz-r-modale: 16px;
  --cdz-r-champ: 8px;
  --cdz-rayon: var(--cdz-r-carte);
  --cdz-rayon-min: var(--cdz-r-champ);
  --cdz-ombre: 0 1px 3px rgba(11, 20, 32, .05);
  --cdz-ombre-haute: 0 12px 30px rgba(11, 20, 32, .12);

  --cdz-titre: 'Playfair Display', Georgia, serif;
  --cdz-texte: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------------------------------------------------------------- 1. FOND */

body {
  background: var(--cdz-papier);
  color: var(--cdz-encre);
  font-family: var(--cdz-texte);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------- 2. TYPOGRAPHIE */
/* Les titres passent en Playfair : c'est le geste qui change le plus le
   ressenti, pour une seule règle. Les chiffres de tableau passent en
   tabular-nums, sans quoi les colonnes ne s'alignent pas. */

h1, h2, h3,
.hero-welcome .headline,
.kpi-number,
.carte-tete .t {
  font-family: var(--cdz-titre);
  font-weight: 600;
  letter-spacing: 0;
}

h1 { font-size: 1.85rem; line-height: 1.2; }
h2 { font-size: 1.2rem; line-height: 1.25; }
h3 { font-size: 1rem; line-height: 1.25; }

.tab, .pat, .inv,
.cd-num, .kpi-number,
td, th {
  font-variant-numeric: tabular-nums;
}

/* Sur-titres : la petite capitale espacée, marque de fabrique de la charte */
.cd-et, .etiq, .carte-tete .t {
  font-family: var(--cdz-texte);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cdz-gris);
}

/* --------------------------------------------------------- 3. SURFACES */
/* Une seule définition de carte pour tout l'espace : même rayon, même filet,
   même ombre. C'est l'hétérogénéité des cartes qui fait « bricolé ». */

.carte,
.cd-carte,
.panel,
.stat-card,
.ged,
.modal-panel,
.sel-panneau,
.carte-tab {
  background: #fff;
  border: 1px solid var(--cdz-filet);
  border-radius: var(--cdz-rayon);
  box-shadow: var(--cdz-ombre);
}

.modal-panel,
.sel-panneau {
  border-radius: var(--cdz-r-modale);
  box-shadow: var(--cdz-ombre-haute);
}

/* Fenêtres du tableau de bord (Tailwind `rounded-2xl` = 16 px) : le rayon passe par
   la variable, l'ombre propre à chaque fenêtre reste la sienne. */
.fixed.inset-0 > .rounded-2xl { border-radius: var(--cdz-r-modale); }

.cd-carte-hd,
.carte-tete {
  background: #fff;
  color: var(--cdz-encre);
  border-bottom: 1px solid var(--cdz-filet);
  padding: 16px 20px;
}

.carte-tete .c { color: var(--cdz-gris); }

/* Le filet d'or : un rappel de charte, jamais un cadre complet */
.cd-carte-hd::after,
.hero-welcome::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--cdz-or), rgba(212, 168, 83, 0));
}

/* ------------------------------------------------- 4. ACCUEIL / BANDEAU */

.hero-welcome {
  background: #fff;
  border: 1px solid var(--cdz-filet);
  border-radius: var(--cdz-r-carte);
  box-shadow: var(--cdz-ombre);
  padding: 26px 28px;
  color: var(--cdz-encre);
}

.hero-welcome .headline {
  font-size: 1.7rem;
  line-height: 1.22;
  color: var(--cdz-encre);
}

/* ------------------------------------------------------ 5. INDICATEURS */

.stat-card { padding: 18px 20px; }

.kpi-number {
  font-size: 1.55rem;
  line-height: 1;
  color: var(--cdz-encre);
  /* Un montant ne se coupe jamais au milieu : c'est le défaut le plus visible
     d'un tableau de bord chiffré. */
  white-space: nowrap;
}

/* Pastilles d'évolution — insécables, elles passent à la ligne entières */
.cd-pastille,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  white-space: nowrap;
  font-family: var(--cdz-texte);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 3px 8px;
  border-radius: 20px;
}

.cd-p-ok,   .badge-connected { background: var(--cdz-vert-fond);   color: var(--cdz-vert-fonce); }
.cd-p-warn, .badge-pending   { background: var(--cdz-attente-fond); color: var(--cdz-attente); }
.cd-p-crit, .badge-suspended { background: var(--cdz-alerte-fond);  color: var(--cdz-alerte); }
.cd-p-off                    { background: #F1F3F2;                color: var(--cdz-gris-texte); }

/* ---------------------------------------------------------- 6. TABLEAUX */
/* Filets horizontaux seuls, en-tête sur fond papier, pas de zébrures : sur
   des colonnes de montants, la zébrure ajoute du bruit sans aider la lecture. */

.tab, .pat, .inv {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.tab thead th, .pat thead th, .inv thead th {
  background: var(--cdz-papier);
  border-top: 1px solid var(--cdz-filet);
  border-bottom: 1px solid var(--cdz-filet);
  padding: 9px 14px;
  font-family: var(--cdz-texte);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cdz-gris);
  text-align: left;
}

.tab tbody td, .pat tbody td, .inv tbody td {
  border-bottom: 1px solid rgba(11, 20, 32, .05);
  padding: 11px 14px;
  vertical-align: middle;
}

.tab tbody tr:hover td,
.pat tbody tr:hover td { background: var(--cdz-papier); }

/* La ligne de total se lit d'un coup d'œil */
.tab tbody tr.total td,
.tab tbody tr.tot td,
.pat tbody tr.total td {
  background: var(--cdz-vert-fond);
  border-top: 1px solid var(--cdz-filet-fort);
  font-weight: 600;
}

.tab .vide, .cd-vide { color: var(--cdz-gris-texte); }
.tab .att, .cote-manque { color: var(--cdz-attente); font-weight: 600; }
.m2-alerte { color: var(--cdz-alerte); font-weight: 600; }

.tab-note, .legende, .src {
  font-family: var(--cdz-texte);
  font-size: 11px;
  line-height: 1.6;
  color: var(--cdz-gris-texte);
}

/* ----------------------------------------------------------- 7. BOUTONS */

.btn,
.btn-primary {
  background: var(--cdz-nuit);
  color: #fff;
  border: none;
  border-radius: var(--cdz-rayon-min);
  padding: 10px 16px;
  font-family: var(--cdz-texte);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn:hover,
.btn-primary:hover { background: #14213f; }

.btn-clair,
.btn-secondary {
  background: #fff;
  border: 1px solid var(--cdz-filet-fort);
  color: var(--cdz-encre);
  border-radius: var(--cdz-rayon-min);
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 500;
}

.btn-clair:hover,
.btn-secondary:hover { background: var(--cdz-papier); }

.btn-success {
  /* Le dégradé vert -> vert clair portait du blanc à 3,78:1 puis 3,09:1. */
  background: var(--cdz-vert-fonce);
  box-shadow: 0 6px 18px rgba(62, 147, 100, .24);
  color: #fff;
  border: none;
  border-radius: var(--cdz-rayon-min);
}

.btn-gold {
  background: var(--cdz-or);
  color: var(--cdz-encre);
  border: none;
  border-radius: var(--cdz-rayon-min);
  font-weight: 500;
}

.btn-min { border-radius: 6px; padding: 5px 11px; font-size: 11.5px; }

/* Liens d'action dans les listes et la GED */
.lien-act, .ged .lien-act, .inv .act button {
  color: var(--cdz-vert);
  font-weight: 500;
  font-size: 12px;
}
.lien-act:hover { color: var(--cdz-vert-fonce); text-decoration: none; }
.lien-retrait { color: var(--cdz-alerte); }

/* ----------------------------------------------------------- 8. ONGLETS */

.onglet {
  font-family: var(--cdz-texte);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cdz-encre);
  background: #fff;
  border: 1px solid var(--cdz-filet-fort);
  border-radius: 24px;
  padding: 9px 16px;
}

.onglet:hover { background: var(--cdz-papier); }

.onglet.actif,
.onglet[aria-selected="true"],
.onglet.on {
  /* Blanc sur --cdz-vert : 3,78:1. Sur --cdz-vert-fonce : 5,16:1. */
  background: var(--cdz-vert-fonce);
  border-color: var(--cdz-vert-fonce);
  color: #fff;
}

/* ------------------------------------------------------ 9. DÉPÔT DE PIÈCE */

.depot {
  border: 1px dashed var(--cdz-filet-fort);
  border-radius: var(--cdz-rayon-min);
  background: #fff;
  color: var(--cdz-gris);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
  padding: 16px 14px;
  transition: border-color .2s ease, background .2s ease;
}

.depot:hover,
.depot.survol {
  border-color: var(--cdz-vert);
  background: var(--cdz-vert-fond);
}

/* -------------------------------------------------------- 10. CHAMPS */

.champ,
.login-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  border: 1.5px solid #E5E7EB;
  border-radius: var(--cdz-r-champ);
  padding: 13px 15px;
  font-family: var(--cdz-texte);
  font-size: 14px;
  color: var(--cdz-encre);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Le halo vert à 12 % ne se voyait pas (1,14:1 contre le blanc) et
   `outline: none` retirait tout repère au clavier. Anneau plein de 2 px à la
   place. `:is(.champ, …)` porte la spécificité à (0,2,1) — celle de sa classe la
   plus fine, plus `:focus` et `body` : les utilitaires Tailwind `focus:outline-none`
   et `focus:border-cedrus-600` (0,2,0), injectés après cette feuille, ne
   l'effacent plus, sans qu'il faille un !important. */
body :is(.champ, .login-input, input, select, textarea):focus {
  outline: 2px solid var(--cdz-vert-fonce);
  outline-offset: 2px;
  border-color: var(--cdz-vert-fonce);
}

/* ------------------------------------------------- 11. ALERTES ET AVIS */

.alerte {
  background: var(--cdz-or-fond);
  border: 1px solid rgba(212, 168, 83, .4);
  border-left: 3px solid var(--cdz-or);
  border-radius: var(--cdz-rayon-min);
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--cdz-encre);
}

.ged .attend {
  background: var(--cdz-or-fond);
  color: var(--cdz-or-texte);
  font-size: 12.5px;
}

.ged .rien {
  color: var(--cdz-gris-texte);
  font-style: normal;
  font-size: 12.5px;
}

/* -------------------------------------------- 12. BARRE DE NAVIGATION */
/* Vaut pour l'espace dirigeant (.dc-nav) ; l'espace client, écrit en
   utilitaires Tailwind, se règle à l'étape 3 du plan. */

.dc-nav {
  background: var(--cdz-nuit);
  border: none;
  width: 248px;
  padding: 24px 16px;
}

.dc-marque {
  font-family: var(--cdz-titre);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
}

.dc-marque-sous {
  font-size: 7.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.dc-ni {
  border-radius: var(--cdz-rayon-min);
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}

.dc-ni:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.dc-ni.actif,
.dc-ni[aria-current="page"] {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-weight: 500;
}

.dc-dossier {
  background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--cdz-or);
  border-radius: 11px;
  padding: 14px;
  color: #fff;
}

/* Encart interlocuteur */
.cog { background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 14px; }
.cog .av { border-radius: 50%; background: var(--cdz-vert-pale); color: var(--cdz-vert-fonce); }

/* -------------------------------------------------------- 13. DIVERS */

.sel-fond { background: rgba(11, 20, 32, .42); }
.toast { border-radius: 11px; box-shadow: var(--cdz-ombre-haute); font-size: 13px; }

::-webkit-scrollbar-thumb { background: #D8DEDA; }
::-webkit-scrollbar-thumb:hover { background: var(--cdz-vert-clair); }

/* Un lien non stylé ne doit jamais retomber sur le bleu du navigateur */
a { color: var(--cdz-vert); text-decoration: none; }
a:hover { color: var(--cdz-vert-fonce); }

/* ------------------------------------------------------- 14. MOBILE */

@media (max-width: 767px) {
  h1 { font-size: 1.45rem; }
  .kpi-number { font-size: 1.35rem; }
  .hero-welcome { padding: 20px 18px; }
  .tab, .pat, .inv { font-size: 12px; }
  .tab thead th, .pat thead th { padding: 8px 11px; }
  .tab tbody td, .pat tbody td { padding: 10px 11px; }
  .dc-nav { width: 100%; }
}

/* --------------------------------------------------------- 15. IMPRESSION */

@media print {
  .dc-nav, .cog, .toast-stack, .btn, .btn-clair, .onglet { display: none !important; }
  .carte, .cd-carte, .panel, .stat-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* ============================================================================
   ÉTAPE 3.1 — Barre latérale sombre de l'espace client (accueil)
   ----------------------------------------------------------------------------
   Scopée par `.dc-nav-dark` posée sur #sidebar : retirer la classe (et remettre
   le fond crème inline) rétablit exactement l'état antérieur. Aucun !important —
   la spécificité de #sidebar.dc-nav-dark suffit à gagner contre les règles de
   composant et les utilitaires. Apparence seule : rien n'est déplacé ni masqué.
   ========================================================================== */
/* `.sidebar` fixe déjà son fond en linear-gradient !important : le seul moyen de
   le passer au nuit est un sélecteur plus spécifique portant lui aussi !important.
   Ce n'est pas le cas « utilitaire » que le plan proscrit — on écrase un !important
   existant, pas une classe Tailwind. */
#sidebar.dc-nav-dark { background: #182B4D !important; border-right: none !important; width: 248px; }

/* Marque + sous-titre */
#sidebar.dc-nav-dark .text-ink { color: #fff; }
#sidebar.dc-nav-dark .text-muted { color: rgba(255,255,255,.55); }

/* Les rubriques ne sont plus des cartes blanches : elles se posent sur le nuit */
#sidebar.dc-nav-dark .nav-encart {
  background: transparent; border: none; box-shadow: none;
  padding: 2px 0 6px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0;
}
#sidebar.dc-nav-dark .nav-encart:last-of-type { border-bottom: none; }
#sidebar.dc-nav-dark .nav-rubrique { color: rgba(255,255,255,.42); }

/* Items : texte clair, icône froide ; actif = voile clair + icône OR */
#sidebar.dc-nav-dark .nav-item { color: rgba(255,255,255,.74); }
#sidebar.dc-nav-dark .nav-item svg { color: rgba(255,255,255,.55); }
#sidebar.dc-nav-dark .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
#sidebar.dc-nav-dark .nav-item.active { background: rgba(255,255,255,.10); color: #fff; }
#sidebar.dc-nav-dark .nav-item.active svg { color: var(--cdz-or); }

/* « Dossier en cours » : fond translucide, liseré OR à gauche, texte clair */
#sidebar.dc-nav-dark #activeDossierCard {
  background: rgba(255,255,255,.06);
  border-left: 3px solid var(--cdz-or);
  border-radius: 11px;
}
#sidebar.dc-nav-dark #activeDossierCard .text-ink,
#sidebar.dc-nav-dark #activeClientName { color: #fff; }
#sidebar.dc-nav-dark #activeDossierCard .text-muted { color: rgba(255,255,255,.55); }
#sidebar.dc-nav-dark #activeDossierCard .text-cedrus-600 { color: var(--cdz-vert-pale); }

/* Sélecteur de langue */
#sidebar.dc-nav-dark .lang-btn { color: rgba(255,255,255,.72); }
#sidebar.dc-nav-dark .lang-btn:hover { background: rgba(255,255,255,.08); }

/* Bloc interlocuteur : nom clair, pastille d'initiales en vert pâle */
#sidebar.dc-nav-dark #sidebarName { color: #fff; }
#sidebar.dc-nav-dark #sidebarEmail { color: rgba(255,255,255,.55); }
#sidebar.dc-nav-dark #sidebarAvatar { background: var(--cdz-vert-pale); color: var(--cdz-nuit); }

/* Déconnexion et liens de pied */
#sidebar.dc-nav-dark .nav-item[onclick*="logout"],
#sidebar.dc-nav-dark a.nav-item { color: rgba(255,255,255,.74); }

/* ============================================================================
   RANGÉE D'INDICATEURS — filet d'accent à la palette CEDRUS
   ----------------------------------------------------------------------------
   Un liseré coloré en tête de chaque carte : les quatre indicateurs se lisent
   comme un jeu cohérent et se distinguent d'un coup d'œil. Apparence seule,
   scopée à la grille du tableau de bord.
   ========================================================================== */
.grille-indicateurs .tuile { position: relative; overflow: hidden; }

/* Chaque tuile devient un conteneur : le chiffre se dimensionne sur SA largeur
   (unité `cqi`, voir `.tuile-valeur` dans dashboard-client.html) et non sur celle
   de l'écran. À 1280 px, quatre tuiles tiennent chacune ~180 px de texte, et un
   montant à 7 chiffres ne rentrait plus à 2 rem : `white-space: nowrap` le
   rognait. La grille de tête (`.grille-atterrissage`) en a besoin aussi, pour
   la tuile vedette. */
.grille-indicateurs .tuile,
.grille-atterrissage .tuile { container-type: inline-size; }
.grille-indicateurs .tuile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cdz-filet);
}
.grille-indicateurs .carte-ca::before      { background: var(--cdz-vert); }
.grille-indicateurs .carte-dispo::before   { background: var(--cdz-bleu); }
.grille-indicateurs .carte-charges::before { background: var(--cdz-or); }
.grille-indicateurs .carte-ebe::before     { background: var(--cdz-vert-fonce); }

/* Le libellé reçoit une pointe de la couleur de sa carte — discrète, pour relier
   le filet au titre sans crier. */
.grille-indicateurs .carte-ca .tuile-libelle > span:first-child      { color: var(--cdz-vert-fonce); }
.grille-indicateurs .carte-dispo .tuile-libelle > span:first-child   { color: var(--cdz-bleu-texte); }
.grille-indicateurs .carte-charges .tuile-libelle > span:first-child { color: var(--cdz-or-texte); }
.grille-indicateurs .carte-ebe .tuile-libelle > span:first-child     { color: var(--cdz-vert-fonce); }

/* ============================================================================
   CARTE « MARGE ET CHARGES » — le tableau s'adapte à la largeur de sa carte
   ----------------------------------------------------------------------------
   Le tableau (#margeCorps, écrit par rendreMarge) pose trois colonnes de montants
   à largeur fixe — 96 + 90 + 72 = 258 px — et laisse le reste au libellé. Quand la
   carte ne pesait qu'un tiers de la rangée de tête (307 px à 1280 px), il restait
   1 px au libellé : coupé sur quatre lignes, montants posés dessus. Ce défaut est
   celui du tableau, présent avant la couche de thème ; ni `container-type` ni
   `--muted` n'y changent un pixel.

   Depuis que la carte occupe la moitié de la rangée (voir `#grilleTete` dans
   dashboard-client.html), trois états, mesurés sur la largeur de texte de la carte
   (déjà un conteneur, voir plus haut) :
     >= 520 px   tableau classique, tel que l'écrit le JavaScript ;
     380-519 px  tableau classique resserré : montants 86 + 78 + 60 px, marges de 6 px,
                 libellé en 12 px. À 1280 px (422 px de texte) le libellé garde ~198 px :
                 une ligne, deux pour « Achats MP & approvisionnements consommés » ;
     < 380 px    (téléphone) chaque ligne passe sur deux niveaux : le libellé en pleine
                 largeur, puis les trois montants dessous.
   Apparence seule : aucune cellule n'est déplacée dans le document ni masquée, hormis
   la cellule d'en-tête vide au-dessus des libellés. Les !important ne servent qu'à
   passer devant les `style` en ligne des cellules et des colonnes.
   ========================================================================== */
@container (min-width: 380px) and (max-width: 519px) {
  #margeCorps col:nth-child(2) { width: 86px !important; }
  #margeCorps col:nth-child(3) { width: 78px !important; }
  #margeCorps col:nth-child(4) { width: 60px !important; }
  #margeCorps td, #margeCorps th { padding-left: 6px !important; padding-right: 6px !important; }
  #margeCorps td:first-child { padding-left: 10px !important; font-size: 12px !important; }
}
@container (max-width: 379px) {
  #margeCorps table,
  #margeCorps thead,
  #margeCorps tbody { display: block; width: 100%; }
  #margeCorps colgroup { display: none; }
  #margeCorps tr {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr);
  }
  /* Le libellé occupe toute la ligne et se coupe proprement, sur deux lignes au plus
     pour les libellés les plus longs. */
  #margeCorps tbody td:first-child {
    grid-column: 1 / -1;
    padding: 8px 12px 0 !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  #margeCorps tbody td:not(:first-child) {
    padding: 2px 12px 8px !important;
    white-space: nowrap;
  }
  /* Les colonnes ne s'appuient plus sur des filets verticaux : ils couperaient le
     libellé en deux. */
  #margeCorps td, #margeCorps th { border-left: 0 !important; }
  #margeCorps thead th { padding: 7px 12px !important; }
  /* La cellule d'en-tête vide ne sert plus à rien : le libellé a sa propre ligne. */
  #margeCorps thead th:first-child { display: none; }
}

/* En-tête des deux graphiques mensuels : le titre et la phrase d'aide se touchaient
   (aucun espace entre eux) et l'aide était en gris clair (#9CA3AF, 2,54:1). */
#chartsMensuels .justify-between { gap: 12px; }
#chartsMensuels .justify-between > h3 { flex: 0 0 auto; }
#synthCAChartHint, #synthDispoChartHint {
  color: var(--cdz-gris-texte);
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
}

/* ============================================================================
   ACCESSIBILITÉ — focus, mouvement, lisibilité
   ----------------------------------------------------------------------------
   Apparence seule : aucune règle ne déplace ni ne masque un élément.
   ========================================================================== */

/* Focus clavier : un anneau plein, qui ne dépend pas de la couleur seule
   (--cdz-vert-fonce : 5,16:1 sur blanc, 4,69:1 sur le crème de la page). */
:focus-visible {
  outline: 2px solid var(--cdz-vert-fonce);
  outline-offset: 2px;
}

/* Les contrôles portent souvent `focus:outline-none` (Tailwind, spécificité
   (0,2,0), injecté après cette feuille). Cette règle monte à (0,2,1) pour que
   l'anneau reste visible sans !important. */
body :is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--cdz-vert-fonce);
  outline-offset: 2px;
}

/* Sur les barres nuit, le vert foncé disparaît : l'anneau passe au vert pâle
   (--cdz-vert-pale sur #182B4D : 10,15:1 ; le vert foncé n'y fait que 2,73:1). */
#sidebar.dc-nav-dark :focus-visible,
body .dc-nav :focus-visible,
body .dc-nav-dark :focus-visible {
  outline-color: var(--cdz-vert-pale);
}

/* Les textes secondaires Tailwind (`text-muted`) sortent de la couleur de
   styles.css : le config Tailwind du HTML les fixe à #6B7280 (4,40:1 sur le
   crème). On les ramène sur --muted, sans toucher au balisage. Les variantes
   `hover:`, `md:` ou `group-hover:` ont une spécificité >= (0,2,0) ou sont
   exclusives de la classe (aucune n'est associée à `text-muted` dans la page). */
body .text-muted { color: var(--muted); }

/* Mouvement réduit : plus d'animation ni de transition pour qui le demande.
   Ni l'apparition des sections (fadeIn), ni le squelette de chargement
   (shimmer), ni la pastille d'état (animate-ping). Les délais sont aussi
   remis à zéro : `.fade-in-delay` démarre à opacity 0 et resterait invisible
   le temps de son retard. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .skeleton, .animate-ping, .animate-pulse { animation: none !important; }
}