/* ============================================================================
 * jetons.css — LA COPIE CANONIQUE de la charte du parc.
 * Ne pas modifier une copie, modifier celle-ci.
 * `scripts/verifier_charte.mjs` échoue si une copie a divergé.
 *
 * V2 — CHARTE WE ARE WATCHING, FOND CLAIR (5 novembre 2026)
 * ---------------------------------------------------------
 * Le parc passe du bleu nuit (#0c1020) à la charte We are Watching adoptée
 * pour l'étude GEO × YouTube (content.bluelemon.io/etudes/geo-youtube) :
 * fond blanc dominant, bleu nuit #000436 pour le texte fort et les aplats
 * ponctuels, orange #FF451C par touches (chiffres clés, état actif, bouton
 * principal), Poppins pour tout le texte, Abril Fatface pour les grands
 * chiffres seulement.
 *
 * LES NOMS DISENT L'USAGE, PAS L'ANCIENNE VALEUR
 * ----------------------------------------------
 * Le site de l'étude est passé au clair en redéfinissant `--white: #000436`.
 * Ça marche, et c'est exactement le défaut que ce fichier a été écrit pour
 * empêcher : un nom qui ment (voir `--lemon` plus bas dans l'historique). Ici :
 *   - `--bl-encre`  le texte principal (bleu nuit) ;
 *   - `--bl-blanc`  reste BLANC, et ne sert plus qu'au texte posé sur un aplat
 *                   orange ou nuit — c'est le seul endroit où il est juste ;
 *   - `--bl-voile`  remplace les `rgba(255,255,255,.04)` des fronts sombres :
 *                   un voile de nuit très léger, qui se voit sur du blanc.
 * `--bl-clair` (le bleu pâle #91a6ff des liens) a DISPARU : sur du blanc il
 * tombe à 2,4:1. Les liens passent en `--bl-bleu-texte`.
 *
 * CONTRASTES (sur blanc, calculés le 5 nov. 2026)
 *   encre 19,6 · gris-bleu 12,1 · sourd 5,9 · pale 4,8 · orange-texte 4,6
 *   bleu-texte 6,0 · bon-texte 5,0 · alerte 5,3 · attention-texte 5,9
 *   L'orange de marque #ff451c ne fait que 3,4:1 : il est réservé aux grands
 *   chiffres, aux aplats et aux bordures — jamais à un texte courant. Le
 *   blanc sur orange (bouton principal) tient 3,4:1, admis pour un composant
 *   et un texte gras ≥ 14 pt ; les boutons du parc sont en 600.
 *
 * V3 — TROIS CHARTES, UN SEUL FICHIER (5 novembre 2026, décision de Samson)
 * --------------------------------------------------------------------------
 *   - We are Watching : tout ce qui touche à YouTube. C'est le `:root` par
 *     défaut, rien à déclarer.
 *   - Bluelemon : le paid media, Dashboard One, Social Scope. La page pose
 *     `data-charte="bluelemon"` (sur <html>, ou sur un conteneur) : le bleu
 *     Bluelemon #001E8D domine, le jaune #FECE00 vient par petites touches,
 *     Poppins seule (pas d'Abril Fatface).
 *   - Mixte : les hubs (tools, events, content, demo) et les outils qui
 *     servent les deux marques (Call qualifier). `data-charte="hub"` : le bleu
 *     nuit commun domine, orange WaW, bleu et jaune Bluelemon en touches.
 * Même sobriété partout : fond blanc, aucun dégradé, aucune illustration.
 *
 * LES JETONS DE RÔLE. Un front ne nomme plus la couleur de sa marque, il
 * nomme son RÔLE : `--bl-accent` (bouton principal, état actif),
 * `--bl-accent-texte` (accent qui doit se lire en petit), `--bl-accent-teinte`,
 * `--bl-accent-filet`, `--bl-accent-clair` (survol), `--bl-sur-accent` (texte
 * posé sur l'accent), `--bl-touche` (petit repère : onglet actif, filet d'un
 * chiffre vedette), `--bl-chiffre-couleur`, `--bl-lien`, `--bl-serie` (série
 * principale d'un graphique). Chaque charte les définit ; `--bl-orange` reste
 * ORANGE partout et ne doit plus servir d'accent dans un front Bluelemon.
 * Les couleurs des deux marques restent disponibles partout comme repères :
 * `--bl-marque-waw`, `--bl-marque-bluelemon`, `--bl-jaune` (aplat seulement).
 * ==========================================================================*/

