/* ===========================================================================
   v3.3 — finitions communes (voir A.html) : lignes équilibrées, pas de mot
   seul en fin de ligne courte, espaces insécables avant « ? ! : ; ».
   ======================================================================== */
.lead,
.section-head p,
.faq summary,
.guide-card__title,
.feature__title,
.plan__for { text-wrap: balance; }
/* Titres des guides jamais tronqués : réglé par base.css (boucle 3), copie locale retirée. */

/* ===========================================================================
   v3.3 — correction après critique (reprise du 23/09)
   ======================================================================== */
/* Sur ordinateur, lien de retour, titre, chapô et méta partagent le bord gauche
   de la colonne de texte (720 px).
   Boucle 3, critique 9,2 : la couverture suit la même colonne (720 px au lieu
   d'une figure de 900 px). Même colonne dès 721 px : à 1024 px, lien, titre,
   couverture et texte partaient de trois bords différents (x = 24, 62 et
   152), et de deux à 900 px (24 et 90). Boucle 4 : l'image a été régénérée
   (ruban posé à plat, plus de raté au pli) ; la colonne unique reste, pour
   cet alignement sur un seul bord. */
@media (min-width: 721px) {
  .crumb .container { max-width: calc(720px + 2 * var(--gutter)); }
  .page-head__inner { max-width: 720px; margin-inline: auto; }
  .cover { max-width: 720px; }
}
/* Encadré « Passer à la pratique » : la marge haute des h2 de l'article
   (règle mobile, même spécificité, déclarée après) ne s'y applique plus. */
.article .practice h2 { margin-top: 0; }
/* Corps de l'article : plus de mot seul en fin de paragraphe (« version. »,
   « prononcé. », « Belentia. »). */
.article p,
.article ul li { text-wrap: pretty; }
/* Panneau du menu mobile : la marque et le bouton Fermer restent posés sur la
   marque et le burger de la barre — règle désormais dans base.css (boucle 3),
   la copie locale est retirée. */

/* Boucle 5, « sites vivants » : le premier écran du téléphone ne bougeait plus après
   les révélations (rien entre 1 et 7 s). L'image d'en-tête dérive très lentement
   (zoom de 1 à 1,05 en 16 s, aller-retour, après le dézoom d’entrée du kit), dans son cadre : un seul mouvement,
   sans vidéo (AMBIANCE.md, pages secondaires). Mouvement réduit : image fixe. */
@media (prefers-reduced-motion: no-preference) {
  .cover img { animation: tr-drift 16s ease-in-out 1.5s infinite alternate; transform-origin: 70% 50%; will-change: transform; }
}
@keyframes tr-drift { from { transform: scale(1); } to { transform: scale(1.05); } }

/* 24/09 5 h : tableau comparatif SRT / VTT (sans-serif, différences teintées 9 %). */
.cmp { margin-block: var(--space-4); }
.cmp table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.cmp caption { text-align: left; font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--ink); padding-bottom: var(--space-2); }
.cmp th, .cmp td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-weight: 700; color: var(--ink); }
.cmp tbody th { font-weight: 600; color: var(--muted); width: 38%; }
.cmp td.is-diff { background: color-mix(in srgb, var(--accent) 9%, #FFF); color: var(--ink); }
.cmp td b { color: var(--accent); }
@media (max-width: 720px) { .cmp table { font-size: 15px; } .cmp th, .cmp td { padding: 10px 6px; } }