/* =========================================================================
   AEIES — charte du cabinet : marine profond & laiton
   Refonte du 23/08/2026.

   POURQUOI CE FICHIER EXISTE, ET POURQUOI IL RESSEMBLE À CELA
   -----------------------------------------------------------
   L'interface est écrite en React.createElement avec des classes utilitaires
   Tailwind dans 300 Ko de JavaScript. Réécrire ces milliers de chaînes une à
   une serait long, risqué et illisible en relecture. Le parti pris est donc
   inverse : ce fichier définit les jetons de la charte, puis REDÉFINIT ce que
   valent les quelques utilitaires neutres réellement employés lorsque le
   thème sombre est actif. Les composants n'ont pas à changer, et pour revenir
   en arrière il suffit de retirer le lien vers ce fichier.

   Deux règles non négociables, mesurées :
     · l'or #C9A800 ne porte jamais de texte sur blanc (2,3:1) — le texte doré
       est #8B7400 (4,6:1) et l'encre posée sur un aplat d'or est #07142A ;
     · l'anneau de focus n'est jamais doré : sur fond clair il disparaît.
   ========================================================================= */

:root{
  color-scheme:light;
  --vz-fond:#F5F7FB; --vz-surface:#FFFFFF; --vz-surface-2:#F7F9FC; --vz-surface-3:#ECF1F8;
  --vz-trace:#DCE3EE; --vz-trace-douce:#E8EDF4;
  --vz-encre:#12203A; --vz-encre-2:#4B5A75; --vz-encre-3:#66748C;
  --vz-marine:#1F3864; --vz-marine-clair:#2E4A7D;
  --vz-or:#C9A800; --vz-or-lum:#E9C93A; --vz-or-encre:#8B7400; --vz-sur-or:#07142A;
  --vz-focus:#2E75B6; --vz-focus-halo:rgba(46,117,182,.26);
  /* Qualification des aspects : l'axe sémantique de l'outil */
  --vz-aes:#C1372C;        /* significatif défavorable */
  --vz-pot:#B4620C;        /* à surveiller */
  --vz-sans:#4F7F27;       /* sans impact */
  --vz-noncote:#66748C;
  /* Une teinte par étape du parcours */
  --vz-e1:#2E75B6; --vz-e2:#8B7400; --vz-e3:#9A5522; --vz-e4:#C1372C;
  --vz-e5:#4F7F27; --vz-e6:#2E7D7D; --vz-e7:#5B6E8C;
  --vz-verre:rgba(255,255,255,.70); --vz-verre-haut:rgba(255,255,255,.94);
  --vz-verre-bord:rgba(18,32,58,.09); --vz-verre-flou:blur(18px) saturate(150%);
  --vz-ombre:0 14px 34px rgba(18,32,58,.10);
  --vz-ease:cubic-bezier(.22,1,.36,1);
}

.dark{
  color-scheme:dark;
  --vz-fond:#060B16; --vz-surface:#0C1526; --vz-surface-2:#0A1120; --vz-surface-3:#13203A;
  --vz-trace:#1E2B47; --vz-trace-douce:#17253E;
  --vz-encre:#EEF2F8; --vz-encre-2:#93A4C0; --vz-encre-3:#7F90AC;
  --vz-or-encre:#E9C93A;
  --vz-focus:#4E9CD4; --vz-focus-halo:rgba(78,156,212,.30);
  --vz-aes:#F0655A; --vz-pot:#F08A24; --vz-sans:#7FC24A; --vz-noncote:#7F90AC;
  --vz-e1:#4E9CD4; --vz-e2:#C9A800; --vz-e3:#C4763C; --vz-e4:#C4514A;
  --vz-e5:#7FB04A; --vz-e6:#3E9E9E; --vz-e7:#8296B4;
  --vz-verre:rgba(255,255,255,.055); --vz-verre-haut:rgba(255,255,255,.13);
  --vz-verre-bord:rgba(255,255,255,.10);
  --vz-ombre:0 18px 44px rgba(0,0,0,.55);
}

