/* Statsmaker v2 — écran 17 « Info ».
 *
 * Deux partis pris, et leurs raisons :
 *
 * 1. **L'état des onglets est porté par `aria-current`**, pas par une classe
 *    décorative posée en JavaScript. Une seule source de vérité, et l'état est
 *    annoncé aux technologies d'assistance au lieu de n'exister qu'en couleur.
 *
 * 2. **Rien ne dépend du JavaScript pour être lisible.** Les six panneaux sont
 *    visibles par défaut ; c'est l'îlot qui en masque cinq. Un contrat qui
 *    disparaît parce qu'un script n'a pas chargé serait un défaut grave, pas un
 *    détail de confort.
 *
 * Impression : les résumés non contractuels (`.sm-plain`) et tout ce qui porte
 * `no-print` sortent du document. Sur papier, il ne reste que le contrat.
 */

/* ── Onglets ──────────────────────────────────────────────────────────── */
.sm-info-onglets {
  display: flex; gap: 2px; margin-bottom: var(--sp-9);
  overflow-x: auto; border-bottom: 1px solid var(--color-divider);
}
.sm-info-onglet {
  flex: none; white-space: nowrap; text-decoration: none;
  padding: var(--sp-4) var(--sp-6); min-height: var(--sm-tap-min);
  display: flex; align-items: center;
  font-size: var(--fs-body); font-weight: 600;
  color: var(--color-neutral-700);
  border-bottom: 2.5px solid transparent;
}
.sm-info-onglet:hover { color: var(--color-accent-700); }
.sm-info-onglet[aria-current="page"] {
  color: var(--color-accent-700); border-bottom-color: var(--color-accent);
}

/* ── Structure commune des panneaux ───────────────────────────────────── */
.sm-info-panneau { max-width: 760px; margin: 0 auto var(--sp-10); }
.sm-info-panneau[hidden] { display: none; }
.sm-info-surtitre {
  font-size: var(--fs-cap); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral-700); font-weight: 700; margin: 0;
}
.sm-info-titre { font-size: var(--fs-page); margin: var(--sp-1) 0 var(--sp-5); text-wrap: balance; }
.sm-info-chapeau { color: var(--color-neutral-700); font-size: var(--fs-body); margin: 0 0 var(--sp-8); }
.sm-info-sous-titre {
  font-size: var(--fs-h4); margin: var(--sp-10) 0 var(--sp-5);
}
.sm-info-panneau p { line-height: 1.7; text-wrap: pretty; }

/* ── À propos ─────────────────────────────────────────────────────────── */
.sm-info-faits {
  list-style: none; padding: 0; margin: var(--sp-6) 0 var(--sp-9);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-5);
}
.sm-info-faits li {
  background: var(--color-surface); border-radius: var(--r-card-in);
  padding: var(--sp-7); text-align: center; box-shadow: var(--shadow-sm);
}
.sm-info-fait-v {
  display: block; font-family: var(--font-heading);
  font-size: var(--fs-num-lg); color: var(--color-accent-700);
}
.sm-info-fait-l { display: block; font-size: var(--fs-cap); color: var(--color-neutral-700); }

.sm-info-bloc { margin-bottom: var(--sp-9); padding: var(--sp-8) var(--sp-9); }
.sm-info-bloc-titre {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: 0 0 var(--sp-4); font-size: var(--fs-h4);
}
.sm-info-ic {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  background: var(--color-accent-100); color: var(--color-accent-700);
  display: grid; place-items: center;
}
.sm-info-points { list-style: none; padding: 0; margin: 0; }
.sm-info-points li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-2) 0; font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty;
}
.sm-info-points svg { flex: none; margin-top: 3px; }

/* ── Aide ─────────────────────────────────────────────────────────────── */
.sm-info-tutos, .sm-info-faq { display: flex; flex-direction: column; gap: var(--sp-4); }
.sm-info-tuto-titre {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0; font-size: var(--fs-h4);
}
.sm-info-tuto-resume { margin: var(--sp-2) 0 0; font-size: var(--fs-body-sm); color: var(--color-neutral-800); }
.sm-info-tuto-note { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--color-neutral-700); }

/* Le lien d'un tuto PUBLIÉ. La carte portait « Disponible » sans rien
   ouvrir ; ses étapes vivent dans la section « Installer l'application »
   de cette même page. La cible fait 44 px par sa propre hauteur — R-T (a),
   `sm-tokens.css` : un lien qui porte sa peau ne prend pas `.sm-touch`. */
