/* ==========================================================================
   PAGES DE VENTE — /fr/pages/discovery-pack/ et /fr/pages/7-raisons/
   --------------------------------------------------------------------------
   Chargee APRES palette, tokens, polices, base, animations et sections : ces
   pages portent le meme en-tete, le meme pied de page et les memes composants
   que l'accueil (bouton pilule, titre de section, accordeon, CTA photo).
   Cette feuille n'ajoute que la mise en page propre aux deux pages, et
   seulement avec les jetons du site : aucune couleur, police ou rayon
   invente ici. Les deux familles restent Manrope (titres) et Switzer (texte).

   Pages generees par OYA/04_Site/Pages_vente/build.py.
   ========================================================================== */

/* ---- Marques « au feutre » et annotations (page coffret) -----------------
   Ce qui attire l'oeil dans la maquette UX v3 — ratures, surligneur, cercles,
   fleches, notes a la main — garde dans le theme du site : couleurs de la
   marque, et une seule police ajoutee, Caveat, pour les notes. Les traces sont
   des SVG etires sur le mot (build.py, feutre.py). */

@font-face {
  font-family: "Caveat"; font-weight: 400 700; font-style: normal;
  font-display: swap; src: url(../assets/polices/Caveat.ttf) format("truetype");
}

.m { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.m > svg { position: absolute; overflow: visible; pointer-events: none; }
.m > svg.dessous { z-index: -1; }
.oya-v-insec { white-space: nowrap; }

.oya-v-note {
  display: inline-block;
  font-family: "Caveat", var(--f-texte);
  font-size: var(--t-24);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-encre-70);
  transform: rotate(-3deg);
}
.oya-v-note--rouge { color: #C53B2C; }
.oya-v-note--bleu { color: var(--c-marque-vif); }
.oya-v-note--grand { font-size: var(--t-30); }

/* Le hero : deux notes posees SUR la photo, comme des etiquettes, a toutes les tailles. Entre le texte et la
   photo, elles tombaient mal selon la largeur (remarque du 19 octobre) ; en blanc sur la photo claire, elles ne
   se lisaient pas. L'etiquette blanche garde le trait manuscrit lisible. */
.oya-v-hero__visuel { position: relative; }
.oya-v-note--hero-1, .oya-v-note--hero-2 {
  position: absolute;
  padding: 8px 14px 6px;
  border-radius: var(--r-10);
  background: var(--c-blanc);
  box-shadow: 0 6px 18px var(--c-encre-10);
  pointer-events: none;
}
.oya-v-note--hero-1 { left: 20px; top: 22px; font-size: var(--t-26); transform: rotate(-5deg); }
.oya-v-note--hero-2 { right: 20px; bottom: 24px; color: var(--c-encre); font-size: var(--t-24); transform: rotate(4deg); }

/* La fleche de l'etiquette au stick, sur la photo. Deux traces : le cadre est en 4/5 sur ordinateur (photo
   entiere) et en 4/3 en dessous de 992 px (photo recadree en haut et en bas, le stick descend) ; un troisieme pour le telephone. */
.oya-v-fleche-photo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oya-v-fleche-photo--mobile, .oya-v-fleche-photo--telephone { display: none; }
@media (max-width: 991.98px) {
  .oya-v-fleche-photo--bureau { display: none; }
  .oya-v-fleche-photo--mobile { display: block; }
}
/* Sur telephone l'etiquette occupe plus de place dans le cadre : la fleche part plus bas. */
@media (max-width: 679.98px) {
  .oya-v-fleche-photo--mobile { display: none; }
  .oya-v-fleche-photo--telephone { display: block; }
}

.oya-v-tete .oya-v-note { align-self: flex-end; margin-bottom: 6px; }

/* Le texte barre doit rester LISIBLE : on lit ce qu'on raye. Texte plein et plus grand, trait fin,
   un peu transparent, en un seul passage (`rature_lisible` dans build.py). */
.oya-v-barres li { text-decoration: none; color: var(--c-encre); font-size: var(--t-20); font-weight: var(--g-500); letter-spacing: var(--a-titre); }
.oya-v-barres .m > svg { opacity: 0.85; }
.oya-v-ok { display: flex; align-items: center; gap: 12px; }
.oya-v-ok .oya-coche { width: 26px; height: 26px; background: var(--c-marque-vif); }

.oya-v-note--prix { display: block; text-align: right; margin: 0 6px 22px 0; transform: rotate(4deg); }
/* Le chiffre entoure garde la taille du chiffre : la regle des legendes (`.oya-v-chiffre span`) ne doit pas l'atteindre. */
.oya-v-chiffre b .m { font-size: inherit; color: inherit; }
.oya-v-note--conseil { position: absolute; top: -40px; left: 24px; pointer-events: none; }
.oya-v-offre--conseil .oya-v-badge { display: none; }
.oya-v-note--cta { display: block; margin-top: 12px; color: var(--c-accent); font-size: var(--t-28); }

/* ---- Rythme commun ------------------------------------------------------- */

.oya-v-section {
  display: flex;
  justify-content: center;
  padding: 100px 60px;
  scroll-margin-top: 104px;
}
.oya-v-section--pale { background: var(--c-fond-pale-haut); }
.oya-v-section--gris { background: var(--c-gris-050); }

.oya-v-colonne {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: var(--l-page);
}

.oya-v-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.oya-v-tete__texte { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.oya-v-tete .oya-titre-section { max-width: 620px; }

/* Petit libelle au-dessus d'un titre : Switzer 500, discret, en couleur de marque. */
.oya-v-genre {
  font-family: var(--f-texte);
  font-size: var(--t-14);
  font-weight: var(--g-500);
  line-height: var(--i-titre);
  color: var(--c-marque-vif);
}

.oya-v-chapo {
  font-size: var(--t-18);
  line-height: var(--i-texte);
  color: var(--c-encre-70);
  max-width: 560px;
}

.oya-v-petit { font-size: var(--t-14); color: var(--c-encre-50); line-height: var(--i-texte); }

/* Lien texte souligne, pour l'action secondaire a cote d'un bouton. */
.oya-v-lien {
  font-family: var(--f-texte);
  font-weight: var(--g-500);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 200ms var(--e-survol);
}
.oya-v-lien:hover { opacity: 0.6; }

/* Bouton pilule borde : la forme du site, en version secondaire. */
.oya-bouton--borde {
  background: transparent;
  color: var(--c-noir);
  box-shadow: inset 0 0 0 1.5px var(--c-noir);
}

.oya-v-photo { border-radius: var(--r-18); overflow: hidden; background: var(--c-gris-050); }
.oya-v-photo img { width: 100%; height: 100%; object-fit: cover; }

sup { font-size: 0.65em; line-height: 0; }

/* ---- Hero (deux colonnes, fond de l'accueil) ----------------------------- */

.oya-v-hero {
  display: flex;
  justify-content: center;
  padding: calc(104px + 70px) 60px 90px;
  background: linear-gradient(0deg, var(--c-fond-pale-haut) -3%, var(--c-blanc) 81.5896%, var(--c-fond-pale-haut) 105%);
}
.oya-v-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: var(--l-page);
}
.oya-v-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.oya-v-hero__titre {
  font-family: var(--f-titre);
  font-size: var(--t-65);
  font-weight: var(--g-700);
  line-height: var(--i-serre);
  letter-spacing: var(--a-grand);
  text-wrap: balance;
}
.oya-v-hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.oya-v-hero .oya-v-photo { aspect-ratio: 4 / 5; max-height: 640px; width: 100%; }

.oya-v-garanties { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.oya-v-garanties .oya-garantie { flex: none; flex-direction: row; gap: 8px; font-size: var(--t-14); color: var(--c-encre-70); }

/* ---- Cartes « moment » (forme des cartes benefits) ----------------------- */

.oya-v-grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.oya-v-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.oya-v-moment { display: flex; flex-direction: column; gap: 14px; }
.oya-v-moment .oya-v-photo { aspect-ratio: 0.8; }
.oya-v-moment .oya-v-photo img { transition: transform 600ms var(--e-ressort-net); }
.oya-v-moment:hover .oya-v-photo img { transform: scale(1.04); }
.oya-v-moment__ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oya-v-moment__titre { font-weight: var(--g-500); line-height: var(--i-titre); }
.oya-v-moment__sous { color: var(--c-encre-70); }
.oya-v-fleche {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pilule);
  background: var(--c-noir);
  color: var(--c-blanc);
  font-size: var(--t-14);
}

/* ---- Deux colonnes texte + photo (forme des fiches de l'accueil) --------- */

.oya-v-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: var(--l-page);
}
.oya-v-duo--inverse > :first-child { order: 2; }
.oya-v-duo__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.oya-v-duo .oya-v-photo { aspect-ratio: 1; width: 100%; }

