/* ── LA PAGE DU COURS D'ESSAI (gabarit page-cours-essai) ──────────────────────
   Le haut : une page d'offre à la manière de Premiers Pas (§ 1). Le reste :
   la mise en page de onefunnelaway.com, section par section, aux couleurs de
   la charte (leur bleu nuit devient le bordeaux `--vin-900`, leurs encadrés
   roses `--vin-100`). Titres en Marcellus (sans graisse), sauf les deux grands
   titres de la page, en Manrope 800 ; texte en Manrope.
   Le pourquoi de la page : en tête de inc/cours-essai.php. */

@font-face { font-family: "Homemade Apple"; src: url("../fonts/homemade-apple-latin.woff2") format("woff2"); font-display: swap; }

.essai { --ofa-blanc: #FCFAF7; --ofa-ombre: 0 2px 4px rgb(94 32 40 / 0.06), 0 16px 36px -14px rgb(94 32 40 / 0.3); background: var(--ofa-blanc); }   /* le blanc chaud des sections des pages Reformer et Mat (`.pratique-blanc`), pas le crème rosé `--cream` : « pas habituel » (Corentin, 15 oct.) */

/* ── Les boutons : leur gros bouton plein, à la pilule de la charte ── */
.ofa-btn,
.ofa .ofa-bouton .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.5rem; padding: 1rem 2rem; border: 0; border-radius: var(--radius-pill); background: var(--vin-700); box-shadow: 0 4px 0 var(--vin-900); color: var(--davos); font: 700 1rem/1.25 var(--font-body), sans-serif; text-align: center; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background 0.2s; }
.ofa-btn:hover,
.ofa .ofa-bouton .wp-block-button__link:hover { background: var(--vin-800); transform: translateY(2px); box-shadow: 0 2px 0 var(--vin-900); }
.ofa-btn:focus-visible,
.ofa .ofa-bouton .wp-block-button__link:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 5px; }
.ofa-btn--large { width: min(100%, 40rem); font-size: 1.125rem; }
.ofa .ofa-boutons { justify-content: center; margin-top: 1.75rem; }

/* ── 1. Le haut : la page d'offre, à la manière de Premiers Pas ──
   Choisi par Corentin le 21 octobre 2026 (le pourquoi : en tête du motif
   essai-ofa-hero). Ordinateur : derrière toute la section, l'image du haut
   de la page Reformer, calée à GAUCHE (quand l'écran rétrécit, c'est la photo
   qui se rogne, jamais la moitié crème sous le texte) ; le texte centré dans
   cette moitié crème. Téléphone : la photo derrière l'en-tête, plus bas.
   L'encadré reprend le pavé des atouts de Premiers Pas
   (squeeze-ouverture.css : cadre de 2 px, rayon 15, filets de 1 px, panneau
   translucide sur la photo). */
