/* ============================================================================
   COVERTIA CORE — JETONS DE DESIGN
   Fichier : covertia-tokens.css
   Version : 2.0 — août 2026 · Réf. CVT-BRAND-001
   Confidentiel — diffusion restreinte

   Noir plein, arc turquoise → bleu, décors HUD.
   Mode sombre par défaut (mode de marque) ; le mode clair est la déclinaison
   « document / print » : rapports, one-pagers, impressions.

   Intégration :
     <link rel="stylesheet" href="covertia-tokens.css">
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Mulish:wght@400;500;600;700&display=swap">
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. CONSTANTES DE MARQUE — valeurs absolues, jamais thémées.
   ------------------------------------------------------------------------ */
:root {
  /* Neutres froids bleutés */
  --cvt-void:       #000000;   /* fond de projection, slides, salons  */
  --cvt-abyss:      #05080D;   /* fond d'écran web, documents longs   */
  --cvt-graphite:   #0C131C;   /* surface : cartes, panneaux          */
  --cvt-slate:      #14202D;   /* surface secondaire, survol          */
  --cvt-steel:      #22384F;   /* filets, bordures 1 px               */
  --cvt-ash:        #7A8FA6;   /* libellés, légendes                  */
  --cvt-mist:       #B7C7D8;   /* texte courant sur fond sombre       */
  --cvt-signal:     #EAF2F9;   /* titres, texte primaire              */
  --cvt-paper:      #EEF3FB;   /* fond document / print               */
  --cvt-white:      #FFFFFF;

  /* Arc d'accent — la signature chromatique */
  --cvt-turquoise:      #5DE0E6;  /* accent principal                     */
  --cvt-azur:           #38B6FF;  /* second niveau, traces de circuit     */
  --cvt-bleu:           #004AAD;  /* aplat et fin de dégradé              */
  --cvt-turquoise-deep: #0B6273;  /* équivalent turquoise sur fond clair  */
  --cvt-halo:           rgba(93, 224, 230, 0.12);
  --cvt-accent-10:      rgba(93, 224, 230, 0.10);
  --cvt-accent-34:      rgba(93, 224, 230, 0.34);

  /* Dégradé de marque — trois emplois seulement :
     disque du médaillon, bouton primaire, grands aplats géométriques.
     Jamais sur du texte courant, jamais sur le logo, jamais en fond de page. */
  --cvt-gradient: linear-gradient(135deg, #5DE0E6 0%, #38B6FF 46%, #004AAD 100%);

  /* Sémantiques — usage strictement fonctionnel */
  --cvt-alert:    #FF5A5F;
  --cvt-watch:    #FFB020;
  --cvt-verified: #3DE6A0;
  --cvt-alert-on-light:    #C22026;
  --cvt-verified-on-light: #0B6B4E;

  /* Familles typographiques */
  --cvt-font-display: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --cvt-font-body:    'Mulish', 'Segoe UI', Helvetica, Arial, sans-serif;
  --cvt-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Échelle typographique — écran */
  --cvt-size-display: clamp(36px, 6.4vw, 68px);
  --cvt-size-h2:      clamp(25px, 3.3vw, 36px);
  --cvt-size-h3:      19px;
  --cvt-size-body:    16px;
  --cvt-size-small:   13.5px;
  --cvt-size-label:   11px;
  --cvt-size-data:    26px;

  --cvt-weight-display: 900;
  --cvt-weight-h2:      800;
  --cvt-weight-h3:      700;
  --cvt-weight-body:    400;
  --cvt-weight-label:   500;
  --cvt-weight-data:    600;

  --cvt-lh-tight: 1.06;
  --cvt-lh-snug:  1.35;
  --cvt-lh-body:  1.65;

  --cvt-track-display: -0.035em;
  --cvt-track-h2:      -0.02em;
  --cvt-track-h3:       0.03em;
  --cvt-track-label:    0.20em;
  --cvt-track-mono:     0.16em;

  --cvt-measure: 65ch;

  /* Espacements — base 4 px */
  --cvt-space-1:  4px;
  --cvt-space-2:  8px;
  --cvt-space-3: 12px;
  --cvt-space-4: 16px;
  --cvt-space-5: 24px;
  --cvt-space-6: 32px;
  --cvt-space-7: 48px;
  --cvt-space-8: 64px;
  --cvt-space-9: 96px;

  /* Grille */
  --cvt-columns: 12;
  --cvt-gutter: 24px;
  --cvt-margin: 64px;
  --cvt-content-max: 1080px;

  /* Formes */
  --cvt-radius-0: 0px;
  --cvt-radius-1: 2px;
  --cvt-radius-2: 4px;    /* maximum sur un bloc de contenu   */
  --cvt-radius-3: 10px;   /* capsules uniquement              */
  --cvt-radius-pill: 999px;

  --cvt-border-hair: 1px;
  --cvt-border-capsule: 1.5px;
  --cvt-border-accent: 2px;
  --cvt-border-underline: 3px;

  /* Décors — opacités plafonnées */
  --cvt-decor-hatch-opacity: 1;
  --cvt-decor-hud-opacity: 0.55;
  --cvt-decor-circuit-opacity: 0.75;
  --cvt-decor-mesh-opacity: 0.35;

  /* Mouvement */
  --cvt-duration-fast: 150ms;
  --cvt-duration-base: 200ms;
  --cvt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ---------------------------------------------------------------------------
   2. AGENTS IA — sous-marques.
      Chaque agent ne modifie que deux variables : un accent et un accent
      secondaire à emploi codifié. Tout le reste est hérité de la marque mère.
   ------------------------------------------------------------------------ */
:root {
  /* Renaud Castaing — France · influence & contre-narration
     Secondaire : marque exclusivement la moitié « contre-narratif ». */
  --cvt-agent-renaud:         #6E8CFF;  /* Indigo Méridien   */
  --cvt-agent-renaud-2:       #D9694A;  /* Brique Toulouse   */
  --cvt-agent-renaud-onlight: #2C46B8;

  /* Nareerat Sukhonthamat — Thaïlande · HUMINT virtuel & communautés
     Secondaire : filet de 1 px uniquement, jamais en aplat. */
  --cvt-agent-nareerat:         #2FD6A8;  /* Jade Maenam     */
  --cvt-agent-nareerat-2:       #E8C36A;  /* Or Lanna        */
  --cvt-agent-nareerat-onlight: #0E7A5A;

  /* Callum Bridger — Pays de Galles · OSINT forensique & traçage
     Code de preuve : jonquille = confirmé, ardoise pourpre = hypothèse. */
  --cvt-agent-callum:         #F2C94C;  /* Jonquille Cambrienne */
  --cvt-agent-callum-2:       #9E8ABD;  /* Ardoise Pourpre      */
  --cvt-agent-callum-onlight: #8A6A00;
}

/* Applique la sous-marque à un conteneur : <article class="cvt-agent-renaud"> */
.cvt-agent-renaud   { --cvt-accent: var(--cvt-agent-renaud);   --cvt-accent-2: var(--cvt-agent-renaud-2); }
.cvt-agent-nareerat { --cvt-accent: var(--cvt-agent-nareerat); --cvt-accent-2: var(--cvt-agent-nareerat-2); }
.cvt-agent-callum   { --cvt-accent: var(--cvt-agent-callum);   --cvt-accent-2: var(--cvt-agent-callum-2); }


/* ---------------------------------------------------------------------------
   3. JETONS SÉMANTIQUES — mode sombre (défaut de marque)
      Styler les composants EXCLUSIVEMENT via ces variables.
   ------------------------------------------------------------------------ */
:root {
  --cvt-bg:          var(--cvt-abyss);
  --cvt-bg-full:     var(--cvt-void);      /* slides, bannières plein cadre */
  --cvt-bg-raised:   var(--cvt-graphite);
  --cvt-bg-overlay:  var(--cvt-slate);
  --cvt-border:      #1B2E42;
  --cvt-border-soft: #122031;

  --cvt-text:        var(--cvt-signal);
  --cvt-text-muted:  var(--cvt-mist);
  --cvt-text-subtle: var(--cvt-ash);

  --cvt-accent:        var(--cvt-turquoise);
  --cvt-accent-2:      var(--cvt-azur);
  --cvt-accent-on:     var(--cvt-void);
  --cvt-accent-soft:   var(--cvt-accent-10);
  --cvt-accent-border: var(--cvt-accent-34);

  --cvt-status-alert:    var(--cvt-alert);
  --cvt-status-watch:    var(--cvt-watch);
  --cvt-status-verified: var(--cvt-verified);

  --cvt-focus-ring: 2px solid var(--cvt-turquoise);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --cvt-bg:          var(--cvt-paper);
    --cvt-bg-full:     var(--cvt-paper);
    --cvt-bg-raised:   var(--cvt-white);
    --cvt-bg-overlay:  #E2EAF6;
    --cvt-border:      #CBD8E9;
    --cvt-border-soft: #DEE7F4;

    --cvt-text:        var(--cvt-void);
    --cvt-text-muted:  #33455C;
    --cvt-text-subtle: #55697F;

    --cvt-accent:        var(--cvt-bleu);
    --cvt-accent-2:      var(--cvt-turquoise-deep);
    --cvt-accent-on:     var(--cvt-white);
    --cvt-accent-soft:   rgba(0, 74, 173, 0.07);
    --cvt-accent-border: rgba(0, 74, 173, 0.28);

    --cvt-status-alert:    var(--cvt-alert-on-light);
    --cvt-status-verified: var(--cvt-verified-on-light);

    --cvt-focus-ring: 2px solid var(--cvt-bleu);
  }
}

:root[data-theme="light"] {
  --cvt-bg:          var(--cvt-paper);
  --cvt-bg-full:     var(--cvt-paper);
  --cvt-bg-raised:   var(--cvt-white);
  --cvt-bg-overlay:  #E2EAF6;
  --cvt-border:      #CBD8E9;
  --cvt-border-soft: #DEE7F4;

  --cvt-text:        var(--cvt-void);
  --cvt-text-muted:  #33455C;
  --cvt-text-subtle: #55697F;

  --cvt-accent:        var(--cvt-bleu);
  --cvt-accent-2:      var(--cvt-turquoise-deep);
  --cvt-accent-on:     var(--cvt-white);
  --cvt-accent-soft:   rgba(0, 74, 173, 0.07);
  --cvt-accent-border: rgba(0, 74, 173, 0.28);

  --cvt-status-alert:    var(--cvt-alert-on-light);
  --cvt-status-verified: var(--cvt-verified-on-light);

  --cvt-focus-ring: 2px solid var(--cvt-bleu);
}


/* ---------------------------------------------------------------------------
   4. SOCLE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cvt-bg);        /* obligatoire : jamais transparent */
  color: var(--cvt-text);
  font-family: var(--cvt-font-body);
  font-size: var(--cvt-size-body);
  line-height: var(--cvt-lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--cvt-font-display);
  text-transform: uppercase;
  line-height: var(--cvt-lh-tight);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--cvt-size-display); font-weight: var(--cvt-weight-display); letter-spacing: var(--cvt-track-display); }