.oya-v-barres { display: flex; flex-direction: column; gap: 14px; }

/* Deux chiffres cote a cote, comme « 30 sticks / 04 formules ». */
.oya-v-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; padding-top: 24px; border-top: 1px solid var(--c-encre-08); }
.oya-v-chiffre { display: flex; flex-direction: column; gap: 6px; }
.oya-v-chiffre b {
  font-family: var(--f-titre);
  font-size: var(--t-54);
  font-weight: var(--g-600);
  line-height: 1;
  letter-spacing: var(--a-grand);
}
.oya-v-chiffre span { font-size: var(--t-14); color: var(--c-encre-70); }

/* ---- Formules ------------------------------------------------------------- */

.oya-v-formule {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 22px 24px;
  border-radius: var(--r-18);
  background: var(--c-blanc);
}
.oya-v-formule img { height: 180px; width: auto; margin: 0 auto 8px; transform: rotate(-6deg); }
.oya-v-formule__nom { font-weight: var(--g-500); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
.oya-v-formule__nom::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.oya-v-formule__moment { font-family: var(--f-titre); font-size: var(--t-20); font-weight: var(--g-600); line-height: var(--i-titre); letter-spacing: var(--a-titre); }
.oya-v-formule__claim { color: var(--c-encre-70); }
.oya-v-formule__actifs { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-encre-08); font-size: var(--t-14); color: var(--c-encre-50); }

