/* ============================================================================
   /sms — LES DEUX LISTES DE CONSENTEMENT (Hermes, 2026-09-13)
   ============================================================================
   COMPLEMENT de stop.css, pas un remplacant : la page /sms reprend tout le
   cadre de l'ancienne page de desabonnement (stop-wrap, stop-card, stop-btn,
   stop-title...) et n'ajoute ici que ce qui n'existait pas — le bloc « une
   liste » et ses etats.

   ---------------------------------------------------------------------------
   CORRECTION DE CONTRASTE DU 2026-09-13 (signalee par Ed) — LIRE CECI
   ---------------------------------------------------------------------------
   La premiere version de cette feuille appelait trois jetons de surface et
   d'etat avec un repli de theme CLAIR, en pensant « aucune couleur en dur,
   tout passe par le theme ». Sauf que ces trois jetons n'etaient declares
   NULLE PART. Ce n'etaient donc pas des variables de theme avec un repli de
   securite : C'ETAIENT LES REPLIS QUI S'APPLIQUAIENT, TOUJOURS. Le cadre etait
   peint en #FFFFFF opaque, et tout son contenu heritait des gris CLAIRS du
   theme sombre. Ratios mesures avant correction : phrase de consentement
   1,39:1, titre de liste 1,00:1 (blanc sur blanc), bouton « Ne plus recevoir »
   1,48:1, resumes 3,45:1.

   LA LECON : un `var(--x, repli)` sur un jeton qui n'existe pas n'est pas une
   precaution, c'est une couleur en dur deguisee — et personne ne la relit.
   Les replis sont donc SUPPRIMES d'ici. Les couleurs viennent de jetons
   `--sms-*` declares sur `.stop-main` dans stop.css, donc dont l'absence se
   verrait immediatement.

   SUITE DU 2026-09-13 (ordre d'Ed) : le piege est ferme A LA SOURCE. Les trois
   jetons manquants sont desormais DECLARES dans le `:root` de app.css, aux
   valeurs sombres du theme — une page qui les appellera demain ne repartira
   plus en blanc sur blanc. Cette feuille-ci n'en depend pas : elle garde ses
   `--sms-*`, qui disent pour QUEL fond une couleur a ete calibree.
   Dans la foulee, les replis `var(--sp-N, …)` / `var(--r-md, …)` de ce fichier
   ont ete retires : ces jetons-la existent bel et bien dans app.css, leur repli
   n'etait qu'un doublon local de la charte qui ne servait jamais.

   PORTEE : stop.css et sms.css ne sont charges que par app/views/sms.php et
   app/views/stop.php. Aucune variable de app.css n'est redefinie. Les autres
   pages du site ne peuvent pas bouger.

   L'ETAT SE LIT SANS COULEUR. Le badge porte un TEXTE (« Vous recevez » / « Vous
   ne recevez plus ») : un daltonien, une impression en noir et blanc ou un
   lecteur d'ecran donnent la meme information. La couleur ne fait que confirmer.
   ========================================================================= */

.sms-liste {
  background: var(--sms-panel);
  /* LA LIGNE QUI MANQUAIT. Sans elle, tout le contenu du cadre heritait de la
     couleur du body (--text-2, #D4D4D4, un gris CLAIR prevu pour le fond noir)
     et se retrouvait a 1,4:1 sur un fond quasi blanc. */
  color: var(--sms-ink);
  border: 1px solid var(--border);          /* INCHANGE : 14,35:1 sur creme, deja conforme */
  border-left: 4px solid var(--sms-accent);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  margin: 0 0 var(--sp-4);
  text-align: left;
}

/* Liste coupee : le liseré perd sa couleur d'accent. L'information reste
   portee par le badge, la couleur ne fait que la doubler. */
.sms-liste-off { border-left-color: var(--border); }   /* INCHANGE : 14,35:1 */

.sms-liste-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

/* app.css peint TOUS les h1..h4 en var(--text) = #FFFFFF. Sur le cadre creme
   c'etait donc du blanc sur blanc : 1,00:1, titre litteralement invisible.
   La classe (0-1-0) l'emporte sur le selecteur d'element h2 (0-0-1). */
.sms-liste-titre {
  color: var(--sms-ink);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.3;
}

.sms-badge {
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  padding: .2em .7em;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.sms-badge-on  { color: var(--sms-ok); }
.sms-badge-off { color: var(--sms-ink-2); }

.sms-liste-resume,
.sms-liste-depuis {
  color: var(--sms-ink-2);
  font-size: .92rem;
  margin: var(--sp-2) 0 0;
}

/* LA PHRASE DE CONSENTEMENT. Elle doit se LIRE, pas se deviner : meme taille
   que le corps de texte, jamais en gris pale, jamais plus petite que le reste.
   Une mention qu'on doit chercher n'est pas une mention affichee.
   Le commentaire disait deja tout ca — mais la couleur heritee la mettait a
   1,39:1. Elle est maintenant a 14,79:1. */
.sms-mention {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--border);    /* INCHANGE : 13,44:1 */
  background: var(--sms-panel-2);
  color: var(--sms-ink);
  font-size: .95rem;
  line-height: 1.45;
}
.sms-mention-forte { font-weight: 600; }

.sms-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
}

.sms-code-note { color: var(--sms-ink-2); font-size: .88rem; }

/* .sms-when vit dans l'alerte, donc sur fond SOMBRE : sa couleur est traitee
   dans stop.css avec les autres gris du fond sombre, pas ici. */
.sms-when { font-size: .88rem; }

/* --- LES BOUTONS DANS LE CADRE CREME -----------------------------------------
   .stop-btn-ghost est defini dans stop.css pour le fond SOMBRE (texte
   --text-2 #D4D4D4, bordure claire). Pose sur le cadre creme, c'etait du gris
   tres clair sur creme : 1,48:1 au repos et 1,00:1 au survol — le bouton
   « Ne plus recevoir », c'est-a-dire LE geste principal de la page, etait
   illisible. On le rehabille pour ce fond-la, ici et nulle part ailleurs. */
.sms-liste .stop-btn-ghost {
  color: var(--sms-ink);
  border-color: var(--border);             /* INCHANGE : 14,35:1 — stop.css l'eclaircit pour le fond sombre, on le remet pour le creme */
  background: transparent;
}
.sms-liste .stop-btn-ghost:hover {
  color: var(--sms-ink);
  border-color: var(--sms-accent);
  background: rgba(194, 47, 0, .07);
}

/* Le bouton principal garde le --primary #FF6B1A de la marque (son texte
   #14100c y est a 6,64:1). Ce qui manquait, c'est son CONTOUR : orange vif sur
   creme ne fait que 2,48:1, sous le 3:1 exige pour delimiter une commande
   (WCAG 1.4.11). On ne touche donc pas le remplissage — on borde. */
.sms-liste .stop-btn-primary { border-color: var(--sms-accent); }

@media (max-width: 480px) {
  /* Sur telephone, le bouton prend toute la largeur : c'est le geste principal
     de la page et il ne doit pas se rater au pouce. */
  .sms-form .stop-btn { width: 100%; }
}