:root {
  color-scheme: light;


  /* --- Marque ----------------------------------------------------------- */
  /* L'orange We are Watching. Le seul accent du parc : s'il souligne aussi la
     décoration, il ne veut plus dire « regarde ici ». */
  --bl-orange: #ff451c;
  --bl-orange-clair: #ff6c43;    /* tertiaire de la charte, survols */
  --bl-orange-texte: #d93a14;    /* l'orange quand il doit se LIRE en petit */
  --bl-orange-teinte: #fff1ec;   /* fond d'un état actif, d'une pastille */
  --bl-orange-filet: #ffc3b2;

  /* Le bleu nuit : titres, texte fort, aplats sombres PONCTUELS. */
  --bl-nuit: #000436;

  /* Le bleu tertiaire de la charte. */
  --bl-bleu: #3976ff;
  --bl-bleu-texte: #2558d9;      /* liens */
  --bl-bleu-teinte: #eef3ff;

  /* Le jaune. Il s'appelle `--bl-citron` et non `--bl-lemon` DÉLIBÉRÉMENT :
     `--lemon` est le nom qui désignait deux couleurs. Sur fond blanc il ne
     se lit pas : AUCUN texte en citron, seulement des aplats. */
  --bl-citron: #ffdf18;
  --bl-citron-doux: #fff6c2;

  /* --- Fonds ------------------------------------------------------------ */
  --bl-papier: #ffffff;          /* fond de page, dominant */
  --bl-surface: #ffffff;         /* cartes : blanches, détachées par le filet */
  --bl-surface-2: #f4f5f9;       /* blocs secondaires, bandeaux, en-têtes */
  --bl-champ: #ffffff;           /* intérieur des champs de saisie */
  --bl-voile: rgba(0, 4, 54, .035);
  --bl-voile-fort: rgba(0, 4, 54, .07);

  /* --- Texte ------------------------------------------------------------ */
  --bl-encre: #000436;           /* texte principal */
  --bl-gris-bleu: #2e3358;       /* texte secondaire */
  --bl-sourd: #5d6283;           /* légendes, aides */
  --bl-pale: #6b7090;            /* mentions, tertiaire (AA tenu) */
  --bl-blanc: #ffffff;           /* texte SUR orange ou SUR nuit, rien d'autre */

  /* --- Traits ----------------------------------------------------------- */
  --bl-trait: #e4e6ee;
  --bl-trait-fort: #ccd0de;

  /* --- Ombres ----------------------------------------------------------- */
  --bl-ombre: 0 1px 2px rgba(0, 4, 54, .05), 0 6px 20px rgba(0, 4, 54, .06);
  --bl-ombre-forte: 0 12px 40px rgba(0, 4, 54, .14);

  /* --- État ------------------------------------------------------------- */
  /* Séparés de l'accent : `--bl-alerte` ne suit pas l'orange de marque. */
  --bl-alerte: #c23a33;
  --bl-alerte-teinte: #fdeceb;
  --bl-attention: #e9a823;       /* aplat */
  --bl-attention-texte: #8a5a00;
  --bl-attention-teinte: #fdf4dc;
  --bl-bon: #2fb27f;             /* aplat */
  --bl-bon-texte: #1a7f57;
  --bl-bon-teinte: #e3f6ee;
  --bl-neutre: #9195ad;          /* aplat neutre (barres, pastilles) */

  /* --- Formes ----------------------------------------------------------- */
  --bl-rayon: 12px;
  --bl-rayon-large: 16px;
  --bl-rayon-petit: 8px;

  /* --- Typographie ------------------------------------------------------ */
  /* Poppins = variante web officielle de General Sans (choix validé par
     Samson le 5 nov. 2026). Abril Fatface = substitut de Grumpy, UNIQUEMENT
     pour les grands chiffres : `.bl-chiffre` plus bas. */
  --bl-police: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bl-police-accent: "Abril Fatface", Georgia, serif;
  --bl-police-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* --- La cible tactile minimale ---------------------------------------- */
  --bl-cible: 44px;

  /* --- Rôles (charte We are Watching) ------------------------------------ */
  --bl-accent: #ff451c;
  --bl-accent-clair: #ff6c43;
  --bl-accent-texte: #d93a14;
  --bl-accent-teinte: #fff1ec;
  --bl-accent-filet: #ffc3b2;
  --bl-sur-accent: #ffffff;
  --bl-touche: #ff451c;
  --bl-chiffre-couleur: #ff451c;
  --bl-lien: #2558d9;
  --bl-serie: #ff451c;
  --bl-serie-neutre: #c8cbda;

  /* --- Repères des deux marques, valables dans les trois chartes -------- */
  --bl-marque-waw: #ff451c;
  --bl-marque-bluelemon: #001e8d;
  --bl-bluelemon-teinte: #eef1fb;
  /* Le jaune Bluelemon (logo 2026). 1,5:1 sur blanc : JAMAIS en texte. */
  --bl-jaune: #fece00;
  --bl-jaune-teinte: #fff6cc;
}

