/* ══════════════════════════════════════════
   PATTERNS — CSS des patterns réutilisables
   Chargé sur toutes les pages (front-page ET service pages).
   Ne contient PAS de CSS page-spécifique.
══════════════════════════════════════════ */

/* ── FAQ ── */

.faqs {
  background: var(--cream);
  padding: 96px 0 48px;
}
.faqs__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 900px) {
  .faqs__inner { grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: start; }
}
@media (max-width: 640px) {
  .faqs { padding: 64px 0 40px; }
  .faqs__inner { gap: 36px; }
  .faqs__title { font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .faqs__eyebrow, .faqs__title { text-align: center; }
  .faqs__quote-card { display: none; }
  .faq__q { padding: 16px 16px 16px 20px; font-size: .9rem; }
  .faq__a { padding: 16px 20px 20px; }
}

.faqs__eyebrow {
  font-family: var(--font-heading); font-weight: 800;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--forest); margin-bottom: 14px;
}
.faqs__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1; text-transform: uppercase;
  color: var(--primary-900); margin-bottom: 28px;
}

.faqs__quote-card {
  background: var(--white);
  border-radius: 16px;
  padding: 20px 20px 20px 0;
  display: flex; align-items: flex-start; gap: 0;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
.faqs__quote-avatar {
  flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--forest);
  overflow: hidden;
  margin-left: -10px; margin-top: -10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.faqs__quote-body { padding: 4px 0 0 16px; }
.faqs__quote-text {
  font-family: var(--font-heading); font-weight: 600;
  font-size: .92rem; line-height: 1.55; color: var(--ink); margin-bottom: 10px;
}
.faqs__quote-author {
  font-family: var(--font-heading); font-weight: 700;
  font-size: .78rem; color: var(--primary-700);
}
.faqs__quote-author span { color: var(--forest); }

.faqs__list { display: flex; flex-direction: column; gap: 12px; }
.faq {
  border: none;
  border-radius: 100px;
  background: var(--primary-700);
  overflow: hidden;
}
.faq[open] { border-radius: 22px; background: var(--primary-700); box-shadow: var(--shadow-md); }
.faq[open] .faq__icon { transform: rotate(180deg); }
.faq__q {
  list-style: none; cursor: pointer;
  padding: 20px 20px 20px 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: .98rem; color: var(--white); user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  flex-shrink: 0; width: 28px; height: 28px;
  color: var(--white); transition: transform .25s;
}
.faq__icon svg { width: 22px; height: 22px; }
.faq__a {
  background: var(--white);
  padding: 20px 28px 24px;
  color: var(--gray-700); font-size: .93rem; line-height: 1.65;
}
/* Les liens du maillage interne dans une réponse ([cp_lien]) : le style du
   lien vers Tarifs des pages Reformer et Mat (.pqs__suite-lien), sans le gras.
   Le filet dit que c'est un lien, pas seulement la couleur. */
.faq__a a {
  color: var(--vin-700);
  text-decoration: underline 1px rgb(94 32 40 / 0.35); text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur-base) var(--ease-out-expo);
}
.faq__a a:hover { text-decoration-color: var(--vin-700); }
.faq__a a:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; border-radius: 2px; }

/* ── « J'AI UNE QUESTION », dans une carte d'abonnement ───────────────
   Tarifs et pages Reformer et Mat (cp_questions_abonnement, inc/tarifs.php).
   Une pastille fermée, qui ouvre les réponses sur place, dans la carte : la
   carte reste sobre, la réponse reste près du bouton. */
.questions{margin:14px 0 0;text-align:left}
.questions__pastille{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;min-height:36px;margin:0 auto;
  padding:0 16px;border:1px solid color-mix(in oklab,var(--vin-700) 35%,transparent);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--vin-700);cursor:pointer;list-style:none;
  transition:background-color var(--dur-base,.2s) ease}
