/* ==========================================================================
   Œuvra — Tarifs · feuille du gabarit templates/page-tarifs.php (chargée après main.css).
   1. Base = handoff/design/css/pages/tarifs.css, copiée telle quelle (elle ne contient aucun !important).
   2. Styles inline du prototype (prototype/tarifs.html) convertis en classes.
   3. Bascule Mensuel / Annuel (decisions.md P03, motion-spec.md M20) : segments, montants, fondu croisé.
   4. Comparatif : un <tbody> par groupe (sémantique des en-têtes de groupe), filets inchangés.
   Composants partagés utilisés (main.css) : .c-hero, .c-crumb, .c-shead(--center), .c-card(--lg), .c-card__head,
   .l-grid--2, .c-arrow, .c-badge-page--outline, .u-nowrap-lg, .u-block, .c-cta (template-parts/layout/cta.php).
   ========================================================================== */

/* ---------- 1. tarifs.css du handoff ---------- */

/* Composition et responsive */
.tf-hero { padding-bottom: 48px; }
.tf-head { max-width: 960px; gap: 24px; }
.tf-toggle { display: inline-flex; padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-100); background: var(--bg-surface); margin-top: 8px; }
.tf-plans { width: 880px; max-width: 100%; margin: 48px auto 0; display: flex; align-items: flex-start; gap: 24px; }
.tf-plan { flex: 1 1 0; min-width: 0; }
.tf-plan--std { padding-top: 36px; }
.tf-plan--rec { padding: 4px; border-radius: calc(var(--radius-lg) + 4px); background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-300) 100%); }
.tf-plan__flag { margin: 0; padding: 6px 0 8px; font: 500 13px/18px var(--font-sans); text-align: center; color: var(--ink-900); }
.tf-card { display: flex; flex-direction: column; padding: 32px 28px; border-radius: var(--radius-lg); border: 1px solid var(--border-100); background: var(--bg-surface); }
.tf-price { margin: 24px 0 0; font: 600 var(--fs-price)/var(--lh-price) var(--font-sans); letter-spacing: -0.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tf-price__unit { margin-left: 8px; font: 400 18px/24px var(--font-sans); color: var(--ink-500); }
.tf-reassure { width: 880px; max-width: 100%; margin: 72px auto 0; display: flex; gap: 32px; }
.tf-reassure__item { flex: 1 1 0; display: flex; align-items: flex-start; gap: 14px; }
.tf-stripe { width: 880px; max-width: 100%; margin: 56px auto 0; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.tf-duo { margin-top: var(--head-gap); }
.tf-duo .c-card p { margin-top: 12px; }
.tf-more { margin-top: 32px; }
.tf-compare-wrap { display: flex; flex-direction: column; gap: 40px; }
/* Tableau comparatif */
.c-compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-100); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); }
.c-compare th, .c-compare td { box-sizing: content-box; padding: 14px 24px; border-bottom: 1px solid var(--border-100); }
.c-compare tbody tr:last-child > * { border-bottom: 0; }
.c-compare thead th { vertical-align: bottom; padding: 20px 24px; text-align: center; }
.c-compare thead th:first-child { text-align: left; font: 500 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.c-compare th[scope="rowgroup"] { text-align: left; padding: 12px 24px; font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); background: var(--bg-beige); }
.c-compare th[scope="row"] { text-align: left; font: 400 15px/22px var(--font-sans); color: var(--ink-900); }
.c-compare td { text-align: center; }
.c-compare tr > :nth-child(3) { background: var(--brand-100); }
.c-compare__plan { display: block; font: 600 18px/24px var(--font-sans); color: var(--ink-900); }
.c-compare__val { font: 500 14px/20px var(--font-sans); color: var(--ink-700); }
.c-compare td:nth-child(3) .c-compare__val { color: var(--ink-900); }
@media (max-width: 1023px) {
.tf-plans { gap: 16px; }
.tf-card { padding: 28px 24px; }
.tf-reassure { gap: 24px; margin-top: 56px; }
.tf-reassure__item { flex-direction: column; gap: 12px; }
.c-compare th, .c-compare td { padding: 12px 16px; }
.c-compare thead th { padding: 16px; }
.c-compare th[scope="rowgroup"] { padding: 10px 16px; }
.c-compare th[scope="row"] { font-size: 14px; line-height: 20px; }
}
@media (max-width: 767px) {
.tf-plans { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 40px; }
.tf-plan--std { padding-top: 0; }
.tf-card { padding: 28px 24px; }
.tf-price__unit { font-size: 16px; }
.tf-reassure { flex-direction: column; gap: 20px; margin-top: 48px; }
.tf-reassure__item { flex-direction: row; }
.tf-stripe { margin-top: 40px; gap: 24px; }
.tf-compare-wrap { gap: 32px; }
.c-compare { border-radius: var(--radius-md); }
.c-compare th, .c-compare td { padding: 12px 8px; }
.c-compare th[scope="row"] { padding-left: 14px; font-size: 13px; line-height: 18px; }
.c-compare th[scope="rowgroup"] { padding: 10px 14px; font-size: 10px; }
.c-compare thead th { padding: 14px 8px; }
.c-compare thead th:first-child { padding-left: 14px; }
.c-compare__plan { font-size: 15px; line-height: 20px; }
.c-compare__val { font-size: 12px; line-height: 16px; }
.c-compare td, .c-compare thead th:not(:first-child) { width: 76px; }
}

