/* La Rédac’ — propagand.eu
   Jetons de design et « grammaire de la bande ».
   Police : https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,700;0,800;1,400;1,800&display=swap */

:root {
  /* Couleurs — kit propagand (Claude Design, sept. 2026) */
  --papier: #F3F2F2;        /* « Blanc » : fond de page */
  --encre: #201E1D;         /* « Encre » : texte, filets, boutons secondaires pleins */
  --rouge: #EC3013;         /* « Rouge » : LA bande (action principale, écoute, blocage), pictos */
  --rouge-survol: #DD280F;  /* survol du bouton rouge */
  --rouge-profond: #AE1800; /* rouge des petits textes et des aplats portant du petit texte (lisibilité) */
  --rouge-texte-doux: #FFF2EF; /* petite ligne sous le libellé d'une bande rouge */
  --ambre: #8A5200;         /* alerte juridique (conseil) */
  --ambre-fond: #F4E6CC;    /* fond d'un passage en alerte */
  --carte: #FAF9F8;         /* cartes et champs, à peine plus clairs que le fond */
  --trait: #BAB6B6;         /* bordures de champs et cartes */
  --trait-leger: #D7D3D3;   /* séparateurs internes, « aplats clairs » du kit */
  --texte-2: #444141;       /* texte secondaire */
  --texte-3: #605D5D;       /* étiquettes, aides */
  --placeholder: #7D7979;
  --inactif-fond: #D7D3D3;  /* boutons grisés */
  --inactif-texte: #605D5D;
  --photo-vide: #D7D3D3;

  /* Typo — une seule famille : Archivo (800 titres, 700 étiquettes et boutons, 400 texte) */
  --f-titre: 'Archivo', system-ui, sans-serif;
  --f-ui: 'Archivo', system-ui, sans-serif;
  --f-mono: 'Archivo', system-ui, sans-serif; /* petites étiquettes : capitales espacées */

  /* Tailles clés */
  --champ-texte: 17px;      /* jamais moins de 16px (sinon zoom iOS) */
  --cible: 48px;            /* zone tactile standard (44px minimum absolu) */
  --bande-h: 76px;          /* hauteur de la bande rouge du bas */
  --gouttiere: 16px;        /* marges latérales mobile */
  --r-champ: 0px;           /* le kit : angles droits partout */
  --r-bouton: 0px;
  --r-carte: 0px;
}

body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--f-ui); }

/* ---- Grammaire de la bande ---- */

/* 1. Action principale : une seule par écran, collée en bas, pleine largeur, angles droits */
.bande-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; height: var(--bande-h); border: 0; border-radius: 0;
  background: var(--rouge); color: #fff; font: 800 20px/1.2 var(--f-ui); letter-spacing: -.01em; text-decoration: none;
  position: sticky; bottom: 0; padding-bottom: env(safe-area-inset-bottom);
}
.bande-action small { font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rouge-texte-doux); }

/* 2. Écoute en cours : même bande, + niveau sonore animé */
.niveau { display: inline-flex; gap: 3px; align-items: center; }
.niveau i { width: 3px; height: 16px; background: #fff; border-radius: 1px; animation: niv .9s ease-in-out infinite; }
.niveau i:nth-child(2){animation-delay:.15s}.niveau i:nth-child(3){animation-delay:.3s}
.niveau i:nth-child(4){animation-delay:.45s}.niveau i:nth-child(5){animation-delay:.6s}
@keyframes niv { 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }

/* 3. Passages à risque dans l'article : caviardage lisible */
.caviar-alerte {             /* ambre = à moitié caviardé */
  background: var(--ambre-fond); box-shadow: inset 0 -4px 0 var(--ambre);
  padding: 1px 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: var(--encre); text-decoration: none;
}
.caviar-blocage {            /* rouge = entièrement caviardé, texte blanc encore lisible */
  background: var(--rouge-profond); color: #fff;
  padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: none;
}

/* Logo : GAND recouvert d'une bande rouge */
.logo { font: 700 15px var(--f-ui); letter-spacing: .05em; display: inline-flex; }
.logo .gand { position: relative; }
.logo .gand::after { content: ""; position: absolute; left: -2px; right: -2px; top: 3px; bottom: 3px; background: var(--rouge); }

@media (prefers-reduced-motion: reduce) { .niveau i { animation: none; } }