.questions__pastille::-webkit-details-marker{display:none}
.questions__pastille::after{content:"";width:7px;height:7px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .2s}
.questions[open] .questions__pastille::after{margin-top:3px;transform:rotate(-135deg)}
.questions__pastille:hover{background:color-mix(in oklab,var(--vin-700) 7%,transparent)}
.questions__pastille:focus-visible{outline:2px solid var(--vin-700);outline-offset:2px}
.questions__corps{display:grid;gap:12px;margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--linen-deep)}
.questions__corps p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.questions__corps strong{display:block;margin-bottom:2px;font-weight:600;color:var(--ink)}
.questions__toutes{justify-self:center;font-size:13px;font-weight:600;color:var(--vin-700);
  text-decoration:underline 1px rgb(94 32 40 / .35);text-underline-offset:.3em}
.questions__toutes:focus-visible{outline:2px solid var(--vin-700);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion: reduce){ .questions__pastille,.questions__pastille::after{transition:none} }
@media (pointer: coarse){ .questions__pastille{min-height:44px} }

/* ── PROCESS SECTION ── */

@keyframes ring-draw { to { stroke-dashoffset: 0; } }
/* ── LE BLOC VIDÉO DE BAS DE PAGE (studio-reel.php ; ex-`proof`) ── */

.leap-section {
  /* Transition douce blanc → sombre (au lieu d'un stop dur à 80% qui traçait une
     ligne horizontale nette dans les marges, de part et d'autre de la carte). Le
     bas reste var(--surface-dark) plein pour rejoindre le footer sans couture. */
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 64%, var(--surface-dark) 90%);
  padding: calc(var(--section-y, 96px) * 0.45) 1.5rem var(--section-y, 96px);
}

.leap-card {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  min-height: 560px;
  background: var(--surface-dark);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -40px rgba(0, 0, 0, 0.9),
    14px 18px 60px rgba(255, 255, 255, 0.18);
}

.leap-media { position: relative; min-height: 560px; }
.leap-media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.leap-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 3rem 2.5rem;
}

.leap-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.8vw, 2rem);
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}
@media (min-width: 641px) { .leap-title { white-space: nowrap; } }

.leap-quote {
  color: var(--gray-300);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 38ch;
  margin: 0 auto 1.75rem;
  font-style: italic;
}

.leap-cta { display: flex; align-items: center; justify-content: center; }
.leap-btn { font-size: 0.75rem; padding: 0.5rem 1.1rem; }
.leap-btn:hover { background: oklch(0.47 0.072 15.6); border-color: oklch(0.47 0.072 15.6); }

@media (max-width: 860px) {
  .leap-card { grid-template-columns: 1fr; min-height: 0; }
  .leap-media { min-height: 230px; }
  .leap-body { padding: 2.25rem 1.5rem 2.75rem; }
  .leap-title { order: 1; margin-bottom: 1rem; white-space: normal; }
  .leap-cta { order: 2; margin-bottom: 1.25rem; }
  .leap-quote { order: 3; margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .leap-media-el { display: none; }
}

/* ── LE REEL DU STUDIO (studio-reel.php) ──────────────────────────────
   La carte `leap-*` ci-dessus (héritée de `proof`), retournée : le texte dans la
   large colonne, le reel VERTICAL dans l'étroite, en 9:16 sans recadrage —
   son texte incrusté ne doit pas être coupé. */
.leap-card--reel{grid-template-columns:1fr auto;min-height:0}
.leap-card--reel .leap-body{padding:3.5rem 3rem}
.leap-card--reel .leap-title{white-space:normal;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.1}
.leap-card--reel .leap-quote{font-style:normal;font-size:1rem;margin-bottom:2rem}
.leap-card--reel .leap-media{position:relative;margin:0;width:min(34vw,340px);aspect-ratio:9/16;min-height:0}
.leap-card--reel .leap-media-el{object-position:50% 50%}
/* Un simple fondu vers la carte, sur le bord gauche : jamais de voile sur
   l'image elle-même, le texte incrusté doit rester lisible. */
.leap-card--reel .leap-media::before{content:"";position:absolute;inset:0 auto 0 0;width:48px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--surface-dark),transparent)}

@media (max-width:860px){
  .leap-card--reel{grid-template-columns:1fr}
  .leap-card--reel .leap-body{padding:2.25rem 1.5rem 1.5rem}
  /* patterns.css place le bouton avant la citation de `proof` ; ici la phrase
     prolonge le titre, le bouton conclut. */
  .leap-card--reel .leap-quote{order:2;margin-bottom:1.5rem}
  .leap-card--reel .leap-cta{order:3;margin-bottom:0}
  .leap-card--reel .leap-media{width:min(100% - 3rem,320px);margin:0 auto 1.75rem;border-radius:14px;overflow:hidden}
  .leap-card--reel .leap-media::before{display:none}
}
/* Mouvement réduit : patterns.css masque la vidéo ; ici le poster, sous
   forme de fond, garde la colonne pleine (lazy-video.js ne charge rien). */
