/* ============================================================================
   pf-marque.css — Charte commune des pages publiques PulsiForms (07/11/2026)
   ----------------------------------------------------------------------------
   UNE seule source pour les couleurs, la police et les gestes de base de :
   vitrine (/), /dsi, docs/devpf.html, docs/pfstdlib2.html, guide-ultime.html,
   status.html. Chaque page charge cette feuille AVANT la sienne, par empreinte
   ?v=, puis remappe ses variables locales sur les --pf-* ci-dessous : aucune
   couleur de la charte n'est écrite ailleurs qu'ici.
   Verrou : tests/regression/charte-commune.test.js [CHARTE-01..08].

   Charte figée par Didier le 07/11 (turquoise « B ») :
     encre #1E1B4B · texte secondaire #4B4880 · indigo #5A4AE0 (liens)
     magenta #A21CAF (mises en valeur) · turquoise #5EC9D8 en FOND de bouton,
     texte encre (8,24:1 ; jamais de blanc dessus), survol #4AB6C6
     dégradé du logo #D946EF → #7C5CFC → #22D3EE : filets fins, halo, bandeau ;
     jamais sur du texte · fond blanc, fond doux #F8F7FE, filets #E6E3F7.

   Polices AUTO-HÉBERGÉES (fonts/, licence OFL jointe) : une seule déclaration,
   ici. font-src 'self' suffit sur les six CSP ; status.html, dont style-src
   n'autorise pas le service de polices de Google, a donc la même police que
   les autres, et aucune page n'appelle plus Google pour s'afficher.
   ============================================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Palette (constantes : ne changent jamais avec le thème)
   -------------------------------------------------------------------------- */
:root {
  --pf-encre: #1E1B4B;
  --pf-encre-2: #4B4880;          /* texte secondaire, 8,27:1 sur blanc */
  --pf-encre-3: #5F5C8F;          /* méta, légendes, 6,15:1 sur blanc */
  --pf-indigo: #5A4AE0;           /* liens, 6,02:1 sur blanc */
  --pf-indigo-survol: #4A3BD0;
  --pf-magenta: #A21CAF;          /* mises en valeur, 6,32:1 sur blanc */
  --pf-magenta-doux: #FAE8FF;     /* fond d'un élément actif (magenta 5,43:1 dessus) */
  --pf-turquoise: #5EC9D8;        /* FOND des boutons principaux */
  --pf-turquoise-survol: #4AB6C6; /* encre dessus : 6,70:1 */
  --pf-turquoise-fonce: #0E7490;  /* fin du bandeau d'annonce : blanc dessus 5,36:1 */
  --pf-blanc: #FFFFFF;
  --pf-lilas: #C7C3F5;            /* texte secondaire SUR fond encre (9,6:1) : bande, code */
  --pf-fond-doux: #F8F7FE;
  --pf-filet: #E6E3F7;
  --pf-logo-1: #D946EF;
  --pf-logo-2: #7C5CFC;
  --pf-logo-3: #22D3EE;
  --pf-logo: linear-gradient(90deg, var(--pf-logo-1), var(--pf-logo-2) 50%, var(--pf-logo-3));
  /* Couleurs à sens propre (état), lisibles sur blanc */
  --pf-vert: #047857;             /* 5,48:1 */
  --pf-ambre: #B45309;            /* 5,02:1 */
  --pf-rouge: #B91C1C;            /* 6,47:1 */

  /* Thème sombre (celui de la vitrine, validé par Didier le 07/11 pour toutes les pages) */
  --pf-nuit: #0B1020;
  --pf-nuit-2: #121833;
  --pf-nuit-filet: #262D52;
  --pf-nuit-encre: #F1F0FF;       /* 16,81:1 sur nuit */
  --pf-nuit-encre-2: #A9A8D6;     /* 8,35:1 sur nuit, 7,69:1 sur nuit-2 */
  --pf-nuit-indigo: #9D93FF;      /* 7,26:1 sur nuit */
  --pf-nuit-magenta: #E879F9;     /* 7,69:1 sur nuit */
  --pf-nuit-magenta-fond: #3A1D4F; /* magenta nuit dessus : 5,81:1 */
  --pf-nuit-ok: #34D399;
  --pf-nuit-ambre: #FBBF24;
  --pf-nuit-ko: #F87171;

  /* Typographie et formes */
  --pf-police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --pf-rayon: 12px;
  --pf-rayon-carte: 16px;
  --pf-rayon-bouton: 999px;
  --pf-epaisseur-filet: 3px;
}