.ofa-hero {
  --ofa-trait: color-mix(in oklab, var(--vin-700) 42%, transparent);
  --ofa-panneau: color-mix(in oklab, #E9E0D2 82%, #D5B79F);
  position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 0; background: var(--cream); color: var(--vin-800);
}
.ofa-hero__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ofa-hero__fond > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
/* La photo du haut, sur celle de l'image de fond, dans son arche (motif
   essai-ofa-hero). Sa couche a la boîte de l'image et le masque se pose
   comme elle (`cover`, calé à gauche) : le masque, tiré de l'image, tombe
   pile sur la photo. La photo commence là où commence celle de l'image :
   770 px sur ses 1 672 (le bord, moins 3 px de recouvrement), à l'échelle où
   `cover` l'affiche, que donnent les unités de conteneur. */
.ofa-hero__photo { position: absolute; inset: 0; container-type: size; -webkit-mask: var(--arche) 0% 50% / cover no-repeat; mask: var(--arche) 0% 50% / cover no-repeat; }
.ofa-hero__photo img { --debut: calc(max(100cqw, 100cqh * 1672 / 941) * 770 / 1672); position: absolute; top: 0; left: var(--debut); display: block; width: calc(100% - var(--debut)); height: 100%; object-fit: cover; object-position: 50% 62%; }   /* la coach et l'élève au centre */
.ofa-hero__entete { display: contents; }   /* grand écran : ses enfants restent dans la colonne */
.ofa-hero__phrase, .ofa-hero__choix-titre { display: none; }   /* téléphone seulement */
.ofa-hero__h1 { margin: 0; padding: 0; max-width: none; font: inherit; color: inherit; }
.ofa-hero__surtitre { display: block; font: 700 0.75rem/1.3 var(--font-body), sans-serif; letter-spacing: 0.16em; text-transform: uppercase; text-wrap: balance; color: var(--vin-700); }
/* Manrope 800 (Corentin, 21 oct.). Le titre de la page passe à la ligne après
   sa première virgule (« Le Pilates, / bien plus qu'un cours. »), en grand écran. */
.ofa-hero__titre { display: block; margin-top: 0.875rem; font: 800 clamp(2.125rem, 9vw, 3rem)/1.05 var(--font-body), sans-serif; letter-spacing: -0.025em; text-wrap: balance; color: var(--vin-800); }
.ofa-hero__titre br { display: none; }
.ofa-hero__ligne { display: block; text-wrap: balance; }   /* une ligne du champ « Grand titre » : coupée sur tous les écrans, et équilibrée seule si elle passe sur deux (« Il ne manque / plus que toi ») */
.ofa-hero__lead { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; color: var(--gray-700); }
.ofa-hero__lead strong { font-weight: 700; color: var(--vin-900); }
/* Le prix d'appel : « Dès » en capitales espacées, le prix en gras. */
.ofa-hero__prix { margin: 0; font: 800 2rem/1 var(--font-body), sans-serif; letter-spacing: -0.02em; color: var(--vin-800); }
.ofa-hero__prix span { font: 700 0.75rem/1 var(--font-body), sans-serif; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: 0.45em; color: var(--vin-700); }
.ofa-hero__prix del { margin-left: 0.15em; font-size: 0.55em; font-weight: 600; letter-spacing: 0; vertical-align: 0.35em; color: var(--gray-500, var(--gray-700)); text-decoration-thickness: 2px; }   /* le prix normal, barré : l'écart se voit d'un coup d'œil */
/* Le bouton : la pilule pleine en capitales espacées. */
.ofa-hero__bouton { display: flex; align-items: center; justify-content: center; width: min(100%, 20.8125rem); min-height: 4rem; padding: 0.625rem 1.75rem; border-radius: var(--radius-pill); background: var(--vin-800); box-shadow: 0 10px 26px rgb(94 32 40 / 0.22); font: 700 0.875rem/1.25 var(--font-body), sans-serif; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; text-decoration: none; color: var(--ivory); transition: background-color 0.2s, transform 0.15s; }
.ofa-hero__bouton:hover { background: var(--vin-900); transform: translateY(-2px); }
.ofa-hero__bouton:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 4px; }
/* Au téléphone seulement (cachés en grand écran, plus bas) : les deux
   boutons Reformer et Mat, d'après les rangées du mail de relance
   du 19 octobre (version crème) : une pilule bordeaux par pratique, la
   vignette de l'objet sur sa tuile crème, « Pilates » en petites capitales, le
   nom en Marcellus, l'ancien prix barré puis le prix, la flèche dans un rond
   crème. Toute la rangée est le lien. Plus soignée que le mail : arrondis
   plus doux, ombre bordeaux, la rangée se soulève et la flèche avance au
   survol. */