/* ---------- 2. Styles inline du prototype convertis ---------- */

/* Hero — chapô : style="max-width: 640px" ; bascule dans <div style="margin-top: 8px"> (la bascule garde en plus
   sa propre marge de 8 px, règle .tf-toggle ci-dessus). */
.tf-lead { max-width: 640px; }
.tf-toggle-wrap { margin-top: 8px; }

/* Carte d'offre — accroche : style="margin: 6px 0 0" (0,1,0 après .t-body de main.css). */
.tf-card__tagline { margin: 6px 0 0; }
/* Équivalent HT : <p style="margin: 6px 0 0; font: 400 15px/22px; color: ink-700">soit <span style="color: ink-900">…</span></p>.
   La mention « facturé annuellement » (Annuel seulement, P03) reprend ce style sur la ligne suivante. */
.tf-card__ht, .tf-card__billed { margin: 6px 0 0; font: 400 15px/22px var(--font-sans); color: var(--ink-700); }
.tf-card__billed { margin-top: 0; }
.tf-card__ht-val { color: var(--ink-900); }
/* Filet : <div style="height: 1px; background: var(--border-100); margin: 24px 0"> */
.tf-card__rule { height: 1px; margin: 24px 0; background: var(--border-100); }
/* « Inclus » : <p class="t-note" style="margin: 0 0 16px; color: var(--ink-500)"> */
.tf-card__incl { margin: 0 0 16px; color: var(--ink-500); }
/* Liste : <ul style="margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px">,
   <li style="margin: 0; display: flex; align-items: flex-start; gap: 12px">, coche style="flex: 0 0 auto; margin-top: 4px",
   libellé style="font: 400 15px/24px; color: ink-900". */
.tf-card__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tf-card__item { margin: 0; display: flex; align-items: flex-start; gap: 12px; }
.tf-card__check { flex: 0 0 auto; margin-top: 4px; }
.tf-card__feat { font: 400 15px/24px var(--font-sans); color: var(--ink-900); }
/* Bouton : <div style="margin-top: 28px"> puis style="width: 100%; box-sizing: border-box". */
.tf-card__cta { margin-top: 28px; }
.tf-card__btn { width: 100%; box-sizing: border-box; }
/* Carte Studio (bouton secondaire) : style="background: var(--bg-surface); border-color: var(--border-100); color: var(--ink-900)"
   = état de repos du .oe-btn--tertiary du DS : aucune règle. Le style inline figeait aussi le survol (effet de bord) ; survol
   du DS rétabli (motion-spec M09 : fond --bg-beige, filet --border-strong, 150 ms), comme les boutons secondaires de l'Accueil
   (même traitement que .c-hero__soft, main.css ; fichiers partagés, clôture Phase D). Écart voulu vs prototype : survol seulement. */

/* Réassurances — pastille : <span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
   width: 40px; height: 40px; border-radius: 50%; background: var(--brand-100)"> ; textes : <div style="display: flex;
   flex-direction: column; gap: 4px"> titre 600 15/22 ink-900, texte 400 14/22 ink-500. */
.tf-reassure__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-100); }
.tf-reassure__text { display: flex; flex-direction: column; gap: 4px; }
.tf-reassure__title { font: 600 15px/22px var(--font-sans); color: var(--ink-900); }
.tf-reassure__desc { font: 400 14px/22px var(--font-sans); color: var(--ink-500); }

/* Badge Stripe : <img style="display: block; opacity: 0.75"> ; mention : <p style="margin: 0; text-align: center;
   font: 400 13px/20px; color: ink-500">. */
.tf-stripe__badge { display: block; opacity: 0.75; }
.tf-stripe__note { margin: 0; text-align: center; font: 400 13px/20px var(--font-sans); color: var(--ink-500); }

/* Studio ou Studio+ — en-tête : <div style="display: flex; flex-direction: column; gap: 18px; max-width: 1000px;
   align-items: flex-start"> et titre style="max-width: 1000px". */
.tf-duo__head { display: flex; flex-direction: column; gap: 18px; max-width: 1000px; align-items: flex-start; }
.tf-duo__title { max-width: 1000px; }