/* --------------------------------------------------------------------------
   2. Thème : clair par défaut, sombre si le système est en sombre.
      Chaque rôle est écrit UNE fois, en light-dark(clair, sombre) : c'est la
      propriété color-scheme qui choisit. Sans script (la CSP de /dsi interdit
      tout script). Un attribut data-theme posé sur <html> (la vitrine, bouton ◐)
      fixe color-scheme et passe donc AVANT la préférence du système.
   -------------------------------------------------------------------------- */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   3. Rôles (ce que les pages utilisent)
   -------------------------------------------------------------------------- */
:root {
  --pf-texte: light-dark(var(--pf-encre), var(--pf-nuit-encre));
  --pf-texte-2: light-dark(var(--pf-encre-2), var(--pf-nuit-encre-2));
  --pf-texte-3: light-dark(var(--pf-encre-3), var(--pf-nuit-encre-2));
  --pf-lien: light-dark(var(--pf-indigo), var(--pf-nuit-indigo));
  --pf-lien-survol: light-dark(var(--pf-indigo-survol), var(--pf-nuit-encre));
  --pf-accent: light-dark(var(--pf-magenta), var(--pf-nuit-magenta));
  /* fond d'un élément actif (sommaire) : magenta doux le jour, magenta dilué la nuit */
  /* turquoise lu comme TEXTE : foncé le jour (5,36:1), clair la nuit (9,76:1) */
  --pf-turquoise-texte: light-dark(var(--pf-turquoise-fonce), var(--pf-turquoise));
  --pf-accent-fond: light-dark(var(--pf-magenta-doux), var(--pf-nuit-magenta-fond));
  --pf-fond: light-dark(var(--pf-blanc), var(--pf-nuit));
  --pf-fond-2: light-dark(var(--pf-fond-doux), var(--pf-nuit-2));
  --pf-surface: light-dark(var(--pf-blanc), var(--pf-nuit-2));   /* cartes posées sur le fond */
  --pf-trait: light-dark(var(--pf-filet), var(--pf-nuit-filet));
  /* Boutons identiques dans les deux thèmes : turquoise + encre (8,24:1). */
  --pf-bouton-fond: var(--pf-turquoise);
  --pf-bouton-survol: var(--pf-turquoise-survol);
  --pf-bouton-texte: var(--pf-encre);    /* jamais de blanc sur le turquoise */
  --pf-code-fond: var(--pf-encre);       /* blocs de code : fond encre, couleurs de syntaxe dessus */
  --pf-ok: light-dark(var(--pf-vert), var(--pf-nuit-ok));
  --pf-alerte: light-dark(var(--pf-ambre), var(--pf-nuit-ambre));
  --pf-ko: light-dark(var(--pf-rouge), var(--pf-nuit-ko));
  --pf-annonce: linear-gradient(90deg, var(--pf-magenta), var(--pf-indigo) 55%, var(--pf-turquoise-fonce));
}

/* --------------------------------------------------------------------------
   3. Gestes communs (spécificité minimale : chaque page peut préciser)
   -------------------------------------------------------------------------- */
html { font-family: var(--pf-police); }
code, kbd, pre, samp { font-family: var(--pf-mono); }
::selection { background: var(--pf-magenta-doux); color: var(--pf-encre); }
:focus-visible { outline: 3px solid var(--pf-lien); outline-offset: 3px; border-radius: 4px; }

/* Filet en dégradé du logo, 3 px, en haut de la fenêtre : poser class="pf-filet"
   sur <body>. Décoratif, ne capte aucun clic. */
body.pf-filet::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--pf-epaisseur-filet);
  background: var(--pf-logo);
  z-index: 1000;
  pointer-events: none;
}