/* ===== /stop — desabonnement SMS (Hermes, 2026-09-13) ========================
 * Feuille SEPAREE, chargee uniquement par app/views/stop.php : aucune ligne de
 * app.css n'est modifiee, donc aucune page existante ne peut regresser. Meme
 * parti pris que satisfaction.css, dont elle reprend la charte et les variables
 * (--bg, --primary, --sp-*, --r-*), deja chargees par app.css.
 *
 * MOBILE D'ABORD, ET MEME MOBILE SEULEMENT OU PRESQUE : on arrive ici depuis un
 * lien recu par SMS. Cibles de tap >= 50 px, une seule colonne, aucun defilement
 * horizontal, et le bouton « Confirmer » toujours visible sans avoir a chercher.
 *
 * ZERO JAVASCRIPT sur cette page : rien ici ne depend d'un script.
 * ========================================================================== */

.stop-main {
  position: relative;
  padding-top: 84px;                 /* sous la topbar fixe */
  min-height: 100vh;
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(255, 107, 26, 0.14), transparent 70%),
    var(--bg);
}

.stop-section { padding: var(--sp-8) 0 var(--sp-16); }

.stop-wrap {
  position: relative;
  z-index: 1;
  max-width: 560px;                  /* colonne courte : il n'y a qu'une decision a prendre */
  text-align: center;
}

.stop-logo {
  display: block;
  width: clamp(72px, 20vw, 104px);
  height: auto;
  margin: 0 auto var(--sp-2);
  mix-blend-mode: screen;
  filter: contrast(1.15) brightness(1.08) saturate(1.15)
          drop-shadow(0 0 18px rgba(255, 107, 26, 0.5));
}

.stop-title {
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  margin-bottom: var(--sp-3);
}

.stop-lead {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 auto var(--sp-6);
  max-width: 44ch;
}

.stop-alert {
  margin: 0 auto var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  max-width: 44ch;
  border: 1px solid rgba(255, 122, 90, 0.5);
  border-radius: var(--r-md, 12px);
  background: rgba(255, 122, 90, 0.08);
  color: #FFB4A0;
  font-size: .95rem;
  line-height: 1.45;
}

/* --- Le cadre de decision ------------------------------------------------- */

.stop-card {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 18px);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}

.stop-card-fait {
  margin-top: var(--sp-8);
  text-align: center;
}

.stop-numline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 var(--sp-5);
  color: var(--text-muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Le numero MASQUE. Grand et en chiffres tabulaires : le porteur du numero doit
   se reconnaitre d'un coup d'oeil, sans lire les points un par un. */
.stop-num {
  color: var(--text);
  font-size: clamp(1.25rem, 5.5vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.stop-question {
  margin: 0 0 var(--sp-6);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* --- Boutons -------------------------------------------------------------- */

.stop-actions {
  display: flex;
  flex-direction: column;            /* mobile : l'un sous l'autre, pas de doute possible */
  gap: var(--sp-3);
}

@media (min-width: 520px) {
  .stop-actions { flex-direction: row-reverse; justify-content: flex-end; }
  /* row-reverse : « Confirmer » est declare EN PREMIER dans le HTML (donc
     premier au clavier et pour un lecteur d'ecran) mais s'affiche a droite,
     comme l'attend un utilisateur de bureau. */
  .stop-actions .stop-btn { flex: 0 1 auto; }
}

.stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill, 999px);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.stop-btn-primary {
  background: var(--primary);
  color: #14100c;
  box-shadow: var(--glow);
}
.stop-btn-primary:hover { background: var(--primary-hover); }

.stop-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}
.stop-btn-ghost:hover { border-color: var(--primary); color: var(--text); }

.stop-btn-full { width: 100%; margin-top: var(--sp-4); }

.stop-form-inline { margin: var(--sp-3) 0 0; }

/* --- Saisie du numero ----------------------------------------------------- */

.stop-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text-2);
  font-size: .92rem;
  font-weight: 600;
}

.stop-input {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  background: rgba(0, 0, 0, .35);
  color: var(--text);
  font-family: inherit;
  font-size: 1.15rem;                /* >= 16px : evite le zoom automatique iOS */
  letter-spacing: .04em;
}
.stop-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 26, .22);
}

