/* Lot 10, P38 : Forfaits photo, version H (choix de Vince dans l'artifact A1, 3e tour) : hero plein écran qui annonce les
   3 besoins, barre collante Portraits · Familles · Entreprises, un chapitre par besoin (grande photo, puis les forfaits en
   rangées), la galerie complète en noir (P42), la FAQ et l'appel final. Maquette : labo/lot10/A1/a1.html, carte H. */

/* ——— Hero ——— */
.forfaits-hero_stoud { position: relative; min-height: 100vh; min-height: 100svh; max-height: 64rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--_🎨-color--base---base--light-100); background: var(--_🎨-color--base---base--dark-100); }
.forfaits-hero_fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.forfaits-hero_stoud::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .74) 100%); }
.forfaits-hero_contenu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--spacing--space-medium); padding: var(--haut-collant, 9rem) var(--stoud-marge-laterale, 32px) var(--stoud-marge-laterale, 32px); }
.forfaits-hero_texte { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--spacing--space-large); }
.forfaits-hero_texte h1 { margin: 0; max-width: 54rem; font-size: clamp(3.25rem, 6.2vw, 5.5rem); line-height: .98; letter-spacing: -.06em; color: inherit; }
.forfaits-hero_droite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--space-small); max-width: 24rem; }
.forfaits-hero_droite p { margin: 0; color: var(--_🎨-color--base---base--light-88, rgba(255, 255, 255, .86)); }
/* 2026-10-20 (artifact PJdu5E6g5SdVgjScnxXRbf, Vince : « exact comme ça ») : les 3 tuiles cèdent leur place à la barre
   collante. La barre reste dans .forfaits-chapitres_stoud (dans le hero, elle ne collerait que dans le hero) ; le hero lui
   garde une place vide de sa hauteur, et une marge négative (hauteur + marge latérale) l'y remonte. Son top collant, sa
   largeur, --d4-haut et les scroll-margin-top ne changent pas. Le bouton du hero se cache là où la barre a le sien. */
.forfaits-hero_place { height: 4.25rem; }
@media (min-width: 768px) { html:not(.unik-edition) .forfaits-hero_droite > .cta_small { display: none; } }