/* ---------- Le sol -------------------------------------------------------
   Pas de transition sur le fond du corps : dans un environnement qui n'anime
   pas (onglet en arrière-plan, capture, extension), la transition ne démarre
   jamais et le corps reste sur son ancienne couleur pendant que tout le reste
   bascule. Le changement de thème est donc instantané. */
html,body,#root{background:var(--vz-fond)}
/* `html body` et non `body` seul : Tailwind Play injecte SA feuille à
   l'exécution, donc APRÈS charte.css, et y pose body{color:#1f2937}. À
   spécificité égale, c'est la dernière feuille qui gagne — l'encre de la
   charte était donc écrasée, et tout élément sans classe de couleur restait
   en encre CLAIRE, y compris en thème sombre. Mesuré à 1,24:1 sur les
   libellés de cases à cocher de l'étape A2, sur les en-têtes de tableaux du
   tableau de bord, sur l'encadré du Guide. Un sélecteur d'un cran plus fort
   rend la main à la charte sans toucher à ce qui porte une classe. */
html body{color:var(--vz-encre)}

/* Nappe d'ambiance : sans matière derrière lui, le verre dépoli ne produit
   rien de visible. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 12% 0%, rgba(31,56,100,.08), transparent 68%),
    radial-gradient(44% 34% at 92% 4%, rgba(201,168,0,.10), transparent 70%);
}
.dark body::before{
  background:
    radial-gradient(58% 42% at 12% 0%, rgba(31,56,100,.55), transparent 68%),
    radial-gradient(44% 34% at 92% 4%, rgba(201,168,0,.10), transparent 70%);
}
#root{position:relative;z-index:1}

/* =========================================================================
   RATTRAPAGE DU THÈME SOMBRE
   Les utilitaires neutres réellement employés, redéfinis quand .dark est
   posée sur <html>. La spécificité (0,2,0) l'emporte sur celle de
   l'utilitaire (0,1,0) : aucun !important n'est nécessaire.
   Volontairement ABSENTS : text-white, border-white et les fonds colorés —
   ils sont posés sur des surfaces déjà colorées où ils restent justes.
   ========================================================================= */