.sm-info-tuto-acts { margin: var(--sp-4) 0 0; }
.sm-info-tuto-lien {
  display: inline-flex; align-items: center; min-height: var(--sm-tap-min);
  font-size: var(--fs-body-sm); font-weight: 700;
}
.sm-info-plateformes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5);
}
.sm-info-plateforme {
  background: var(--color-surface); border-radius: var(--r-card-in);
  padding: var(--sp-6) var(--sp-7); box-shadow: var(--shadow-sm);
}
.sm-info-plateforme h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-body); }
.sm-info-plateforme ol { margin: var(--sp-4) 0 0; padding-left: var(--sp-8); font-size: var(--fs-body-sm); line-height: 1.7; }
.sm-info-faq h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.sm-info-faq p { margin: 0; font-size: var(--fs-body-sm); color: var(--color-neutral-700); }

/* ── Contact ──────────────────────────────────────────────────────────── */
.sm-info-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-8); align-items: start; }
.sm-info-form { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-9); }
.sm-info-form h2 { margin: 0; font-size: var(--fs-h3); }
.sm-info-form-note { margin: 0; font-size: var(--fs-meta); color: var(--color-neutral-700); }
.sm-info-form-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-5); }
/* `.sm-field` et `.sm-field-err` ont été promus dans `sm-tokens.css` : ils sont
   le motif de champ DU PRODUIT (contact, connexion, réinitialisation), pas un
   détail de l'écran Info. Deux déclarations du même motif divergeraient à la
   première retouche. */
.sm-field-compteur { float: right; font-size: var(--fs-cap); color: var(--color-neutral-700); }
.sm-info-form-delai {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0; font-size: var(--fs-cap); color: var(--color-neutral-700);
}
.sm-info-form-delai svg { flex: none; }
.sm-info-retour { margin: 0; font-size: var(--fs-body-sm); }
.sm-info-retour[data-sm-etat="ok"] { color: var(--color-accent-2-800); }
.sm-info-retour[data-sm-etat="erreur"] { color: var(--sm-loss-text); }

.sm-info-bureaux { display: flex; flex-direction: column; gap: var(--sp-6); }
.sm-info-bureau { padding: var(--sp-8); }
.sm-info-bureau-tete { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin: 0; }
.sm-info-bureau-nature {
  font-size: var(--fs-cap); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.sm-info-bureau h2 { margin: var(--sp-1) 0 0; font-size: var(--fs-h4); }
.sm-info-bureau-adresse { margin: var(--sp-1) 0 0; font-size: var(--fs-body-sm); color: var(--color-neutral-700); }
.sm-info-lignes {
  list-style: none; padding: var(--sp-5) 0 0; margin: var(--sp-5) 0 0;
  border-top: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sm-info-lignes a {
  display: flex; align-items: center; gap: var(--sp-4);
  text-decoration: none; color: inherit; min-height: var(--sm-tap-min);
}
.sm-info-lignes .sm-info-ic { width: 28px; height: 28px; border-radius: var(--r-icon); }
.sm-info-ligne-label {
  display: block; font-size: var(--fs-cap); letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-700);
}
.sm-info-ligne-valeur { display: block; font-size: var(--fs-body-sm); color: var(--color-accent-700); font-weight: 600; }

/* ── Newsletter & réseaux ─────────────────────────────────────────────── */
.sm-info-nl {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--color-accent-700); border-radius: var(--r-card-in); padding: var(--sp-9);
}
.sm-info-nl .input { flex: 1; min-width: 180px; }
.sm-info-nl .btn { background: var(--color-bg); color: var(--color-accent-800); }
.sm-info-nl .sm-info-retour { flex-basis: 100%; color: var(--color-bg); }
.sm-info-reseaux { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.sm-info-reseaux a {
  display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit;
  background: var(--color-surface); border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-6); box-shadow: var(--shadow-sm); min-height: var(--sm-tap-min);
}
.sm-info-reseau-ini {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-xs);
  background: var(--color-accent-800); color: var(--color-bg);
  display: grid; place-items: center; font-family: var(--font-heading); font-size: var(--fs-ui);
}
.sm-info-reseau-nom { display: block; font-size: var(--fs-body-sm); font-weight: 600; }
.sm-info-reseau-compte { display: block; font-size: var(--fs-cap); color: var(--color-neutral-700); }