h2 { font-size: var(--cvt-size-h2);      font-weight: var(--cvt-weight-h2);      letter-spacing: var(--cvt-track-h2); }
h3 { font-size: var(--cvt-size-h3);      font-weight: var(--cvt-weight-h3);      letter-spacing: var(--cvt-track-h3); }

p { margin: 0; max-width: var(--cvt-measure); }
a { color: var(--cvt-accent); }

:focus-visible { outline: var(--cvt-focus-ring); outline-offset: 3px; }

.cvt-label {
  font-family: var(--cvt-font-mono);
  font-size: var(--cvt-size-label);
  font-weight: var(--cvt-weight-label);
  letter-spacing: var(--cvt-track-label);
  text-transform: uppercase;
  color: var(--cvt-accent);
}

.cvt-data {
  font-family: var(--cvt-font-mono);
  font-size: var(--cvt-size-data);
  font-weight: var(--cvt-weight-data);
  font-variant-numeric: tabular-nums;
  color: var(--cvt-accent);
}

.cvt-grid {
  display: grid;
  grid-template-columns: repeat(var(--cvt-columns), minmax(0, 1fr));
  gap: var(--cvt-gutter);
  max-width: var(--cvt-content-max);
  margin-inline: auto;
  padding-inline: var(--cvt-margin);
}