/* ——— La barre collante ——— */
.forfaits-chapitres_stoud { position: relative; }
.forfaits-sommaire { position: sticky; top: 5.5rem; z-index: 20; margin: calc(-4.25rem - var(--stoud-marge-laterale, 32px)) 8px calc(var(--stoud-marge-laterale, 32px) + var(--spacing--space-large)); height: 4.25rem; padding: 0 12px 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--_🎨-color--base---base--light-100, #fff); border: 1px solid var(--_🎨-color--base---base--dark-12); border-radius: 14px; transition: box-shadow .4s ease; }
.forfaits-sommaire.is-colle { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }
.forfaits-sommaire_liens { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.forfaits-sommaire_liens::-webkit-scrollbar { display: none; }
.forfaits-sommaire_liens a { display: inline-flex; align-items: center; gap: 8px; height: 3rem; padding: 0 18px; border-radius: 10px; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; color: var(--_🎨-color--base---base--dark-100); text-decoration: none; transition: background-color .35s ease, color .35s ease; }
.forfaits-sommaire_liens a small { font-size: 14px; color: var(--_🎨-color--base---base--dark-64); transition: color .35s ease; }
.forfaits-sommaire_liens a:hover { background: var(--_🎨-color--base---base--dark-4); }
.forfaits-sommaire_liens a.is-actif { background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.forfaits-sommaire_liens a.is-actif small { color: rgba(255, 255, 255, .7); }
.forfaits-sommaire_liens a:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; }

/* ——— Les chapitres ——— */
.forfaits-chapitre { padding-top: var(--spacing--space-small); scroll-margin-top: calc(5.5rem + 4.25rem + 8px); }
.forfaits-chapitre + .forfaits-chapitre { padding-top: var(--stoud-espace-section); }
.forfaits-chapitre_titre { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.forfaits-chapitre_titre h2 { margin: 0; font-size: clamp(3.25rem, 6.6vw, 6rem); line-height: .95; letter-spacing: -.06em; color: inherit; }
.forfaits-chapitre_titre p { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }
.forfaits-chapitre_rangees { padding: var(--spacing--space-tiny) var(--stoud-marge-laterale, 32px) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing--space-large); align-items: start; }
.forfaits-chapitre_rangees.is-un { grid-template-columns: minmax(0, 1fr); max-width: 50%; }

/* ——— Une rangée ——— */
.forfait-rangee { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 32px; padding: 26px 0; border-bottom: 1px solid var(--_🎨-color--base---base--dark-12); }
.forfait-rangee_gauche { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.forfait-rangee_gauche h3, .forfait-rangee_gauche p { margin: 0; }
.forfait-rangee_gauche p { max-width: 30rem; }
.forfait-rangee_details { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--_🎨-color--base---base--dark-64); }
.forfait-rangee_droite { display: grid; justify-items: end; align-content: start; gap: 10px; text-align: right; }
.forfait-rangee_prix { font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.forfait-rangee_options { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 17.5rem; font-size: 14px; color: var(--_🎨-color--base---base--dark-64); }
.forfait-rangee_reserver { display: inline-flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 500; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .35s ease, gap .35s var(--stoud-courbe); }
.forfait-rangee_reserver:hover { gap: 10px; }

/* ——— Après les chapitres ——— */
.forfaits-apres_stoud { padding: var(--spacing--space-large) var(--stoud-marge-laterale, 32px) 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.forfaits-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--_🎨-color--base---base--dark-64); }
.forfaits-galerie_stoud { margin-top: var(--stoud-espace-section); }

@media (max-width: 991px) {
  .forfaits-hero_texte { flex-direction: column; align-items: flex-start; gap: var(--spacing--space-small); }
  .forfaits-chapitre_rangees, .forfaits-chapitre_rangees.is-un { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .forfaits-apres_stoud { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .forfaits-hero_contenu { padding: 7rem 16px 16px; }
  .forfaits-hero_place { height: 3.5rem; }
  .forfaits-sommaire { margin: calc(-3.5rem - 16px) 8px calc(16px + var(--spacing--space-large)); height: 3.5rem; padding: 0 6px; top: 4.5rem; }
  .forfaits-sommaire_liens a { height: 2.625rem; padding: 0 12px; font-size: 15px; }
  .forfaits-sommaire_liens a small, .forfaits-sommaire > .cta_small, .forfaits-sommaire > a:last-child { display: none; }
  .forfaits-chapitre { scroll-margin-top: calc(4.5rem + 3.5rem + 8px); }
  .forfaits-chapitre_titre { left: 16px; right: 16px; bottom: 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .forfaits-chapitre_titre p { font-size: 1.125rem; }
  .forfaits-chapitre_rangees { padding: 8px 16px 0; }
  .forfait-rangee { padding: 20px 0; gap: 8px 16px; }
  .forfait-rangee_droite { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; text-align: left; }
  .forfait-rangee_prix { font-size: 1.5rem; }
  .forfait-rangee_options { order: 3; width: 100%; max-width: none; }
  .forfaits-apres_stoud { padding: var(--spacing--space-medium) 16px 0; }
}
@media (prefers-reduced-motion: reduce) { .forfait-rangee_reserver, .forfaits-sommaire, .forfaits-sommaire_liens a { transition: none; } }
/* En mode édition, la barre ne colle pas (elle cacherait les textes qu'on modifie). */
html.unik-edition .forfaits-sommaire { position: relative; top: auto; }
/* Cadrage par défaut des photos des chapitres (celui de la maquette) ; un cadrage choisi dans la barre passe par-dessus. */

/* ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
   Lot 11, E4 (D4, 3e ronde, version C3, choix de Vince le 2026-10-19 ; essai labo/lot11/D4/r3/C3/c3.css) : chaque chapitre
   devient une grille, un cadre photo collant (7 colonnes) qui porte le titre du chapitre et la pastille du forfait vu, et la
   liste des forfaits (5 colonnes), en alternance. La photo (rideau GSAP du gem BYQ sticky-media-swap-01) et le trait jaune
   (un seul par liste, sur un rail) suivent le forfait qui passe le milieu de l'écran (/js/forfaits-cadre.js). Téléphone : le
   cadre (sans coller), puis chaque forfait avec sa photo au-dessus, qui s'ouvre en rideau en arrivant. Typo éditoriale :
   titre au corps H2 avec son compte en surtitre, rang en surtitre, nom et prix au corps H5, détails et options en capitales.
   ————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
.forfaits-chapitre { --d4-haut: calc(5.5rem + 4.25rem + var(--stoud-espace-rangees, 16px)); }
.d4-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--spacing--space-medium); align-items: start; padding: 0 var(--stoud-marge-laterale, 32px); }
.d4-grille.is-inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.d4-grille.is-inverse .d4-cadre { order: 2; }
/* Un seul forfait (Familles) : il se centre face au cadre. */
.d4-grille.is-un { align-items: center; }

/* Le cadre collant : la bande d'aujourd'hui, qui colle et change de photo. */
.d4-cadre { position: sticky; top: var(--d4-haut); height: calc(var(--d4-vh, 100svh) - var(--d4-haut) - var(--stoud-marge-laterale, 32px)); min-height: 26rem; max-height: 50rem; margin: 0; border-radius: var(--_🔘-radius---general--default, 12px); overflow: hidden; isolation: isolate; color: var(--_🎨-color--base---base--light-100); background: var(--_🎨-color--base---base--dark-100); }
.d4-cadre_photos { position: absolute; inset: 0; }
.d4-cadre_photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform, clip-path, opacity; }
.d4-cadre_photos img.is-vue { opacity: 1; z-index: 1; }
.d4-cadre::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .66) 100%); }
.d4-cadre .forfaits-chapitre_titre { z-index: 4; left: 32px; right: 32px; bottom: 32px; align-items: flex-end; }
.d4-cadre .forfaits-chapitre_titre h2 { font-size: clamp(3.25rem, 6vw, 5.5rem); }
.d4-cadre .forfaits-chapitre_titre p { font-size: 1.25rem; }
/* La pastille du forfait vu (verre sombre, comme les tuiles du hero). */
.d4-pastille { position: absolute; z-index: 4; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100vw; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(-6px); transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
.main-wrapper .d4-pastille { transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
.d4-pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stoud-jaune); }
.d4-cadre.a-un-forfait .d4-pastille { opacity: 1; transform: none; }

/* La liste : les rangées d'aujourd'hui, empilées (nom et texte, puis prix, options et « Réserver » sur une ligne). */
.d4-liste .forfaits-chapitre_rangees, .d4-liste .forfaits-chapitre_rangees.is-un { padding: 0; grid-template-columns: minmax(0, 1fr); max-width: none; border-top: 1px solid var(--_🎨-color--base---base--dark-12); }
.d4-liste .forfait-rangee { grid-template-columns: minmax(0, 1fr); padding: 28px 0 28px 0; transition: padding-left .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s cubic-bezier(.16, 1, .3, 1); }
.d4-liste .forfait-rangee_droite { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 6px 20px; text-align: left; }
.d4-liste .forfait-rangee_options { order: 3; width: 100%; max-width: none; }
.d4-liste .forfait-rangee_reserver { margin-left: auto; }
.d4-liste .forfait-rangee.is-vu { padding-left: 20px; box-shadow: inset 3px 0 0 var(--stoud-jaune); }
.d4-vignette { display: none; }

@media (max-width: 991px) {
  .d4-grille, .d4-grille.is-inverse { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing--space-tiny); }
  .d4-grille.is-inverse .d4-cadre { order: 0; }
  .d4-grille.is-un { align-items: start; }
  .d4-cadre { position: relative; top: auto; height: 23.75rem; min-height: 0; }
  .d4-pastille { display: none; }
  .d4-liste .forfait-rangee.is-vu { padding-left: 0; box-shadow: none; }
  .d4-vignette { display: block; aspect-ratio: 16 / 10; border-radius: var(--_🔘-radius---general--default, 12px); overflow: hidden; background: var(--_🎨-color--base---depth--light); margin-bottom: 6px; }
  .d4-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .d4-liste .forfait-rangee.is-chapitre .d4-vignette { display: none; }
}
@media (max-width: 767px) {
  .d4-grille { padding: 0 16px; }
  .d4-cadre { margin: 0 -8px; }
  .d4-cadre .forfaits-chapitre_titre { left: 16px; right: 16px; bottom: 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .d4-cadre .forfaits-chapitre_titre h2 { font-size: 3.25rem; }
  .d4-cadre .forfaits-chapitre_titre p { font-size: 1.125rem; }
  .d4-liste .forfait-rangee { padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .d4-pastille, .main-wrapper .d4-pastille, .d4-liste .forfait-rangee { transition: none; }
}
html.unik-edition .d4-cadre { position: relative; top: auto; }
/* Mode édition : les photos des forfaits (qui n'apparaissent qu'au défilement) en vignettes en haut du cadre, pour que la barre
   les atteigne. */
html.unik-edition .d4-cadre_photos img:not(:first-child) { opacity: 1; visibility: visible; z-index: 5; inset: var(--spacing--space-tiny) auto auto var(--spacing--space-tiny); width: 28%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--_🔘-radius---general--small); }
html.unik-edition .d4-cadre_photos img:nth-child(3) { left: calc(var(--spacing--space-tiny) * 2 + 28%); }
html.unik-edition .d4-cadre_photos img:nth-child(4) { left: calc(var(--spacing--space-tiny) * 3 + 56%); }
/* Lot 11 : le placeholder d'un forfait sans photo (/photos/placeholder.svg, fond clair). La pastille y passe en verre foncé
   (texte blanc lisible) ; en mode édition, il n'est relié à rien et n'a pas sa place parmi les vignettes de la barre. */
.d4-cadre.sur-placeholder .d4-pastille { background: var(--_🎨-color--base---base--dark-64); }
html.unik-edition .d4-cadre_photos img.d4-placeholder { display: none; }
#portraits .d4-cadre_photos img:first-child { object-position: 50% 22%; }
#familles .d4-cadre_photos img:first-child { object-position: 50% 40%; }
#entreprises .d4-cadre_photos img:first-child { object-position: 50% 45%; }

/* ——————————————————————————————————————————————————————————————————————————————————————————————————————————
   2e ronde (demande de Vince, 2026-10-19 : « J'adore la version C, mais joue avec la typographie »). Le socle ci-dessus
   est le C de la 1re ronde, tel quel. Ce qui suit : le mouvement au téléphone (commun aux 3 traitements), puis la typo.
   Les rangées passent en « display: contents » pour leurs deux moitiés : leurs éléments (nœuds d'origine, prix et liens
   intacts) se placent dans une grille à zones nommées, propre à chaque traitement.
   —————————————————————————————————————————————————————————————————————————————————————————————————————————— */
.d4-liste .forfait-rangee_gauche, .d4-liste .forfait-rangee_droite { display: contents; }
.d4-liste .forfait-rangee > .d4-vignette { grid-area: vignette; }
.d4-liste .forfait-rangee h3 { grid-area: nom; margin: 0; }
.d4-liste .forfait-rangee .forfait-rangee_gauche > p { grid-area: resume; margin: 0; }
.d4-liste .forfait-rangee_details { grid-area: details; }
.d4-liste .forfait-rangee_prix { grid-area: prix; }
.d4-liste .forfait-rangee_options { grid-area: options; order: 0; width: auto; }
.d4-liste .forfait-rangee_reserver { grid-area: reserver; justify-self: start; margin: 0; }
.d4-rang { grid-area: rang; }
.d4-liste .forfait-rangee { text-align: left; }

/* Téléphone : la photo de chaque forfait s'ouvre en rideau de bas en haut et se pose (1,12 → 1), mêmes courbes que le cadre
   du bureau (power3.inOut 0,85 s, power2.out 1,25 s) ; le forfait au milieu de l'écran garde le trait jaune. */
@media (max-width: 991px) {
  .d4-vignette { clip-path: inset(100% 0 0 0); }
  .main-wrapper .d4-vignette { transition: clip-path .85s cubic-bezier(.65, 0, .35, 1); }
  .d4-vignette img { transform: scale(1.12); transition: transform 1.25s cubic-bezier(.33, 1, .68, 1); }
  .d4-vignette.is-ouverte, html.d4-statique .d4-vignette { clip-path: inset(0 0 0 0); }
  .d4-vignette.is-ouverte img, html.d4-statique .d4-vignette img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .d4-vignette, .main-wrapper .d4-vignette { clip-path: none; transition: none; }
  .d4-vignette img { transform: none; transition: none; }
}
html.unik-edition .d4-vignette { clip-path: none; }
html.unik-edition .d4-vignette img { transform: none; }

/* ——— C3 : l'éditorial sobre. Le titre du chapitre au corps H2 avec son compte en surtitre (capitales) au-dessus ; chaque
   forfait en ligne de catalogue : le rang en surtitre dans une colonne à gauche, le nom et le prix au même corps (H5) de
   part et d'autre, le résumé en texte courant, les détails et options en capitales, « Réserver → » en surtitre souligné.
   Pastille en capitales, sur une ligne. ——— */
.d4-cadre .forfaits-chapitre_titre { flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--spacing--space-pico); }
.d4-cadre .forfaits-chapitre_titre p { order: -1; font-family: var(--_🔠-typography---font-family--label-1); font-size: var(--_🔠-typography---size--label-1); line-height: var(--_🔠-typography---line-height--label-1); font-weight: var(--_🔠-typography---font-weight--label-1); letter-spacing: var(--_🔠-typography---letter-spacing--label-1); text-transform: uppercase; color: var(--_🎨-color--base---base--light-88); }
.d4-cadre .forfaits-chapitre_titre h2 { font-family: var(--_🔠-typography---font-family--h2); font-size: var(--_🔠-typography---size--h2); line-height: var(--_🔠-typography---line-height--h2); font-weight: var(--_🔠-typography---font-weight--h2); letter-spacing: var(--_🔠-typography---letter-spacing--h2); color: inherit; }
.d4-pastille { gap: 8px; padding: 9px 14px; }
.d4-pastille::before { margin-right: 2px; }
.d4-pastille_nom, .d4-pastille_prix { font-family: var(--_🔠-typography---font-family--label-1); font-size: var(--_🔠-typography---size--label-1); line-height: var(--_🔠-typography---line-height--label-1); font-weight: var(--_🔠-typography---font-weight--label-1); letter-spacing: var(--_🔠-typography---letter-spacing--label-1); text-transform: uppercase; }
.d4-pastille_prix { color: var(--_🎨-color--base---base--light-88); font-variant-numeric: tabular-nums; }
.d4-pastille_prix::before { content: "·"; margin-right: 8px; }