.stop-hint {
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.45;
}

/* Honeypot : hors ecran, mais bien present dans le DOM et remplissable par un
   robot. Pas de display:none — certains bots l'ignorent justement pour ca. */
.stop-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Notes et mentions ---------------------------------------------------- */

.stop-note {
  margin: var(--sp-5) auto 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.stop-note a { color: var(--text-2); }

.stop-back { margin-top: var(--sp-6); }
.stop-back a { color: var(--text-muted); font-size: .9rem; }

.stop-rgpd {
  margin: var(--sp-10) auto 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.6;
  text-align: left;
}
.stop-rgpd a { color: var(--text-2); }

/* --- Code de verification a 6 chiffres (lot « code SMS », 2026-09-13) ------
 *
 * Chasse FIXE et interlettrage large : six chiffres se relisent alors caractere
 * par caractere, ce qui est exactement ce qu'on fait en recopiant un code depuis
 * un SMS. En chasse proportionnelle, « 111111 » et « 000000 » n'ont pas la meme
 * largeur et l'oeil perd sa place.
 *
 * Pas de six cases separees : c'est joli, mais ca demande du JavaScript pour
 * passer d'une case a l'autre, et cette page n'en a pas une ligne — elle doit
 * marcher sur le vieux telephone d'un client qui veut juste sortir du fichier.
 * Un seul champ natif laisse aussi iOS et Android proposer le code recu
 * (autocomplete="one-time-code"), ce que six cases cassent.
 */
.stop-input-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.7rem;
  letter-spacing: .42em;
  text-align: center;
  padding-left: .42em;              /* compense l'interlettrage du dernier chiffre */
}

/* Message de confirmation d'envoi : meme cadre que l'alerte, ton neutre et non
   alarmant — ce n'est pas une erreur, c'est une etape franchie. */
.stop-alert-ok {
  border-color: rgba(120, 200, 140, .45);
  background: rgba(60, 140, 80, .12);
  color: var(--text);
}

/* ============================================================================
   LOT CONTRASTE WCAG AA — /sms et /stop UNIQUEMENT (Hermes, 2026-09-13)
   ============================================================================
   POURQUOI CE LOT EXISTE : Ed a signale des textes illisibles sur /sms. La cause
   n'etait PAS un choix de charte, c'etait un BUG. sms.css a ete ecrit avec des
   valeurs de repli de theme CLAIR — `var(--surface, #fff)`,
   `var(--surface-2, rgba(0,0,0,.03))`, `var(--success, #1b7f3b)` — alors que
   `--surface`, `--surface-2` et `--success` N'EXISTENT PAS dans app.css. Les
   replis se sont donc appliques : le cadre d'une liste etait peint en #FFFFFF
   OPAQUE, et tout ce qu'il contenait heritait des gris CLAIRS du theme sombre
   (`--text-2` #D4D4D4, `--text-muted` #8A8A8A). Resultat mesure : la phrase de
   consentement a 1,39:1, le titre de liste a 1,00:1 (blanc sur blanc), le bouton
   « Ne plus recevoir » a 1,48:1.
   Le repli n'est donc pas « rattrape » ici : il est SUPPRIME (voir sms.css).

   PORTEE STRICTEMENT LOCALE. Les jetons sont declares sur `.stop-main`, qui
   n'existe que dans app/views/sms.php et app/views/stop.php. AUCUNE variable
   de app.css n'est redefinie, aucune ligne de app.css n'est touchee : les
   autres pages du site ne peuvent pas bouger.

   IDENTITE VISUELLE CONSERVEE : le fond creme du cadre reste (il devient une
   valeur ASSUMEE au lieu d'un #fff accidentel), le fond de page reste
   `--bg` + halo orange, le bouton principal reste `--primary` #FF6B1A. Les
   couleurs de marque trop claires pour le creme sont ASSOMBRIES D'UN CRAN
   (#E63900 -> #C22F00) plutot que remplacees par du noir.

   TOUS les ratios ci-dessous sont CALCULES (luminance relative WCAG 2.1, avec
   composition des couches semi-transparentes), pas apprecies a l'oeil. Script
   reproductible : wcag.js + stacks.js (rapport de mission).
   ========================================================================== */

