/** Shopify CDN: Minification failed

Line 18:39 Expected identifier but found whitespace
Line 20:74 Unterminated string token

**/
/* =========================================================================
   OMAVI · Hero des pages objectif — regles PARTAGEES par les 10 sections
   -------------------------------------------------------------------------
   ⚠️ AUTONOME PAR CONSTRUCTION. Seule la page sommeil declare le jeu complet
   de tokens --oo-* ; stress, digestion, libido et immunite n'en declarent
   AUCUN. Chaque var() porte donc son repli. Sans cela, ces pages perdent le
   Cormorant et le chassis du telephone, sans que rien ne signale l'erreur.
   Les teintes derivees de l'accent (soft, line) se calculent en color-mix
   quand la page ne les fournit pas : elles restent ainsi a la couleur de
   l'objectif au lieu de retomber sur l'indigo du sommeil.
   ========================================================================= */
   ⚠️ ECHELLE DU TEXTE DANS LE SVG. Le viewBox fait 560 de large et se rend
   autour de 400px : facteur ~0.71. Un texte ecrit a 11px sort donc a 7.8px a
   l'ecran. Toutes les valeurs ci-dessous sont exprimees dans le repere du
   viewBox et deja majorees pour atteindre la taille reelle voulue.
   ========================================================================= */

.oo__hero-grid { align-items: center; }

/* Le gabarit d'origine donnait 0.85fr au visuel, quand il n'etait qu'un
   accessoire de 134px. Le dessin porte maintenant le message. */
@media (min-width: 901px) {
  .oo .oo__hero-grid { grid-template-columns: 1fr 1.05fr; gap: 3.2rem; }
}

/* ---- La famille de l'objectif. Remplace le kicker, qui repetait le H1. ---- */

/* ---- Le H1 est un nom, pas une phrase : aucun mot enrichi. ---- */
.oo .oo__hero h1 {
  font-family: var(--oo-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: clamp(2.15rem, 5.4vw, 3.15rem);
  line-height: 1.05; letter-spacing: -.015em;
  color: var(--oo-deep-blue, #26303F);
  margin: 0 0 .8rem;
}

/* ---- Le slogan porte la difference, et explique un mecanisme. ---- */
.oo__hero-slogan {
  font-family: var(--oo-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.18rem, 2.5vw, 1.46rem);
  line-height: 1.32;
  color: var(--oo-accent-text, var(--oo-accent, #5B5EA6));
  margin: 0 0 1.2rem;
  max-width: 26ch;
}

/* ---- Le hero : une scene statique qui raconte tout le parcours ----
   Le questionnaire, la formule composee dans l'app, le stick. Trois plans qui
   se chevauchent : c'est le chevauchement qui impose une lecture unique. ---- */
.oo__hero-visual { position: relative; display: block; width: 100%; }


/* --- 1. Le questionnaire --- */

/* --- 2. La formule dans l'app --- */

/* --- 3. Le stick --- */
/* La photo a son propre fond creme : plutot que de la detourer (poudre et
   ombres douces, un seuil mangerait les grains), on fond ses bords au masque. */

/* ---- Fil d'Ariane : la meme structure sur les dix pages objectif (13/09/2026)
   Les dix pages declaraient toutes un BreadcrumbList en JSON-LD, mais une seule
   l'affichait. Google demande que le balisage corresponde a ce que le visiteur
   voit : le fil est desormais rendu partout, et ses regles quittent la feuille
   de la page libido pour cette feuille partagee.
   Les variables --omavi-text-* viennent du theme, --oo-accent-text de la page :
   chacune porte son repli, les pages objectif ne declarant pas toutes les memes. */
.oo__crumbs { padding: 1.1rem 0 0; }
.oo__crumbs ol {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-size: .74rem; color: var(--omavi-text-light, #636B76);
}
.oo__crumbs a { color: var(--omavi-text-muted, #5A6672); text-decoration: none; }
.oo__crumbs a:hover { color: var(--oo-accent-text, var(--oo-accent, #5B5EA6)); }
.oo__crumbs li[aria-current] { color: var(--oo-accent-text, var(--oo-accent, #5B5EA6)); font-weight: 600; }
.oo__crumbs svg { width: .7rem; height: .7rem; opacity: .5; }

/* ---- La famille de l'objectif n'est plus affichee (13/09/2026) ----
   Le hero annoncait « Corps », « Mental », « Vitalite » : une nomenclature
   interne, qui ne dit rien au visiteur et faisait doublon avec le fil d'Ariane
   juste au-dessus. La regle .oo__family reste plus haut, sans cible. */

/* ---- La scene du hero : une photo unique (13/09/2026) ----
   Le hero reconstituait la scene en HTML : questionnaire, telephone, stick
   detoure, superposes en absolu dans un conteneur a ratio (.ooh). Une image
   composee remplace maintenant ces trois plans sur les dix pages objectif.
   Les regles .ooh__quiz / __phone / __stick n'ont plus de cible ; elles sont
   retirees plus bas pour ne pas laisser de CSS mort.
   L'image porte son propre ratio via width/height : rien ne bouge au
   chargement, aucune hauteur n'est a reserver. ---- */
.ooh__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.ooh__cap {
  margin: .9rem 0 0;
  font-family: var(--oo-display, 'Cormorant Garamond', Georgia, serif); font-style: italic;
  font-size: 1rem; line-height: 1.4; color: var(--oo-text-muted, #5A6672);
}

/* ---- Mobile : titre, puis photo, puis le reste (13/09/2026) ----
   Sur telephone le visuel arrivait tout en bas, apres le bouton et les
   garanties : le lecteur descendait un ecran entier de texte avant de voir
   de quoi parle la page. L'ordre devient titre > photo > accroche > texte >
   bouton > garanties.

   Le titre et le visuel ne sont pas freres : le h1 vit dans .oo__hero-copy,
   le visuel a cote. `display: contents` dissout la boite de .oo__hero-copy le
   temps du mobile, ses enfants deviennent donc des items de la meme grille et
   peuvent s'ordonner avec le visuel. Aucun style n'est perdu au passage :
   .oo__hero-copy ne porte ni fond, ni marge, ni padding, ni gap.

   Effet de bord assume : sur les pages ou ce bloc porte une animation
   d'apparition (.oo__reveal sur sommeil, [data-reveal] sur digestion), un
   element sans boite ne peut plus etre anime. Le contenu reste VISIBLE -
   opacity ne s'applique pas davantage que transform - il apparait simplement
   sans fondu sur telephone. C'est le bon compromis : une animation perdue
   contre un visuel qui arrive enfin au bon endroit.

   Le gap de la grille separe maintenant chaque element du hero : on le remet
   a zero et on laisse les marges propres a chacun, sauf autour de la photo. ---- */
@media (max-width: 900px) {
  .oo .oo__hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .oo__hero-copy { display: contents; }

  .oo__hero-copy > * { order: 3; }
  .oo__hero-copy > h1 { order: 1; }

  .oo__hero-visual {
    order: 2;
    margin: .4rem 0 1.6rem;
  }

  .oo__hero-slogan { max-width: none; }
}