/* ============================================================================
 * CHARTE BLUELEMON — paid media, Dashboard One, Social Scope.
 * Bleu Bluelemon dominant (13:1 sur blanc, texte compris), jaune en touches,
 * encre = « bleu sombre » du brandbook. Poppins seule : le brandbook réserve
 * Ano (non libre) aux titres et la remplace par Poppins en bureautique.
 * Sélecteur sans `:root` : posé sur un conteneur, il recolore ce conteneur.
 * ==========================================================================*/
[data-charte="bluelemon"] {
  --bl-accent: #001e8d;
  --bl-accent-clair: #1d3aa8;
  --bl-accent-texte: #001e8d;
  --bl-accent-teinte: #eef1fb;
  --bl-accent-filet: #c3cbea;
  --bl-sur-accent: #ffffff;
  --bl-touche: #fece00;
  --bl-chiffre-couleur: #001e8d;
  --bl-lien: #001e8d;
  --bl-serie: #001e8d;
  --bl-serie-neutre: #c9cfe2;

  --bl-nuit: #000c38;
  --bl-encre: #000c38;
  --bl-gris-bleu: #2a3358;
  --bl-sourd: #5a6283;
  --bl-pale: #6a7090;
  --bl-surface-2: #f3f5fb;
  --bl-trait: #e3e6f0;
  --bl-trait-fort: #c9cfe2;
  --bl-voile: rgba(0, 12, 56, .035);
  --bl-voile-fort: rgba(0, 12, 56, .07);
  --bl-ombre: 0 1px 2px rgba(0, 12, 56, .05), 0 6px 20px rgba(0, 12, 56, .06);
  --bl-ombre-forte: 0 12px 40px rgba(0, 12, 56, .14);

  --bl-police-accent: var(--bl-police);
}

/* ============================================================================
 * CHARTE MIXTE — les hubs et les outils des deux marques.
 * Le bleu nuit, commun aux deux chartes, domine ; les couleurs vives des deux
 * marques (orange, bleu, jaune) ne viennent qu'en touches, à parts égales.
 * ==========================================================================*/
[data-charte="hub"] {
  --bl-accent: #000436;
  --bl-accent-clair: #1a1f52;
  --bl-accent-texte: #000436;
  --bl-accent-teinte: #f4f5f9;
  --bl-accent-filet: #ccd0de;
  --bl-sur-accent: #ffffff;
  --bl-touche: #fece00;
  --bl-chiffre-couleur: #000436;
  --bl-lien: #2558d9;
  --bl-serie: #000436;
  --bl-police-accent: var(--bl-police);
}

/* ============================================================================
 * CHARTE WE ARE WATCHING DANS UNE PAGE QUI NE L'EST PAS — `data-charte="waw"`
 * Le guide YouTube vit dans le hub (mixte) mais appartient à WaW : son
 * conteneur rétablit les rôles WaW. Inutile sur une page WaW entière.
 * ==========================================================================*/
[data-charte="waw"] {
  --bl-accent: #ff451c;
  --bl-accent-clair: #ff6c43;
  --bl-accent-texte: #d93a14;
  --bl-accent-teinte: #fff1ec;
  --bl-accent-filet: #ffc3b2;
  --bl-touche: #ff451c;
  --bl-chiffre-couleur: #ff451c;
  --bl-lien: #2558d9;
  --bl-serie: #ff451c;
  --bl-police-accent: "Abril Fatface", Georgia, serif;
}