/* ---------------------------------------------------------------------------
   5. COMPOSANTS DE RÉFÉRENCE
   ------------------------------------------------------------------------ */

/* Carte capacité */
.cvt-card {
  background: var(--cvt-bg-raised);
  border: var(--cvt-border-hair) solid var(--cvt-border);
  border-left: var(--cvt-border-accent) solid var(--cvt-accent);
  padding: var(--cvt-space-4) var(--cvt-space-5);
}
.cvt-card__title {
  font-family: var(--cvt-font-display);
  font-size: var(--cvt-size-small);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cvt-card__body { color: var(--cvt-text-muted); font-size: 14.5px; margin-top: var(--cvt-space-2); }

/* Capsule — 3 à 5 éléments saillants, héritée de la présentation Due Diligence */
.cvt-capsule {
  display: flex;
  align-items: center;
  gap: 14px;
  border: var(--cvt-border-capsule) solid var(--cvt-accent);
  border-radius: var(--cvt-radius-3);
  padding: 12px 18px;
  background: color-mix(in srgb, var(--cvt-accent) 5%, transparent);
}
.cvt-capsule svg { width: 26px; height: 26px; flex: none; color: var(--cvt-accent); }
.cvt-capsule b {
  font-family: var(--cvt-font-display);
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Indicateur */
.cvt-kpi { background: var(--cvt-bg-raised); border: var(--cvt-border-hair) solid var(--cvt-border); padding: var(--cvt-space-4) var(--cvt-space-5); }
.cvt-kpi__value { font-family: var(--cvt-font-mono); font-size: 30px; font-weight: 600; color: var(--cvt-accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cvt-kpi__label { font-family: var(--cvt-font-mono); font-size: var(--cvt-size-label); letter-spacing: var(--cvt-track-mono); text-transform: uppercase; color: var(--cvt-text-subtle); margin-top: var(--cvt-space-2); }

/* Pastille de statut */
.cvt-pill {
  display: inline-block;
  font-family: var(--cvt-font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--cvt-accent-border);
  border-radius: var(--cvt-radius-pill);
  background: var(--cvt-accent-soft);
  color: var(--cvt-accent);
}
.cvt-pill--alert    { color: var(--cvt-status-alert);    border-color: color-mix(in srgb, var(--cvt-status-alert) 45%, transparent);    background: color-mix(in srgb, var(--cvt-status-alert) 9%, transparent); }
.cvt-pill--watch    { color: var(--cvt-status-watch);    border-color: color-mix(in srgb, var(--cvt-status-watch) 45%, transparent);    background: color-mix(in srgb, var(--cvt-status-watch) 9%, transparent); }
.cvt-pill--verified { color: var(--cvt-status-verified); border-color: color-mix(in srgb, var(--cvt-status-verified) 45%, transparent); background: color-mix(in srgb, var(--cvt-status-verified) 9%, transparent); }

/* Boutons — un seul primaire par page */
.cvt-btn {
  display: inline-flex; align-items: center; gap: var(--cvt-space-2);
  font-family: var(--cvt-font-mono);
  font-size: var(--cvt-size-label);
  letter-spacing: var(--cvt-track-mono); text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--cvt-radius-0);
  cursor: pointer;
  transition: background var(--cvt-duration-fast) var(--cvt-ease),
              color var(--cvt-duration-fast) var(--cvt-ease),
              border-color var(--cvt-duration-fast) var(--cvt-ease);
}
.cvt-btn--primary   { background: var(--cvt-gradient); color: var(--cvt-accent-on); font-weight: 600; }
.cvt-btn--secondary { background: transparent; color: var(--cvt-text); border-color: var(--cvt-border); }
.cvt-btn--ghost     { background: transparent; color: var(--cvt-accent); border-color: var(--cvt-accent-border); }

/* Liste opérationnelle */
.cvt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cvt-space-2); }
.cvt-list li { position: relative; padding-left: 20px; color: var(--cvt-text-muted); font-size: 14px; }
.cvt-list li::before { content: "▸"; position: absolute; left: 0; top: 0; color: var(--cvt-accent); font-size: 12px; }

/* Médaillon — logo sur disque en dégradé */
.cvt-medallion { position: relative; width: 128px; aspect-ratio: 1; }
.cvt-medallion__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--cvt-gradient); }
.cvt-medallion__mark { position: absolute; left: 27%; top: 22%; width: 46%; color: var(--cvt-void); }

/* Marquage de confidentialité — présentations et rapports uniquement */
.cvt-classification {
  display: flex; justify-content: space-between; gap: var(--cvt-space-4);
  font-family: var(--cvt-font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cvt-text-subtle);
}
.cvt-classification strong { color: var(--cvt-status-alert); font-weight: 600; }

/* Mention IA — obligatoire sur tout contenu d'agent, non modifiable */
.cvt-ai-disclosure {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--cvt-accent);
  border-radius: var(--cvt-radius-3);
  background: color-mix(in srgb, var(--cvt-accent) 7%, transparent);
}
.cvt-ai-disclosure b {
  font-family: var(--cvt-font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cvt-accent); white-space: nowrap;
}
.cvt-ai-badge {
  font-family: var(--cvt-font-mono);
  font-size: 8px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--cvt-accent); color: var(--cvt-void);
  padding: 3px 8px; border-radius: var(--cvt-radius-pill);
}

/* Contenu large : la page ne défile jamais horizontalement */
.cvt-scroll-x { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}