/* ============================================================
   DCP — Variables de thème
   Bascule via data-theme="clair" | data-theme="sombre" sur <html>
   ============================================================ */

:root,
[data-theme="clair"] {
  --bg:               #FBFAF6;
  --surface:          #F4F1EA;
  --surface-alt:      #ECEAE1;
  --text-primary:     #0F1F33;
  --text-secondary:   #4A5568;
  --border:           #D8D4C8;
  --accent-gold:      #BF9100;
  /* Or de texte, distinct de l'or de marque : celui-ci sert aux petits
     libelles, souvent en capitales a 11px, et doit tenir le 4.5:1 sur les
     trois fonds clairs. #966E0A n'y arrivait sur aucun (4.44/4.11/3.84). */
  --accent-gold-text: #856009;
  --accent-blue:      #7FA8C9;
  --accent-blue-light:#CFE0EC;
  --status-ok-bg:     #E7F0E9;
  /* Le vert sert aussi de texte (« Demain, avec le DCP », la reponse du
     protocole dans le hero). #4C7A5C ne passait que sur le fond de page,
     et tombait a 4.10 des qu'il etait pose sur une carte. */
  --status-ok-text:   #457055;
  --status-err-bg:    #F7E6E3;
  --status-err-text:  #B23A2E;
  /* Blocs inverses : ceux dont le fond est --text-primary. Comme ce fond
     bascule du marine au papier selon le theme, leur texte ne peut pas
     reutiliser les jetons courants, qui basculent dans le meme sens et
     deviendraient illisibles. En clair, le bloc est marine. */
  --sur-inverse:      #FBFAF6;
  --sur-inverse-doux: #CFE0EC;
  --sur-inverse-lien: #BF9100;
  /* Teintes de vendeur, pour les schemas animes : cinq paires fond pale
     et accent, une par vendeur. Volontairement eloignees du rouge (sans
     le DCP) et du vert (avec), et peu saturees : elles disent « un autre
     vendeur », pas « bien » ni « mal ». Les teintes se suivent en
     alternant les familles (indigo 241°, ambre 30°, ardoise 211°, mauve
     292°, sarcelle 178°) pour que deux vendeurs consecutifs se distinguent
     au premier coup d'oeil : l'ardoise venait juste apres l'indigo et
     l'ecart ne se voyait pas. Indigo : 5.01:1 icone sur fond, 8.52:1
     libelle sur zone a 35 % ; ambre : 4.69:1 et 8.60:1. */
  --vendeur-1-fond:   #E8E6F2;
  --vendeur-1-accent: #5B5A9E;
  --vendeur-2-fond:   #F6E8D3;
  --vendeur-2-accent: #96581A;
  --vendeur-3-fond:   #E3EAF2;
  --vendeur-3-accent: #4A6A8C;
  --vendeur-4-fond:   #EBE3EF;
  --vendeur-4-accent: #7A5580;
  --vendeur-5-fond:   #DDEDEC;
  --vendeur-5-accent: #3F7A78;

  --shadow:           0 2px 8px rgba(15, 31, 51, 0.10);
  --shadow-header:    0 1px 4px rgba(15, 31, 51, 0.12);
  --logo-src:         url('/images/logo_light_trans.png');
  --signature-src:    url('/images/signature_navy.png');
}

[data-theme="sombre"] {
  --bg:               #0F1F33;
  --surface:          #1B3A5C;
  --surface-alt:      #152E4A;
  --text-primary:     #F4F1EA;
  --text-secondary:   #A8B8C8;
  --border:           #2A4A6A;
  --accent-gold:      #BF9100;
  /* Meme raison en sombre, en sens inverse : l'or de marque tombait a
     4.02 sur le fond teinte, celui des cartes de renversement. */
  --accent-gold-text: #D2A517;
  --accent-blue:      #7FA8C9;
  --accent-blue-light:#CFE0EC;
  --status-ok-bg:     #1A3D26;
  --status-ok-text:   #7EC89A;
  --status-err-bg:    #3D1A18;
  --status-err-text:  #E88880;
  /* En sombre, le bloc inverse est papier : son texte redevient sombre. */
  --sur-inverse:      #0F1F33;
  --sur-inverse-doux: #3E4C5E;
  --sur-inverse-lien: #7A5A08;
  /* Memes vendeurs en sombre : fond fonce, accent eclairci. */
  --vendeur-1-fond:   #28284A;
  --vendeur-1-accent: #A9A8DC;
  --vendeur-2-fond:   #3E2C14;
  --vendeur-2-accent: #E0A868;
  --vendeur-3-fond:   #1E3350;
  --vendeur-3-accent: #8FB0D0;
  --vendeur-4-fond:   #33253A;
  --vendeur-4-accent: #B892C0;
  --vendeur-5-fond:   #1F3A39;
  --vendeur-5-accent: #7FBFBB;

  --shadow:           0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-header:    0 1px 4px rgba(0, 0, 0, 0.40);
  --logo-src:         url('/images/logo_night_trans.png');
  --signature-src:    url('/images/signature_paper.png');
}

/* ------------------------------------------------------------
   Avant / sans le DCP, contre avec le DCP

   Regle d'ensemble du site : tout ce qui montre la situation AVANT ou SANS
   le protocole se pose sur un rouge leger ; tout ce qui montre la situation
   AVEC lui se pose sur du vert. Chaque couleur vient en deux intensites, le
   fond tres pale et l'accent soutenu (bord, libelle, marqueur) : c'est cette
   gradation qui porte la lecture, pas une couleur pleine.

   Alias volontaires : une seule source de verite reste la famille
   --status-*, deja calibree en contraste dans les deux themes. Les declarer
   apres les deux blocs suffit, var() resolvant la valeur du theme actif.

   S'en servir partout ou le site oppose les deux etats : la comparaison de
   Cas d'usage, les apercus de l'accueil, les cartes de renversement. Ne PAS
   s'en servir pour la colonne des apports, qui porte deja le rouge des
   irregularites et le bleu des eclairages : la couleur y dit la nature de
   ce qui est trouve, pas la presence du protocole.
   ------------------------------------------------------------ */
:root {
  --sans-dcp-fond:   var(--status-err-bg);
  --sans-dcp-accent: var(--status-err-text);
  --avec-dcp-fond:   var(--status-ok-bg);
  --avec-dcp-accent: var(--status-ok-text);
}