/* ---- Le geste en trois temps (pastilles de la timeline) ------------------ */

.oya-v-etape { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--r-18); background: var(--c-gris-050); }
.oya-v-pastille {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--r-pilule);
  background: var(--c-fond-pale);
  color: var(--c-marque-vif);
  font-size: var(--t-14);
  font-weight: var(--g-500);
}
.oya-v-etape h3 { font-size: var(--t-24); font-weight: var(--g-600); }
.oya-v-etape p { color: var(--c-encre-70); }

/* ---- Preuves --------------------------------------------------------------- */

.oya-v-grille-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.oya-v-preuve { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; border-radius: var(--r-15); background: var(--c-blanc); }
.oya-v-preuve strong { font-weight: var(--g-500); line-height: var(--i-titre); }
.oya-v-preuve p { font-size: var(--t-14); color: var(--c-encre-70); }

/* ---- Comparatif ------------------------------------------------------------ */

.oya-v-tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-16); }
.oya-v-tableau th { text-align: left; font-size: var(--t-14); font-weight: var(--g-500); color: var(--c-encre-50); padding: 0 18px 12px; }
.oya-v-tableau td { padding: 18px; border-top: 1px solid var(--c-encre-08); }
.oya-v-tableau td:last-child, .oya-v-tableau th:last-child { text-align: right; }
.oya-v-tableau .oya-v-nous td { background: var(--c-fond-pale); border-top-color: transparent; font-weight: var(--g-500); }
.oya-v-tableau .oya-v-nous td:first-child { border-radius: var(--r-12) 0 0 var(--r-12); }
.oya-v-tableau .oya-v-nous td:last-child { border-radius: 0 var(--r-12) var(--r-12) 0; }
.oya-v-tableau tr:nth-child(2) td { border-top-color: transparent; }
.oya-v-jour { font-family: var(--f-titre); font-weight: var(--g-700); }

/* ---- Offres ---------------------------------------------------------------- */

.oya-v-offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 16px 24px;
  border-radius: var(--r-18);
  background: var(--c-blanc);
}
.oya-v-offre--conseil { box-shadow: inset 0 0 0 2px var(--c-noir); }
.oya-v-offre .oya-v-photo { aspect-ratio: 4 / 3; border-radius: var(--r-12); }
.oya-v-offre__corps { display: flex; flex-direction: column; gap: 14px; padding: 0 8px; flex: 1; }
.oya-v-offre__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.oya-v-offre h3 { font-size: var(--t-22); font-weight: var(--g-600); }
.oya-v-prix { font-family: var(--f-titre); font-size: var(--t-22); font-weight: var(--g-700); white-space: nowrap; }
.oya-v-prix s { font-weight: var(--g-500); font-size: var(--t-16); color: var(--c-encre-40); margin-right: 6px; }
.oya-v-badge {
  position: absolute;
  top: 28px; left: 28px;
  padding: 6px 12px;
  border-radius: var(--r-pilule);
  background: var(--c-noir);
  color: var(--c-blanc);
  font-size: var(--t-12);
  font-weight: var(--g-500);
}
.oya-v-offre .oya-liste-coches { gap: 10px; flex: 1; }
.oya-v-offre .oya-liste-coches li { font-size: var(--t-15); letter-spacing: 0; }
.oya-v-offre .oya-coche { width: 16px; height: 16px; }

