/* ===========================================================================
   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. */

/* Offres alignées d'une carte à l'autre (ordinateur) : badges fantômes de même
   hauteur que le vrai badge (filet 1 px), prix sur 44 px posés sur leur ligne de
   base, phrase d'accroche réservée sur deux lignes. */
.plan__badge--ghost { border: 1px solid transparent; }
.plan__price {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: baseline;
  align-content: end;
  height: 44px;
  line-height: 1;
}
.plan__for { min-height: 48px; line-height: 1.6; }

/* Tablette (721–1024 px) : base.css passait les trois offres sur deux colonnes
   et laissait Business seule sur sa ligne. Boucle 2 : comme sur l'accueil, les
   trois offres restent côte à côte, un peu plus serrées (même règle qu'A.html).
   Sur cette largeur, « 1 200 min (20 h) par mois » passe sur deux lignes et
   « 120 min (2 h) par mois » non : chaque carte suit donc les rangées de la
   grille des offres (subgrid) — badge, nom, prix, accroche, puis chacune des
   cinq coches, le « + API » et le bouton sont au même niveau dans les trois
   cartes, quelle que soit la coupure des lignes. */
@media (min-width: 721px) and (max-width: 1024px) {
  .plans.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(11, auto);
    gap: 0 var(--space-2);
  }
  .plans > .plan {
    display: grid;
    grid-row: span 11;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
    height: auto;
    padding: var(--space-2);
  }
  .plans > .plan--featured { padding: calc(var(--space-2) - 1px); }
  .plan > .plan__badge { justify-self: start; }
  .plan > .plan__for { grid-row: 4; min-height: 0; font-size: 14px; }
  .plan > .ticks {
    grid-row: 5 / span 5;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
    font-size: 14px;
  }
  .plan > .plan__plus { grid-row: 10; font-size: 14px; }
  .plan > .plan__cta { grid-row: 11; align-self: end; }
  .plan__price { font-size: 30px; }
  .plan--featured .plan__price { font-size: 38px; }
}
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 721px) and (max-width: 1024px) {
    .plans > .plan { display: flex; }
    .plan > .plan__for { min-height: 4.8em; }
  }
}
@media (max-width: 720px) {
  .plan__for { min-height: 0; }
}

/* Sous 900 px, le sélecteur Mensuel / Annuel suit l'en-tête de près (boucle 3 :
   sous le bandeau de l'affiche, voir la fin de ce bloc). */
@media (max-width: 900px) {
  .page-head--visual + #offres { padding-top: var(--space-3); }
}

/* ===========================================================================
   v3.3 — correction après critique (reprise du 23/09)
   ======================================================================== */

/* Facturation : l'emplacement d'image vide (« à produire ») est retiré. Titre
   centré comme les autres sections, puis les quatre engagements sur une ligne
   (deux sur tablette, un sur mobile), la mention de TVA centrée dessous. */
.billing__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: 0; }
.billing .vat { margin-top: var(--space-5); text-align: center; }
@media (max-width: 1024px) {
  .billing__list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .billing__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .billing .vat { margin-top: var(--space-4); }
}

/* Sélecteur Mensuel / Annuel : même corps et même graisse que sur l'accueil. */
.switch button { font-family: var(--font-body); font-size: 15px; font-weight: 600; }

/* Réassurance de l'en-tête en 2 + 2 (plus de « Factures à tout moment » seul
   sur sa ligne) ; centrée sous 900 px, comme le reste de l'en-tête. */
.page-head .facts { max-width: 460px; }
@media (max-width: 900px) {
  .page-head--visual .facts { margin-inline: auto; }
}

/* Coches des offres et descriptions : plus de mot seul en dernière ligne
   (« JSON », « espace. », « parlée. »). */
.plan .ticks li,
.incl p,
.billing__list p { text-wrap: pretty; }
.plans__note,
.final__note { text-wrap: balance; }
.nw { white-space: nowrap; }
/* Appel final sur mobile : deux lignes nettes, sans séparateur en début de ligne. */
.br-m { display: none; }
@media (max-width: 720px) {
  .br-m { display: inline; }
  .sep-d { display: none; }
}

/* FAQ : même colonne de 1000 px que sur l'accueil. */
.faq { max-width: 1000px; margin-inline: auto; }

/* 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. */

/* ===========================================================================
   v3.3 — boucle 2 (contre-critique 9,1/10)
   ======================================================================== */