.ofa-hero__choix { display: grid; gap: 0.75rem; }
.ofa-choix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; padding: 0.625rem 0.875rem 0.625rem 0.625rem; border-radius: 18px; background: var(--vin-800); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 12px 26px -14px rgb(94 32 40 / 0.6); color: var(--ivory); text-align: left; text-decoration: none; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; }
.ofa-choix:hover { background: var(--vin-900); transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 16px 30px -14px rgb(94 32 40 / 0.7); }
.ofa-choix:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 3px; }
.ofa-choix__vignette { display: block; width: 4.5rem; height: 4.5rem; border-radius: 12px; object-fit: cover; background: #F3EEE9; }
.ofa-choix__texte { display: flex; flex-direction: column; min-width: 0; }
.ofa-choix__sur { font: 600 0.625rem/1.2 var(--font-body), sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 72%, transparent); }
.ofa-choix__nom { margin-top: 0.125rem; font-family: var(--font-display); font-size: 1.625rem; line-height: 1.05; color: var(--ivory); }
.ofa-choix__prix { margin-top: 0.25rem; font: 800 1.25rem/1 var(--font-body), sans-serif; letter-spacing: -0.01em; color: var(--ivory); }
.ofa-choix__prix del { margin-right: 0.4em; font-size: 0.75em; font-weight: 600; color: color-mix(in oklab, var(--ivory) 62%, transparent); text-decoration-thickness: 1.5px; }
.ofa-choix__fleche { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--linen-deep, #E9E0D2); color: var(--vin-800); transition: transform 0.2s; }
.ofa-choix__fleche svg { width: 1.125rem; height: 1.125rem; }
.ofa-choix:hover .ofa-choix__fleche { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ofa-hero__bouton { transition: none; } .ofa-hero__bouton:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ofa-choix, .ofa-choix__fleche { transition: none; } .ofa-choix:hover, .ofa-choix:hover .ofa-choix__fleche { transform: none; } }
/* Sous le bouton (ou les deux boutons du téléphone) : la note Google. */
.ofa-hero__rassure { display: grid; gap: 0.375rem; margin-top: 0.875rem; }
.ofa-hero__note { margin: 0; font: 700 0.875rem/1.3 var(--font-body), sans-serif; color: var(--vin-800); }
.ofa-hero__etoiles { letter-spacing: 0.08em; color: #D9A21B; }   /* l'or des étoiles de l'accueil (accueil-avis.css) */
/* L'encadré « Sur place, tout pour t'accueillir » : le pavé de Premiers Pas. */
.ofa-hero__comprend-titre { margin: 0 0 0.75rem; font: 700 0.9375rem/1.35 var(--font-body), sans-serif; color: var(--vin-700); }
.ofa-hero__atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; overflow: hidden; border: 2px solid var(--ofa-trait); border-radius: 15px; background: color-mix(in oklab, var(--ofa-panneau) 72%, transparent); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ofa-hero__atouts { background: color-mix(in oklab, var(--ofa-panneau) 34%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); }
}
.ofa-hero__atouts li { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.875rem 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1.4; text-align: center; text-wrap: balance; color: var(--gray-700); }
/* Les pictos alignés en haut de la rangée ; le texte centré dans la hauteur qui reste : « Des douches », d'une ligne, ne colle plus en haut d'une case haute de trois (Corentin, 21 oct.). */
.ofa-hero__atouts li > span:last-child { flex: 1; display: flex; align-items: center; justify-content: center; }
.ofa-hero__atouts li + li { border-left: 1px solid var(--ofa-trait); }
/* Les pictos, en aplat comme ceux de Premiers Pas : un SVG en `currentColor`
   ou un PNG posé en masque (sa transparence découpe la forme, la couleur est
   celle du texte). La même boîte pour tous. */
.ofa-hero__picto { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--vin-700); }
.ofa-hero__picto > svg, .ofa-hero__masque { display: block; width: 100%; height: 100%; }
.ofa-hero__masque { background: currentColor; -webkit-mask: var(--masque) center / contain no-repeat; mask: var(--masque) center / contain no-repeat; }