/* ---- Bloc d'offre unique (forme de la fiche « Le Parcours ») ------------ */

.oya-v-fiche { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.oya-v-fiche .oya-bouton--large { margin-top: 4px; }
.oya-v-fiche .oya-buy__garanties { justify-content: space-between; }

/* ---- 7 raisons : article verrouille, sur le modele de fruggies.com/pages/7-raisons ----
   Une colonne etroite (760 px), lue de haut en bas. Sur ordinateur, chaque raison pose
   une petite photo a gauche et le texte a droite, toujours dans ce sens ; sur telephone,
   le titre vient d'abord, puis la photo, puis le texte. */

.oya-v-article {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: calc(104px + 56px) 25px 80px;
}

.oya-v-article__tete { display: flex; flex-direction: column; gap: 20px; padding-bottom: 32px; border-bottom: 1px solid var(--c-encre-08); }
.oya-v-article__titre {
  font-family: var(--f-titre);
  font-size: var(--t-40);
  font-weight: var(--g-700);
  line-height: var(--i-serre);
  letter-spacing: var(--a-grand);
  text-wrap: balance;
}
.oya-v-article__chapo { font-size: var(--t-18); line-height: var(--i-texte); color: var(--c-encre-70); }

.oya-v-signature { display: flex; align-items: center; gap: 12px; font-size: var(--t-14); color: var(--c-encre-50); line-height: var(--i-moyen); }
.oya-v-signature img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.oya-v-signature strong { font-weight: var(--g-500); color: var(--c-encre); }

.oya-v-raison {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas: "visuel titre" "visuel texte";
  grid-template-rows: auto 1fr;
  column-gap: 36px;
  row-gap: 14px;
  align-items: start;
  scroll-margin-top: 140px;
}
.oya-v-raison__titre {
  grid-area: titre;
  align-self: end;
  font-family: var(--f-titre);
  font-size: var(--t-24);
  font-weight: var(--g-600);
  line-height: var(--i-titre);
  letter-spacing: var(--a-titre);
}
.oya-v-raison__visuel { grid-area: visuel; aspect-ratio: 4 / 5; border-radius: var(--r-12); }
.oya-v-raison__texte { grid-area: texte; font-size: var(--t-16); line-height: var(--i-ample); color: var(--c-encre-70); }

.oya-v-sticks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 10%;
  background: var(--c-fond-pale-haut);
}
.oya-v-sticks img { width: 21%; height: auto; object-fit: contain; }
.oya-v-sticks img:nth-child(odd) { transform: rotate(-6deg) translateY(4%); }
.oya-v-sticks img:nth-child(even) { transform: rotate(5deg); }

.oya-v-relance-fin { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.oya-v-relance-fin p { font-family: var(--f-titre); font-size: var(--t-20); font-weight: var(--g-600); letter-spacing: var(--a-titre); max-width: 440px; }

.oya-v-preuves-bloc { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: var(--r-18); background: var(--c-gris-050); }
.oya-v-preuves-bloc h2 { font-size: var(--t-20); font-weight: var(--g-600); text-align: center; text-wrap: balance; }
.oya-v-preuves-bloc__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.oya-v-preuves-bloc .oya-v-preuve { padding: 18px 16px; }

/* L'encadre d'offre : bordure pointillee, fond creme, comme chez Fruggies ; les couleurs restent celles du site. */
.oya-v-offre-cadre {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 36px 32px;
  border: 2px dashed var(--c-encre);
  border-radius: var(--r-18);
  background: var(--c-fond-pale-haut);
  text-align: center;
  scroll-margin-top: 130px;
}
.oya-v-offre-cadre h2 { font-size: var(--t-30); font-weight: var(--g-700); letter-spacing: var(--a-grand); line-height: var(--i-serre); text-wrap: balance; }
.oya-v-offre-cadre__sous { font-weight: var(--g-500); padding-bottom: 14px; border-bottom: 1px solid var(--c-encre-08); }
.oya-v-offre-cadre__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 10px; text-align: left; }
.oya-v-offre-cadre .oya-v-photo { aspect-ratio: 1; border-radius: var(--r-12); }
.oya-v-offre-cadre__texte { display: flex; flex-direction: column; gap: 20px; }
.oya-v-offre-cadre .oya-liste-coches { gap: 10px; }
.oya-v-offre-cadre .oya-liste-coches li { font-size: var(--t-15); letter-spacing: 0; }
.oya-v-offre-cadre .oya-coche { width: 16px; height: 16px; }
.oya-v-offre-cadre__mentions { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-12); font-weight: var(--g-500); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-encre-50); }