.d4-liste .forfait-rangee { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "vignette vignette vignette" "rang nom prix" ". resume resume" ". details details" ". options options" ". reserver reserver"; gap: var(--spacing--space-minimal) 0; align-items: baseline; padding: var(--spacing--space-tiny) 0; }
.d4-rang { font-family: var(--_🔠-typography---font-family--label-1); font-size: var(--_🔠-typography---size--label-1); line-height: var(--_🔠-typography---line-height--label-1); font-weight: var(--_🔠-typography---font-weight--label-1); letter-spacing: var(--_🔠-typography---letter-spacing--label-1); color: var(--_🎨-color--base---base--dark-64); }
.d4-liste .forfait-rangee h3 { font-family: var(--_🔠-typography---font-family--h5); font-size: var(--_🔠-typography---size--h5); line-height: var(--_🔠-typography---line-height--h5); font-weight: var(--_🔠-typography---font-weight--h5); letter-spacing: var(--_🔠-typography---letter-spacing--h5); }
.d4-liste .forfait-rangee_prix { font-family: var(--_🔠-typography---font-family--h5); font-size: var(--_🔠-typography---size--h5); line-height: var(--_🔠-typography---line-height--h5); font-weight: var(--_🔠-typography---font-weight--h5); letter-spacing: var(--_🔠-typography---letter-spacing--h5); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--spacing--space-nano); }
.d4-liste .forfait-rangee_prix > span:first-child:not(:last-child) { font-family: var(--_🔠-typography---font-family--label-1); font-size: var(--_🔠-typography---size--label-1); line-height: var(--_🔠-typography---line-height--label-1); font-weight: var(--_🔠-typography---font-weight--label-1); letter-spacing: var(--_🔠-typography---letter-spacing--label-1); text-transform: uppercase; color: var(--_🎨-color--base---base--dark-64); margin-right: 2px; }
.d4-liste .forfait-rangee .forfait-rangee_gauche > p { font-family: var(--_🔠-typography---font-family--b2); font-size: var(--_🔠-typography---size--b2); line-height: var(--_🔠-typography---line-height--b2); font-weight: var(--_🔠-typography---font-weight--b2); letter-spacing: var(--_🔠-typography---letter-spacing--b2); max-width: 28rem; }
.d4-liste .forfait-rangee_details, .d4-liste .forfait-rangee_options { font-family: var(--_🔠-typography---font-family--label-1); font-size: var(--_🔠-typography---size--label-1); line-height: var(--_🔠-typography---line-height--label-1); font-weight: var(--_🔠-typography---font-weight--label-1); letter-spacing: var(--_🔠-typography---letter-spacing--label-1); text-transform: uppercase; color: var(--_🎨-color--base---base--dark-64); gap: 6px; }
.d4-liste .forfait-rangee_reserver { font-family: var(--_🔠-typography---font-family--label-1); font-size: var(--_🔠-typography---size--label-1); line-height: var(--_🔠-typography---line-height--label-1); font-weight: var(--_🔠-typography---font-weight--label-1); letter-spacing: var(--_🔠-typography---letter-spacing--label-1); text-transform: uppercase; margin-top: var(--spacing--space-minimal); color: var(--_🎨-color--base---base--dark-100); }
.d4-liste .forfait-rangee.is-vu { padding-left: var(--spacing--space-nano); }
@media (max-width: 991px) {
  .d4-liste .forfait-rangee.is-vu { padding-left: var(--spacing--space-nano); box-shadow: inset 3px 0 0 var(--stoud-jaune); }
}
@media (max-width: 767px) {
  .d4-cadre .forfaits-chapitre_titre h2 { font-size: var(--_🔠-typography---size--h1); line-height: var(--_🔠-typography---line-height--h1); letter-spacing: var(--_🔠-typography---letter-spacing--h1); }
  .d4-liste .forfait-rangee { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .d4-vignette { margin-bottom: var(--spacing--space-minimal); }
}

/* ——— 3e ronde ———————————————————————————————————————————————————————————————————————————————————————————————
   1. Le trait jaune glisse : un seul indicateur par liste (.d4-trait), sur un rail fin (filet dark-12) à
      gauche des forfaits. Il prend la position et la hauteur du forfait vu (celui qui passe le repère du milieu de l'écran),
      en 0,6 s (courbe des révélations du site). Les forfaits ne bougent plus (fini le décalage du forfait vu).
   2. Le Corpo allégé, au gabarit des autres : un forfait à paliers n'affiche pas ses détails (forfaits-photo.astro ; ils
      restent au CMS, choix de Vince « garder »). */
.d4-liste { position: relative; }
.d4-liste::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--_🎨-color--base---base--dark-12); pointer-events: none; }
.d4-liste .forfait-rangee, .d4-liste .forfait-rangee.is-vu { padding-left: var(--spacing--space-nano); box-shadow: none; }
.d4-trait { position: absolute; left: -1px; top: 0; width: 3px; height: 0; border-radius: 3px; background: var(--stoud-jaune); opacity: 0; pointer-events: none; will-change: transform, height; }
.main-wrapper .d4-trait { transition: transform .6s var(--stoud-courbe), height .6s var(--stoud-courbe), opacity .3s ease; }
.d4-trait.is-visible { opacity: 1; }
@media (max-width: 991px) {
  .d4-liste .forfait-rangee, .d4-liste .forfait-rangee.is-vu { padding-left: var(--spacing--space-nano); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .d4-trait, .main-wrapper .d4-trait { transition: none; }
}


/* Lot 11, R17 (Vince, capture de /forfaits-photo en ligne : le cadre colle trop haut, sous la barre ; « 32px de spacing entre la
   barre et l'image ; réduire le height de l'image pour faire mieux respirer le design ; chaque section ; la barre au-dessus du
   blur du nav »).
   - Le cadre colle à 32 px sous le bas réel de la barre : /js/forfaits-cadre.js mesure la barre (son top collant et sa
     hauteur) au chargement et au redimensionnement et publie --sommaire-haut et --sommaire-bas sur <html>.
   - Sa hauteur : 80 % de l'écran visible sous ce haut, entre 22rem et 42rem : de l'air en bas aussi (≈ 140 px à 1440 × 900).
   - La barre et le flou du menu : .main-wrapper (z-index 10 du gabarit, qui le garde au-dessus du pied de page) enferme la
     barre ; aucun z-index ne la fait passer au-dessus du flou (998), qui est hors de .main-wrapper. Pendant que la barre colle,
     le flou s'arrête donc en haut de la barre sur cette page : plus rien ne passe sur elle, et elle reste sous le menu ouvert
     (999) et sous la bannière des témoins (1000). */
.forfaits-chapitre { --d4-haut: calc(var(--sommaire-bas, 9.75rem) + 32px); }
.d4-cadre { height: clamp(22rem, calc((var(--d4-vh, 100svh) - var(--d4-haut)) * .8), 42rem); min-height: 0; max-height: none; }
body:has(.forfaits-sommaire.is-colle) .fond-menu_stoud { height: var(--sommaire-haut, 5.5rem); }
@media (max-width: 991px) { .d4-cadre { height: 23.75rem; } }