@media (prefers-reduced-motion:reduce){
  .leap-card--reel .leap-media-el{display:block}
}

/* ═══════════ SECTIONS DE PATTERN (déplacées de front-page.css) ═══════════
   Chargées PARTOUT pour que ces patterns soient réutilisables sur toute page. */
/* ════════════════════════════════ STATS ════════════════════════════════ */

.stat { padding: 40px 32px; border-right: 1px solid var(--gray-300); }
.stat:last-child { border-right: none; }
/* ════════════════════════════════ WORK PREVIEW ════════════════════════════════ */

#work {
  padding-bottom: clamp(32px, 4vh, 52px);
  background: linear-gradient(to bottom, var(--bg) 90%, oklch(0.98 0.006 80) 90%);
}

/* ═══════════ PAGE-HERO GÉNÉRIQUE (.ph) — réutilisé Contact, Tarifs… ═══════════ */
.ph { position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden; padding: 9rem 1.5rem 8rem; text-align: center; }
.ph-bg { position: absolute; inset: 0; z-index: 0; }
.ph-bg__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; filter: saturate(0.28) brightness(0.55) contrast(1.05); }
.ph-bg__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(2,6,35,0.55) 0%, transparent 52%),
    radial-gradient(ellipse 52% 55% at 58% 48%, oklch(0.20 0.030 15.6 / 0.30) 0%, oklch(0.16 0.030 15.6 / 0.90) 100%),
    linear-gradient(to bottom, rgba(2,6,35,0.55) 0%, rgba(2,6,35,0.10) 50%, rgba(2,6,35,0.65) 100%);
  mix-blend-mode: multiply;
}
.ph-inner { position: relative; z-index: 1; max-width: 860px; width: 100%; }
.ph-eyebrow { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary-500); margin-bottom: 1.25rem; }
.ph-title { font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 3.75rem); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; color: var(--ivory); margin-bottom: 1.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 80px oklch(0.47 0.072 15.6 / 0.32); }
.ph-lead { color: rgba(255,255,255,0.78); font-size: 1.05rem; line-height: 1.6; max-width: 560px; margin: 0 auto 2rem; }
/* Adresse du studio, dans la section « venir ». */

/* Créneaux souhaités : la donnée la plus utile du formulaire de liste d'attente.
   Cases à cocher en pilules, cohérentes avec le bouton de la charte. */
.field--slots { border: 0; margin: 0; padding: 0; }
.field--slots legend { padding: 0; margin-bottom: .6rem; }
.field__opt { font-weight: 400; opacity: .7; text-transform: none; letter-spacing: 0; }

.field__slots .wpcf7-list-item { margin: 0; }
.field__slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.field__slots label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: .875rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}
.field__slots label:hover { border-color: var(--primary-600); }
.field__slots input[type="checkbox"] { accent-color: var(--primary-700); margin: 0; }
.field__slots input[type="checkbox"]:checked + .wpcf7-list-item-label { font-weight: 600; }
.field__slots label:has(input:checked) {
  border-color: var(--primary-700);
  background: var(--linen-deep);
}

/* ══════════════════════════════════════════
   LES PETITS PLUS — l'enfilade

   Transposition du « Nos petits plus » de poses-yoga.com. Ce qui en est gardé
   est la fonction : six repères qui se balaient sans se lire. Le reste est
   refait, parce que la rangée de médaillons ronds centrés sous un titre est à
   la fois le poncif de la catégorie et deux interdits de DESIGN.md (« pas de
   grille de cartes identiques », « ne pas centrer par défaut »).

   Bande CRÈME et non bordeaux : la section du formulaire, juste dessous, est
   déjà en --surface-dark. Deux bandes sombres collées se lisaient comme un
   seul pavé de deux écrans, et la charte impose une bordeaux pour trois crème.
   La frontière est ici un changement de valeur, toujours plus franc qu'un
   filet, et le bordeaux retrouve sa fonction de frappe là où est l'action.
   ══════════════════════════════════════════ */