/* Réassurance de l'en-tête : une grille 2 × 2, colonnes alignées (plus
   d'escalier 2 + 1 + 1 sur mobile) ; à gauche sur ordinateur, centrée
   sous 900 px comme le reste de l'en-tête. */
.page-head .facts {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: 8px 24px;
  max-width: none;
}
@media (max-width: 900px) {
  .page-head .facts { justify-content: center; margin-inline: auto; }
}
@media (max-width: 720px) {
  .page-head .facts { gap: 6px 16px; text-align: left; }
}

/* ===========================================================================
   v3.3 — boucle 3
   ======================================================================== */

/* Boucle 3, critique 9,2 : sous 900 px, ces engagements sont désormais masqués
   (le bandeau de l'affiche prend leur place, voir la fin du bloc) ; les deux
   réglages ci-dessous restent sans effet, gardés pour mémoire.
   Réassurance à 360 px (Android courant) : la grille 2 × max-content faisait
   347 px pour 328 disponibles (défilement horizontal de 3 px). Sous 380 px,
   corps de 14 px et colonnes plus serrées (≈ 315 px) ; minmax(0, max-content)
   garantit qu'une colonne se replie plutôt que de sortir de l'écran. */
.page-head .facts { grid-template-columns: repeat(2, minmax(0, max-content)); }
@media (max-width: 380px) {
  .page-head .facts { column-gap: 12px; }
  .page-head .facts li { font-size: 14px; }
}
/* 320 px (petits Android, iPhone SE 1re génération) : deux colonnes ne
   tiennent plus sans couper « Paiement par / carte » ; une seule colonne,
   centrée comme bloc, les coches alignées. */
@media (max-width: 340px) {
  .page-head .facts { grid-template-columns: max-content; row-gap: 4px; }
}

/* En-tête (≥ 901 px) : l'affiche de l'ambiance, en image cadrée (rayon du
   kit), entière en 16:9, sans vidéo ni voile. */
.page-head--visual .head-visual__media--amb { overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-media); }
.head-visual__media--amb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }

/* Boucle 3, critique 9,2 : sous 900 px, la page n'avait plus aucune image, et
   le premier écran du téléphone était tout blanc et gris. L'affiche revient en
   bandeau 2:1 sous le chapô, cadrée sur les deux personnes et le micro
   (entiers), coins de 20 px ; centrée et limitée à 560 px sur tablette, comme
   le texte de l'en-tête. Les quatre engagements de l'en-tête lui laissent la
   place, pour que les prix restent dans le premier écran (0 € à 727 px sur
   844 à 390, à ~900 px sur 1024 à 768) : ils sont repris dans « Une
   facturation sans surprise » et sous l'appel final. */
@media (max-width: 900px) {
  .page-head--visual .head-visual__side { display: block; }
  .page-head--visual .head-visual__media--amb { max-width: 560px; margin-inline: auto; aspect-ratio: 2 / 1; border-radius: 20px; }
  .page-head--visual .head-visual__media--amb img { object-position: 100% 45%; }
  .page-head--visual .facts { display: none; }
}
/* 24/09 5 h : premier écran mobile = sélecteur + « Pro 6,99 €/mois ».
   L'affiche devient un bandeau 3:1 (~120 px) et l'offre Pro passe en tête. */
@media (max-width: 720px) {
  .page-head--visual .head-visual__media--amb { aspect-ratio: 3 / 1; }
  .plans > .plan--featured { order: -1; }
}

/* Boucle 4, vérifié sous WebKit (Safari, iPhone et iPad) : de 721 à 1024 px,
   la grille du prix, posée dans la carte en subgrid, gardait la largeur du
   montant d'avant le chargement de la police : « 6,99 € » et « /mois » étaient
   séparés par 13 px de blanc (9 px pour « 14,99 € »), collés dans Chromium.
   Le prix passe en flex (même ligne de base, même hauteur de 44 px, posé en
   bas de sa rangée) : 0 px d'écart dans les deux moteurs. */
@media (min-width: 721px) and (max-width: 1024px) {
  .plans > .plan > .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-end; }
}
/* Boucle 4 : coches des offres, les nombres restent liés à leur unité
   (« 1 200 min », « (20 h) ») par des espaces insécables dans le texte ;
   WebKit coupait « (20 / h) par mois » à 768 px. */

/* 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) {
  .head-visual__media--amb 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 : contraste AA des petits textes gris (#6B7280) : fond plus blanc, gris gardé. */
.switch { background: #F7F8F9; }
.out__t { background: #FFF; box-shadow: inset 0 0 0 1px var(--line); }