/* ---- Article vitalite : le bloc « La solution : une routine claire » ---- */

.oya-v-routine { display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: var(--r-18); background: var(--c-fond-pale-haut); }
.oya-v-routine__titre { font-size: var(--t-30); font-weight: var(--g-700); letter-spacing: var(--a-grand); line-height: var(--i-serre); text-wrap: balance; }
.oya-v-routine__texte { color: var(--c-encre-70); line-height: var(--i-ample); }
.oya-v-routine__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.oya-v-routine__carte { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r-15); background: var(--c-blanc); font-size: var(--t-14); color: var(--c-encre-70); }
.oya-v-routine__claim { color: var(--c-encre); font-weight: var(--g-500); }
.oya-v-routine__medecin { font-size: var(--t-14); color: var(--c-encre-50); padding-top: 14px; border-top: 1px solid var(--c-encre-08); }

/* ---- Notes legales, juste avant le CTA du gabarit ------------------------ */

.oya-v-notes { display: flex; justify-content: center; padding: 40px 60px; }
.oya-v-notes div { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: var(--l-page); font-size: var(--t-12); color: var(--c-encre-50); line-height: var(--i-texte); }

/* ---- Tablette ------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .oya-v-section { padding: 80px 40px; }
  .oya-v-hero { padding-inline: 40px; }
  .oya-v-hero__titre { font-size: var(--t-54); }
  .oya-v-grille-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oya-v-duo { gap: 50px; }
  .oya-v-notes { padding-inline: 40px; }
}

@media (max-width: 991.98px) {
  .oya-v-hero__grille, .oya-v-duo { grid-template-columns: 1fr; }
  .oya-v-duo--inverse > :first-child { order: 0; }
  .oya-v-hero .oya-v-photo { aspect-ratio: 4 / 3; }
  .oya-v-grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oya-v-grille-3 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; width: 100%; }
}

/* ---- Telephone ------------------------------------------------------------ */

@media (max-width: 679.98px) {
  .oya-v-routine { padding: 26px 18px; }
  .oya-v-routine__titre { font-size: var(--t-24); }
  .oya-v-routine__grille { grid-template-columns: 1fr; }
  .oya-v-tete .oya-v-note { align-self: flex-start; }
  .oya-v-note--grand { font-size: var(--t-26); }
  .oya-v-note--hero-1 { font-size: var(--t-22); left: 14px; top: 14px; }
  .oya-v-note--hero-2 { font-size: var(--t-20); right: 14px; bottom: 14px; }
  .oya-v-barres li { font-size: var(--t-18); }
  .oya-v-article { padding: calc(104px + 32px) 20px 60px; gap: 44px; }
  .oya-v-article__titre { font-size: var(--t-30); }
  .oya-v-article__chapo { font-size: var(--t-16); }
  .oya-v-raison { grid-template-columns: 1fr; grid-template-areas: "titre" "visuel" "texte"; grid-template-rows: auto; row-gap: 18px; }
  .oya-v-raison__titre { font-size: var(--t-22); }
  .oya-v-raison__visuel { aspect-ratio: 1; }
  .oya-v-preuves-bloc { padding: 24px 16px; }
  .oya-v-preuves-bloc__grille { grid-template-columns: 1fr 1fr; }
  .oya-v-offre-cadre { padding: 26px 18px 22px; }
  .oya-v-offre-cadre h2 { font-size: var(--t-24); }
  .oya-v-offre-cadre__grille { grid-template-columns: 1fr; }
  .oya-v-section { padding: 60px 25px; }
  .oya-v-colonne { gap: 40px; }
  .oya-v-hero { padding: calc(104px + 40px) 25px 60px; }
  .oya-v-hero__titre { font-size: var(--t-40); }
  .oya-v-tete { flex-direction: column; align-items: flex-start; }
  .oya-v-grille-4 { gap: 14px; }
  .oya-v-formules { grid-template-columns: 1fr; }
  .oya-v-grille-5 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .oya-v-moment__sous { font-size: var(--t-14); }
  .oya-v-formule img { height: 140px; }
  .oya-v-chiffre b { font-size: var(--t-40); }
  .oya-v-tableau { font-size: var(--t-14); }
  .oya-v-tableau td, .oya-v-tableau th { padding-inline: 8px; }
  .oya-v-notes { padding: 30px 25px; }
}