/* LE MUR. Fond tiède `--linen-amber`, plus une cannelure.

   Le bois cannelé est l'une des quatre matières que PRODUCT.md nomme pour dire
   le premium, avec le bordeaux profond, le laiton et la lumière chaude. Il est
   partout dans les rendus 3D du studio. Ici il coûte une seule déclaration et
   il donne à la bande ce qui lui manquait : de la matière. Le premium se prouve
   par la matière, pas par la pâleur.

   Contraste volontairement infime (5 %) et teinté bordeaux, jamais gris : au
   delà, la cannelure devient un motif décoratif et concurrence les niches. Elle
   doit se sentir plus qu'elle ne se voit. */
.perks {
  position: relative;
  background: var(--linen-amber);
  /* Padding haut réduit par rapport au bas : la section suivante (le
     formulaire, en bordeaux) a besoin de la même respiration en bas, mais le
     titre n'a pas besoin d'autant d'air au-dessus, surtout juste sous une
     section déjà espacée par son propre padding bas. */
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(3rem, 7vw, 5rem);
  /* Empile le contenu au-dessus de la cannelure ci-dessous : sans ça le
     pseudo-élément, en position absolue, passerait devant le titre et l'arcade
     au lieu de rester en fond. */
  isolation: isolate;
}
/* La cannelure vit sur un calque séparé, pas directement sur `.perks`, pour
   pouvoir la masquer sans toucher au texte : un masque posé sur la section
   elle-même effacerait le titre et les libellés avec le motif.

   Le masque l'éteint en haut (sous le titre) et en bas (sous les libellés).
   Elle reste pleine derrière les arches, seul endroit qui n'est que du décor —
   c'est ce qui garde l'effet « papier peint » sans qu'il ne croise plus une
   seule lettre. Les bornes sont volontairement généreuses : un fondu large est
   plus discret qu'une coupure nette, et la précision au pixel n'a pas de
   valeur ici.

   Un seul masque, vertical, à toutes les tailles. La version précédente en
   croisait deux (`mask-composite: intersect`) pour épargner la colonne de
   gauche, où vivait le titre ; celui-ci étant passé au-dessus, la coupure
   verticale n'a plus rien à protéger et la composition disparaît avec elle. */
.perks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    90deg,
    oklch(34% 0.09 15.6 / 0.05) 0px,
    transparent 3px,
    transparent 11px,
    oklch(34% 0.09 15.6 / 0.05) 14px
  );
  /* `mask-composite: intersect` (standard, non préfixé) : le thème s'appuie déjà
     sur OKLCH partout, qui exige des navigateurs de la même génération. Pas de
     variante `-webkit-mask-composite` en complément — sa syntaxe historique
     prend une liste de mots-clés dont la sémantique diffère de `intersect`, et
     une valeur mal posée masquerait tout au lieu de mal combiner les deux. */
  --perk-stripe-mask: linear-gradient(
    to bottom,
    transparent 0%, transparent 20%,
    black 30%, black 78%,
    transparent 95%
  );
  -webkit-mask: var(--perk-stripe-mask);
  mask: var(--perk-stripe-mask);
}
/* Titre centré au-dessus, arcade centrée dessous.

   La version précédente posait le titre dans une colonne à gauche, face à
   l'arcade. L'asymétrie était délibérée et documentée (DESIGN.md : « ne pas
   centrer par défaut ») ; elle est abandonnée à la demande du client. On note
   ce que ça coûte, pour ne pas le redécouvrir : la composition centrée est
   celle qu'emploie toute la catégorie, donc la bande ressemble désormais
   davantage à ses voisines. Ce qui la garde reconnaissable, c'est l'arche —
   pas la mise en page. */