/* Comparatif — coche / croix : <span aria-label="Inclus | Non inclus" style="margin: 0 auto; display: flex; width: 20px;
   height: 20px; align-items: center; justify-content: center; border-radius: 4px; background: …"> : ink-900 (Studio),
   brand-ink (colonne de l'offre recommandée), bg-page (non inclus). */
.c-compare__mark { margin: 0 auto; display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 4px; background: var(--ink-900); }
.c-compare__mark--rec { background: var(--brand-ink); }
.c-compare__mark--no { background: var(--bg-page); }

/* ---------- 3. Bascule Mensuel / Annuel (P03, M20) ---------- */

/* Segments : <span style="display: inline-flex; align-items: center; (gap: 8px;) height: 32px; padding: 0 16px;
   border-radius: 4px; font: 500 14px/20px; color: ink-700"> ; segment actif : fond ink-900, texte ink-inverse. */
.tf-toggle__opt { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 4px; font: 500 14px/20px var(--font-sans); color: var(--ink-700); cursor: pointer; }
.tf-toggle__opt.is-on { background: var(--ink-900); color: var(--ink-inverse); }
/* Pastille « −20 % » : <span style="display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
   border-radius: var(--radius-xs); background: var(--status-valid-tint); font: 500 12px/16px; color: var(--status-valid-ink)"> */
.tf-toggle__pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--status-valid-tint); font: 500 12px/16px var(--font-sans); color: var(--status-valid-ink); }
/* Bouton radio natif (clavier, état annoncé) : transparent, il recouvre tout le segment (zone de clic) et porte l'anneau
   de focus du DS. Sans JavaScript il reste inactif (disabled) : l'état Mensuel dessiné est affiché. */
.tf-toggle__input { position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tf-toggle__input:disabled { cursor: default; }
.tf-toggle__input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Contraste élevé (forced-colors) : le système neutralise fonds et ombres — segment actif (fond noir) et anneau de
   focus (box-shadow) deviendraient invisibles. Contours aux couleurs système ; aucun effet sur le rendu normal. */
@media (forced-colors: active) {
	.tf-toggle__opt.is-on { outline: 2px solid CanvasText; outline-offset: -2px; }
	.tf-toggle__input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* Montants : les deux périodes sont écrites dans le HTML ; seule celle de data-billing est affichée
   (sans JavaScript : Mensuel). */
.tf-hero[data-billing="monthly"] .tf-alt--annual, .tf-hero[data-billing="annual"] .tf-alt--monthly { display: none; }
/* Fondu croisé 150 ms (M20, [Recommandé]) posé par page-tarifs.js : le montant entrant (en flux) apparaît pendant que le
   sortant, retiré du flux et superposé au même endroit, s'efface. */
.tf-swap { position: relative; display: inline-block; }
.tf-hero .tf-swap > .tf-alt.is-out { position: absolute; top: 0; left: 0; display: block; white-space: nowrap; pointer-events: none; animation: tf-out var(--duration-fast) var(--ease-standard) forwards; }
/* Mention « facturé annuellement » au retour en Mensuel : elle s'efface EN FLUX (0,4,0 > 0,3,0 de la règle d'affichage
   ci-dessus), miroir de son apparition — la carte ne se raccourcit qu'à la fin du fondu, comme elle s'allonge au début
   du fondu d'entrée. */
.tf-hero .tf-card__billed.tf-alt.is-out { display: block; pointer-events: none; animation: tf-out var(--duration-fast) var(--ease-standard) forwards; }
.tf-alt.is-in { animation: tf-in var(--duration-fast) var(--ease-standard); }
@keyframes tf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tf-out { from { opacity: 1; } to { opacity: 0; } }
/* Mouvement réduit : changement instantané (page-tarifs.js ne pose alors aucune classe ; filet de sécurité). */
@media (prefers-reduced-motion: reduce) {
	.tf-alt.is-in { animation: none; }
	.tf-hero .tf-swap > .tf-alt.is-out, .tf-hero .tf-card__billed.tf-alt.is-out { display: none; animation: none; }
}

/* ---------- 4. Comparatif : un <tbody> par groupe ---------- */

/* Chaque en-tête de groupe (th scope="rowgroup") ouvre son propre <tbody> (le prototype met les quatre groupes dans un
   seul <tbody> : chaque en-tête couvrait alors tout le tableau pour les technologies d'assistance). La règle du handoff
   « .c-compare tbody tr:last-child > * { border-bottom: 0 } » s'applique désormais à la dernière ligne de CHAQUE groupe :
   le filet est rétabli entre les groupes, seule la dernière ligne du tableau en reste privée (rendu identique). */
.c-compare tbody:not(:last-child) tr:last-child > * { border-bottom: 1px solid var(--border-100); }