/* ── Documents contractuels ───────────────────────────────────────────── */
.sm-legal-intro { color: var(--color-neutral-700); font-size: var(--fs-body); margin: 0 0 var(--sp-6); }
.sm-legal-outils {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-7);
}
.sm-legal-champ {
  display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 200px;
  background: var(--color-surface); border: 1px solid var(--sm-border-field);
  border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-7);
}
/* ⚠️ PAS de `outline: none` ici (F-1, WCAG 2.4.7). La règle pesait (0,1,1) et
   écrasait le `:focus-visible` du système, qui pèse (0,1,0) et est chargé avant :
   le champ n'avait plus AUCUN repère au clavier. C'est la même famille de
   défaut que le « bouton invisible » du lot 1 — une règle de composant qui bat
   une règle de système à spécificité nulle. `test_v2_css.py` interdit désormais
   le motif dans toutes les feuilles v2.
   L'anneau est porté par le CONTENEUR, qui dessine la pilule : c'est la forme
   visible du contrôle, pas l'`<input>` transparent qu'elle contient. */
.sm-legal-champ input {
  border: none; background: none; width: 100%;
  font: inherit; font-size: var(--fs-body); color: inherit; min-height: 36px;
}
.sm-legal-champ:focus-within {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.sm-legal-loupe { display: flex; color: var(--color-neutral-700); }
.sm-legal-compte { font-size: var(--fs-cap); color: var(--color-neutral-700); }

.sm-legal-sommaire { margin: 0 0 var(--sp-9); }
.sm-legal-sommaire ol { margin: 0; padding-left: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.sm-legal-sommaire a { font-size: var(--fs-body); font-weight: 600; }
/* Version du document — identifiant contractuel, PAS de la coquille (C-3).
   Hors de `sm-plain` : elle survit donc à l'impression. */
.sm-legal-version {
  margin: 0 0 var(--sp-3); font-size: var(--fs-cap); color: var(--color-neutral-700);
}

/* Résumé NON CONTRACTUEL : visuellement distinct, et hors impression. */
.sm-plain {
  display: block; margin-top: 2px;
  font-size: var(--fs-meta); color: var(--sm-scope-fg);
  border-left: 3px solid var(--sm-scope-border); padding-left: var(--sp-4);
  line-height: 1.5; text-wrap: pretty;
}
/* La mention « Résumé non contractuel : » est VISIBLE (C-1). Elle était en
   `sm-sr-only` : seuls les lecteurs d'écran l'entendaient, et un lecteur voyant
   ne distinguait plus la reformulation du contrat. Or la décision client ZR-01
   ne tolère ces résumés QUE parce qu'ils sont annoncés — la mention est la
   condition de leur présence, pas un ornement. */
.sm-plain-tag {
  display: inline; margin-right: var(--sp-2);
  font-size: var(--fs-cap); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-neutral-700);
}

.sm-legal-doc .legal-section {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--r-card-in); margin-bottom: var(--sp-4);
  /* ⚠️ Décalage d'ancre : `110px` y était écrit à la main — le TROISIÈME nombre
     du produit à compenser une coquille de 67 px, après le `+12` de Match et le
     `+53` du Glossaire. Aucun des trois ne suivait la coquille ; celui-ci la
     dépassait de 43 px, et une section atteinte par le sommaire s'ouvrait donc
     43 px trop bas. `--sm-collant-top` est la même grandeur que celle dont
     dérivent les collants — parce que c'est la même barre qui recouvre. */
  padding: var(--sp-6) var(--sp-7); scroll-margin-top: var(--sm-collant-top);
}
.sm-legal-doc .legal-section > h2 { margin: 0; font-size: var(--fs-body); font-weight: 600; text-wrap: pretty; }
.sm-legal-doc .legal-section p,
.sm-legal-doc .legal-section li { font-size: var(--fs-body); line-height: 1.75; color: var(--color-neutral-800); text-wrap: pretty; }
.sm-legal-doc .legal-list { padding-left: var(--sp-8); }
.sm-legal-doc .legal-term { font-weight: 700; }
.sm-legal-doc .legal-section[hidden] { display: none; }
.sm-legal-vide { color: var(--color-neutral-700); padding: var(--sp-9); text-align: center; }

/* En-tête d'accordéon : c'est l'îlot qui transforme le `h2` en bouton. Sans
   JavaScript, le titre reste un titre et le corps reste ouvert. */
.sm-legal-doc .legal-section > h2 > button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--sm-tap-min);
}
.sm-legal-doc .legal-section > h2 > button:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.sm-legal-chevron { flex: none; margin-left: auto; color: var(--color-accent-700); display: flex; }
.sm-legal-doc .legal-section > h2 > button[aria-expanded="false"] .sm-legal-chevron { transform: rotate(-90deg); }
.sm-legal-marque { background: var(--color-accent-100); color: var(--color-accent-800); border-radius: 3px; }

@media print {
  .sm-plain { display: none !important; }
  .sm-info-panneau[hidden] { display: block !important; }
  .sm-legal-doc .legal-section[hidden] { display: block !important; }
}