/* Refonte — guide typographique (/francais-correct, /en/french-typography).
   Conversion v2 du 2026-09-24 (audit v2, décisions d'Antoine). Le sommaire,
   les accordéons (`.notice`), les cartes de sortie et le bouton de copie
   (`.copie`) viennent du référentiel : il ne reste ici que le héros, les paires
   d'exemples et l'impression. Aucune nuance propre (A200, A201) : les jetons
   seuls, donc le thème sombre suit sans bloc dédié (A023, A064). */

.hero-guide-typo {
  padding-block: var(--e-7) 0;
}

@media (min-width: 1024px) {
  .hero-guide-typo {
    padding-block: var(--e-8) 0;
  }
}

/* ⚠️ `max-width: none` : le socle plafonne tout h1 à 22ch (même piège que /faq). */
.hero-guide-typo h1 {
  font-size: var(--t-heros);
  line-height: 1.08;
  max-width: none;
  text-wrap: balance;
}

.hero-guide-typo__definition {
  font-size: var(--t-h4);
  line-height: 1.4;
  max-width: 44rem;
}

.hero-guide-typo__intro {
  max-width: 68ch;
  color: var(--texte-2);
}

.specimen-typo {
  max-width: 44rem;
  margin: var(--e-6) 0 0;
}

.specimen-typo__corrections {
  max-width: 68ch;
  margin: var(--e-3) 0 0;
}

.hero-guide-typo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  margin: var(--e-5) 0 0;
}

/* « Vérifié le … » : lien seul, 21 px de haut mesurés le 2026-10-19. */
.hero-guide-typo__actions > a {
  display: flex;
  align-items: center;
  min-height: var(--cible-min);
}

/* ——— Paires « À éviter / À écrire » (QCM du 2026-09-24 : filet coloré) ———
   Carte `--surface` à filet gauche ; l'étiquette porte l'information, la
   couleur la renforce. Pas d'aplat, pas d'ombre, angle droit (A200, A212). */

.paire-typo {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

@media (min-width: 640px) {
  .paire-typo {
    grid-template-columns: 1fr 1fr;
  }
}

.exemple-typo {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--bordure);
  padding: var(--e-3) var(--e-4);
  min-width: 0;
}

.exemple-typo--eviter { border-left-color: var(--erreur); }
.exemple-typo--ecrire { border-left-color: var(--succes); }

.exemple-typo__etiquette {
  margin: 0 0 var(--e-1);
  font-size: var(--t-petit);
  font-weight: 600;
}

.exemple-typo--eviter .exemple-typo__etiquette { color: var(--erreur); }
.exemple-typo--ecrire .exemple-typo__etiquette { color: var(--succes); }

.exemple-typo__texte {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Critique du 2026-09-30 (QCM) : le segment corrigé porte un filet encre de
   2 px (règle de la bordure porteuse), sans aplat ; les espaces qui font la
   règle se voient (⍽ insécable, réduit pour la fine ; ␣ espace ordinaire). */
.exemple-typo__texte .ecart {
  background: none;
  color: inherit;
  border-bottom: 2px solid var(--encre);
}

.exemple-typo__texte .ecart--espace {
  color: var(--texte-2);
}

.exemple-typo__texte .ecart--fine > [aria-hidden] {
  font-size: 0.6em;
}

/* ——— Chapitres et règles ——— */

/* Les puces du sommaire et les ancres de règle ne collent pas le titre au bord
   du viewport (retour d'Antoine du 2026-09-24 sur /guide). */
.chapitre-typo,
.regle-typo {
  scroll-margin-top: var(--e-6);
}

.chapitre-typo + .chapitre-typo {
  margin-top: var(--e-8);
}

/* A505 : les h2 prennent la largeur de la colonne, plus de casse à 423 px. */
.chapitre-typo h2 {
  max-width: none;
  text-wrap: balance;
}

.chapitre-typo__chapeau {
  max-width: 68ch;
  color: var(--texte-2);
}

/* Lien isolé : cible de 44 px (A147). */
.chapitre-typo__retour {
  margin: var(--e-5) 0 0;
}

.chapitre-typo__retour a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
}

.regle-typo {
  margin-top: var(--e-7);
}

.regle-typo h3 {
  font-size: var(--t-h4);
  margin-bottom: var(--e-2);
}

.regle-typo h3 a {
  color: inherit;
  text-decoration: none;
}

.regle-typo h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.regle-typo .prose p:last-child {
  margin-bottom: 0;
}

.regle-typo__note {
  max-width: 68ch;
  margin: var(--e-3) 0 0;
}

.copies {
  margin-top: var(--e-7);
}

.copies__titre {
  font-size: var(--t-h4);
  margin-bottom: var(--e-1);
}

.copies__aide {
  margin: 0 0 var(--e-3);
}

.copies__clavier {
  max-width: 68ch;
  margin: var(--e-4) 0 0;
}

/* Liens « Comment les taper » : 20 px de haut, de 40 à 71 px de large, mesurés
   le 2026-10-19. Chacun garde sa cible de 44 px ; les « · » restent du texte. */
.copies__clavier a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
}

.guide-typo__article .texte-petit {
  max-width: 68ch;
}

.sources-typo {
  padding-left: var(--e-5);
}

.sources-typo li + li {
  margin-top: var(--e-2);
}

/* Sources : 90 à 94 caractères par ligne à 1440 px (mesure du 2026-10-19),
   ramenés à la mesure de prose. */
.sources-typo > li {
  max-width: 68ch;
}

/* « Imprimer le guide » est un <button> habillé en carte de sortie. */
button.etape-suivante {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.guide-typo__adresse {
  display: none;
}

/* ——— Impression ———
   ⚠️ composants.css masque en impression tout enfant de <main> autre que la
   feuille du clavier : la spécificité plus forte ci-dessous rend le guide. */
@media print {
  @page {
    size: A4;
    margin: 16mm 15mm 18mm;
  }

  main > .guide-typo {
    display: block !important;
  }

  .guide-typo .sommaire,
  .guide-typo .hero-guide-typo__actions,
  .guide-typo .copies,
  .guide-typo .chapitre-typo__retour,
  .guide-typo__suite {
    display: none !important;
  }

  .guide-typo__adresse {
    display: block;
    margin-top: 10mm;
    font-size: 9pt;
  }

  .guide-typo .regle-typo,
  .guide-typo .exemple-typo {
    break-inside: avoid;
  }

  .guide-typo .exemple-typo {
    background: #fff;
  }
}