.perks__inner {
  display: flex;
  flex-direction: column;
  /* PAS d'`align-items: center` : en colonne, il ferait rétrécir chaque enfant
     à la largeur de son contenu. L'enfilade, qui défile horizontalement sous
     1000 px et doit occuper toute la laisse, s'en trouvait tronquée. Le titre
     se centre par son `text-align`, l'arcade par ses marges automatiques —
     deux mécanismes qui ne touchent pas à la largeur des boîtes. */
}
/* Marcellus n'a qu'une graisse : aucun `font-weight`, jamais. Toute la présence
   vient donc de la taille — c'est la seule variable disponible, et la retenir
   ne produit pas de la sobriété mais de l'effacement. `line-height` resserré à
   1,02 : au-delà de 3rem, l'interligne d'un titre court doit se fermer, sinon
   les deux lignes se dissocient. */
.perks__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  line-height: 1.02;
  color: var(--vin-700);
  /* L'écart au-dessous fait office de respiration entre le titre et l'arcade :
     il n'y a plus de `gap` de grille pour s'en charger. */
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  text-wrap: balance;
  text-align: center;
}

.perks__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* `flex-start` et non `flex-end` : aligné par le bas, un libellé d'une seule
     ligne remontait sa niche et l'arcade devenait irrégulière. Une enfilade
     n'existe que si toutes les arches partent de la même ligne de naissance.
     Le socle commun est rétabli plus bas par la hauteur minimale du libellé. */
  align-items: flex-start;
  /* Écart serré et non aéré : les niches doivent se lire comme une arcade
     continue, pas comme six vignettes posées côte à côte. C'est ce qui
     distingue une enfilade d'une grille de cartes. */
  gap: clamp(0.5rem, 1.2vw, 0.875rem);
}
/* Arcade centrée et bornée en largeur.

   52rem = 832 px : six niches et cinq écarts de 14 px y font 127 px de large,
   soit exactement la taille qu'elles avaient dans la version à deux colonnes,
   où la colonne de droite mesurait 824 px. Le passage au centrage ne devait
   pas les agrandir — essayé à 66rem, elles montaient à 164 px et la bande se
   mettait à concurrencer le hero.

   `min(100%, …)` et non `52rem` seul : sous 832 px de conteneur, un plafond
   fixe dépasserait et l'arcade déborderait. */
@media (min-width: 1000px) {
  .perks__row {
    max-width: min(100%, 52rem);
    margin-inline: auto;
    justify-content: center;
  }
}

.perks__row:focus-visible {
  outline: 2px solid var(--vin-600);
  outline-offset: 6px;
  border-radius: 4px;
}
.perks__item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* LA NICHE. Le rayon haut en 999px se clampe tout seul à la moitié de la
   largeur : on obtient un plein cintre exact quelle que soit la taille rendue,
   sans avoir à accorder un pourcentage à un ratio.
   🔶 L'arche est une proposition non validée (DESIGN.md). Si elle est refusée,
   c'est cette seule déclaration qui change. */
.perks__niche {
  --perk-arch: 999px 999px 0.75rem 0.75rem;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border-radius: var(--perk-arch);

  /* UNE ALCÔVE CREUSÉE DANS LE MUR, PAS UNE PLAQUE POSÉE DESSUS.

     Historique de cette déclaration, pour ne pas refaire les deux erreurs :
     la première version remplissait la niche de `vin-700` et étalait
     `--glow-cove` par-dessus à 50 % d'opacité. Mesuré au pixel, le sommet
     composait #7C4A4D, soit la teinte que le système réserve aux états
     désactivés : la couleur de marque avait disparu. La deuxième version a
     éclairci tout l'intérieur, ce qui corrigeait la saturation mais rendait la
     bande pâle et sans matière.

     Le concept juste était le premier, l'exécution était fausse. Une alcôve EST
     sombre : c'est un creux. Ce qui doit être lumineux, c'est la corniche qui
     la surplombe, sur quelques pixels, pas la paroi entière. Ici le fond va de
     `vin-900` à `vin-950` — plus profond que le bordeaux de marque, donc lu
     comme une ombre et non comme un aplat coloré — et la lumière est traitée
     séparément ci-dessous.

     La course `vin-800` → `vin-900`, plus tiède, a été essayée puis écartée :
     elle rendait le creux moins net et les icônes crème y ressortaient moins.
     Le bas d'alcôve compose donc #1C0507, à deux doigts du noir. C'est assumé,
     et ce n'est pas un neutre — la teinte reste dans la famille bordeaux, ce
     que la charte exige, là où un gris ou un noir pur seraient exclus. */
  background: linear-gradient(180deg, var(--vin-900) 0%, var(--vin-950) 100%);
  color: var(--linen-deep);

  /* Trois ombres, dans l'ordre où on les lit :
     1. le filet de corniche, net, qui épouse la courbe de l'arche — c'est la
        LED chaude des rendus, et un `inset` suit le rayon, donc l'arc est
        exact sans qu'aucune forme soit dessinée ;
     2. sa retombée sur la paroi, quelques centimètres plus bas ;
     3. l'ombre portée qui assoit l'alcôve dans le mur, teintée bordeaux et
        jamais grise (DESIGN.md l'interdit sur le crème). */
  box-shadow:
    inset 0 2px 0 0 oklch(90% 0.055 80 / 0.85),
    inset 0 20px 26px -14px oklch(90% 0.055 80 / 0.4),
    0 12px 24px -14px oklch(34% 0.09 15.6 / 0.4);

  overflow: hidden;
  /* L'icône descend sous la ligne de naissance de l'arche : un objet posé dans
     une niche n'est pas centré dans son cintre. */
  padding-top: 12%;
}
/* 70 % de la largeur de la niche. La valeur d'origine était 42 % : l'icône y
   était un détail dans l'arche. À 84 % elle la remplissait — 10 px de marge, et
   les icônes larges (le panneau P, les trois silhouettes) frôlaient la courbe.
   70 % double presque la taille tout en laissant l'enfilade d'arches se lire
   comme le motif de la bande, ce qu'elle est. */
