/* ==========================================================================
   Jetons de la Marque de l'État Congolais
   Palette et typographie reprises du chapitre 5.2 du protocole, pas choisies.
   ========================================================================== */

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../fonts/CooperHewitt-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../fonts/CooperHewitt-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../fonts/CooperHewitt-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../fonts/CooperHewitt-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../fonts/CooperHewitt-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* Palette officielle, chapitre 5.2 */
  --bleu: #003F87;
  --jaune: #F7D117;
  --rouge: #CE1126;
  --noir: #1A1A1A;
  --blanc: #FFFFFF;

  /* Déclinaisons de mise en page */
  --bleu-profond: #002A5C;
  --bleu-nuit: #001C3D;
  --bleu-vif: #0057B8;
  --bleu-clair: #E8F0FA;
  --bleu-brume: #F3F7FC;
  --jaune-sombre: #8A6A00;
  --rouge-clair: #FDF1F2;
  --vert: #1B7F4B;
  --vert-clair: #EDF7F1;

  --fond: #F2F5F9;
  --surface: #FFFFFF;
  --trait: #DCE4EE;
  --trait-fort: #BFCEDF;

  --encre: #16233A;
  --texte: #3C4A5C;
  --texte-doux: #64748B;

  /* Verre, comme sur le portail du Code du numérique */
  --verre: rgba(255, 255, 255, 0.78);
  --verre-trait: rgba(255, 255, 255, 0.6);
  --ombre-douce: 0 1px 2px rgba(0, 63, 135, .04), 0 8px 24px rgba(0, 63, 135, .06);
  --ombre-levee: 0 2px 4px rgba(0, 63, 135, .06), 0 18px 40px rgba(0, 63, 135, .12);
  --ombre-verre: 0 8px 32px rgba(0, 63, 135, .10);

  --rayon: 14px;
  --rayon-petit: 9px;
  --rayon-pilule: 999px;

  --largeur: 1180px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);

  --pas: 8px;
  --entete-h: 74px;

  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* La Ligne d'État : trois bandes en tiers égaux, jamais un dégradé. */
.ligne-etat {
  display: block;
  width: 5px;
  background: linear-gradient(
    to bottom,
    var(--bleu) 0 33.333%,
    var(--jaune) 33.333% 66.666%,
    var(--rouge) 66.666% 100%
  );
  border-radius: 1px;
  flex: none;
}
.ligne-etat--blanche { background: var(--blanc); }

/* Filet tricolore horizontal */
.filet-tricolore {
  height: 3px;
  background: linear-gradient(
    to right,
    var(--bleu) 0 62%,
    var(--jaune) 62% 81%,
    var(--rouge) 81% 100%
  );
}
.filet-tricolore--blanc {
  background: linear-gradient(
    to right,
    var(--blanc) 0 62%,
    var(--jaune) 62% 81%,
    var(--rouge) 81% 100%
  );
}