.dark .bg-white{background-color:var(--vz-surface)}
.dark .bg-slate-50,.dark .bg-gray-50{background-color:var(--vz-surface-2)}
.dark .bg-slate-100,.dark .bg-gray-100{background-color:var(--vz-surface-3)}
.dark .bg-slate-200{background-color:#1A2740}
.dark .text-slate-900,.dark .text-slate-800,.dark .text-gray-900{color:var(--vz-encre)}
.dark .text-slate-700,.dark .text-slate-600,.dark .text-gray-600{color:#B7C4D9}
.dark .text-slate-500,.dark .text-slate-400,.dark .text-gray-500{color:var(--vz-encre-2)}
.dark .text-slate-300{color:var(--vz-encre-3)}
.dark .border-slate-100,.dark .border-slate-200,
.dark .border-slate-300,.dark .border-gray-200{border-color:var(--vz-trace)}
.dark .divide-slate-100 > * + *,.dark .divide-slate-200 > * + *{border-color:var(--vz-trace)}

/* Les fonds pâles de statut : sur sombre, un pastel devient une tache
   laiteuse. On le remplace par un voile de la même teinte, et le texte
   reprend une version lumineuse. */
.dark .bg-red-50{background-color:rgba(240,101,90,.15)}
.dark .text-red-700,.dark .text-red-600{color:var(--vz-aes)}
.dark .bg-orange-50{background-color:rgba(240,138,36,.15)}
.dark .text-orange-700,.dark .text-orange-600{color:var(--vz-pot)}
.dark .bg-green-50,.dark .bg-emerald-50{background-color:rgba(127,194,74,.15)}
.dark .text-green-700,.dark .text-green-600{color:var(--vz-sans)}
.dark .bg-yellow-50,.dark .bg-amber-50{background-color:rgba(233,201,58,.14)}
.dark .text-yellow-700,.dark .text-yellow-600{color:var(--vz-or-lum)}
.dark .bg-blue-50{background-color:rgba(78,156,212,.14)}
.dark .text-blue-700,.dark .text-blue-600{color:#6FB2E0}
.dark .border-red-200{border-color:rgba(240,101,90,.34)}
.dark .border-orange-200{border-color:rgba(240,138,36,.34)}
.dark .border-yellow-200{border-color:rgba(233,201,58,.32)}
.dark .text-vz-navy{color:var(--vz-encre)}

/* ---- Les fonds de SURVOL ------------------------------------------------
   Angle mort découvert le 26/08/2026 : le rattrapage ci-dessus porte sur des
   classes comme `bg-vz-bg`, mais Tailwind engendre la variante de survol sous
   un AUTRE nom de classe — `hover:bg-vz-bg`, dont le sélecteur est
   `.hover\:bg-vz-bg:hover`. `.dark .bg-vz-bg` ne l'atteint donc jamais. Les
   cinq fonds clairs employés au survol restaient clairs en thème sombre,
   sous une encre devenue blanc cassé : 1,01 à 1,12:1 — le texte disparaissait
   sous le curseur. Après bascule : 14 à 17:1.
   Les survols déjà foncés (vz-green2, vz-navy2, red-700) ne sont pas repris :
   ils portent du blanc et restent justes. */
.dark .hover\:bg-vz-bg:hover{background-color:var(--vz-surface-2)}
.dark .hover\:bg-slate-50:hover{background-color:var(--vz-surface-2)}
.dark .hover\:bg-vz-light:hover{background-color:var(--vz-surface-3)}
.dark .hover\:bg-white:hover{background-color:var(--vz-surface)}
.dark .hover\:bg-blue-100:hover{background-color:rgba(78,156,212,.20)}

/* ---- Les autres états : focus et case cochée ----------------------------
   Même mécanisme que le survol, mesuré le 26/08/2026 sur demande de Michael.
   · `focus:border-vz-navy` pose du marine #1F3864 sur la surface sombre :
     1,57:1. La bordure du champ actif était invisible — on ne voyait plus
     quel champ on éditait. La charte a bien `input:focus{border-color:
     var(--vz-focus)}`, mais sa spécificité (0,1,1) perd contre celle de
     l'utilitaire (0,2,0) : il faut donc viser l'utilitaire lui-même.
   · `accent-vz-navy` peint la coche des cases : marine sur fond sombre,
     1,62:1, une case cochée ne se distinguait plus d'une case vide.
   Les deux passent à 6,1–6,3:1, au-dessus des 3:1 exigés pour un élément
   d'interface. `checked:` et `active:` relevés dans les sources ne sont PAS
   des variantes Tailwind : ce sont des propriétés React, rien à rattraper.
   `disabled:opacity-40` descend à 3,52:1 et reste tel quel : signaler qu'un
   contrôle est inactif suppose de l'atténuer, et la WCAG l'exempte. */
.dark .focus\:border-vz-navy:focus{border-color:var(--vz-focus)}
.dark .accent-vz-navy{accent-color:var(--vz-focus)}
/* L'anneau posé par `focus:ring-vz-light` est un bleu très pâle, pensé pour
   un fond clair. Sur surface sombre il blanchit le pourtour du champ au lieu
   de le désigner. Il prend le halo de focus de la charte, qui est calibré
   pour les deux thèmes. */
.dark .focus\:ring-vz-light:focus{--tw-ring-color:var(--vz-focus-halo)}

/* Le fond général de l'application, écrit en dur dans index.html */
.dark body{background:var(--vz-fond)}
.dark ::-webkit-scrollbar-thumb{background:#2A3A57}
.dark input,.dark select,.dark textarea{
  background:var(--vz-surface-2);color:var(--vz-encre);border-color:var(--vz-trace);
}
.dark input::placeholder,.dark textarea::placeholder{color:var(--vz-encre-3)}

/* =========================================================================
   COMPOSANTS DE LA CHARTE
   ========================================================================= */

/* ---- Les couleurs de marque déclarées dans la config Tailwind -----------
   vz-navy, vz-bg et vz-light sont des couleurs de MARQUE, pensées pour un
   fond clair. Sur fond sombre, le marine devient invisible sur le marine :
   elles basculent donc sur les jetons d'encre. */
.dark .text-vz-navy,.dark .text-vz-navy2{color:var(--vz-encre)}
.dark .bg-vz-bg{background-color:var(--vz-surface-2)}
.dark .bg-vz-light{background-color:var(--vz-surface-3)}
.dark .border-vz-light{border-color:var(--vz-trace)}
/* Le marine #1F3864 encadre les encarts d'import (« Reprendre une étude de
   faisabilité », « Reprendre les impacts ») : 10,74:1 sur le fond clair, il
   dit clairement où commence l'outil. En thème sombre il tombe à 1,62:1 sur
   la surface et à 1,40:1 sur la surface-3 — le cadre disparaît, l'encart n'est
   plus tenu que par son fond à 1,16:1. Défaut vu à l'œil sur la capture du
   contrôle 3, invisible à l'auditeur de contraste qui ne mesure que du texte.
   #7F90AC (--vz-encre-3) rend 5,01 à 6,08:1 sur les quatre surfaces sombres.
   Pourquoi pas --vz-focus, qui est pourtant le report habituel du marine ici :
   parce qu'il sert déjà à la bordure de FOCUS (.dark .focus\:border-vz-navy).
   Le prendre au repos rendrait l'état de focus indiscernable de l'état normal. */
.dark .border-vz-navy{border-color:var(--vz-encre-3)}
.dark .text-vz-blue{color:#6FB2E0}
.dark .text-vz-gold{color:var(--vz-or-lum)}
.dark .border-green-300{border-color:rgba(127,194,74,.34)}
.dark .border-vz-blue{border-color:rgba(78,156,212,.45)}
/* Une carte d'étape blanche reste blanche : elle passe à la surface sombre. */
.dark .bg-white.border-slate-200,.dark .bg-white.border-slate-300{background-color:var(--vz-surface)}

/* ---- L'or ne porte jamais de blanc : #FFF sur #C9A800 = 2,31:1 ---------- */
.vz-btn-or{
  background:linear-gradient(135deg,var(--vz-or-lum),var(--vz-or));color:var(--vz-sur-or);
  border:none;box-shadow:0 8px 20px rgba(201,168,0,.22);
  transition:transform .28s var(--vz-ease),box-shadow .28s var(--vz-ease),background .28s var(--vz-ease);
}
.vz-btn-or:hover{background:linear-gradient(135deg,#F4D95E,#D8B506);transform:translateY(-2px)}

/* ---- Anneau de focus — jamais doré -------------------------------------- */
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--vz-focus);outline-offset:2px;border-radius:9px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--vz-focus);box-shadow:0 0 0 3px var(--vz-focus-halo);
}

/* ---- Verre dépoli sur les cartes ---------------------------------------- */
.card-shadow{
  background:linear-gradient(158deg,var(--vz-verre-haut),var(--vz-verre));
  border:1px solid var(--vz-verre-bord);
  -webkit-backdrop-filter:var(--vz-verre-flou);backdrop-filter:var(--vz-verre-flou);
  box-shadow:var(--vz-ombre),inset 0 1px 0 rgba(255,255,255,.65);
}
.dark .card-shadow{box-shadow:var(--vz-ombre),inset 0 1px 0 rgba(255,255,255,.09)}
.card-shadow-hover{transition:transform .35s var(--vz-ease),box-shadow .35s var(--vz-ease),border-color .35s var(--vz-ease)}
.card-shadow-hover:hover{transform:translateY(-3px);border-color:rgba(201,168,0,.30)}

/* ---- Étapes colorées : une teinte par étape du parcours -----------------
   La couleur dit à quel moment de la démarche on se trouve ; elle ne décore
   pas. Le code d'étape (A1, A2, B1…) porte la teinte de son groupe. */
.vz-etape{--vz-e:var(--vz-e1)}
.vz-etape .vz-puce{
  display:inline-block;width:7px;height:7px;border-radius:2.5px;background:var(--vz-e);
  box-shadow:0 0 9px color-mix(in srgb,var(--vz-e) 70%,transparent);
}
.vz-etape.actif{border-color:color-mix(in srgb,var(--vz-e) 45%,transparent)}

/* ---- Bouton de thème ---------------------------------------------------- */
.vz-theme{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;flex-shrink:0;font-size:15px;line-height:1;
  border:1px solid var(--vz-trace);background:var(--vz-surface-2);color:var(--vz-encre);
  cursor:pointer;
  transition:transform .3s var(--vz-ease),background .26s var(--vz-ease),border-color .26s var(--vz-ease);
}
.vz-theme:hover{background:var(--vz-surface-3);border-color:rgba(201,168,0,.42);transform:translateY(-1px)}
.vz-theme span{display:block;transition:transform .45s var(--vz-ease)}
.vz-theme:hover span{transform:rotate(28deg)}

/* ---- Diagramme de Sankey ------------------------------------------------
   Dessiné en SVG natif, sans librairie : l'application embarque déjà ses
   dépendances en local pour fonctionner hors ligne, on n'en ajoute pas. */
.sk-cadre{overflow-x:auto}
.sk-cadre svg{display:block;min-width:560px;width:100%;height:auto}
.sk-ruban{transition:opacity .35s var(--vz-ease)}
.sk-cadre:hover .sk-ruban{opacity:.24}
.sk-cadre .sk-ruban:hover{opacity:.92}
.sk-nom{font-size:12.5px;font-weight:600;fill:var(--vz-encre)}
.sk-val{font-size:11px;fill:var(--vz-encre-2)}
.sk-tete{font-size:10px;letter-spacing:.16em;font-weight:700;fill:var(--vz-encre-3)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* =========================================================================
   THÈME CLAIR — deux encres qui ne tenaient pas le seuil
   Contrôle 3 du 23/08/2026. Jusqu'ici seul le thème SOMBRE était redéfini ici :
   on avait supposé que les utilitaires Tailwind convenaient tels quels en
   clair. Deux ne conviennent pas, et l'un d'eux porte l'agrément du cabinet.

   · text-vz-gold vaut #C9A800 — l'or vif. Sur blanc : 2,31:1. C'est la ligne
     « APE N°000281/MEEC/SG/DGEPN » de la couverture, celle qu'un agent de la
     DGEPN cherche en premier. #7A6600 y tient 5,63:1 et reste de la même
     famille ; l'or vif garde tous les aplats et tous les fonds.
   · text-slate-400 vaut #94A3B8 : 2,56:1 sur blanc. Il porte la ligne de
     conformité réglementaire en pied de carte. #59677F tient 5,12:1.

   Ces deux règles ne portent PAS de préfixe .dark : elles valent pour le thème
   clair, et les règles .dark ci-dessus les reprennent ensuite.
   ========================================================================= */
/* Le préfixe `html` n'est pas décoratif : Tailwind Play fabrique ses classes
   à l'exécution et les injecte APRÈS cette feuille. À spécificité égale
   (0,1,0) c'est lui qui gagne — les deux règles ci-dessous sont restées sans
   effet jusqu'à ce qu'on le constate au contrôle suivant. `html .x` vaut
   (0,1,1) et passe devant, sans recourir à !important. */
/* Portée : l'or d'encre ne vaut que sur une surface CLAIRE. Première
   correction, trop large : la règle a aussi assombri le sigle « VZ », posé
   sur un carré marine (.bg-vz-navy) où l'or vif est juste — il y est tombé
   à 2,06:1. Une paire encre/fond ne se corrige qu'ensemble : on exclut donc
   les éléments qui portent eux-mêmes un fond sombre. */
html .text-vz-gold:not(.bg-vz-navy):not(.bg-vz-navy-2){color:#7A6600}
/* Même famille de défaut, mesurée le 26/08/2026 sur le module Rédaction :
   le bleu de marque #2E75B6 tient 4,84:1 sur du blanc pur — il passe — mais
   l'application n'écrit jamais sur du blanc pur. Sur son fond réel (#F4F6FA)
   il tombe à 4,48:1, sur le bandeau clair (#EAF1FB) à 4,26:1 : il échoue là
   où on le lit. Un cran plus sombre le remet à 5,02 / 4,84 / 4,78:1 sur les
   trois fonds. La règle est gardée en thème CLAIR seulement : le thème sombre
   a déjà son propre bleu (.dark .text-vz-blue), calibré sur surface sombre. */
html:not(.dark) .text-vz-blue{color:#2B6DA9}
html .text-slate-400{color:#59677F}
html .text-slate-500{color:#4B5A75}   /* la devise du cabinet en pied de carte */

/* =========================================================================
   MODULE FACTURATION — chronogramme (04/09/2026)
   Le tableau de Gantt : première colonne collante, une colonne par semaine,
   les barres peintes avec la teinte de la nature de la phase (--vz-teinte,
   posée en ligne sur la cellule, vaut un jeton --vz-e1…e7 de la charte).
   Aucune couleur en dur : la barre suit le thème comme le reste.
   ========================================================================= */
.vz-gantt{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%}
.vz-gantt th,.vz-gantt td{border-bottom:1px solid var(--vz-trace-douce);padding:0;vertical-align:middle}
.vz-gantt thead th{background:var(--vz-surface-2);color:var(--vz-encre-2);font-weight:700;font-size:11px}
.vz-gantt .vz-gantt-libelle{position:sticky;left:0;z-index:1;background:var(--vz-surface);
  min-width:240px;max-width:300px;padding:6px 12px;text-align:left}
.vz-gantt thead .vz-gantt-libelle{background:var(--vz-surface-2)}
.vz-gantt .vz-gantt-ctl{width:64px;min-width:64px;padding:4px 4px;text-align:center;border-left:1px solid var(--vz-trace-douce)}
.vz-gantt .vz-gantt-num{width:56px;padding:3px 4px;border:1px solid var(--vz-trace);border-radius:6px;
  background:var(--vz-surface);color:var(--vz-encre);font-size:12px;text-align:center}
.vz-gantt .vz-gantt-sem{width:30px;min-width:30px;text-align:center;padding:4px 0;border-left:1px solid var(--vz-trace-douce)}
.vz-gantt .vz-gantt-date{font-weight:500;font-size:9px;color:var(--vz-encre-3)}
.vz-gantt-cell{height:34px;border-left:1px solid var(--vz-trace-douce)}
.vz-gantt-cell.on{background:var(--vz-teinte,var(--vz-marine))}
.vz-gantt-cell.on.debut{border-radius:7px 0 0 7px}
.vz-gantt-cell.on.fin{border-radius:0 7px 7px 0}
.vz-gantt-manuel .vz-gantt-libelle{box-shadow:inset 3px 0 0 var(--vz-or)}
.vz-gantt-jalons td{background:var(--vz-surface-2)}
.vz-gantt-jalon{position:relative}
.vz-gantt-jalon::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;
  background:var(--vz-or);transform:translate(-50%,-50%) rotate(45deg);border:2px solid var(--vz-surface)}
/* Pastille de nature : la teinte sert d'encre sur un voile de la même teinte —
   lisible dans les deux thèmes, sans blanc en dur. */
.vz-nature{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;
  color:var(--vz-teinte,var(--vz-marine));background:color-mix(in srgb,var(--vz-teinte,var(--vz-marine)) 16%,transparent)}
.vz-gantt-nature{font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;border:1px solid transparent;
  color:var(--vz-teinte,var(--vz-marine));background:color-mix(in srgb,var(--vz-teinte,var(--vz-marine)) 16%,transparent);
  max-width:210px}
.vz-gantt-nature option{color:var(--vz-encre);background:var(--vz-surface)}
/* Chronogramme du projet (section B3) : les activités en barre pâle sous la
   barre pleine de leur phase ; la ligne de phase sur la surface secondaire. */
.vz-gantt-cell.on.act{opacity:.55}
.vz-gantt-phase .vz-gantt-libelle,.vz-gantt-phase .vz-gantt-ctl{background:var(--vz-surface-2)}