.perks__niche svg {
  position: relative;
  width: 70%;
  height: auto;
}

.perks__label {
  display: block;
  font-family: var(--font-body);
  /* Manrope est variable (200-800) : le gras est ici une vraie graisse dessinée,
     pas une synthèse. C'est la différence avec Marcellus, à qui on n'en demande
     jamais. */
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.72rem + 0.3vw, 0.9375rem);
  line-height: 1.4;
  /* Bordeaux et non le taupe secondaire : sur un fond crème chaud, `--gray-500`
     se lit comme du gris, et du gris sur un fond coloré paraît toujours délavé.
     Une teinte de la famille du fond, plus sombre, tient mieux. 8,3:1 ici. */
  color: var(--vin-700);
  margin-top: 0.85rem;
  text-wrap: balance;
  /* Deux lignes réservées, occupées ou non : sans ça un libellé court laisse
     un trou sous sa niche et la ligne de base des libellés ondule. */
  min-height: 2.8em;
}

/* Sous 1000 px l'enfilade défile horizontalement : on la longe comme on
   longerait l'enfilade réelle. C'est aussi ce qui empêche la bande de coûter
   un écran et demi sur la cible de conception principale — six niches
   empilées en deux colonnes faisaient 1300 px de haut entre le hero et le
   formulaire. */
@media (max-width: 999px) {
  /* Le titre reste centré, comme au-dessus de 1000 px. L'arcade démarre au
     bord gauche de l'écran parce qu'elle défile, mais un titre recalé à gauche
     pour cette seule raison romprait l'axe voulu sur toute la section. */
  .perks__row {
    /* Débord jusqu'aux deux bords de l'écran, pour que la dernière niche soit
       coupée par le bord : c'est ce qui signale qu'il y en a d'autres. Les
       valeurs recopient le rembourrage de `.container` (24px, puis 40px à
       partir de 768px) — il n'existe pas de variable pour ce rembourrage, donc
       une divergence ici décalerait l'enfilade par rapport au titre. */
    margin-inline: -24px;
    padding-inline: 24px;
    /* L'ancrage ignore le rembourrage du conteneur défilant : sans cette
       déclaration, le navigateur cale la première niche sur le bord du
       scrollport et la page s'ouvre déjà défilée de 24 px, première niche
       rognée. La valeur doit suivre le rembourrage ci-dessus. */
    scroll-padding-inline: 24px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  @media (min-width: 768px) {
    .perks__row {
      margin-inline: -40px;
      padding-inline: 40px;
      scroll-padding-inline: 40px;
    }
  }
  .perks__row::-webkit-scrollbar {
    display: none;
  }
  .perks__item {
    flex: 0 0 clamp(6.5rem, 30vw, 8.5rem);
    scroll-snap-align: start;
  }
}