/* ===========================================================================
   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)
   ======================================================================== */
/* Appel final : deux lignes équilibrées, plus de mot seul (« attendu. »). */
.final__inner .lead { text-wrap: balance; }
/* En-tête entre 721 et 900 px : la photo micro + casque (480 px de haut en
   pleine largeur) repoussait le guide vedette sous la ligne de flottaison.
   Boucle 3, critique 9,2 : l'objet était centré sous un texte aligné à gauche
   (deux axes dans le premier écran). Il part désormais de la gouttière, comme
   le sur-titre, le titre, le chapô et toute la page : cadre de 300 px, image
   calée à gauche, et -12 px pour la marge blanche de la photo (73 px sur 1 192,
   soit 12,6 px à cette taille) : le casque s'aligne sur le texte. */
@media (max-width: 720px) {
  .head-visual__media { max-width: 300px; margin-inline: -12px 0; }
  .head-visual__media.seat img { object-position: 0 50%; }
}
/* Boucle 4, contre-critique 3 : entre 721 et 900 px, l'objet calé à gauche
   sous le texte ne faisait plus qu'environ 190 × 200 px, échoué en bas à
   gauche d'un en-tête de 500 px, avec 530 px de blanc à sa droite, et le
   titre du guide vedette sortait du premier écran (1 024 px). L'objet passe
   à droite du texte, dans une colonne de 200 px, calé sur la gouttière
   droite : l'en-tête retrouve la composition de l'ordinateur, en plus
   compact, et le guide vedette remonte dans le premier écran. */
@media (min-width: 721px) and (max-width: 900px) {
  .head-visual { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-4); align-items: center; }
  .head-visual__media { max-width: none; margin-inline: 0; }
  .head-visual__media.seat img { object-position: 100% 50%; }
}
/* Boucle 5, contre-critique 4 : sous 720 px, l'objet (seule masse sombre de la page)
   dominait le premier écran (≈ 200 px de noir). Hauteur ramenée à 150 px : il
   accompagne le titre sans prendre le dessus, et le guide vedette remonte. */
@media (max-width: 720px) {
  .head-visual__media.seat { height: 150px; margin-inline: -9px 0; }
}
/* 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) {
  .feature__cover { 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); } }

/* Boucle 5 : nouvel objet (micro et casque blancs sur fond bleu vif, image carrée
   non détourée) à la place du micro argent et du casque noir, seule masse sombre
   de la page (contre-critique 4). Cadre arrondi, image en « cover », sans multiply. */
.head-visual__media.seat--photo { border-radius: var(--r-media); }
.seat--photo img { object-fit: cover; object-position: 50% 55%; mix-blend-mode: normal; }
/* 24/09 5 h : sous 720 px, la vignette d'en-tête est retirée ; la couverture de
   l'article à la une devient le visuel du premier écran, 24 à 32 px sous le chapô. */
@media (max-width: 720px) {
  .head-visual__media.seat.seat--photo { display: none; }
  .head-visual { gap: 0; }
  .page-head { padding-bottom: 0; }
  .page-head + .section--tight { padding-top: 28px; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .head-visual__media.seat--photo { aspect-ratio: 1; border-radius: 20px; }
}
/* Boucle 9,5 (24/09, 5 h 50).
   1. En-tête : la vignette micro + casque blancs sur bleu est retirée à toutes les
      largeurs, comme elle l'était déjà sous 720 px. À 1440, elle doublait la
      couverture du guide à la une (clap + casque blancs sur bleu) dans le même
      premier écran, et reprenait le visuel du bandeau final de l'accueil. L'en-tête
      redevient « un titre, une phrase » ; la couverture est le seul visuel.
   2. Bandeau final : la section grise des guides (#F7F8FA), un filet, puis le
      bandeau teinté à 4 % (#F6F9FE) donnaient deux teintes presque identiques. Le
      bandeau repasse au blanc pur : une seule rupture, gris puis blanc. */
.head-visual { display: block; }
.final { background: var(--canvas); }