/* Sans Abril Fatface, le grand chiffre se tient par la graisse. */
[data-charte="bluelemon"] .bl-chiffre,
[data-charte="hub"] .bl-chiffre,
.bl-chiffre:is([data-charte="bluelemon"], [data-charte="hub"]) {
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Le grand chiffre de la charte : Abril Fatface, orange ou nuit. Une classe
   et non une règle sur `h1` : l'accent se pose à la main, par touches. */
.bl-chiffre {
  font-family: var(--bl-police-accent);
  font-weight: 400;
  letter-spacing: -0.5px;
  font-variant-numeric: lining-nums;
}

/* ============================================================================
 * LE FOCUS CLAVIER
 *
 * Relevé du 5 septembre 2026 : `:focus-visible` n'apparaissait NULLE PART dans
 * le parc — zéro occurrence sur cinq feuilles. Trois fronts posaient bien un
 * `outline` au focus, mais uniquement sur les `input` ; aucun bouton, aucun
 * lien du parc ne montrait quoi que ce soit au clavier. Et `trend-research`
 * posait `outline: none` sur ses champs, ce qui retirait le seul repère qui
 * restait.
 *
 * `:focus-visible` et non `:focus` : le navigateur ne l'active qu'à la
 * navigation clavier, donc un clic à la souris ne laisse pas d'anneau derrière
 * lui. C'est la raison pour laquelle les `outline: none` avaient été écrits —
 * ils réglaient un vrai problème visuel, avec l'outil d'avant.
 *
 * La règle est volontairement écrite avec une spécificité faible (un seul
 * sélecteur de type) : n'importe quelle règle d'outil peut la surcharger. Elle
 * pose un plancher, elle n'impose rien.
 * ==========================================================================*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bl-accent);
  outline-offset: 2px;
  border-radius: var(--bl-rayon-petit);
}

/* ============================================================================
 * MOUVEMENT
 *
 * Une seule règle, et elle vaut pour tout ce que les outils animent. Aucune
 * des cinq feuilles ne la portait, sauf deux — et jamais en couverture
 * complète. `scroll-behavior` compris : un défilement animé imposé donne la
 * nausée à qui a coché la case, et c'est précisément ce que la case demande
 * d'éviter.
 * ==========================================================================*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
 * LES CIBLES TACTILES
 *
 * Relevé du 5 septembre 2026, page de lancement de l'audit éditorial à 375 px :
 * la case à cocher fait 13 px de haut. Le doigt moyen en couvre 45. On ne
 * grossit pas la case elle-même — une case à cocher agrandie au `transform`
 * devient floue et se désaligne de son libellé — on agrandit la ZONE CLIQUABLE,
 * c'est-à-dire le label qui la contient.
 *
 * Sous `pointer: coarse` UNIQUEMENT. Au clavier et à la souris, ces règles
 * n'apportent rien et gonfleraient des formulaires denses qui vont très bien.
 * C'est le seul endroit du parc où une règle dépend du moyen de pointage.
 * ==========================================================================*/
@media (pointer: coarse) {
  /* Le label qui EMBARQUE la case devient la cible. `:has()` évite d'avoir à
     poser une classe dans six fronts qui ne la nomment pas pareil. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--bl-cible);
  }

  /* Les cases elles-mêmes gagnent ce qu'elles peuvent sans déformation. */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  /* Boutons et liens d'action : la hauteur, jamais la largeur — forcer une
     largeur casserait les barres d'outils denses de geo-tracker. */
  button,
  [role="button"],
  input[type="submit"] {
    min-height: var(--bl-cible);
  }
}

/* ============================================================================
 * LE COÛT D'UNE ACTION, À CÔTÉ DU BOUTON QUI LA LANCE
 *
 * Rempli par `bl-quota.js` dans tout élément `[data-quota-cout]`. Le style vit
 * ICI plutôt que dans chaque feuille : c'est une mention, elle doit se lire
 * pareil partout, et une mention qui change de taille d'un outil à l'autre se
 * lit comme un détail d'implémentation plutôt que comme une information.
 *
 * Discret DÉLIBÉRÉMENT. Ce n'est pas un avertissement — le garde-fou a son
 * propre bandeau pour ça, en orange, à 80 %. C'est un repère qu'on consulte
 * avant de cliquer, pas une alarme.
 *
 * Vide, il n'occupe aucune place : `:empty` évite la marge fantôme sous un
 * bouton quand le hub est injoignable.
 * ==========================================================================*/
[data-quota-cout] {
  margin: 8px 0 0;
  font-family: var(--bl-police-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--bl-pale);
  font-variant-numeric: tabular-nums;
}
[data-quota-cout]:empty { display: none; }