/* Ordinateur : comme le haut de Premiers Pas, mesuré au navigateur le
   21 octobre 2026 (1280, 1440 et 1920 px). Le haut remplit l'écran sous la
   barre, l'image jusqu'en bas (817 px de haut sur un 1440 × 900) ; le bloc de
   texte est centré dans la hauteur. Les tailles suivent la LARGEUR de l'écran
   (Premiers Pas : titre à 3,9 vw, encadré à 35 vw, marge à 4 vw), les écarts
   entre les éléments suivent sa HAUTEUR : sur un 1280 × 720 tout se resserre,
   sur un 1920 × 1080 tout respire, sans jamais déborder.
   La colonne reste à 44 % : au-delà, le texte toucherait l'arche de l'image.
   Le titre, en Manrope 800 et non en serif fine comme Premiers Pas, est plus
   large à taille égale : 3,1 vw, pour que sa ligne la plus longue tienne
   dans la colonne. Marge gauche alignée sur le logo de la barre (4,2 vw). */
@media (min-width: 900px) {
  .ofa-hero { flex-direction: row; min-height: calc(100svh - var(--cp-nav-h, 0px)); background: #F3E5D8; }   /* le crème de l'image, si elle tarde */
  .ofa-hero__texte { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44%; padding: clamp(2rem, 6vh, 4.5rem) 1.5vw clamp(2rem, 6vh, 4.5rem) 4.2vw; text-align: center; }   /* tout centré dans la moitié crème (Corentin, 21 oct.) */
  .ofa-hero__surtitre { font-size: clamp(0.75rem, 0.92vw, 0.9375rem); letter-spacing: 0.2em; }
  .ofa-hero__titre { margin-top: clamp(0.75rem, 1.6vh, 1.25rem); font-size: clamp(1.75rem, 3.1vw, 3.75rem); }   /* la ligne la plus longue (« Il ne manque plus que toi. ») vaut ~11,9 fois la taille : à 3,1 vw elle tient dans la colonne */
  .ofa-hero__titre br { display: inline; }
  .ofa-hero__lead { max-width: min(35vw, 36rem); margin-top: clamp(0.875rem, 1.8vh, 1.5rem); font-size: clamp(1.0625rem, 1.25vw, 1.3125rem); }
  .ofa-hero__prix { width: clamp(20.8125rem, 23vw, 24rem); max-width: 100%; margin-top: clamp(1.25rem, 3.2vh, 2.5rem); font-size: clamp(1.875rem, 2.4vw, 2.75rem); text-align: center; }   /* centré au-dessus du bouton : même largeur que lui */
  .ofa-hero__bouton { width: clamp(20.8125rem, 23vw, 24rem); min-height: clamp(3.75rem, 7vh, 4.5rem); margin-top: clamp(0.875rem, 1.8vh, 1.5rem); font-size: clamp(0.8125rem, 0.98vw, 1rem); }
  .ofa-hero__choix { display: none; }   /* en grand écran : le prix et le bouton (Corentin, 21 oct.) */
  .ofa-hero__rassure { width: clamp(20.8125rem, 23vw, 24rem); max-width: 100%; margin-top: clamp(0.75rem, 1.5vh, 1.125rem); text-align: center; }   /* centrée sous le bouton : même largeur que lui */
  .ofa-hero__note { font-size: clamp(0.8125rem, 0.95vw, 0.9375rem); }
  .ofa-hero__comprend { width: min(100%, max(35vw, 24rem), 36rem); margin-top: clamp(1.75rem, 4.5vh, 3.25rem); }
  .ofa-hero__comprend-titre { font-size: clamp(0.875rem, 1vw, 1.0625rem); }
  .ofa-hero__atouts li { gap: clamp(0.375rem, 1vh, 0.75rem); padding: clamp(0.75rem, 1.7vh, 1.25rem) 0.5rem clamp(0.625rem, 1.3vh, 1rem); font-size: clamp(0.6875rem, 0.85vw, 0.875rem); }
  .ofa-hero__picto { width: clamp(1.75rem, 2.3vw, 2.5rem); height: clamp(1.75rem, 2.3vw, 2.5rem); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .ofa-hero__lead { max-width: none; }
}

/* Téléphone et tablette (< 900 px) : l'ordre de Premiers Pas. Le titre et la
   phrase sur le crème, la photo en bandeau (sa partie photo, cadrée sur la
   coach), les deux boutons Reformer et Mat (à la place du prix et du bouton
   du grand écran), l'encadré en 2 × 2. Le bloc texte s'efface
   (display: contents) : ses enfants se rangent par `order` dans la section. */
@media (max-width: 899px) {
  /* LA PHOTO DERRIÈRE LE TITRE (Corentin, 21 oct.) : le haut est une grille
     d'une colonne ; la photo et l'en-tête partagent la première rangée, l'en-
     tête posé en bas de la photo sur un dégradé bordeaux, en crème. Le texte
     ne prend plus de hauteur à côté de la photo : la place gagnée rend le
     message (d'où l'on vient, ce qu'on achète, lequel choisir) sans faire
     descendre les deux boutons. */
  .ofa-hero { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ofa-hero__texte { display: contents; }
  .ofa-hero__fond { grid-area: 1 / 1; position: relative; inset: auto; z-index: 0; height: clamp(21rem, 94vw, 26rem); }
  .ofa-hero__fond::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(46 12 18 / 0.92) 0%, rgb(46 12 18 / 0.72) 30%, rgb(46 12 18 / 0.18) 58%, rgb(46 12 18 / 0) 72%); }
  .ofa-hero__fond > img { width: 200%; max-width: none; margin-left: -100%; }   /* la moitié droite de l'image seule (si pas de photo du haut) */
  .ofa-hero__photo { -webkit-mask: none; mask: none; }   /* pas d'arche au téléphone : la place compte (l'arche reste en grand écran) */
  .ofa-hero__photo img { left: 0; width: 100%; object-position: 50% 100%; }   /* calée en bas : la coach et l'élève remontent dans la moitié haute, au-dessus du texte ; le texte se pose sur l'avant du Reformer */
  .ofa-hero__entete { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; display: block; padding: 0 20px 1.125rem; text-align: center; }
  .ofa-hero__surtitre { display: block; font-size: 0.625rem; letter-spacing: 0.12em; white-space: nowrap; color: #FCFAF7; opacity: 0.85; }
  .ofa-hero__titre { margin-top: 0.375rem; font-size: clamp(1.625rem, 7.2vw, 2.25rem); color: #FCFAF7; text-shadow: 0 2px 18px rgb(26 4 6 / 0.35); }
  .ofa-hero__lead { display: none; }   /* la phrase longue reste au grand écran ; ici, sa version courte */
  .ofa-hero__phrase { display: block; max-width: 22rem; margin: 0.5rem auto 0; font-size: 0.9375rem; line-height: 1.4; color: #FCFAF7; }   /* sur la photo : le blanc chaud des sections claires du site (Corentin voulait du blanc ; jamais #fff, charte) */
  .ofa-hero__choix-titre { order: 4; display: block; margin: 1.125rem 16px 0; font: 700 0.6875rem/1.3 var(--font-body), sans-serif; letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; text-align: center; color: var(--vin-700); }
  .ofa-hero__prix, .ofa-hero__bouton { display: none; }   /* au téléphone : les deux boutons Reformer et Mat */
  .ofa-hero__choix { order: 4; width: min(100% - 40px, 26rem); margin: 0.625rem auto 0; gap: 0.625rem; }
  .ofa-choix { gap: 0.75rem; padding-block: 0.5rem; }
  .ofa-choix__vignette { width: 3.5rem; height: 3.5rem; border-radius: 10px; }
  .ofa-choix__sur { display: none; }   /* « PILATES » au-dessus du nom : redit ce que toute la page dit (Corentin, 21 oct. : plus concis) */
  .ofa-choix__nom { margin-top: 0; }
  .ofa-hero__rassure { order: 6; width: min(100% - 40px, 22rem); margin: 0.875rem auto 0; text-align: center; }
  .ofa-hero__comprend { order: 7; width: min(100% - 40px, 26rem); margin: 2rem auto 2.5rem; }
  .ofa-hero__comprend-titre { text-align: center; }
  .ofa-hero__atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--ofa-panneau); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* opaque : il ne se pose plus sur la photo */
  .ofa-hero__atouts li { padding: 1rem 0.625rem; font-size: 0.875rem; }
  .ofa-hero__atouts li + li { border-left: 0; }
  .ofa-hero__atouts li:nth-child(2n) { border-left: 1px solid var(--ofa-trait); }
  .ofa-hero__atouts li:nth-child(n + 3) { border-top: 1px solid var(--ofa-trait); }
}


/* ── Le contenu : les sections ──
   Les règles générales des textes s'arrêtent à la section des coachs (`.cr`,
   le motif coachs-rencontre posé dans le contenu) : elle garde ses propres
   styles, comme sur Reformer et Mat. `:where()` laisse leur poids inchangé. */
.ofa { overflow-x: clip; }
.ofa > .ofa-section { padding: clamp(3rem, 7vw, 5rem) 20px; }
.ofa h2.wp-block-heading { max-width: 48rem; margin: 0 auto; padding: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 4.6vw, 2.75rem); line-height: 1.12; text-align: center; text-wrap: balance; color: var(--vin-800); }
.ofa h3.wp-block-heading { margin: 0; padding: 0; max-width: none; }
.ofa p:where(:not(.cr *)) { max-width: none; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--gray-700); }
.ofa p:where(:not(.cr *)) + p { margin-top: 1rem; }
.ofa em:where(:not(.cr *)) { font-style: normal; text-decoration: underline; text-decoration-color: var(--vin-600); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.ofa strong:where(:not(.cr *)) { font-weight: 700; color: var(--vin-900); }
.ofa .wp-block-image { margin: 0; }
.ofa .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Leurs cases cochées. */
.ofa .ofa-coches { display: grid; gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.ofa .ofa-coches li { position: relative; padding-left: 2rem; font-size: 1rem; line-height: 1.5; color: var(--gray-700); }
.ofa .ofa-coches li::before { content: "✓"; position: absolute; top: 0.15em; left: 0; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 4px; background: var(--vin-700); color: var(--davos); font: 700 0.75rem/1 var(--font-body), sans-serif; }

/* ── 2. Les deux pratiques : le titre, puis les deux cartes ──
   Le titre (bloc du contenu) : « Choisis le cours qui te correspond et
   rejoins les Paulettes. », en Manrope 800 (Corentin, 21 oct.). Les cartes
   sont celles du 15 octobre, remises à l'identique le 21 (une version d'après
   maquette les a remplacées quelques heures). */
.ofa > .ofa-pratiques { padding-top: clamp(2rem, 4vw, 3rem); }
.ofa .ofa-pratiques h2.wp-block-heading { font-family: var(--font-body), sans-serif; font-weight: 800; letter-spacing: -0.02em; }   /* comme le titre du haut */
.ofa-pratiques__cartes.wp-block-columns { max-width: 62rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; gap: 1.75rem; align-items: stretch; }
/* Le sommaire des deux cartes (inc/cours-essai.php) : seulement quand elles
   sont empilées (sous 782 px, le point de bascule des colonnes de WordPress).
   Deux pilules à contour, égales, côte à côte : elles annoncent les deux
   choix sans faire concurrence aux boutons pleins des cartes. */
.ofa .ofa-sommaire { display: none; }
.ofa-pratique { scroll-margin-top: calc(var(--cp-nav-h, 0px) + 0.75rem); }   /* l'ancre ne passe pas sous la barre du site */
@media (max-width: 781px) {
  .ofa .ofa-sommaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; max-width: 30rem; margin: 1.25rem auto 0; }
  .ofa-sommaire__lien { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 3rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-pill); background: var(--ofa-blanc); box-shadow: inset 0 0 0 1.5px var(--vin-800); font: 700 0.875rem/1.2 var(--font-body), sans-serif; text-align: center; text-decoration: none; color: var(--vin-800); }
  .ofa-sommaire__lien:active { background: var(--vin-100, #F3E4E2); }
  .ofa-sommaire__lien:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 3px; }
  .ofa-sommaire__prix { font-weight: 600; }
  .ofa .ofa-sommaire + .ofa-pratiques__cartes.wp-block-columns { margin-top: 1.5rem; }
}
.ofa-pratique { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; background: var(--ofa-blanc); box-shadow: var(--ofa-ombre); }
/* L'en-tête : le nom seul, centré. La petite photo ronde à droite est retirée (Corentin, 21 oct. : plus lisible). */
.ofa-pratique__entete { padding: 1.375rem 1.25rem; background: var(--vin-800); text-align: center; }
/* Le nom en Manrope gras, sans « Pratique n°… » (demande de Corentin, 15 oct. : la manuscrite faisait « un peu moche »). */
.ofa .ofa-pratique__nom { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 1.875rem)/1.15 var(--font-body), sans-serif; letter-spacing: -0.015em; text-wrap: balance; color: var(--davos); }
/* « C'est pour toi si… » : plus d'air au-dessus (il se détache du bandeau)
   qu'en dessous (il reste attaché à la photo et aux cases qu'il annonce).
   `h3` dans le sélecteur : sans lui, `.ofa h3.wp-block-heading` (marge 0),
   plus précis, l'emportait et le titre touchait le bandeau et la photo
   (0 px mesuré de chaque côté, 21 oct.). */
.ofa h3.ofa-pratique__pour { margin: 1.5rem 1.25rem 0.875rem; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.15; text-align: center; color: var(--vin-800); }
.ofa .ofa-pratique__photo { margin: 0 1.25rem; }
.ofa .ofa-pratique__photo img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.ofa-pratique > .ofa-coches { margin: 1.25rem 1.25rem 0; }
.ofa-pratique > .ofa-boutons { margin: auto 1.25rem 1.5rem; padding-top: 1.5rem; }
.ofa-pratique .ofa-bouton { width: 100%; }
.ofa-pratique .ofa-bouton .wp-block-button__link { width: 100%; }

/* ── 3. La preuve : le grand chiffre souligné, remonté près des cartes de pratique ── */
.ofa-preuve { text-align: center; }
.ofa > .ofa-pratiques + .ofa-preuve { padding-top: clamp(1.5rem, 3vw, 2rem); }
.ofa > .ofa-pratiques:has(+ .ofa-preuve) { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.ofa .ofa-preuve__sur { font: 700 clamp(1.25rem, 2.6vw, 1.625rem)/1.3 var(--font-body), sans-serif; color: var(--vin-900); }
.ofa .ofa-preuve h2.wp-block-heading { margin-top: 0.25rem; font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1.05; }
.ofa .ofa-preuve h2 span { text-decoration: underline; text-decoration-color: var(--vin-600); text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }
.ofa .ofa-preuve__sous { margin-top: 0.5rem; font: 700 clamp(1.0625rem, 2vw, 1.25rem)/1.4 var(--font-body), sans-serif; color: var(--vin-900); }

/* ── 4. Les avis, à la façon des avis Google ──
   Quatre cartes : la pastille de l'initiale, le prénom, le « G », les étoiles
   dorées, le texte et sa première phrase surlignée (Corentin, 15 oct.). Le
   titre se rapproche du bouton de la preuve. Pastilles variées comme chez
   Google, mais dans les tons de la charte. */
.ofa > .ofa-preuve:has(+ .ofa-avis) { padding-bottom: clamp(2rem, 4vw, 2.5rem); }
.ofa > .ofa-preuve + .ofa-avis { padding-top: clamp(1.5rem, 3vw, 2rem); }
.ofa .ofa-avis__sur { font: 700 clamp(1.125rem, 2.4vw, 1.375rem)/1.3 var(--font-body), sans-serif; text-align: center; color: var(--vin-900); }
.ofa-avis__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 58rem; margin: 2rem auto 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .ofa-avis__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ofa-avis__carte { padding: 1.25rem 1.375rem 1.5rem; border: 1px solid rgb(94 32 40 / 0.12); border-radius: 12px; background: var(--ofa-blanc); box-shadow: 0 1px 2px rgb(94 32 40 / 0.06), 0 12px 28px -16px rgb(94 32 40 / 0.35); }
.ofa-avis__entete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.ofa-avis__initiale { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--vin-700); font: 600 1.125rem/1 var(--font-body), sans-serif; color: var(--ivory); }
.ofa-avis__carte:nth-child(4n + 2) .ofa-avis__initiale { background: var(--linen-deep); color: var(--vin-800); }
.ofa-avis__carte:nth-child(4n + 3) .ofa-avis__initiale { background: var(--vin-900); }
.ofa-avis__carte:nth-child(4n + 4) .ofa-avis__initiale { background: var(--vin-200); color: var(--vin-900); }
.ofa .ofa-avis__nom { font: 700 1rem/1.3 var(--font-body), sans-serif; color: var(--vin-900); }
.ofa-avis__google { display: block; width: 1.25rem; height: 1.25rem; }
.ofa .ofa-avis__etoiles { display: flex; gap: 2px; margin-top: 0.875rem; }
.ofa-avis__etoiles svg { width: 1rem; height: 1rem; fill: #D9A21B; }   /* l'or des étoiles de l'accueil (accueil-avis.css) */
.ofa-avis__etoiles svg.is-vide { fill: rgb(94 32 40 / 0.16); }
.ofa .ofa-avis__texte { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.6; }
.ofa-avis__texte mark { padding: 0 0.15em; background: var(--vin-100); font-weight: 700; color: var(--vin-900); }

/* ── La FAQ, puis le dernier bouton ── */
.ofa-fin { padding: 0 20px clamp(3rem, 8vw, 5rem); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ofa-btn, .ofa .ofa-bouton .wp-block-button__link { transition: none; }
  .ofa-btn:hover, .ofa .ofa-bouton .wp-block-button__link:hover { transform: none; }
}

/* ══ LE TÉLÉPHONE, CALQUÉ SUR ONEFUNNELAWAY.COM (relevé à 390 px, 15 oct.) ══
   Les deux cartes de pratique (demande de Corentin ; le reste de la page
   n'est pas repris, et le haut suit la maquette du 21 octobre 2026, plus
   haut). Leurs mesures : cartes de parcours de 330 (30 px du bord, 20 px
   entre elles), en-tête 20 / 15 (sans la photo ronde, retirée le 21 oct.),
   corps 20 / 25 / 40, titre en 26 px / 600, média 16:9, texte 16 px, bouton
   de 99 px (25 px de marge, arrondi 8, bordure basse de 9 px). */
@media (max-width: 899px) {
  /* Les deux cartes de pratique */
  .ofa > .ofa-pratiques { padding-inline: 30px; }
  .ofa-pratiques__cartes.wp-block-columns { gap: 1.25rem; }
  .ofa-pratique { border-radius: 12px; box-shadow: 0 0 36px rgb(94 32 40 / 0.15); }
  .ofa-pratique__entete { padding: 1.375rem 0.9375rem; }
  .ofa .ofa-pratique__nom { font-size: 1.5rem; }
  .ofa h3.ofa-pratique__pour { margin: 1.375rem 1.5625rem 0.875rem; font-size: 1.615rem; }
  .ofa .ofa-pratique__photo { margin: 0 1.5625rem; }
  .ofa .ofa-pratique__photo img { aspect-ratio: 282 / 160; }
  .ofa-pratique > .ofa-coches { margin: 1.25rem 1.5625rem 0; }
  .ofa-pratique > .ofa-coches li { font-size: 1rem; line-height: 1.4; }
  .ofa-pratique > .ofa-boutons { margin: auto 1.5625rem 2.5rem; padding-top: 1.25rem; }
  .ofa .ofa-pratique .ofa-bouton .wp-block-button__link { min-height: 6.1875rem; padding: 1.5625rem; border-radius: 8px; border-bottom: 9px solid rgb(26 4 6 / 0.35); box-shadow: none; font-size: 0.988rem; font-weight: 800; line-height: 1; letter-spacing: 0; text-transform: none; }
  .ofa .ofa-pratique .ofa-bouton .wp-block-button__link:hover { transform: translateY(3px); border-bottom-width: 6px; box-shadow: none; }
}