.stop-main {
  /* --- Cote CREME (le cadre d'une liste, /sms ecran « etat ») ------------- */
  --sms-panel:    #F6EEE2;  /* creme Byzance : remplace le #FFFFFF accidentel */
  --sms-panel-2:  #EDE2D2;  /* un cran plus fonce : fond de la mention        */
  --sms-ink:      #14100C;  /* encre principale — 16,45:1 sur creme.
                               Ce n'est pas du noir brut : c'est EXACTEMENT la
                               valeur deja utilisee par .stop-btn-primary. */
  --sms-ink-2:    #584A3A;  /* encre secondaire chaude — 7,43:1 sur creme    */
  --sms-ok:       #146B31;  /* vert du badge « vous recevez » — 5,74:1       */
  --sms-accent:   #C22F00;  /* --accent #E63900 assombri d'un cran — 4,93:1  */
  --sms-focus-lt: #7A4A00;  /* anneau de focus sur creme — 6,50:1            */

  /* --- Cote SOMBRE (fond de page, .stop-card, champs, alertes) ------------ */
  --sms-muted-d:  #A6A6A6;  /* remplace --text-muted #8A8A8A LOCALEMENT.
                               #8A8A8A passait de justesse (4,54:1 sur la
                               carte, 4,35:1 dans l'alerte = ECHEC) ; a
                               #A6A6A6 la marge est de 6,2 a 7,4:1. */
  --sms-line-d:   #7C7466;  /* contour des champs et boutons fantomes sur
                               fond sombre — 3,39:1 (etait 1,09:1)          */
}

/* --- Gris renforces sur fond sombre -------------------------------------- */
.stop-numline,
.stop-hint,
.stop-note,
.stop-rgpd,
.stop-back a,
.sms-when            { color: var(--sms-muted-d); }

/* Le placeholder n'etait defini NULLE PART : sa couleur venait du navigateur,
   donc non mesurable et variable d'un UA a l'autre. On la fixe. */
.stop-input::placeholder { color: var(--sms-muted-d); opacity: 1; }

/* --- Contours interactifs sur fond sombre (WCAG 1.4.11, seuil 3:1) ------- */
.stop-input      { border-color: var(--sms-line-d); }
.stop-btn-ghost  { border-color: var(--sms-line-d); }

/* --- Bordures des messages d'etat (elles PORTENT le statut) -------------- */
.stop-alert      { border-color: #C06A50; }   /* 4,37:1 (etait 2,65:1) */
.stop-alert-ok   { border-color: #7FAE8C; }   /* 6,72:1 (etait 2,71:1) */

/* --- FOCUS CLAVIER ------------------------------------------------------------
   Il n'existait AUCUNE regle de focus sur cette page : les boutons et les liens
   s'en remettaient a l'anneau par defaut du navigateur, et `.stop-input:focus`
   posait meme `outline: none`. Sur une page grand public ou l'on decide de ses
   consentements, un utilisateur au clavier doit voir ou il est.
   Deux anneaux, parce qu'il y a deux fonds : or Byzance sur le sombre (9,12:1),
   ambre sombre sur le creme (6,50:1). `outline` suit le border-radius tout seul,
   donc la forme des boutons pilule n'est pas touchee. */
.stop-main a:focus-visible,
.stop-main button:focus-visible,
.stop-main input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.sms-liste a:focus-visible,
.sms-liste button:focus-visible,
.sms-liste input:focus-visible { outline-color: var(--sms-focus-lt); }

/* La mention de consentement apparait AUSSI hors du cadre creme : sur l'ecran
   « confirme », elle est dans .stop-card, donc sur fond SOMBRE. Elle avait la
   couleur heritee du body (--text-2) et un fond rgba(0,0,0,.03) a peine
   distinct. On la traite ici pour le fond sombre ; sms.css la retraite pour le
   creme. C'est la seule regle qui a besoin de connaitre ses deux contextes. */
.stop-card .sms-mention {
  background: rgba(0, 0, 0, .28);
  border-left-color: var(--sms-line-d);
  color: var(--text);
}