/** Shopify CDN: Minification failed

Line 3601:0 Unexpected "}"

**/
/* ==========================================================================
   MINOÉ — Surcouche de marque
   Charte graphique v2.1 — §4 Typographie, §5 Grille et mise en page
   --------------------------------------------------------------------------
   Rendue APRÈS `theme-styles-variables` et `color-palette` dans
   layout/theme.liquid : ses déclarations écrasent celles du thème par simple
   ordre de cascade, sans toucher au code d'origine de Horizon.

   PRINCIPE : aucune variable nouvelle. On ne fait que réassigner des
   variables que Horizon définit déjà. Les couleurs ne sont pas ici : elles
   sont réglées une seule fois dans config/settings_data.json, via les
   réglages natifs du thème.

   POLICES — les deux familles de la v2.1 sont disponibles dans la
   bibliothèque de polices Shopify, et sont donc réglées depuis
   `config/settings_data.json`, pas ici :
     type_heading_font     = plus_jakarta_sans_n7   (H1-H3, graisse 700)
     type_body_font        = nunito_sans_n4         (texte courant)
     type_subheading_font  = nunito_sans_n8         (surtitres, H4-H6)
     type_accent_font      = nunito_sans_n8         (prix, badges, boutons)
   Plus aucun fichier de police n'est auto-hébergé : les woff2 de la v2.0 ont
   été supprimés, Shopify sert les deux familles depuis son propre CDN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. INTERLETTRAGE DES TITRES
   Charte §4 : H1 −0,02em · H2 −0,015em · H3 −0,01em.
   Les options du thème ne proposent que −0,03em, 0 et +0,03em, et ne
   permettent pas de graduer par niveau. On surcharge donc les trois
   variables de niveau, ce qui reste ciblé : les autres tokens
   d'interlettrage du thème sont intacts.

   Conséquence assumée : les sélecteurs « Interlettrage » de H1 à H3 dans
   l'éditeur de thème n'ont plus d'effet. C'est voulu — la charte fixe ces
   valeurs, elles ne sont pas un réglage de goût.
   -------------------------------------------------------------------------- */
:root {
  --font-h1--letter-spacing: -0.02em;
  --font-h2--letter-spacing: -0.015em;
  --font-h3--letter-spacing: -0.01em;
}

/* Charte §4 : « éviter un mot seul en dernière ligne d'un titre ». */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   2. CIBLES TACTILES
   Les liens de style « bouton sans habillage » et le lien du comparatif
   rendent 26px de haut, sous le minimum tactile de 44px que le thème définit
   déjà (`--minimum-touch-target`). On ne corrige que sous 750px, là où le
   doigt remplace la souris, pour ne pas alourdir la mise en page desktop.

   La seconde règle est un garde-fou : si l'un de ces liens se retrouve un
   jour au fil du texte dans un paragraphe ou une liste, il doit redevenir
   un lien en ligne et ne pas casser l'interlignage.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  a.button-unstyled,
  .lp-comparatif__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--minimum-touch-target);
  }

  :is(p, li, span, .rte) a.button-unstyled {
    display: inline;
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   3. LARGEUR DE CONTENU
   Charte §5 : « Conteneur général : 1200px. »
   Les trois options de `page_width` valent 90rem (1440px), 120rem (1920px)
   et au-delà : aucune ne descend à 1200px. On retune l'échelon le plus
   étroit, celui que settings_data.json sélectionne. Le sélecteur reste
   fonctionnel, les trois paliers continuent de se distinguer.
   -------------------------------------------------------------------------- */
:root {
  --narrow-page-width: 75rem; /* 1200px */
}

/* ==========================================================================
   4. REFONTE V4 — échelle typographique, rythme, vagues, carrousels
   --------------------------------------------------------------------------
   PORTÉE : tout est enfermé dans `body:has(#achat)`. Seule la landing produit
   porte l'ancre #achat, donc ces règles n'atteignent ni l'accueil, ni les
   collections, ni les pages légales.

   Remplace intégralement le bloc V3. Les écarts par rapport à la V3 :
   typographie plus sobre (pas de titres géants), surtitres collés au titre,
   boutons 52px, vagues entre sections colorées, zéro emoji.
   ========================================================================== */

body:has(#achat) {
  --minoe-petrole: #1F5A6E;
  --minoe-lait: #FFFCF5;
  --minoe-sable: #F4EEE2;
  --minoe-beurre: #FBE7A6;
  --minoe-taupe: #615A50;
  --minoe-ombre: 0 8px 24px rgba(43, 40, 35, 0.06);
  --minoe-r-carte: 20px;
  --minoe-r-image: 20px;
}

/* --------------------------------------------------------------------------
   4.1 ÉCHELLE TYPOGRAPHIQUE — V4 §1.2
   Une seule échelle pour toute la page. Le verdict sur la V3 était « titres
   et tailles de police ne vont pas » : on plafonne les titres de section à
   34px sur ordinateur, là où Horizon montait au-delà de 50px.

   Graisse 700 maximum sur les titres (§1.2), jamais 800/900.
   -------------------------------------------------------------------------- */

/* Titre produit (H1) : 28 / 36 */
body:has(#achat) .section h1,
body:has(#achat) .section .h1 {
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* Titre de section (H2) : 26 / 34, deux lignes maximum, mesure courte */
body:has(#achat) .section h2,
body:has(#achat) .section .h2 {
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 700;
  max-width: 20ch;
}

/* Titre de carte (H3) : 18 / 20 */
body:has(#achat) .section h3,
body:has(#achat) .section .h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
}

/* Texte courant : 16 / 17, mesure 60 caractères */
body:has(#achat) .section :is(p, li):not([id*="rapid_bundle"] *) {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* Petit texte */
body:has(#achat) .minoe-petit,
body:has(#achat) .section small {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--minoe-taupe);
}

@media screen and (min-width: 750px) {
  body:has(#achat) .section h1,
  body:has(#achat) .section .h1 { font-size: 2.25rem; }
  body:has(#achat) .section h2,
  body:has(#achat) .section .h2 { font-size: 2.125rem; }
  body:has(#achat) .section h3,
  body:has(#achat) .section .h3 { font-size: 1.25rem; }
  body:has(#achat) .section :is(p, li):not([id*="rapid_bundle"] *) { font-size: 1.0625rem; }
}

/* Surtitre : collé au titre (§1.2). En V3 il flottait très au-dessus d'un
   vide — c'est l'un des reproches explicites. Marge basse de 8px, point. */
body:has(#achat) .minoe-surtitre {
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--minoe-petrole);
  margin: 0 0 8px;
  line-height: 1.2;
}
@media screen and (min-width: 750px) {
  body:has(#achat) .minoe-surtitre { font-size: 0.8125rem; }
}
/* Le titre qui suit un surtitre ne reprend pas de marge haute. */
body:has(#achat) .minoe-surtitre + :is(h2, .h2, h3, .h3) { margin-top: 0; }

/* --------------------------------------------------------------------------
   4.2 RYTHME — V4 §1.3
   64px mobile, 96px ordinateur. Conteneur 1200px. Image + texte alignés
   verticalement au centre, pas en haut.
   -------------------------------------------------------------------------- */
/* Le rythme ne vaut que pour les sections du CORPS de la page. La barre
   d'annonce et l'en-tête portent eux aussi la classe `.section` : la règle
   les gonflait à 247px et 268px, ce qui est exactement le reproche
   « barres du haut trop grosses ». On les exclut en visant les sections du
   groupe `template`, les seules à devoir respirer. */
body:has(#achat) [id^="shopify-section-template"] .section {
  padding-block: 64px;
}
@media screen and (min-width: 750px) {
  body:has(#achat) [id^="shopify-section-template"] .section { padding-block: 96px; }
}

/* Une section qui porte une vague ne doit pas ajouter son propre rembourrage
   au-dessus de la vague : la vague EST la transition. */
body:has(#achat) [id^="shopify-section-template"] .section:has(> .minoe-vague--haut) { padding-block-start: 0; }
body:has(#achat) [id^="shopify-section-template"] .section:has(> .minoe-vague--bas) { padding-block-end: 0; }

body:has(#achat) .minoe-duo {
  display: grid;
  gap: 32px;
  align-items: center; /* §1.3 : centré, pas flex-start */
}
@media screen and (min-width: 750px) {
  body:has(#achat) .minoe-duo {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
  body:has(#achat) .minoe-duo--inverse > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   4.3 GALERIE — V4 §S1
   « Écarte les images » : gouttière de 12px, coins 16px. Horizon n'expose pas
   ce réglage dans l'éditeur, on le force donc ici. Les sélecteurs visent la
   grille de média du bloc produit sans dépendre d'une classe générée.
   -------------------------------------------------------------------------- */
body:has(#achat) .product-media-container,
body:has(#achat) [class*="media-gallery"] {
  --gallery-gap: 12px;
  gap: 12px;
}
body:has(#achat) [class*="media-gallery"] :is(img, video, .media) {
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   4.4 BOUTONS — V4 §1.3
   Pilule pétrole, 52px, texte 16px Nunito Sans 800, pleine largeur sur mobile.
   On habille les classes natives de Horizon : le réglage `style_class` du bloc
   `button` est un select fermé, impossible d'y injecter une classe maison.
   Plus de flèche ::after : la V4 ne la demande pas et elle alourdissait.
   -------------------------------------------------------------------------- */
body:has(#achat) .section a.button,
body:has(#achat) .minoe-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--minoe-petrole);
  color: var(--minoe-lait);
  border: 2px solid var(--minoe-petrole);
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  width: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body:has(#achat) .section a.button-secondary,
body:has(#achat) .minoe-cta-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: transparent;
  color: var(--minoe-petrole);
  border: 2px solid var(--minoe-petrole);
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  width: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Bouton beurre sur fond pétrole (S14). La classe `minoe-sur-petrole`
   n'étant posée nulle part, on vise directement la section : le bouton
   s'affichait en texte nu sur le pétrole. */
body:has(#achat) [id$="__dernier-mot"] a.button,
body:has(#achat) .minoe-sur-petrole a.button {
  background: var(--minoe-beurre);
  color: var(--minoe-petrole);
  border-color: var(--minoe-beurre);
}

@media (hover: hover) {
  body:has(#achat) .section :is(a.button, a.button-secondary):hover {
    transform: translateY(-1px);
    box-shadow: var(--minoe-ombre);
  }
}

@media screen and (min-width: 750px) {
  body:has(#achat) .section :is(a.button, a.button-secondary),
  body:has(#achat) :is(.minoe-cta, .minoe-cta-2) {
    width: auto;
    min-width: 260px;
  }
}

/* --------------------------------------------------------------------------
   4.5 CARTES ET IMAGES — V4 §2 « Harmonie »
   Mêmes rayons et même ombre partout.
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-carte {
  background: var(--minoe-lait);
  border-radius: var(--minoe-r-carte);
  box-shadow: var(--minoe-ombre);
  padding: 24px;
}

body:has(#achat) .section img:not([id*="rapid_bundle"] *) { border-radius: var(--minoe-r-image); }
body:has(#achat) .minoe-illu img { border-radius: 0; }

/* Image ronde de S6 : cercle avec liseré pétrole 6px (§S6) */
body:has(#achat) .minoe-rond img {
  border-radius: 50%;
  border: 6px solid var(--minoe-petrole);
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  max-width: 360px;
}

/* Cadrage haut : ne jamais couper un visage (§S10) */
body:has(#achat) .minoe-cadrage-haut img {
  object-fit: cover;
  object-position: center 30%;
}

/* --------------------------------------------------------------------------
   4.6 CARROUSELS — V4 §1.3
   Sur mobile, toute rangée de plus de 2 cartes glisse : 1,2 carte visible,
   avec points de pagination posés par minoe-reveal.js.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-swipe {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%; /* 1,2 carte visible */
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 20px;
    padding-inline: 20px;
    margin-inline: -20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body:has(#achat) .minoe-swipe::-webkit-scrollbar { display: none; }
  body:has(#achat) .minoe-swipe > * { scroll-snap-align: start; }
}

/* Carrousel toujours horizontal, y compris sur ordinateur (S3) */
body:has(#achat) .minoe-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
  padding-inline: 20px;
  margin-inline: -20px;
  scrollbar-width: none;
}
body:has(#achat) .minoe-rail::-webkit-scrollbar { display: none; }
body:has(#achat) .minoe-rail > * { scroll-snap-align: start; }
@media screen and (min-width: 750px) {
  body:has(#achat) .minoe-rail {
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-flow: row;
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
  }
}

/* Points de pagination */
body:has(#achat) .minoe-points {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
body:has(#achat) .minoe-points button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--minoe-sable);
  cursor: pointer;
}
body:has(#achat) .minoe-points button[aria-current="true"] { background: var(--minoe-petrole); }
@media screen and (min-width: 750px) {
  body:has(#achat) .minoe-points { display: none; }
}

/* --------------------------------------------------------------------------
   4.7 LIGNES DE BÉNÉFICE ET ÉTAPES
   Illustration à gauche, titre en gras, une ligne. Sert en S6, S8 et S10.
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-benef {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
body:has(#achat) .minoe-benef__texte { min-width: 0; }
body:has(#achat) .minoe-benef__titre {
  font-family: var(--font-heading--family, inherit);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 2px;
}
body:has(#achat) .minoe-benef p { margin: 0; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   4.8 ACCORDÉONS — V4 §1.3
   « Jamais seul en bas d'une section » : l'accordéon se place sous le
   paragraphe qu'il complète, aligné à gauche avec lui, avec un chevron.
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-plus {
  margin-top: 12px;
  max-width: 60ch;
}
body:has(#achat) .minoe-plus > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--minoe-petrole);
  padding: 8px 0;
}
body:has(#achat) .minoe-plus > summary::-webkit-details-marker { display: none; }
body:has(#achat) .minoe-plus > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
body:has(#achat) .minoe-plus[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* --------------------------------------------------------------------------
   4.9 BANDE DÉFILANTE — V4 §S2
   Le reproche de la V3 : « la bande ne défile pas ». Elle défile maintenant
   sur mobile ET sur ordinateur, en continu. Le contenu est dupliqué dans le
   HTML (copie en aria-hidden) et la piste translate de -50 % : une copie
   au pixel près, donc la boucle est sans couture.
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-bande {
  background: var(--minoe-petrole);
  overflow: hidden;
  padding-block: 16px;
}
body:has(#achat) .minoe-bande__piste {
  display: flex;
  width: max-content;
  animation: minoe-defile 34s linear infinite;
}
body:has(#achat) .minoe-bande__groupe {
  display: flex;
  align-items: center;
  flex: none;
}
body:has(#achat) .minoe-bande__item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-inline: 18px;
  color: var(--minoe-lait);
  font-size: 0.9375rem;
  white-space: nowrap;
}
/* B2, 28/10/2026 : le séparateur n'alterne plus trois illustrations sans
   rapport avec le texte. Chaque mention porte SON dessin (voir la section
   lp-minoe-bande), et le séparateur redevient ce qu'il est : une ponctuation.
   Un point beurre de 5 px, qui donne le rythme sans concurrencer les dessins. */
body:has(#achat) .minoe-bande__item::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background-color: var(--minoe-beurre);
  opacity: 0.55;
}

/* Le dessin de la mention, posé dans une pastille beurre : sur le fond
   pétrole, une silhouette en aplat perdrait la coche du bouclier et les
   quatre trous du bouton. */
body:has(#achat) .minoe-bande__illu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--minoe-beurre);
}
body:has(#achat) .minoe-bande__illu img { width: 20px; height: 20px; display: block; }
body:has(#achat) .minoe-bande__texte { white-space: nowrap; }
@keyframes minoe-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   4.10 APPARITION AU SCROLL ET COMPTEURS
   La classe est posée par minoe-reveal.js, jamais par le HTML : sans
   JavaScript rien n'est masqué et la page reste lisible.
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body:has(#achat) .minoe-reveal.is-revealed { opacity: 1; transform: none; }

body:has(#achat) .minoe-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
  margin-block: 24px;
}
body:has(#achat) .minoe-chiffre__valeur {
  font-family: var(--font-heading--family, inherit);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--minoe-petrole);
  font-variant-numeric: tabular-nums; /* le compteur ne fait pas sauter la ligne */
}
body:has(#achat) .minoe-chiffre__libelle { font-size: 0.875rem; color: var(--minoe-taupe); }

/* --------------------------------------------------------------------------
   4.11 MOUVEMENT RÉDUIT
   Dernier bloc du fichier, donc dernier mot dans la cascade.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body:has(#achat) .minoe-bande__piste { animation: none; }
  body:has(#achat) .minoe-reveal { opacity: 1; transform: none; transition: none; }
  body:has(#achat) .section :is(a.button, a.button-secondary) { transition: none; }
  body:has(#achat) .section :is(a.button, a.button-secondary):hover { transform: none; }
  body:has(#achat) .minoe-plus > summary::after { transition: none; }
}

/* --------------------------------------------------------------------------
   4.12 SNIPPETS — illustrations et vagues
   Ce CSS vivait en ligne dans `minoe-illu.liquid` et `minoe-vague.liquid`,
   derrière une garde de type « assign ». Mais une variable posée dans un snippet
   est locale à ce rendu : la garde ne gardait rien et la balise <style>
   sortait une vingtaine de fois par page. Rapatrié ici, il sort une fois.
   -------------------------------------------------------------------------- */

/* Vagues (§1.5) — hors scope #achat : le snippet doit pouvoir servir ailleurs */
.minoe-vague { line-height: 0; }
.minoe-vague svg { display: block; width: 100%; height: 40px; }
.minoe-vague--haut { transform: scaleY(-1); }
@media screen and (min-width: 750px) {
  .minoe-vague svg { height: 64px; }
}

/* Illustrations (§1.6)
   ----------------------------------------------------------------------
   base.css de Horizon pose `img { width: 100%; height: auto }` et
   `img, svg { max-width: 100% }`. Ces règles battent les attributs
   width/height du HTML : sans taille CSS, une illustration de 32 px
   s'affichait à la largeur de sa colonne, soit 250 px et plus.

   On donne donc une taille à CHAQUE combinaison, avec `max-width: none`
   pour reprendre la main, et `flex: none` pour qu'un conteneur flex ne
   l'étire pas non plus. */

.minoe-illu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.minoe-illu img,
.minoe-illu svg {
  display: block;
  flex: none;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

/* Taille du dessin, pastille ou non */
.minoe-illu--xs img, .minoe-illu--xs svg { width: 24px;  height: 24px; }
.minoe-illu--sm img, .minoe-illu--sm svg { width: 32px;  height: 32px; }
.minoe-illu--md img, .minoe-illu--md svg { width: 56px;  height: 56px; }
.minoe-illu--xl img, .minoe-illu--xl svg { width: 80px;  height: 80px; }

/* Sans pastille, le conteneur fait exactement la taille du dessin */
.minoe-illu--xs { width: 24px;  height: 24px; }
.minoe-illu--sm { width: 32px;  height: 32px; }
.minoe-illu--md { width: 56px;  height: 56px; }
.minoe-illu--xl { width: 80px;  height: 80px; }

/* Avec pastille, le rond est plus grand que le dessin */
.minoe-illu--pastille { border-radius: 50%; background: #FBE7A6; }
.minoe-illu--pastille.minoe-illu--xs { width: 40px; height: 40px; }
.minoe-illu--pastille.minoe-illu--sm { width: 48px; height: 48px; }
.minoe-illu--pastille.minoe-illu--md { width: 88px; height: 88px; }


/* Décor de coin : discret, jamais cliquable, absent sous 990px. */
.minoe-illu--decor {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
  opacity: 0.22;
  pointer-events: none;
  display: none;
}
@media screen and (min-width: 990px) {
  .minoe-illu--decor { display: inline-flex; }
}

/* Filet de sécurité : aucun dessin de la page ne dépasse 88 px, quelle que
   soit la combinaison de classes. Seule exception, l'image ronde de S6. */
body:has(#achat) .minoe-illu :is(img, svg) { max-height: 88px; }

/* Les SVG écrits en ligne dans les blocs custom-liquid (preuve, sécurité,
   comparatif) portent déjà width/height en attributs ; on les verrouille
   aussi en CSS, pour la même raison que ci-dessus. */
body:has(#achat) .minoe-benef > svg,
body:has(#achat) .minoe-petit > svg,
body:has(#achat) .lp-comp__oui > svg,
body:has(#achat) .lp-comp__non > svg {
  flex: none;
  max-width: none;
}

/* Rangée de 3 réassurances du bloc d'achat (§S1) : illustration 32 px à
   gauche, texte à droite, sur une ligne. Grille de 3 sur ordinateur,
   empilées sur mobile. */
body:has(#achat) .minoe-reassurances {
  display: grid;
  gap: 12px;
  margin-block: 16px;
}
@media screen and (min-width: 750px) {
  body:has(#achat) .minoe-reassurances { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
body:has(#achat) .minoe-reassurances .minoe-benef { margin-bottom: 0; gap: 10px; }
body:has(#achat) .minoe-reassurances .minoe-benef__titre { font-size: 0.875rem; }
body:has(#achat) .minoe-reassurances .minoe-benef p { font-size: 0.8125rem; }

/* La pastille du comparatif reste à 40px quelle que soit la largeur : la
   hauteur de ligne de 56px (§S11) ne laisse pas la place à plus. */
.lp-comp__critere .minoe-illu--pastille { width: 40px; height: 40px; }
.lp-comp__critere .minoe-illu--pastille img { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   4.13 CONTRÔLES NATIFS DE SHOPIFY — ne pas y toucher
   --------------------------------------------------------------------------
   Horizon rend les boutons de quantité ainsi :
     class="button quantity-minus button-unstyled"
   Ils portent donc `.button`. Mon sélecteur `button.button` les transformait
   en pilules de 52 px pleine largeur : d'où les − / + énormes signalés.
   Le style des boutons ne vise plus que les liens `a.button`, mais on pose
   ici un filet de sécurité explicite, au cas où une règle future déraperait.
   Le bouton « Ajouter au panier » n'a besoin de rien : il reçoit déjà ses
   couleurs pétrole par son réglage `style_class: button-custom`.
   -------------------------------------------------------------------------- */
body:has(#achat) :is(.quantity-minus, .quantity-plus, .quantity-selector button) {
  min-height: 0;
  min-width: 0;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

/* « Acheter avec Shop » et les autres portefeuilles accélérés : masqués à la
   demande de la fondatrice. Un seul chemin d'achat dans le bloc, celui du
   bouton pétrole, pour que Rapid Bundle reste le seul à décider du panier. */
body:has(#achat) shopify-accelerated-checkout,
body:has(#achat) shopify-accelerated-checkout-cart,
body:has(#achat) .shopify-payment-button {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4.14 SÉLECTEUR DE COLORIS — masqué, mais toujours actif
   --------------------------------------------------------------------------
   Rapid Bundle propose déjà le coloris pour chaque mallette : deux sélecteurs
   dans le même bloc d'achat se contrediraient.

   On le masque VISUELLEMENT plutôt que de le retirer du template. L'élément
   <variant-picker> reste dans le DOM et variant-picker.js continue de piloter
   le prix, le bouton d'ajout au panier, l'URL ?variant= et la galerie : le
   retirer casserait ces quatre liens d'un coup.

   `visibility` + hauteur nulle plutôt que `display:none` : certains
   navigateurs n'envoient pas les champs d'un conteneur en display:none.
   -------------------------------------------------------------------------- */
body:has(#achat) variant-picker,
body:has(#achat) .lp-selector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   4.15 CONTENEURS DE RANGÉE — Refonte V4
   --------------------------------------------------------------------------
   Les sections Horizon en colonne appliquent `align-items: center` : chaque
   bloc enfant se réduit alors à la largeur de son contenu. Les rangées de
   cartes héritaient de parents de 388 et 444 px et s'empilaient au lieu de
   s'aligner.

   On ne touche pas au rail lui-même — il doit rester libre de défiler sur
   mobile — mais au conteneur que Horizon génère autour du bloc custom-liquid
   qui le porte. `:has()` permet de ne viser que ceux-là.
   -------------------------------------------------------------------------- */
body:has(#achat) .section *:has(> .minoe-rail),
body:has(#achat) .section *:has(> .minoe-swipe),
body:has(#achat) .section *:has(> .minoe-reassurances) {
  width: 100%;
  align-self: stretch;
  max-width: none;
}

/* ==========================================================================
   5. BARRES DU HAUT — point B de la revue
   --------------------------------------------------------------------------
   Constat avant correction : barre d'annonce 220px, en-tête collant 258px,
   soit 478px avant d'atteindre le produit. L'en-tête étant `position: sticky`
   avec un fond lait opaque et `z-index: 18`, il recouvrait en plus le haut de
   toute section atteinte par une ancre.

   Cibles : annonce 36px (40 mobile), en-tête 72px (60 mobile).

   Hors scope `#achat` : ces barres sont communes à tout le site, et les
   réduire partout est précisément ce qui est demandé.
   ========================================================================== */

/* --- Barre d'annonce --- */
.shopify-section-group-header-group [class*="announcement"] {
  min-height: 0;
}
.shopify-section-group-header-group .announcement-bar,
.shopify-section-group-header-group [class*="announcement-bar"] {
  min-height: 40px;
  padding-block: 0;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 750px) {
  .shopify-section-group-header-group .announcement-bar,
  .shopify-section-group-header-group [class*="announcement-bar"] {
    min-height: 36px;
  }
}

/* --- En-tête --- */
.shopify-section-group-header-group .header,
.shopify-section-group-header-group header-component {
  --header-height: 60px;
  min-height: 60px;
}
.shopify-section-group-header-group .header__row {
  min-height: 60px;
  padding-block: 0;
}
@media screen and (min-width: 750px) {
  .shopify-section-group-header-group .header,
  .shopify-section-group-header-group header-component {
    --header-height: 72px;
    min-height: 72px;
  }
  .shopify-section-group-header-group .header__row { min-height: 72px; }
}

/* Le logo officiel remplace le nom en lettres (voir blocks/_header-logo.liquid) */
.header-logo__image--minoe {
  display: block;
  width: auto;
  height: var(--header-logo-image-height, 36px);
  max-width: none;
}
@media screen and (max-width: 749px) {
  .header-logo__image--minoe { height: var(--header-logo-image-height-mobile, 28px); }
}

/* --- 24px au maximum avant le bloc d'achat --- */
body:has(#achat) .shopify-section-group-header-group + * ,
body:has(#achat) #shopify-section-template--main > .section:first-child {
  padding-block-start: 24px;
}
body:has(#achat) [id$="__achat"] .section,
body:has(#achat) [id$="__achat"] > .section {
  padding-block-start: 24px;
}

/* --- L'ancre tombe juste sous l'en-tête collant --- */
#achat {
  display: block;
  scroll-margin-top: 80px;
}
body:has(#achat) [id^="shopify-section-template"] {
  scroll-margin-top: 80px;
}

/* Hauteurs des barres du haut, spécificité suffisante pour primer sur toute
   règle de rythme. Contenu centré, texte sur une seule ligne. */
body .shopify-section-group-header-group .announcement-bar {
  min-height: 40px;
  padding-block: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .shopify-section-group-header-group .announcement-bar__slider,
body .shopify-section-group-header-group .announcement-bar__slides,
body .shopify-section-group-header-group .announcement-bar__slide,
body .shopify-section-group-header-group .announcement-bar__text {
  min-height: 0;
  padding-block: 0;
  margin-block: 0;
}
body .shopify-section-group-header-group .announcement-bar__text {
  white-space: nowrap;
  font-size: 0.8125rem;
  line-height: 1.2;
}
body .shopify-section-group-header-group .header__row {
  min-height: 60px;
  padding-block: 0 !important;
}
@media screen and (min-width: 750px) {
  body .shopify-section-group-header-group .announcement-bar { min-height: 36px; }
  body .shopify-section-group-header-group .header__row { min-height: 72px; }
}
@media screen and (max-width: 749px) {
  /* Sur mobile la phrase de 58 caractères ne tient pas à 13px. On descend à
     11px et on garde une seule ligne : elle passe alors dans 375px, et la
     barre reste à sa hauteur de 40px. */
  body .shopify-section-group-header-group .announcement-bar { min-height: 40px; }
  /* À 375px la phrase ne tient pas sur une ligne, même à 11px : elle était
     rognée des deux côtés. On la laisse passer sur deux lignes et la barre
     s'ajuste, plutôt que d'amputer le texte. */
  body .shopify-section-group-header-group .announcement-bar__slide,
  body .shopify-section-group-header-group .announcement-bar__text {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body .shopify-section-group-header-group .announcement-bar__text {
    font-size: 0.75rem;
    line-height: 1.3;
    text-align: center;
    padding-inline: 12px;
  }
}
@media screen and (max-width: 359px) {
  /* En dessous de 360px on renonce à la ligne unique plutôt que de rogner. */
  body .shopify-section-group-header-group .announcement-bar { min-height: 0; padding-block: 6px !important; }
  body .shopify-section-group-header-group .announcement-bar__text { white-space: normal; }
}

/* La phrase du bandeau demandait 482px mais son conteneur était bridé à 394px
   avec overflow:hidden, ce qui la coupait à « ...ou rembour ». On libère la
   largeur des quatre conteneurs imbriqués du carrousel d'annonces.

   `max-width: none` libérait trop : sur un écran de 390px le bandeau réclamait
   478px et toute la page glissait latéralement. On plafonne à la largeur
   disponible et on laisse la phrase passer à la ligne. */
body .shopify-section-group-header-group .announcement-bar__slider,
body .shopify-section-group-header-group .announcement-bar__slides,
body .shopify-section-group-header-group .announcement-bar__slide,
body .shopify-section-group-header-group .announcement-bar__text {
  width: auto;
  max-width: 100%;
  overflow: visible;
}

/* L'ancre tombe juste sous l'en-tête collant de 72px, avec un peu d'air. */
body:has(#achat) #achat {
  scroll-margin-top: 80px;
}

/* ==========================================================================
   6. RYTHME DES SECTIONS — points D, E et F de la revue
   --------------------------------------------------------------------------
   D. Une section sur deux colorée. Le sable #F4EEE2 était trop proche du lait
      #FFFCF5 pour qu'on voie l'alternance : on passe à des teintes franches
      de la charte (ciel clair, beurre clair, sauge clair, beurre, pétrole).

   E. Les vagues étaient rendues par des blocs du template, bridés à la
      largeur du conteneur (d'où les 65 %) et d'une couleur qui ne
      correspondait pas. On les remplace par des pseudo-éléments pleine
      largeur, colorés par variable : chaque vague prend la couleur de la
      section VOISINE, ce qui dessine la frontière sans bande intermédiaire.

   F. Espacement 80 px sur ordinateur, 56 px sur mobile. Une section est soit
      centrée, soit alignée à gauche, jamais les deux.
   ========================================================================== */

/* Les anciens blocs de vague du template feraient doublon. */
body:has(#achat) .minoe-bord { display: none !important; }

/* --------------------------------------------------------------------------
   6.1 Fonds — plan D
   -------------------------------------------------------------------------- */
body:has(#achat) [id$="__achat"],
body:has(#achat) [id$="__video"],
body:has(#achat) [id$="__trajets"],
body:has(#achat) [id$="__ages"],
body:has(#achat) [id$="__lassitude"],
body:has(#achat) [id$="__comparatif"] { --minoe-fond: #FFFCF5; }

body:has(#achat) [id$="__bande"]       { --minoe-fond: #1F5A6E; }
body:has(#achat) [id$="__science"]     { --minoe-fond: #E4F0F7; }

/* La section « Études » : en-tête centré, corps aligné à gauche.
   `body:has(#achat) .minoe-surtitre { text-align: inherit }` plus bas a une
   spécificité de (0,2,0) : une classe de section ne peut pas la battre, le
   surtitre doit donc hériter d'un conteneur déjà centré. */
body:has(#achat) [id$="__science"] { text-align: center; }
body:has(#achat) [id$="__science"] :is(.lp-sci__duo, .lp-sci__sources, .lp-sci__clinique, .lp-sci__sources-repli) { text-align: left; }
body:has(#achat) [id$="__mecanisme"]   { --minoe-fond: #E3EFDD; }
body:has(#achat) [id$="__boite"]       { --minoe-fond: #FDF3D3; }
/* Les quatre sections calquées sur les infographies gardent le fond de
   l'infographie dont elles viennent : sable, sauge, beurre clair, bleu ciel. */
body:has(#achat) [id$="__pages"]       { --minoe-fond: #F4EEE2; }
body:has(#achat) [id$="__taille"]      { --minoe-fond: #E4F0F7; }
body:has(#achat) [id$="__offrir"]      { --minoe-fond: #FBE7A6; }
body:has(#achat) [id$="__garantie"]    { --minoe-fond: #E4F0F7; }
body:has(#achat) [id$="__faq"]         { --minoe-fond: #F4EEE2; }
body:has(#achat) [id$="__dernier-mot"] { --minoe-fond: #1F5A6E; }
/* 29/10/2026 : la section des avis, insérée entre la vidéo et les études,
   n'avait ni fond ni vague. Elle héritait donc du lait par défaut, et la
   vague du haut des Études continuait d'annoncer la sauge de la vidéo —
   d'où le liseré vert sous les avis. Elle prend le sable de la charte. */
body:has(#achat) [id$="__avis"] { --minoe-fond: #F4EEE2; }

/* Le fond est peint sur la section entière, qui occupe déjà toute la largeur.
   `.section-background` de Horizon est neutralisé pour éviter la superposition. */
body:has(#achat) [id^="shopify-section-template"] { background: var(--minoe-fond, #FFFCF5); }
body:has(#achat) [id^="shopify-section-template"] .section-background { background: transparent !important; }

/* Texte en lait sur les deux sections pétrole */
body:has(#achat) :is([id$="__bande"], [id$="__dernier-mot"]) :is(p, li, h2, h3, .minoe-surtitre) { color: #FFFCF5; }

/* Les cartes posées sur une section colorée restent en lait (point D) */
body:has(#achat) [id^="shopify-section-template"] .minoe-carte { background: #FFFCF5; }

/* --------------------------------------------------------------------------
   6.3 Espacement — point F3 : 80px ordinateur, 56px mobile
   -------------------------------------------------------------------------- */
body:has(#achat) [id^="shopify-section-template"] .section {
  padding-block: 56px;
}
@media screen and (min-width: 750px) {
  body:has(#achat) [id^="shopify-section-template"] .section { padding-block: 80px; }
}

/* --------------------------------------------------------------------------
   6.4 Alignements — point F1 et F2
   Une section centrée centre TOUT : surtitre, titre et texte ensemble.
   Centrées : S3, S5, S7, S9, S11, S12, S14.
   En deux colonnes, texte à gauche : S4, S6, S8, S10.
   -------------------------------------------------------------------------- */
body:has(#achat) :is([id$="__trajets"], [id$="__ages"],
                      [id$="__lassitude"], [id$="__comparatif"],
                      [id$="__garantie"], [id$="__dernier-mot"]) {
  text-align: center;
}
body:has(#achat) :is([id$="__trajets"], [id$="__ages"],
                      [id$="__lassitude"], [id$="__comparatif"],
                      [id$="__garantie"], [id$="__dernier-mot"])
  :is(h2, .h2, .minoe-surtitre, p) {
  margin-inline: auto;
}
body:has(#achat) :is([id$="__trajets"], [id$="__ages"],
                      [id$="__lassitude"], [id$="__comparatif"],
                      [id$="__garantie"], [id$="__dernier-mot"]) h2 {
  max-width: 20ch;
}

/* Sections en deux colonnes : tout le texte à gauche, y compris le surtitre
   qui flottait au centre au-dessus d'un titre aligné à gauche. */
body:has(#achat) :is([id$="__mecanisme"],
                      [id$="__boite"], [id$="__offrir"]) {
  text-align: left;
}
body:has(#achat) :is([id$="__mecanisme"],
                      [id$="__boite"], [id$="__offrir"])
  :is(h2, .h2, .minoe-surtitre, p) {
  margin-inline: 0;
}

/* B3, 28/10/2026 : S3 n'est plus une colonne de texte à gauche d'une grille
   de photos, mais trois cartes sous un en-tête centré. On la sort donc des
   deux règles ci-dessus, qui alignaient tout à gauche. */
body:has(#achat) [id$="__video"] { text-align: center; }
body:has(#achat) [id$="__video"] :is(h2, .h2, .minoe-surtitre, p) {
  margin-inline: auto;
}
body:has(#achat) [id$="__video"] .lp-v3__titre { max-width: 22ch; }

/* ==========================================================================
   7. BLOC D'ACHAT ET EN-TÊTE — points B2, C2, C3, C4
   ========================================================================== */

/* --- B2 : logo officiel, 120px de large sur ordinateur, 96px sur mobile --- */
.header-logo__image--minoe {
  display: block;
  width: 96px;
  height: auto;
  max-width: none;
}
@media screen and (min-width: 750px) {
  .header-logo__image--minoe { width: 120px; }
}

/* --- B3 : 24px au maximum entre l'en-tête et le bloc d'achat --- */
body:has(#achat) [id$="__achat"] .section { padding-block-start: 24px; }

/* --------------------------------------------------------------------------
   C2 : le bouton d'ajout occupe toute la largeur restante, la quantité 120px.
   Horizon met les deux dans une rangée ; on fixe les proportions.
   -------------------------------------------------------------------------- */
body:has(#achat) .product-form-buttons,
body:has(#achat) [class*="buy-buttons"] {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
body:has(#achat) [class*="quantity-selector"],
body:has(#achat) .quantity-selector {
  flex: 0 0 120px;
  width: 120px;
  min-width: 120px;
}
body:has(#achat) .add-to-cart-button,
body:has(#achat) button[name="add"] {
  flex: 1 1 auto;
  width: auto;
  min-height: 52px;
}

/* --------------------------------------------------------------------------
   C3 — RETIRÉ le 29/10/2026. Cette règle plafonnait la galerie à 5 médias sur
   ordinateur, à une époque où la colonne de droite était plus courte que les
   photos. Depuis, c'est l'inverse : la colonne fait 1945 px et la galerie
   1232. La règle masquait donc 15 médias sur 20 et empêchait le script de
   `minoe-panier-sync.js` de faire son travail — il mesurait une galerie déjà
   tronquée et n'avait plus rien à cacher.
   Le plafonnement vit maintenant dans ce script, par rangées complètes et
   recalculé au redimensionnement. Ne pas réintroduire de limite en dur ici.
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-voir-photos {
  display: none;
  margin-top: 12px;
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  border: 2px solid var(--minoe-petrole);
  background: transparent;
  color: var(--minoe-petrole);
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 0.9375rem;
  cursor: pointer;
}
@media screen and (min-width: 990px) {
  body:has(#achat) .minoe-voir-photos { display: block; }
}

/* --------------------------------------------------------------------------
   C4 : barre d'achat collante. Elle n'apparaît qu'une fois le bouton dépassé
   (classe posée par minoe-reveal.js), fait 64px, fond lait, ombre douce, et
   ne recouvre jamais un bouton de section grâce au padding de fin de page.
   -------------------------------------------------------------------------- */
body:has(#achat) .sticky-add-to-cart {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
body:has(#achat) .sticky-add-to-cart.minoe-barre-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
body:has(#achat) .sticky-add-to-cart__bar {
  min-height: 64px;
  background: #FFFCF5 !important;
  box-shadow: 0 -4px 20px rgba(43, 40, 35, 0.12);
  border-top: 1px solid #E5DCCB;
  padding-block: 8px;
}
body:has(#achat) .sticky-add-to-cart__button {
  min-height: 48px;
  border-radius: 999px;
}
/* De l'air en fin de page pour que la barre ne masque pas le dernier bouton */
body:has(#achat) [id$="__dernier-mot"] { padding-bottom: 72px; }

@media (prefers-reduced-motion: reduce) {
  body:has(#achat) .sticky-add-to-cart { transition: none; }
}

/* ==========================================================================
   9. REVUE DU 27/10 — sauge, effet couture, bande illustrée
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Le vert sauge sur trois sections
   S3 « Regardez ses mains », S8 « Dans la boîte » et S12 « Garantie ».
   S3 devient colorée : elle reçoit donc ses deux vagues, comme les autres.
   -------------------------------------------------------------------------- */
body:has(#achat) [id$="__video"]    { --minoe-fond: #E3EFDD; }
body:has(#achat) [id$="__garantie"] { --minoe-fond: #E3EFDD; }

/* --------------------------------------------------------------------------
   9.2 Effet couture
   Un liseré pointillé pétrole posé en retrait du bord, qui rappelle la
   surpiqûre de la feutrine. Sur les étapes, la garantie et la frise.
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-couture {
  position: relative;
  background: #FFFCF5;
  border-radius: 20px;
  box-shadow: var(--minoe-ombre);
}
body:has(#achat) .minoe-couture::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(31, 90, 110, 0.38);
  border-radius: 14px;
  pointer-events: none;
}

/* Les cartes d'étapes de S9 et la carte de garantie reprennent la couture */
body:has(#achat) [id$="__lassitude"] .minoe-carte,
body:has(#achat) [id$="__garantie"] .minoe-carte {
  position: relative;
}
body:has(#achat) [id$="__lassitude"] .minoe-carte::after,
body:has(#achat) [id$="__garantie"] .minoe-carte::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(31, 90, 110, 0.38);
  border-radius: 14px;
  pointer-events: none;
}

/* La frise : la ligne pointillée est déjà une couture, on l'épaissit un peu
   et on la met à la couleur du trait. */
body:has(#achat) .lp-frise {
  background-image: repeating-linear-gradient(
    to right,
    rgba(31, 90, 110, 0.5) 0 7px,
    transparent 7px 15px
  ) !important;
}

/* --------------------------------------------------------------------------
   9.3 Bande défilante : un petit dessin entre chaque mention
   Le séparateur alternait le bouton du logo, un nuage et une fermeture, sans
   rapport avec la mention qu'ils suivaient. B2 du 28/10/2026 : chaque mention
   porte son propre dessin, l'alternance n'a plus d'objet. Les deux règles
   sont vidées plutôt que retirées, pour garder la trace de ce qui existait.
   -------------------------------------------------------------------------- */

/* Le bouton de S3 occupait toute la largeur de sa colonne (revue du 27/10).
   B3, 28/10/2026 : il est maintenant seul, centré sous les trois cartes — il
   reprend donc sa largeur de bouton, et ne s'étale sur toute la largeur que
   sur mobile, où une seule carte tient par ligne. */
body:has(#achat) [id$="__video"] .lp-v3__action .button {
  width: auto;
  min-width: 280px;
}
@media screen and (max-width: 619px) {
  body:has(#achat) [id$="__video"] .lp-v3__action .button {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   10. BLOC D'ACHAT SOIGNÉ — revue du 27/10
   --------------------------------------------------------------------------
   Rythme demandé : 16px entre éléments d'un même groupe, 24px entre groupes.
   Aucun faux élément : pas de compte à rebours, pas de stock, pas d'avis.
   Klarna n'étant pas actif dans Shopify Payments (seuls Shop Pay et Apple
   Pay), aucune mention de paiement fractionné n'est affichée.
   ========================================================================== */

/* Espacement par défaut dans la colonne : 16px. */
body:has(#achat) [id$="__achat"] .product-details > * { margin-block-end: 16px; }
/* 24px avant les groupes qui ouvrent une nouvelle idée. */
body:has(#achat) [id$="__achat"] .product-details > *:has(.minoe-colis),
body:has(#achat) [id$="__achat"] .product-details > *:has(.minoe-carte-garantie),
body:has(#achat) [id$="__achat"] .product-details > *:has(.minoe-bonus),
body:has(#achat) [id$="__achat"] .product-details > *:has(.minoe-contact) {
  margin-block-start: 24px;
}

/* 2. Titre court. Le titre produit Shopify reste dans le DOM pour le SEO et
      les lecteurs d'écran, mais n'est plus affiché.

      Il n'a ni classe ni attribut stables — seulement un `<h1>` nu dans un
      `.text-block` à classe générée. Ce qui le distingue du nôtre, c'est son
      enveloppe : Horizon le place dans un lien `a.contents`. On vise donc
      celle-là, et on le masque VISUELLEMENT (pas en display:none) pour qu'il
      reste lisible par les moteurs. */
/* 29/10/2026 : la règle ne visait que la fiche produit. Sur l'accueil, le
   titre natif restait affiché et faisait doublon avec notre titre court.
   Elle vise maintenant les deux blocs d'achat. */
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) a.contents h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}
body:has(#achat) .minoe-titre-court h1 {
  margin: 0;
  font-size: 1.75rem;      /* 28px mobile */
  line-height: 1.15;
  font-weight: 700;
}
body:has(#achat) .minoe-titre-court p { margin: 6px 0 0; font-size: 0.9375rem; }
@media screen and (min-width: 750px) {
  body:has(#achat) .minoe-titre-court h1 { font-size: 2.25rem; }  /* 36px */
}

/* 3. Pastille sauge à droite du prix */
body:has(#achat) .minoe-pastille-livraison {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #E3EFDD;
  color: #1F5A6E;
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* 5. Les trois coches du colis */
body:has(#achat) .minoe-coches { list-style: none; margin: 6px 0 4px; padding: 0; }
body:has(#achat) .minoe-coches li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 7px;
  font-size: 0.9375rem;
  color: #615A50;
}
body:has(#achat) .minoe-colis > summary { font-size: 1rem; }

/* 7. Date de livraison estimée */
body:has(#achat) .minoe-livraison-date {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 0.9375rem;
  color: #615A50;
}
body:has(#achat) .minoe-livraison-date strong { color: #2B2823; font-weight: 700; }
/* Tant que le script n'a pas rempli les dates, la phrase reste masquée :
   mieux vaut rien qu'une promesse à trous. */
body:has(#achat) .minoe-livraison-date:not([data-minoe-prete]) { display: none; }

/* 8. Mini-carte garantie */
body:has(#achat) .minoe-carte-garantie {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #FFFCF5;
}
body:has(#achat) .minoe-carte-garantie p { margin: 0; font-size: 0.9375rem; }
body:has(#achat) .minoe-carte-garantie a { color: #1F5A6E; text-underline-offset: 3px; }
body:has(#achat) .minoe-badge-30 {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #FBE7A6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800; font-size: 0.625rem; color: #1F5A6E;
  text-align: center; line-height: 1.1;
}

/* 10. Carte des bonus, fond beurre clair, couvertures inclinées */
body:has(#achat) .minoe-bonus {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: #FDF3D3 !important;
}
body:has(#achat) .minoe-bonus__couvertures {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline-start: 10px;
}
body:has(#achat) .minoe-bonus__couvertures img {
  width: 54px; height: auto;
  border-radius: 4px;
  border: 1px solid rgba(43,40,35,.12);
  box-shadow: 0 2px 8px rgba(43,40,35,.14);
  margin-inline-start: -14px;
}
body:has(#achat) .minoe-bonus__couvertures img:nth-child(1) { transform: rotate(-7deg); z-index: 1; }
body:has(#achat) .minoe-bonus__couvertures img:nth-child(2) { transform: rotate(1deg);  z-index: 2; }
body:has(#achat) .minoe-bonus__couvertures img:nth-child(3) { transform: rotate(8deg);  z-index: 3; }
body:has(#achat) .minoe-bonus__titre {
  margin: 0 0 2px;
  font-family: var(--font-heading--family, inherit);
  font-weight: 700; font-size: 1rem;
}
body:has(#achat) .minoe-bonus p { margin: 0; }

/* 12. Ligne contact */
body:has(#achat) .minoe-contact { margin: 0; }
body:has(#achat) .minoe-contact a { color: #1F5A6E; text-underline-offset: 3px; }

/* Le badge de la galerie est dessiné DANS l'image hero, plus en CSS :
   les deux se superposaient. */

/* Miniatures arrondies sous l'image principale, sur mobile */
@media screen and (max-width: 749px) {
  body:has(#achat) [class*="media-gallery"] [class*="thumbnail"] img,
  body:has(#achat) [class*="thumbnails"] img { border-radius: 12px; }
}

/* ==========================================================================
   11. VAGUES — revue du 27/10, point 1
   --------------------------------------------------------------------------
   Quatre vagues seulement, toutes en HAUT de section : S3, S6, S10, S14.
   Toutes les autres transitions sont des bords droits.

   POURQUOI DEUX PSEUDO-ÉLÉMENTS. Une vague doit montrer DEUX couleurs : le
   fond de la section du dessus, et la forme dans la couleur de la section du
   dessous. Un masque seul ne donne qu'une couleur, le reste étant
   transparent — c'est ce qui laissait apparaître une bande de la mauvaise
   teinte. On empile donc :
     ::before — bande pleine de la couleur du DESSUS
     ::after  — la forme, masquée, dans la couleur du DESSOUS, par-dessus

   `mask-size: 100% 100%` et `no-repeat` : une seule ondulation étirée sur
   toute la largeur. C'est la répétition du motif qui dessinait ces formes
   en « œil » coupées sur les côtés sous la garantie.
   ========================================================================== */

body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                      [id$="__offrir"], [id$="__dernier-mot"]) {
  position: relative;
  isolation: isolate;
}

body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                      [id$="__offrir"], [id$="__dernier-mot"])::before,
body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                      [id$="__offrir"], [id$="__dernier-mot"])::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 100vw;
  margin-inline-start: -50vw;
  height: 32px;
  pointer-events: none;
}

/* La bande, couleur de la section du dessus */
body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                      [id$="__offrir"], [id$="__dernier-mot"])::before {
  background-color: var(--minoe-dessus);
  z-index: 1;
}

/* La forme, couleur de la section elle-même */
body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                      [id$="__offrir"], [id$="__dernier-mot"])::after {
  background-color: var(--minoe-fond);
  -webkit-mask-image: url("//minoe.fr/cdn/shop/t/5/assets/minoe-vague.svg?v=109820264075816670621793339624");
  mask-image: url("//minoe.fr/cdn/shop/t/5/assets/minoe-vague.svg?v=109820264075816670621793339624");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 2;
}

@media screen and (min-width: 750px) {
  body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                        [id$="__offrir"], [id$="__dernier-mot"])::before,
  body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                        [id$="__offrir"], [id$="__dernier-mot"])::after {
    height: 48px;
  }
}

/* Couleur de la section qui précède chaque vague */
body:has(#achat) [id$="__video"]       { --minoe-dessus: #1F5A6E; } /* bande pétrole */
body:has(#achat) [id$="__mecanisme"]   { --minoe-dessus: #FFFCF5; } /* trajets, lait */
body:has(#achat) [id$="__offrir"]      { --minoe-dessus: #FFFCF5; } /* lassitude, lait */
body:has(#achat) [id$="__dernier-mot"] { --minoe-dessus: #F4EEE2; } /* FAQ, sable */

/* Le contenu passe au-dessus de la vague et lui laisse la place. */
body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                      [id$="__offrir"], [id$="__dernier-mot"]) > * {
  position: relative;
  z-index: 3;
}
body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                      [id$="__offrir"], [id$="__dernier-mot"]) .section {
  padding-block-start: 88px;
}
@media screen and (min-width: 750px) {
  body:has(#achat) :is([id$="__video"], [id$="__mecanisme"],
                        [id$="__offrir"], [id$="__dernier-mot"]) .section {
    padding-block-start: 128px;
  }
}

/* ==========================================================================
   12. EN-TÊTE COLLANT — revue du 27/10, point 2
   --------------------------------------------------------------------------
   En mode « au défilement vers le haut », l'en-tête se recollait à environ
   36 px du haut, laissant voir le site au-dessus. Horizon le fixe à
   `top: -1px` ; la hauteur de la barre d'annonce s'ajoutait par-dessus.
   On force top:0 et on s'assure que la barre d'annonce ne colle jamais.
   ========================================================================== */
body .header-section:has(> #header-component[sticky='always']),
body .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
  top: 0 !important;
  margin-block-start: 0 !important;
}
/* La barre d'annonce défile avec la page, elle ne se fige pas. */
body .shopify-section-group-header-group:has([class*="announcement"]) {
  position: static !important;
  top: auto !important;
}
/* Aucun espace au-dessus de l'en-tête quand il est collé. */
body #header-component[sticky] { margin-block-start: 0 !important; }

/* ==========================================================================
   14. COMPARATIF — revue du 27/10, point 4
   --------------------------------------------------------------------------
   Plus grand et posé dans une carte lait sur un fond de section sable, au
   lieu de flotter sur du lait.
   ========================================================================== */
body:has(#achat) [id$="__comparatif"] { --minoe-fond: #F4EEE2; }

body:has(#achat) .lp-comp {
  max-width: 960px !important;
  margin-inline: auto;
  background: #FFFCF5;
  border-radius: 24px;
  box-shadow: var(--minoe-ombre);
  padding: 40px;
}
@media screen and (max-width: 749px) {
  body:has(#achat) .lp-comp { max-width: 100% !important; padding: 20px 16px; border-radius: 20px; }
}

/* 50 / 25 / 25, les deux colonnes de droite de largeur identique */
body:has(#achat) .lp-comp__table { table-layout: fixed; width: 100%; }
body:has(#achat) .lp-comp__table thead th:first-child { width: 50%; }
body:has(#achat) .lp-comp__th-minoe,
body:has(#achat) .lp-comp__th-autres { width: 25%; }

/* Lignes de 72 px, critère 18 px */
body:has(#achat) .lp-comp__table tbody tr { height: 72px; }
body:has(#achat) .lp-comp__critere { font-size: 1.125rem; gap: 14px; }
body:has(#achat) .lp-comp__critere .minoe-illu--pastille { width: 48px; height: 48px; }
body:has(#achat) .lp-comp__critere .minoe-illu--pastille img { width: 28px; height: 28px; }

/* Les deux en-têtes au même niveau et de même taille */
body:has(#achat) :is(.lp-comp__th-minoe, .lp-comp__th-autres) {
  vertical-align: bottom;
  padding-block: 18px 12px !important;
}
body:has(#achat) .lp-comp__marque-nom,
body:has(#achat) .lp-comp__th-autres {
  font-family: var(--font-paragraph--family);
  font-weight: 800;
  font-size: 1rem;      /* 16px */
  letter-spacing: 0.04em;
}
body:has(#achat) .lp-comp__th-autres { color: #615A50; }
/* Pictogramme neutre au-dessus de « Les autres », pour équilibrer la mallette
   qui coiffe la colonne MINOÉ. */
body:has(#achat) .lp-comp__th-autres::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 6px;
  border-radius: 8px;
  border: 2px dashed rgba(97, 90, 80, 0.45);
}

/* Coches MINOÉ en pastille 36 px, croix en pastille 32 px */
body:has(#achat) .lp-comp__oui { width: 36px; height: 36px; }
body:has(#achat) .lp-comp__oui svg { width: 18px; height: 18px; }
body:has(#achat) .lp-comp__non { width: 32px; height: 32px; }
body:has(#achat) .lp-comp__mot { font-size: 0.9375rem; color: #615A50; }

@media screen and (max-width: 749px) {
  body:has(#achat) .lp-comp__critere { font-size: 0.9375rem; gap: 10px; }
  body:has(#achat) .lp-comp__critere .minoe-illu--pastille { width: 36px; height: 36px; }
  body:has(#achat) .lp-comp__critere .minoe-illu--pastille img { width: 20px; height: 20px; }
  body:has(#achat) .lp-comp__table tbody tr { height: 64px; }
}

/* ==========================================================================
   15. ALIGNEMENTS — revue du 27/10, point 5
   ========================================================================== */

/* FAQ : le surtitre se centre comme son titre. */
body:has(#achat) [id$="__faq"] { text-align: center; }
body:has(#achat) [id$="__faq"] :is(.minoe-surtitre, h2) { margin-inline: auto; }
/* mais les réponses restent lisibles, donc alignées à gauche */
body:has(#achat) [id$="__faq"] :is(.lp-faq__liste, .lp-faq__onglets) { text-align: left; }
body:has(#achat) [id$="__faq"] .lp-faq__onglets { justify-content: center; }

/* S3 : la colonne de texte se centre verticalement sur la grille 2×2,
   au lieu de se coller en bas. */
body:has(#achat) [id$="__video"] .minoe-duo { align-items: center; }

/* Partout : un surtitre partage toujours l'alignement de son titre. */
body:has(#achat) .minoe-surtitre { text-align: inherit; }

/* ==========================================================================
   16. MISSION DU 27/10 — bloc d'achat, en-tête, illustrations, longueurs
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   RAPID BUNDLE : LE THÈME N'Y ENTRE PAS

   Le bandeau « IDÉAL FRATRIE & CADEAUX » débordait sur le titre « Le Duo
   mallettes ». Ce n'était pas un réglage de l'app : c'était ce fichier.
   `body:has(#achat) .section :is(p, li)` imposait 17px et 27,2px d'interligne
   au <p> du bandeau, prévu par Rapid pour 12px/12px. Le bandeau passait de
   26px à 39px de haut et mordait de 5px sur le titre.

   Les quatre règles du thème qui atteignaient l'intérieur du bloc portent
   désormais `:not([id*="rapid_bundle"] *)`.

   RÈGLE : aucune règle de ce fichier, aucun script, ne doit viser une classe
   `rapi-…` ni un descendant du bloc Rapid. Seule exception tolérée, la marge
   extérieure du conteneur ci-dessous : elle place le bloc dans la page, elle
   ne touche ni à son style ni à sa structure.
   ───────────────────────────────────────────────────────────────────────── */

/* --------------------------------------------------------------------------
   B1 · RAPID BUNDLE : style natif de l'app
   Tout le CSS d'apparence a été retiré. On ne garde que la largeur et l'air
   autour, ce qui relève de la page et non de l'app.
   -------------------------------------------------------------------------- */
body:has(#achat) [id*="rapid_bundle"] {
  display: block;
  width: 100%;
  margin-block: 16px;
}

/* --------------------------------------------------------------------------
   B2 · QUANTITÉ ET AJOUT AU PANIER : une seule ligne de 56px
   -------------------------------------------------------------------------- */
body:has(#achat) [class*="buy-buttons"],
body:has(#achat) .product-form-buttons {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
body:has(#achat) :is(.quantity-selector, [class*="quantity-selector"]) {
  flex: 0 0 128px;
  width: 128px;
  min-width: 128px;
  height: 56px;
  border: 2px solid #E5DCCB;
  border-radius: 999px;
  background: #FFFCF5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 6px;
  overflow: hidden;
}
body:has(#achat) :is(.quantity-minus, .quantity-plus) {
  color: #1F5A6E;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body:has(#achat) :is(.quantity-minus, .quantity-plus) svg { stroke: #1F5A6E; color: #1F5A6E; }
body:has(#achat) .quantity-selector input { border: 0; background: none; text-align: center; font-weight: 700; }

body:has(#achat) :is(.add-to-cart-button, button[name="add"]) {
  flex: 1 1 auto;
  width: auto;
  height: 56px;
  min-height: 56px;
  border-radius: 999px;
  background: #1F5A6E;
  color: #FFFCF5;
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 1.0625rem;   /* 17px */
}

/* --------------------------------------------------------------------------
   B3 · TROIS LIGNES DE RÉASSURANCE, même gabarit
   64px de haut, rayon 16px, 8px entre elles. Plus de bordure pointillée.
   -------------------------------------------------------------------------- */
body:has(#achat) :is(.minoe-carte-garantie, .minoe-ligne-reassurance) {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  border-radius: 16px;
  padding: 10px 16px;
  margin-block-end: 8px;
  box-shadow: none;
}
body:has(#achat) .minoe-carte-garantie { background: #E3EFDD; }
body:has(#achat) .minoe-ligne-reassurance { background: #F4EEE2; }
/* la couture n'a plus lieu d'être ici */
body:has(#achat) .minoe-carte-garantie::after { content: none; }

body:has(#achat) .minoe-badge-30 {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1F5A6E;
  color: #FFFCF5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 0.75rem;   /* 12px */
  line-height: 1;
}
body:has(#achat) .minoe-reass__titre {
  font-weight: 700;
  font-size: 0.9375rem;  /* 15px */
  margin: 0;
}
body:has(#achat) .minoe-reass__detail {
  font-size: 0.8125rem;  /* 13px */
  color: #615A50;
  margin: 2px 0 0;
}
body:has(#achat) .minoe-reass__detail a { color: #615A50; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   B4 · EN-TÊTE : la bande de 24px
   La section d'en-tête porte `padding-top: 24px` et un fond transparent.
   Collée à top:0, ces 24px laissent voir le contenu qui défile derrière :
   c'est la bande signalée. On supprime le rembourrage ET on rend la section
   opaque, pour que rien ne puisse jamais transparaître.
   -------------------------------------------------------------------------- */
body .shopify-section-group-header-group:has(#header-component) {
  padding-block-start: 0 !important;
  background: #FFFCF5;
}
body .shopify-section-group-header-group:has(#header-component)[data-sticky-state],
body .header-section:has(> #header-component[sticky]) {
  top: 0 !important;
  background: #FFFCF5;
}

/* --------------------------------------------------------------------------
   B5 · ILLUSTRATIONS : une seule règle
   Pastille beurre clair pleine, sans liseré. Sur un fond beurre, pastille lait.
   -------------------------------------------------------------------------- */
.minoe-illu--pastille { background: #FDF3D3 !important; box-shadow: none !important; }
body:has(#achat) [id$="__offrir"] .minoe-illu--pastille { background: #FFFCF5 !important; }

/* 40px dans les listes, 56px dans les étapes et les cartes */
.minoe-illu--pastille.minoe-illu--xs,
.minoe-illu--pastille.minoe-illu--sm { width: 40px; height: 40px; }
.minoe-illu--pastille.minoe-illu--xs img,
.minoe-illu--pastille.minoe-illu--sm img { width: 24px; height: 24px; }
.minoe-illu--pastille.minoe-illu--md { width: 56px; height: 56px; }
.minoe-illu--pastille.minoe-illu--md img { width: 34px; height: 34px; }
body:has(#achat) .lp-comp__critere .minoe-illu--pastille { width: 40px; height: 40px; }
body:has(#achat) .lp-comp__critere .minoe-illu--pastille img { width: 24px; height: 24px; }
body:has(#achat) [id$="__video"] .lp-v3__etape .minoe-illu--pastille { width: 56px; height: 56px; }
body:has(#achat) [id$="__video"] .lp-v3__etape .minoe-illu--pastille img { width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   B6 · ROTATION « Il va s'en lasser ? » : cartes horizontales d'environ 110px
   -------------------------------------------------------------------------- */
body:has(#achat) [id$="__lassitude"] .minoe-rail { grid-template-columns: repeat(3, 1fr); }
body:has(#achat) [id$="__lassitude"] .minoe-carte {
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 110px;
  padding: 18px 20px !important;
  text-align: left;
}
body:has(#achat) [id$="__lassitude"] .minoe-carte > span:first-child { position: relative; }
/* le numéro, en pastille pétrole de 22px, posé sur l'illustration */
body:has(#achat) [id$="__lassitude"] .minoe-carte .minoe-petit {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1F5A6E;
  color: #FFFCF5 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  margin: 0 !important;
  z-index: 2;
}
body:has(#achat) [id$="__lassitude"] .minoe-carte h3 { margin: 0 0 3px !important; font-size: 1rem; }
body:has(#achat) [id$="__lassitude"] .minoe-carte p { margin: 0 !important; font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   B7 · OFFRIR : la carte Duo
   -------------------------------------------------------------------------- */
body:has(#achat) .minoe-carte-duo {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFCF5;
  border-radius: 16px;
  box-shadow: var(--minoe-ombre);
  padding: 16px 18px;
  margin-block: 16px;
}
body:has(#achat) .minoe-duo-badge {
  flex: none;
  background: #1F5A6E;
  color: #FFFCF5;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 0.8125rem;
  white-space: nowrap;
}
body:has(#achat) .minoe-carte-duo b { font-family: var(--font-heading--family, inherit); font-size: 1rem; display: block; }
body:has(#achat) .minoe-carte-duo span { font-size: 0.9375rem; color: #615A50; }

/* --------------------------------------------------------------------------
   B9 · LONGUEURS : 56px ordinateur, 40px mobile ; 48px pour garantie et
   dernier mot ; 20px entre un titre et son contenu.
   -------------------------------------------------------------------------- */
body:has(#achat) [id^="shopify-section-template"] .section { padding-block: 40px; }
@media screen and (min-width: 750px) {
  body:has(#achat) [id^="shopify-section-template"] .section { padding-block: 56px; }
}
body:has(#achat) :is([id$="__garantie"], [id$="__dernier-mot"]) .section { padding-block: 48px !important; }
body:has(#achat) :is([id$="__video"], [id$="__mecanisme"], [id$="__offrir"], [id$="__dernier-mot"]) .section {
  padding-block-start: 72px;
}
@media screen and (min-width: 750px) {
  body:has(#achat) :is([id$="__video"], [id$="__mecanisme"], [id$="__offrir"], [id$="__dernier-mot"]) .section {
    padding-block-start: 96px;
  }
}
body:has(#achat) .section :is(h2, .h2) { margin-block-end: 20px; }
body:has(#achat) [id$="__dernier-mot"] .section { max-height: 360px; }

/* Les sections à vague gardaient 96px en haut pour laisser passer l'ondulation.
   48px de vague + 24px d'air suffisent : on descend à 72px. */
@media screen and (min-width: 750px) {
  body:has(#achat) :is([id$="__video"], [id$="__mecanisme"], [id$="__offrir"], [id$="__dernier-mot"]) .section {
    padding-block-start: 72px;
  }
}

/* ==========================================================================
   17. EN-TÊTE COLLANT — un seul mécanisme (revue du 27/10)
   --------------------------------------------------------------------------
   La section reste collée à top:0 en permanence. Rien d'autre ne bouge au
   défilement : ni `top`, ni `padding`, ni `height`, ni `position`. Seul
   `transform` change, en 250 ms. C'est ce mélange de propriétés animées en
   même temps qui faisait trembler l'en-tête.
   ========================================================================== */
body .minoe-entete-fixe {
  position: sticky !important;
  top: 0 !important;
  z-index: 20;
  background: #FFFCF5;
  transform: translateY(0);
  transition: transform 250ms ease;
  will-change: transform;
}
body .minoe-entete-fixe.minoe-entete-cache {
  transform: translateY(-100%);
}
/* Horizon bascule `data-sticky-state` de son côté : on neutralise tout effet
   de mise en page qu'il pourrait en tirer. */
body .minoe-entete-fixe[data-sticky-state],
body .header[data-sticky-state] {
  transition: transform 250ms ease !important;
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  body .minoe-entete-fixe { transition: none; }
}

/* ==========================================================================
   18. COLONNE D'ACHAT — nouvel ordre (revue du 27/10)
   16px entre les éléments, 24px entre les groupes.
   ========================================================================== */
body:has(#achat) [id$="__achat"] .product-details > * { margin-block-end: 16px; }
body:has(#achat) [id$="__achat"] .product-details > *:has(.minoe-reass-grille),
body:has(#achat) [id$="__achat"] .product-details > *:has(.minoe-stories),
body:has(#achat) [id$="__achat"] .product-details > *:has(.minoe-faq-compacte) {
  margin-block-start: 24px;
}
/* Le prix natif et son groupe ne sont plus affichés : Rapid porte les prix. */
body:has(#achat) [id$="__achat"] .price { display: none; }

/* 1 · bandeau de preuve, pilule sauge pleine largeur */
body:has(#achat) .minoe-preuve {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #E3EFDD;
  color: #1F5A6E;
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 0.875rem;   /* 14px */
  text-align: center;
}
body:has(#achat) .minoe-preuve .minoe-illu--pastille {
  width: 26px; height: 26px; background: transparent !important;
}
body:has(#achat) .minoe-preuve .minoe-illu--pastille img { width: 20px; height: 20px; }
body:has(#achat) .minoe-preuve__sep {
  width: 4px; height: 4px; border-radius: 50%; background: #1F5A6E; opacity: .5; flex: none;
}

/* 3 · accroche */
body:has(#achat) .minoe-accroche { margin: 0; font-size: 1rem; color: #615A50; max-width: 46ch; }

/* 4 · les quatre bénéfices */
body:has(#achat) .minoe-benefs { display: flex; flex-direction: column; gap: 12px; }
body:has(#achat) .minoe-benef-ligne { display: flex; align-items: center; gap: 12px; }
body:has(#achat) .minoe-benef-ligne p { margin: 0; font-size: 0.9375rem; max-width: none; }
body:has(#achat) .minoe-benef-ligne b { font-family: var(--font-heading--family, inherit); }

/* 8 · trois mini-cartes de réassurance */
body:has(#achat) .minoe-reass-grille { display: grid; gap: 8px; }
@media screen and (min-width: 990px) {
  body:has(#achat) .minoe-reass-grille { grid-template-columns: repeat(3, 1fr); }
}
body:has(#achat) .minoe-reass {
  display: flex; align-items: center; gap: 10px;
  min-height: 64px; border-radius: 16px; padding: 10px 12px;
  background: #F4EEE2;
}
body:has(#achat) .minoe-reass .minoe-illu--pastille { width: 36px; height: 36px; }
body:has(#achat) .minoe-reass .minoe-illu--pastille img { width: 22px; height: 22px; }

/* 9 · rangée de vidéos, style stories */
body:has(#achat) .minoe-stories { display: flex; gap: 14px; justify-content: space-between; }
body:has(#achat) .minoe-story {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0;
}
body:has(#achat) .minoe-story__rond {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid #1F5A6E; overflow: hidden; display: block;
}
body:has(#achat) .minoe-story__rond img { width: 100%; height: 100%; object-fit: cover; }
body:has(#achat) .minoe-story__nom {
  font-size: 0.75rem; font-weight: 800; color: #615A50; white-space: nowrap;
}

/* modale vidéo 9:16 */
.minoe-modale {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(43,40,35,.78);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.minoe-modale[hidden] { display: none; }
.minoe-modale__media {
  width: min(84vw, 420px); aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: 20px; background: #F4EEE2;
}
.minoe-modale__fermer {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: #FFFCF5; color: #1F5A6E;
  font-size: 22px; line-height: 1; cursor: pointer;
}

/* 10 · FAQ compacte */
body:has(#achat) .minoe-faq-compacte > details { border-bottom: 1px solid #E5DCCB; }
body:has(#achat) .minoe-faq-compacte > details:last-child { border-bottom: 0; }
body:has(#achat) .minoe-faq-compacte summary { padding-block: 12px; }
body:has(#achat) .minoe-faq-compacte p { margin: 0 0 12px; font-size: 0.9375rem; color: #615A50; }

/* 2 · B2 — quantité et bouton, une seule bordure */
body:has(#achat) :is(.add-to-cart-button, button[name="add"]) svg { display: none; }
body:has(#achat) .quantity-selector,
body:has(#achat) [class*="quantity-selector"] {
  height: 56px; border: 2px solid #E5DCCB; border-radius: 999px;
  background: #FFFCF5; box-shadow: none;
}
/* Horizon dessine parfois une seconde bordure sur l'enveloppe interne */
body:has(#achat) .quantity-selector > *,
body:has(#achat) [class*="quantity-selector"] > * { border: 0 !important; box-shadow: none !important; }
body:has(#achat) :is(.quantity-minus, .quantity-plus) { width: 44px; height: 44px; color: #1F5A6E; }
body:has(#achat) .quantity-selector input {
  font-size: 1.0625rem; font-weight: 700; text-align: center; border: 0; background: none;
}

/* ==========================================================================
   19. B3 à B9 — revue du 27/10
   ========================================================================== */

/* B3 · bande défilante : 64px, texte 17px, illustrations 24px, écart 32px */
body:has(#achat) .minoe-bande { padding-block: 0; min-height: 64px; }
body:has(#achat) .minoe-bande__item {
  font-size: 1.0625rem;
  gap: 32px;
  padding-inline: 16px;
}
body:has(#achat) .minoe-bande__item::after { width: 5px; height: 5px; }

/* B4 · S3 : 4 visuels en 2×2, colonnes de même hauteur, alignées en haut */
body:has(#achat) [id$="__video"] .minoe-duo { align-items: start; }
@media screen and (min-width: 750px) {
  body:has(#achat) [id$="__video"] .lp-v3__rail {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  /* au-delà de quatre, on n'affiche pas : la grille doit rester un carré */
  body:has(#achat) [id$="__video"] .lp-v3__slot:nth-child(n + 5) { display: none; }
  body:has(#achat) [id$="__video"] .lp-v3__media { aspect-ratio: 3 / 4; max-height: 312px; }
}

/* B6 · Rotation : numéro intégré au titre, plus de rond débordant */
body:has(#achat) [id$="__lassitude"] .minoe-carte .minoe-petit {
  position: static;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #1F5A6E;
  color: #FFFCF5 !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 800;
  margin: 0 8px 0 0 !important;
  flex: none;
}
body:has(#achat) [id$="__lassitude"] .minoe-carte h3 {
  display: flex; align-items: center;
}
/* les deux phrases de bas de section */
body:has(#achat) [id$="__lassitude"] .minoe-petit:not(.minoe-carte .minoe-petit) {
  font-style: italic;
  font-size: 0.9375rem;
  color: #615A50;
}
body:has(#achat) .minoe-cafe {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-heading--family, inherit);
  font-weight: 700; font-size: 1.125rem; color: #1F5A6E;
}
body:has(#achat) .minoe-cafe mark {
  background: linear-gradient(to top, #FBE7A6 42%, transparent 42%);
  color: inherit; padding: 0 2px;
}

/* B7 · Offrir : carte Duo plus marquante */
body:has(#achat) .minoe-carte-duo {
  background: #FFFCF5;
  border: 2px solid #1F5A6E;
  border-radius: 20px;
  box-shadow: var(--minoe-ombre);
  padding: 18px 20px;
  gap: 18px;
}
body:has(#achat) .minoe-duo-badge {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%;
  background: #1F5A6E;
  color: #FFFCF5;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading--family, inherit);
  font-weight: 700; font-size: 1rem;
  padding: 0;
}
body:has(#achat) .minoe-carte-duo b { font-size: 1.125rem; }
body:has(#achat) .minoe-carte-duo span { font-size: 0.9375rem; }

/* B8 · retours à la ligne : titres plus larges sur ordinateur */
@media screen and (min-width: 990px) {
  body:has(#achat) .section :is(h1, h2, .h1, .h2) {
    max-width: 32ch;
    text-wrap: balance;
  }
}
body:has(#achat) .section p:not([id*="rapid_bundle"] *) { max-width: 65ch; }

/* B9 · pied de page */
body:has(#achat) .minoe-illu--decor { display: none; }

/* Leviers validés le 27/10 : photos de Trajets en 4:3, FAQ à 4 questions. */
body:has(#achat) [id$="__trajets"] .minoe-rail img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
body:has(#achat) [id$="__faq"] .lp-faq__item:nth-child(n + 5) { display: none; }

/* ==========================================================================
   20. PIED DE PAGE — partagé par tout le site (revue du 27/10)
   --------------------------------------------------------------------------
   Hors du scope `#achat` : ce pied de page s'affiche sur toutes les pages,
   pas seulement la fiche produit.

   Trois colonnes sur ordinateur — contact, politiques, logo et inscription.
   Sur mobile, l'ordre change : logo, texte, email, contact, politiques.
   ========================================================================== */
.shopify-section-group-footer-group .footer__content,
.shopify-section-group-footer-group [class*="footer"] > .page-width > div:has(> .minoe-pied-contact) {
  align-items: start;
}

@media screen and (min-width: 990px) {
  .shopify-section-group-footer-group .section > .page-width > * {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* Colonne de gauche : contact */
.minoe-pied-contact p { margin: 0 0 6px; font-size: 0.9375rem; }
.minoe-pied-contact__titre { font-weight: 700; }
.minoe-pied-contact a { color: inherit; text-underline-offset: 3px; }
.minoe-pied-contact__delai { color: #615A50; font-size: 0.875rem; }

/* Colonne de droite : logo, phrase, champ */
.minoe-pied-logo { display: block; width: 132px; height: auto; margin-bottom: 14px; }
.minoe-pied-phrase {
  font-family: var(--font-heading--family, inherit);
  font-weight: 700;
  font-size: 1.375rem;   /* 22px */
  line-height: 1.25;
  margin: 0 0 14px;
  max-width: 24ch;
}

/* Le titre « Informations » est retiré du réglage ; on masque aussi le
   conteneur vide que Horizon rend parfois à sa place. */
.shopify-section-group-footer-group [class*="menu"] > :is(h2, h3, h4, h5, h6):empty { display: none; }

/* Le conteneur réel des trois colonnes est `.footer-content`, enfant direct de
   `.section` — et non `.section > .page-width > *`, qui ne correspond à rien ici.
   Sur ordinateur, Horizon en fait déjà une grille de trois colonnes égales ;
   on n'y touche pas.

   Les trois blocs sont, dans l'ordre du document : le texte de contact
   (`…__contact`), le menu des politiques (`.menu`), puis le groupe
   logo + phrase + champ email (`.group-block`). */

/* Mobile : logo, texte, email, puis contact, puis politiques. */
@media screen and (max-width: 989px) {
  .shopify-section-group-footer-group .footer-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .shopify-section-group-footer-group .footer-content > .group-block { order: 1; }
  .shopify-section-group-footer-group .footer-content > [class*="__contact"] { order: 2; }
  .shopify-section-group-footer-group .footer-content > .menu { order: 3; }
}

/* La phrase d'accroche de la colonne de droite est demandée à 22 px. Le préréglage
   h6 du bloc la rend à 17 px : on la reprend ici, sur le bloc et sur son <p>. */
.shopify-section-group-footer-group [class*="__phrase"],
.shopify-section-group-footer-group [class*="__phrase"] p {
  font-size: 1.375rem;   /* 22 px */
  line-height: 1.25;
}

/* Le pied de page est pétrole : le logo, dessiné en pétrole, y serait
   invisible. On le passe en lait par filtre plutôt que de dupliquer l'asset. */
.shopify-section-group-footer-group .logo-block__image {
  filter: brightness(0) invert(1);
  width: 132px;
  height: auto;
}
/* Le libellé du menu n'a pas à s'afficher : le réglage « heading » est vide, mais
   blocks/menu.liquid retombe alors sur le titre de la navigation Shopify, soit
   « Menu du pied de page ». Le titre vit dans un <summary class="menu__heading">,
   pas dans un <h6>, d'où la règle précédente qui ne mordait pas.

   Le masquer est sans danger ici : le bloc est réglé sur show_as_accordion: false,
   donc le <details> est rendu avec l'attribut `open` et l'accordéon est désactivé
   jusque sur mobile. Le <summary> n'est pas un bouton d'ouverture : les liens
   restent visibles et atteignables sans lui. */
.shopify-section-group-footer-group .menu__heading { display: none; }
.shopify-section-group-footer-group .menu .details-content { margin-block-start: 0; }

/* ==========================================================================
   21. MISSION B — CORRECTIONS DE LA PAGE PRODUIT
   Tout ce bloc arrive en fin de feuille : à spécificité égale, il gagne sur
   les sections 18 et 19 sans qu'on ait à les démonter.
   ========================================================================== */

/* -- B0 · le logo de l'en-tête passe en version couleur ------------------- */
/* Le bouton du logo est en miel (#E9B43C) dans `minoe-logo-couleur.svg` ;
   le pied de page garde `minoe-logo.svg`, tout pétrole, repassé en lait par
   filtre (§20). Les deux fichiers ne doivent donc pas être confondus. */

/* -- B1 · les quatre arguments sous l'accroche ---------------------------- */
body:has(#achat) .minoe-args { display: flex; flex-direction: column; gap: 14px; }
body:has(#achat) .minoe-arg { display: flex; align-items: center; gap: 12px; }
body:has(#achat) .minoe-arg .minoe-illu--pastille {
  width: 40px; height: 40px; flex: none;
}
body:has(#achat) .minoe-arg .minoe-illu--pastille img { width: 22px; height: 22px; }
body:has(#achat) .minoe-arg__texte { min-width: 0; }
body:has(#achat) .minoe-arg__titre {
  margin: 0;
  font-family: var(--font-heading--family, inherit);
  font-weight: 700;
  font-size: 1rem;          /* 16 px */
  line-height: 1.25;
  color: #2B2823;
}
body:has(#achat) .minoe-arg__detail {
  margin: 2px 0 0;
  font-size: 0.875rem;      /* 14 px */
  line-height: 1.4;
  color: #615A50;
}

/* -- B2a · la pilule de quantité et le bouton ----------------------------- */
body:has(#achat) .buy-buttons-block,
body:has(#achat) [class*="buy-buttons"] > form > .quantity-add-to-cart,
body:has(#achat) .quantity-add-to-cart {
  display: flex; align-items: stretch; gap: 12px;
}
body:has(#achat) :is(.quantity-selector, [class*="quantity-selector"]) {
  flex: none !important;
  width: 140px !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  padding: 0 10px !important;
  background: #FFFCF5 !important;
  border: 2px solid #E5DCCB !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
body:has(#achat) :is(.quantity-minus, .quantity-plus) {
  width: 36px !important; height: 36px !important;
  flex: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: #F4EEE2 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #1F5A6E !important;
  padding: 0 !important;
}
body:has(#achat) :is(.quantity-minus, .quantity-plus) svg { stroke: #1F5A6E; color: #1F5A6E; }
body:has(#achat) .quantity-selector input {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  text-align: center !important;
  font-size: 1.125rem !important;   /* 18 px */
  font-weight: 700 !important;
  padding: 0 !important;
}
/* Le bouton prend toute la largeur restante, à la même hauteur que la pilule. */
body:has(#achat) .quantity-add-to-cart .add-to-cart-button,
body:has(#achat) [class*="buy-buttons"] button[type="submit"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
}

/* -- B2b · la ligne de paiement, sans carte ------------------------------- */
body:has(#achat) .minoe-paiement-sur {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 8px 0 0;
  font-size: 0.8125rem;     /* 13 px */
  color: #615A50;
}
body:has(#achat) .minoe-paiement-sur img { width: 16px; height: 16px; flex: none; }

/* -- B2c · un seul encadré, trois lignes de 44 px ------------------------- */
body:has(#achat) .minoe-reass-bloc {
  background: #F4EEE2;
  border-radius: 16px;
  padding: 12px 16px;
}
body:has(#achat) .minoe-reass-l {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
}
body:has(#achat) .minoe-reass-l + .minoe-reass-l { border-top: 1px solid #E5DCCB; }
body:has(#achat) .minoe-reass-l > img { width: 28px; height: 28px; flex: none; }
body:has(#achat) .minoe-reass-l > p {
  margin: 0;
  font-size: 0.875rem;      /* 14 px */
  line-height: 1.3;
  color: #2B2823;
}
/* 29/10/2026 : plus de troncature. La ligne unique coupait « livrée entre
   le 9 et l… », « Voir le… » et « dès la com… » : une date illisible et un
   lien sans libellé. Le texte revient a la ligne et s'affiche en entier,
   en 1440 comme en 390 px. La ligne garde ses 44 px minimum. */
body:has(#achat) .minoe-reass-l > p {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-reass-l { padding-block: 8px; }
}
body:has(#achat) .minoe-reass-l a { color: #615A50; text-underline-offset: 3px; }
body:has(#achat) .minoe-reass-bloc .minoe-badge-30 {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #1F5A6E; color: #FFFCF5;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0;
}

/* -- B3 · la bande défilante --------------------------------------------- */
body:has(#achat) .minoe-bande {
  height: 64px;
  min-height: 64px;
  padding-block: 0;
  display: flex;
  align-items: center;
}
body:has(#achat) .minoe-bande__piste { align-items: center; }
body:has(#achat) .minoe-bande__item {
  gap: 10px;                /* dessin et texte d'une même mention */
  /* La marge est portée À GAUCHE : le point de séparation se retrouve ainsi
     à 14 px de son texte et à 14 px du dessin suivant, le premier dessin ne
     touche pas le bord, et le raccord de la boucle reste invisible. */
  padding-inline: 14px 0;
  font-size: 1.0625rem;     /* 17 px */
}
/* Le point de séparation respire des deux côtés sans éloigner le dessin de
   son texte : c'est lui qui porte l'écart, pas la mention entière. */
body:has(#achat) .minoe-bande__item::after { margin-inline-start: 12px; }
/* B2, 28/10/2026 : le séparateur est un point de 5 px, les dessins vivent
   maintenant dans `.minoe-bande__illu`. */
body:has(#achat) .minoe-bande__item::after { width: 5px; height: 5px; }

/* -- B4a · la rotation : surtitres d'étape ------------------------------- */
body:has(#achat) .minoe-etapes { align-items: stretch; }
body:has(#achat) .minoe-carte.minoe-etape {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  height: 100%;
}
body:has(#achat) .minoe-etape__num {
  margin: 0 0 4px;
  font-family: var(--font-paragraph--family, inherit);
  font-weight: 800;
  font-size: 0.75rem;       /* 12 px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1F5A6E;
}
body:has(#achat) .minoe-etape h3 { margin: 0 0 6px; }
body:has(#achat) .minoe-etape__detail { margin: 0; color: #615A50; }

/* -- B4b · les deux phrases de fin --------------------------------------- */
body:has(#achat) .minoe-fin {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
body:has(#achat) .minoe-cite {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid #1F5A6E;
  text-align: left;
}
body:has(#achat) .minoe-cite__texte {
  margin: 0;
  font-size: 0.9375rem;     /* 15 px */
  font-style: italic;
  color: #615A50;
}
body:has(#achat) .minoe-cite__source {
  margin: 2px 0 0;
  font-size: 0.75rem;       /* 12 px */
  letter-spacing: 0.04em;
  color: #9A9287;
}
body:has(#achat) .minoe-cafe {
  display: flex; align-items: center; gap: 12px;
  background: #E3EFDD;
  border-radius: 999px;
  padding: 12px 20px;
}
body:has(#achat) .minoe-cafe .minoe-illu--pastille {
  width: 36px; height: 36px; flex: none; background: #FFFCF5;
}
body:has(#achat) .minoe-cafe .minoe-illu--pastille img { width: 20px; height: 20px; }
body:has(#achat) .minoe-cafe__texte { margin: 0; text-align: left; }
body:has(#achat) .minoe-cafe__a {
  font-family: var(--font-paragraph--family, inherit);
  font-size: 1.0625rem;     /* 17 px */
  color: #2B2823;
}
body:has(#achat) .minoe-cafe__b {
  font-family: var(--font-heading--family, inherit);
  font-weight: 700;
  font-size: 1.125rem;      /* 18 px */
  color: #1F5A6E;
}
/* Chacune sur une seule ligne dès 1100 px ; retour naturel en dessous. */
@media screen and (min-width: 1100px) {
  body:has(#achat) .minoe-cite__texte,
  body:has(#achat) .minoe-cafe__texte { white-space: nowrap; }
}
/* Le surlignage jaune de l'ancienne version n'a plus lieu d'être. */
body:has(#achat) .minoe-fin mark { background: none; color: inherit; }

/* -- B5 · offrir ---------------------------------------------------------- */
body:has(#achat) .minoe-offres {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 520px; margin: 20px 0 0;
}
body:has(#achat) .minoe-offre { display: flex; align-items: center; gap: 12px; }
body:has(#achat) .minoe-offre .minoe-illu--pastille {
  width: 40px; height: 40px; flex: none;
}
body:has(#achat) .minoe-offre .minoe-illu--pastille img { width: 22px; height: 22px; }
body:has(#achat) .minoe-offre__titre {
  margin: 0;
  font-family: var(--font-heading--family, inherit);
  font-weight: 700; font-size: 1rem; line-height: 1.25; color: #2B2823;
}
body:has(#achat) .minoe-offre__detail {
  margin: 2px 0 0; font-size: 0.875rem; line-height: 1.4; color: #615A50;
}
body:has(#achat) .minoe-carte-duo {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  max-width: 520px;
  margin: 20px 0 0;
  background: #FFFCF5;
  border: 2px solid #1F5A6E;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(43, 40, 35, 0.08);
}
body:has(#achat) .minoe-duo-badge {
  flex: none;
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #1F5A6E;
  color: #FFFCF5;
  font-family: var(--font-heading--family, inherit);
  font-weight: 700;
  font-size: 1rem;          /* 16 px */
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
body:has(#achat) .minoe-duo__titre {
  margin: 0;
  font-family: var(--font-heading--family, inherit);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: #2B2823;
}
body:has(#achat) .minoe-duo__detail {
  margin: 3px 0 0; font-size: 0.875rem; line-height: 1.35; color: #615A50;
}
/* Le bouton descend de 24 px sous la carte Duo. */
body:has(#achat) [id$="__offrir"] .button { margin-top: 24px; }

/* -- Normalisation optique des illustrations ------------------------------
   Même mesure que pour les infographies : la boîte d'encre des dix-huit
   dessins va de 42,5 px (mallette) à 59,7 px (avion) dans un viewBox 64×64,
   d'où des icônes de tailles visiblement inégales dans deux pastilles
   voisines. Le facteur ramène la plus grande dimension à 50 px ; la
   translation, en pourcentage, recentre celles dont l'encre est décalée. */
body:has(#achat) .minoe-illu img { transform-origin: 50% 50%; }
body:has(#achat) .minoe-illu img[src*="minoe-illu-avion"]     { transform: scale(.838); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-boucle"]    { transform: scale(.971); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-cadeau"]    { transform: scale(1.064); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-cadenas"]   { transform: scale(1.096); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-cafe"]      { transform: scale(1.163); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-camion"]    { transform: scale(.990); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-couture"]   { transform: scale(1.048); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-enveloppe"] { transform: scale(1.004); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-fermeture"] { transform: scale(.904); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-horloge"]   { transform: scale(1.051); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-lacet"]     { transform: translateY(5.0%) scale(1.012); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-mallette"]  { transform: scale(1.176); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-nuage"]     { transform: scale(1.046); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-page"]      { transform: scale(.980); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-pression"]  { transform: translateX(3.3%) scale(1.066); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-retour"]    { transform: translateY(3.1%) scale(.975); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-sans-pile"] { transform: translateY(-3.0%) scale(1.142); }
body:has(#achat) .minoe-illu img[src*="minoe-illu-voiture"]   { transform: translateY(-3.1%) scale(1.012); }

/* -- Reprises après recette à 1440 et 375 px ------------------------------ */

/* La pilule de quantité portait DEUX bagues : Horizon empile
   `.quantity-selector-wrapper` et `quantity-selector-component.quantity-selector`,
   tous deux de même taille, et ma règle les visait l'un comme l'autre.
   La bague reste sur l'enveloppe ; le composant interne n'est plus qu'une boîte. */
body:has(#achat) quantity-selector-component.quantity-selector {
  border: 0 !important;
  background: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 10px !important;
  box-shadow: none !important;
}
body:has(#achat) .quantity-selector-wrapper {
  padding: 0 !important;
}
/* Le bouton ne prenait pas la largeur restante : son conteneur direct
   `.product-form-buttons` ne faisait que 377 px dans une colonne de 580. */
body:has(#achat) .product-form-buttons { width: 100% !important; }

/* La ligne « Paiement sécurisé » s'aligne sur les logos de paiement,
   qui sont calés à gauche. */
body:has(#achat) .minoe-paiement-sur { justify-content: flex-start; }

/* Les trois cartes d'étape font déjà la même hauteur, mais leur contenu était
   centré verticalement : avec un détail sur deux lignes, « ÉTAPE 3 » montait
   plus haut que « ÉTAPE 1 ». On aligne les textes par le haut. */
body:has(#achat) .minoe-carte.minoe-etape { align-items: flex-start; }
body:has(#achat) .minoe-carte.minoe-etape .minoe-illu--pastille { margin-top: 2px; }

/* Le bouton de la section « offrir » : la colonne a déjà 16 px de gouttière,
   d'où 40 px au lieu des 24 demandés. */
body:has(#achat) [id$="__offrir"] .button { margin-top: 8px; }

/* Le bouton restait court : la largeur n'était pas bridée par
   `.product-form-buttons` mais par toute la chaîne au-dessus
   (`product-form-component` → `form` → le <span> qui porte le composant),
   dont aucun maillon ne s'étire dans la rangée de 580 px. On les ouvre tous. */
body:has(#achat) .buy-buttons-block > product-form-component,
body:has(#achat) .buy-buttons-block .shopify-product-form {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
/* Ces deux maillons doivent OCCUPER la place restante, pas réclamer 100 %
   de la rangée : avec width:100% ils dépassaient les 580 px disponibles une
   fois la pilule de 140 px posée, et le bouton passait à la ligne. */
body:has(#achat) .product-form-buttons > span:has(add-to-cart-component),
body:has(#achat) .product-form-buttons add-to-cart-component {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Dernier maillon : `add-to-cart-component` est un bloc, pas un conteneur flex.
   Le bouton, en largeur auto, se calait donc sur son texte. On l'étire, en
   restant dans la colonne d'achat pour ne pas toucher à la barre collante. */
body:has(#achat) [id$="__achat"] .product-details .add-to-cart-button {
  width: 100% !important;
}

/* Il restait un troisième occupant de la rangée : le bloc de paiement express
   (Shop Pay, Apple Pay…), posé par Horizon en `flex: 1 1 185px` à côté du
   bouton. « Ajouter au panier » ne pouvait donc pas prendre toute la largeur
   restante. On renvoie le paiement express à sa propre ligne — le conteneur
   est déjà en `flex-wrap: wrap`, une base de 100 % suffit. */
body:has(#achat) .product-form-buttons > .accelerated-checkout-block {
  flex: 1 1 100% !important;
}

/* Le badge de remise sortait en taupe sur le disque pétrole, donc illisible :
   la règle §19 `body:has(#achat) .minoe-carte-duo span` compte un élément de
   plus que `body:has(#achat) .minoe-duo-badge` et l'emportait donc. On repasse
   par deux classes, ce qui tranche sans toucher à l'ancienne règle.
   Nouvelle offre du 28/10/2026 : la carte n'affiche plus de badge de remise,
   les trois packs et leurs prix sont annoncés par Rapid Bundle. La règle
   reste en place pour le jour où un badge revient. */
body:has(#achat) .minoe-carte-duo .minoe-duo-badge {
  color: #FFFCF5;
  font-size: 1rem;
  font-weight: 700;
}

/* ==========================================================================
   22. MISSION B (2e passe) — favicon, bouton, encadré de réassurance
   ========================================================================== */

/* -- B2 · « Ajouter au panier » vraiment centré --------------------------- */
/* Horizon rend une icône de panier dont le SVG est masqué (`display:none`)
   mais dont le <span> conserve ses 20 px, plus 4,8 px de gouttière : le texte
   était donc poussé d'une douzaine de pixels vers la droite. On retire la
   boîte vide, dans la colonne d'achat seulement — la barre collante garde
   sa propre présentation. */
body:has(#achat) [id$="__achat"] .product-details .add-to-cart-button {
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
body:has(#achat) [id$="__achat"] .product-details .add-to-cart-icon {
  display: none !important;
}

/* -- B3 · l'encadré de réassurance, quatre lignes identiques -------------- */
body:has(#achat) .minoe-reass-l {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
/* La même pastille pour les quatre : beurre clair, 36 px, icône de 22 px. */
body:has(#achat) .minoe-reass-p {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FDF3D3;
}
body:has(#achat) .minoe-reass-p img { width: 22px; height: 22px; display: block; }

/* ==========================================================================
   23. LA VUE ZOOM DE LA GALERIE (point B4)

   Telle qu'Horizon la livre, la vue agrandie est une PILE VERTICALE : les
   douze médias sont empilés dans un <ul> de 7 344 px de haut, chacun bridé à
   612 px de large et collé à gauche, et l'on fait défiler le dialogue pour
   passer de l'un à l'autre. D'où les trois reproches : l'image est à gauche et
   non centrée, elle ne remplit pas l'écran, et « le contenu de la page
   apparaît dessous » — c'est en réalité le média suivant de la pile.

   On garde la pile, qui est ce que le JavaScript d'Horizon sait piloter
   (`scrollIntoView` sur un média ou sur une vignette), mais on donne à chaque
   élément la hauteur d'un écran et on l'y centre. Un média par écran, calé
   par `scroll-snap` : plus rien à faire défiler pour voir une image entière.
   ========================================================================== */

body:has(#achat) zoom-dialog dialog {
  background: #FFFCF5;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
}

body:has(#achat) zoom-dialog .dialog-zoomed-gallery {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un média = un écran, centré dans l'espace laissé libre par les vignettes. */
body:has(#achat) zoom-dialog .dialog-zoomed-gallery > li {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  padding: 5svh 24px;
  padding-inline-end: 128px;   /* la colonne de vignettes et sa marge */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Les deux enveloppes intermédiaires imposaient un carré (`aspect-ratio: 1/1`)
   et une largeur de 612 px. On les laisse remplir la case, sans les supprimer :
   `drag-zoom-wrapper` a besoin d'une boîte pour mesurer ses gestes. */
body:has(#achat) zoom-dialog .dialog-zoomed-gallery > li > drag-zoom-wrapper,
body:has(#achat) zoom-dialog .dialog-zoomed-gallery > li .product-media {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
}

body:has(#achat) zoom-dialog .dialog-zoomed-gallery > li img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 90svh;
  object-fit: contain;
}

/* La colonne de vignettes : à droite, centrée verticalement.
   Son conteneur était posé en `inset: 900px 0 0`, donc hors écran, hauteur
   nulle ; seule la liste débordait à droite. */
body:has(#achat) zoom-dialog .dialog-thumbnails-list-container {
  position: fixed;
  inset: auto 16px 50% auto;
  transform: translateY(50%);
  width: auto;
  height: auto;
  z-index: 2;
}
body:has(#achat) zoom-dialog .dialog-thumbnails-list {
  flex-direction: column;
  gap: 8px;
  max-height: 86svh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px;
}
body:has(#achat) zoom-dialog .dialog-thumbnails-list::-webkit-scrollbar { display: none; }

/* La croix reste en haut à droite, au-dessus de tout. */
body:has(#achat) zoom-dialog .dialog-zoomed-gallery__close-button {
  position: fixed;
  inset: 16px 16px auto auto;
  z-index: 3;
}

/* -- Mobile : une image par écran, pleine largeur, on défile à l'horizontale */
@media screen and (max-width: 749px) {
  body:has(#achat) zoom-dialog dialog {
    overflow: hidden;
    scroll-snap-type: none;
  }
  body:has(#achat) zoom-dialog .dialog-zoomed-gallery {
    display: flex;
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body:has(#achat) zoom-dialog .dialog-zoomed-gallery::-webkit-scrollbar { display: none; }
  body:has(#achat) zoom-dialog .dialog-zoomed-gallery > li {
    flex: none;
    width: 100vw;
    padding: 0 12px;
    scroll-snap-align: center;
  }
  body:has(#achat) zoom-dialog .dialog-zoomed-gallery > li img { max-height: 84svh; }
  /* Les vignettes mangeraient la moitié de l'écran : on s'en passe ici,
     le défilement horizontal suffit à passer d'une image à l'autre. */
  body:has(#achat) zoom-dialog .dialog-thumbnails-list-container { display: none; }
}

/* Rien ne doit dépasser la largeur de l'écran. La barre d'achat collante
   était posée sur 100vw, soit 394px sur un écran de 390 : ces 4px suffisaient
   à faire glisser toute la page latéralement. En `position: fixed`, un
   pourcentage se calcule sur la fenêtre : 100% vaut donc exactement 390. */
body .sticky-add-to-cart__bar {
  /* Le liseré de la barre est dessiné par un ::before posé en `inset: -2px`,
     donc 2px DEHORS de chaque côté : à 100% de large, l'ensemble réclamait
     394px sur un écran de 390. On réserve ces 4px, plus 4px d'air. */
  max-width: calc(100% - 8px);
  box-sizing: border-box;
}

/* Les carrousels débordent volontairement de leur colonne pour que les cartes
   touchent le bord de l'écran. Leur débord valait 20px alors que la page n'a
   que 16px de marge : 4px passaient au-delà de la fenêtre et toute la page
   glissait latéralement. On aligne le débord sur la marge. */
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-rail,
  body:has(#achat) .minoe-swipe {
    padding-inline: 16px;
    margin-inline: -16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LES SEPT PAGES DE POLITIQUES

   Shopify les rend hors de nos sections, dans `.shopify-policy__container`,
   et le fond pétrole du thème s'appliquait dessous : du texte encre (#2B2823)
   sur pétrole (#1F5A6E), soit un contraste de 1,3:1. Illisible.

   On repose donc le texte sur un panneau lait, en 720px de large, avec une
   hiérarchie de titres. Contrastes obtenus : texte 13,4:1, texte secondaire
   6,1:1, liens 6,3:1 — tous au-dessus des 4,5:1 exigés.
   ───────────────────────────────────────────────────────────────────────── */
/* 28/10/2026 : la page elle-même passe sur fond clair. Le panneau lait
   flottait sur le pétrole du thème — lisible, mais la page entière avait l'air
   d'une bannière. On met le sable #F4EEE2 derrière, et le panneau lait se
   détache dessus sans contraste brutal. Le pétrole reste la couleur des
   titres et des liens. */
body:has(.shopify-policy__container),
body:has(.shopify-policy__container) main {
  background: #F4EEE2 !important;
}
/* 30/10/2026 : le sable était posé sur `.page-wrapper`, qui contient AUSSI
   le pied de page — ses textes clairs devenaient illisibles sur beige. Le
   fond clair ne concerne plus que le contenu de la politique (`main`), et
   le pied de page est explicitement rendu à sa couleur, la même que sur
   toutes les autres pages. Le bouton Rétractation n'est pas touché. */
body:has(.shopify-policy__container) .shopify-section-group-footer-group,
body:has(.shopify-policy__container) .shopify-section-group-footer-group > .shopify-section,
body:has(.shopify-policy__container) .page-wrapper > footer {
  background-color: #15434F !important;
}
/* Le bandeau d'annonce est transparent : il prenait sa couleur du fond
   pétrole de la page. Celui-ci devenant clair, son texte lait se serait
   effacé — on lui rend donc son propre fond pétrole. */
body:has(.shopify-policy__container) .announcement-bar,
body:has(.shopify-policy__container) .shopify-section-group-header-group > .shopify-section:first-child {
  background-color: #1F5A6E !important;
}

.shopify-policy__container {
  max-width: 720px !important;
  margin: 40px auto 64px !important;
  padding: 40px 36px !important;
  background: #FFFCF5;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(43, 40, 35, 0.09);
  color: #2B2823;
}
.shopify-policy__title { margin: 0 0 28px; text-align: left; }
.shopify-policy__title h1 {
  font-family: var(--font-heading--family);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  color: #1F5A6E;
  margin: 0;
}
.shopify-policy__body { color: #2B2823; font-size: 1rem; line-height: 1.65; }
.shopify-policy__body h2 {
  font-family: var(--font-heading--family);
  font-size: 1.375rem; line-height: 1.25; color: #1F5A6E;
  margin: 32px 0 10px; padding-top: 18px;
  border-top: 1px solid rgba(31, 90, 110, 0.18);
}
.shopify-policy__body h3 {
  font-family: var(--font-heading--family);
  font-size: 1.0625rem; color: #2B2823; margin: 20px 0 6px;
}
.shopify-policy__body p { margin: 0 0 14px; }
.shopify-policy__body :is(ul, ol) { margin: 0 0 16px; padding-left: 22px; }
.shopify-policy__body li { margin-bottom: 7px; }
.shopify-policy__body strong { color: #2B2823; font-weight: 700; }
.shopify-policy__body a { color: #1A4E60; text-underline-offset: 3px; }
.shopify-policy__body a:hover { color: #123a47; }
@media screen and (max-width: 749px) {
  .shopify-policy__container { margin: 20px 12px 40px !important; padding: 26px 20px !important; border-radius: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   A2 — SOUS-TITRE DE SECTION, UN SEUL STYLE

   19px sur ordinateur, 17px sur mobile, Nunito Sans 500, encre #2B2823,
   interligne 1,5, 56 caractères de large, centré. 12px sous le titre,
   30px au-dessus du contenu (28 sur mobile).

   Posé ici et pas dans chaque section : la règle générale
   `body:has(#achat) .section :is(p, li)` est plus spécifique qu'une classe
   seule et reprenait la main. Le sélecteur d'attribut lui passe devant.

   `*=` et non `$=` : le script d'animation ajoute `minoe-reveal` à la classe,
   l'attribut ne se termine donc plus par `__sous` une fois la page chargée.
   ───────────────────────────────────────────────────────────────────────── */
body:has(#achat) .section :is(p[class*="__sous"], p[class*="__chapeau"], .minoe-sous) {
  max-width: 56ch;
  margin: 12px auto 30px;
  color: #2B2823;
  font-size: 1.1875rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 749px) {
  body:has(#achat) .section :is(p[class*="__sous"], p[class*="__chapeau"], .minoe-sous) {
    font-size: 1.0625rem;
    margin-bottom: 28px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   A1 — EN-TÊTE DE SECTION

   Sur-titre bleu collé au bord gauche du contenu, titre et sous-titre
   centrés. Modèle : « 8 pages détachables ».

   Exception : les sections en deux colonnes image + texte gardent tout leur
   texte aligné à gauche dans sa colonne — on les exclut nommément.
   ───────────────────────────────────────────────────────────────────────── */
body:has(#achat) .section:not(.lp-v3):not(.lp-sci) .minoe-surtitre {
  text-align: left;
  margin-inline: 0;
}
body:has(#achat) .section:not(.lp-v3) :is(h2, p[class*="__sous"], p[class*="__chapeau"], .minoe-sous) {
  text-align: center;
}
/* La section Études est en deux colonnes sous son en-tête : l'en-tête suit
   quand même la règle, le duo et les sources restent à gauche. */
body:has(#achat) .lp-sci .minoe-surtitre { text-align: left; margin-inline: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   A3 — LA PASTILLE CENTRE TOUJOURS SON DESSIN

   Les dessins étaient collés en haut à gauche de leur bulle, décalés de 11 px
   dans les sections « Ce que vous recevez », « Sa vraie taille » et
   « 8 pages ». Cause : la pastille est un <span>, et mes règles de texte de
   ces sections visaient `span` tout court — elles la passaient en
   `display: block`, ce qui annulait le centrage flex.

   Les règles de texte sont désormais ciblées (`> div > span`), et la
   géométrie de la pastille est réaffirmée ici avec assez de spécificité pour
   qu'aucune règle de section ne puisse la reprendre.
   ───────────────────────────────────────────────────────────────────────── */
body:has(#achat) .minoe-illu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
body:has(#achat) .minoe-illu--pastille.minoe-illu--xs { width: 40px; height: 40px; }
body:has(#achat) .minoe-illu--pastille.minoe-illu--sm { width: 48px; height: 48px; }
body:has(#achat) .minoe-illu--pastille.minoe-illu--md { width: 88px; height: 88px; }
body:has(#achat) .minoe-illu--pastille.minoe-illu--xs img { width: 24px; height: 24px; }
body:has(#achat) .minoe-illu--pastille.minoe-illu--sm img { width: 32px; height: 32px; }
body:has(#achat) .minoe-illu--pastille.minoe-illu--md img { width: 56px; height: 56px; }
/* Le comparatif garde ses petites pastilles. */
body:has(#achat) .lp-comp__critere .minoe-illu--pastille { width: 40px; height: 40px; }
body:has(#achat) .lp-comp__critere .minoe-illu--pastille img { width: 24px; height: 24px; }

/* ─────────────────────────────────────────────────────────────────────────
   LES IMAGES QUI SUIVENT LE COLORIS CHOISI, SANS JAVASCRIPT

   Le sélecteur de coloris du thème est fait de boutons radio qui portent le
   nom du coloris en `value`. Un `:has()` sur la page suffit donc à montrer la
   série rose et masquer la bleue. Si le navigateur ne connaît pas `:has()`,
   la série bleue reste affichée : on ne perd jamais une image.
   ───────────────────────────────────────────────────────────────────────── */
/* Spécificité : les sections posent `display: block` sur leurs images, ce qui
   l'emportait sur une classe seule. On passe donc par `body:has(#achat)`. */
body:has(#achat) .minoe-coloris--rose { display: none; }
body:has(#achat):has(input[name^="Coloris"][value="Rose licorne"]:checked) .minoe-coloris--bleu { display: none; }
body:has(#achat):has(input[name^="Coloris"][value="Rose licorne"]:checked) .minoe-coloris--rose { display: block; }

/* Le dépliant des sources de la section Études : le texte des liens reste à
   gauche, comme le duo, et non centré par la règle d'en-tête A1. */
body:has(#achat) .lp-sci :is(.lp-sci__clinique, .lp-sci__sources-repli) { text-align: left; }

/* ─────────────────────────────────────────────────────────────────────────
   B5 — « LES MOMENTS OÙ LA MALLETTE PEUT VOUS SAUVER LA MISE »

   Quatre cartes : deux par deux sur ordinateur, carrousel sur mobile (la
   classe `minoe-rail` fournit déjà le défilement horizontal). Chaque carte
   porte le moment en italique, puis la solution en gras.

   Deux scènes n'ont pas encore de photo validée — l'avion et la salle
   d'attente. Elles affichent une grande illustration au trait, à la place et
   à la taille de la photo, sur un aplat sable.
   ───────────────────────────────────────────────────────────────────────── */
body:has(#achat) .lp-mo__grille { gap: 20px; }
@media screen and (min-width: 750px) {
  body:has(#achat) .lp-mo__grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
  }
}
body:has(#achat) .lp-mo__carte { padding: 16px; display: flex; flex-direction: column; }
body:has(#achat) .lp-mo__img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 16px; display: block;
}
body:has(#achat) .lp-mo__dessin {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 16px;
  background: #F4EEE2; display: flex; align-items: center; justify-content: center;
}
body:has(#achat) .lp-mo__dessin img { width: 38%; height: auto; max-height: none; }
body:has(#achat) .lp-mo__tete { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
body:has(#achat) .lp-mo__tete h3 { margin: 0; }
body:has(#achat) .lp-mo__moment { margin: 0 0 6px; font-style: italic; color: #615A50; }
body:has(#achat) .lp-mo__solution { margin: 0; font-weight: 700; color: #2B2823; }

/* ─────────────────────────────────────────────────────────────────────────
   B1 — BLOC D'ACHAT : sous-titre et accroche mis en avant

   Le sous-titre du produit et l'accroche portent l'argument : ils passent
   devant le reste du bloc, en taille et en contraste. La ligne d'expert
   reste en petit, sous l'accroche : elle nomme la compétence travaillée
   sans jamais la promettre.
   ───────────────────────────────────────────────────────────────────────── */
body:has(#achat) .minoe-sous-produit {
  margin: 6px 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1F5A6E;
}
body:has(#achat) .minoe-accroche {
  margin: 14px 0 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
  color: #2B2823;
}
body:has(#achat) .minoe-expert {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #615A50;
}
body:has(#achat) .minoe-sous-bouton {
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #615A50;
  text-align: center;
}
body:has(#achat) .minoe-accordeons { margin-top: 10px; }
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-sous-produit { font-size: 1.0625rem; }
  body:has(#achat) .minoe-accroche { font-size: 1.0625rem; }
}

/* ==========================================================================
   21. A4 — UNE VAGUE À CHAQUE CHANGEMENT DE FOND (28/10/2026)
   --------------------------------------------------------------------------
   Avant : quatre vagues seulement (S3, S6, S11, S15). Les dix autres
   frontières étaient des bords droits, alors que la couleur changeait à
   chacune — la page avançait par à-coups.

   Maintenant : les quatorze sections qui suivent un changement de fond
   portent leur vague. Aucun fond n'a bougé : la suite lait → pétrole →
   sauge → ciel → lait → sauge → lait → sable → beurre clair → ciel →
   beurre → sable → sauge → sable → pétrole alternait déjà, et deux
   sections voisines n'ont jamais la même teinte.

   LE SENS ALTERNE. Une vague sur deux est retournée :
     « haut » — la couleur de la section MONTE dans la précédente ;
     « bas »  — la couleur de la précédente DESCEND dans la section.
   Le retournement échange aussi les deux couleurs, sans quoi la vague
   inverserait l'ordre des teintes et dessinerait une bande fausse.

   POURQUOI DEUX PSEUDO-ÉLÉMENTS : voir le bloc 11. ::before est la bande
   pleine, ::after la forme masquée posée par-dessus.

   `minoe-vague.svg` remplit le BAS de son cadre, bord supérieur ondulé :
   c'est l'état « haut ». `scaleY(-1)` donne l'état « bas ».
   ========================================================================== */body:has(#achat) .shopify-section[id$="__bande"],
body:has(#achat) .shopify-section[id$="__video"],
body:has(#achat) .shopify-section[id$="__avis"],
body:has(#achat) .shopify-section[id$="__science"],
body:has(#achat) .shopify-section[id$="__trajets"],
body:has(#achat) .shopify-section[id$="__mecanisme"],
body:has(#achat) .shopify-section[id$="__ages"],
body:has(#achat) .shopify-section[id$="__pages"],
body:has(#achat) .shopify-section[id$="__boite"],
body:has(#achat) .shopify-section[id$="__taille"],
body:has(#achat) .shopify-section[id$="__offrir"],
body:has(#achat) .shopify-section[id$="__comparatif"],
body:has(#achat) .shopify-section[id$="__garantie"],
body:has(#achat) .shopify-section[id$="__faq"],
body:has(#achat) .shopify-section[id$="__dernier-mot"]
 {
  position: relative;
  isolation: isolate;
}

body:has(#achat) .shopify-section[id$="__bande"]::before,
body:has(#achat) .shopify-section[id$="__bande"]::after,
body:has(#achat) .shopify-section[id$="__video"]::before,
body:has(#achat) .shopify-section[id$="__video"]::after,
body:has(#achat) .shopify-section[id$="__avis"]::before,
body:has(#achat) .shopify-section[id$="__avis"]::after,
body:has(#achat) .shopify-section[id$="__science"]::before,
body:has(#achat) .shopify-section[id$="__science"]::after,
body:has(#achat) .shopify-section[id$="__trajets"]::before,
body:has(#achat) .shopify-section[id$="__trajets"]::after,
body:has(#achat) .shopify-section[id$="__mecanisme"]::before,
body:has(#achat) .shopify-section[id$="__mecanisme"]::after,
body:has(#achat) .shopify-section[id$="__ages"]::before,
body:has(#achat) .shopify-section[id$="__ages"]::after,
body:has(#achat) .shopify-section[id$="__pages"]::before,
body:has(#achat) .shopify-section[id$="__pages"]::after,
body:has(#achat) .shopify-section[id$="__boite"]::before,
body:has(#achat) .shopify-section[id$="__boite"]::after,
body:has(#achat) .shopify-section[id$="__taille"]::before,
body:has(#achat) .shopify-section[id$="__taille"]::after,
body:has(#achat) .shopify-section[id$="__offrir"]::before,
body:has(#achat) .shopify-section[id$="__offrir"]::after,
body:has(#achat) .shopify-section[id$="__comparatif"]::before,
body:has(#achat) .shopify-section[id$="__comparatif"]::after,
body:has(#achat) .shopify-section[id$="__garantie"]::before,
body:has(#achat) .shopify-section[id$="__garantie"]::after,
body:has(#achat) .shopify-section[id$="__faq"]::before,
body:has(#achat) .shopify-section[id$="__faq"]::after,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::before,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::after
 {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 100vw;
  margin-inline-start: -50vw;
  height: 32px;
  pointer-events: none;
}

@media screen and (min-width: 750px) {
  body:has(#achat) .shopify-section[id$="__bande"]::before,
body:has(#achat) .shopify-section[id$="__bande"]::after,
body:has(#achat) .shopify-section[id$="__video"]::before,
body:has(#achat) .shopify-section[id$="__video"]::after,
body:has(#achat) .shopify-section[id$="__avis"]::before,
body:has(#achat) .shopify-section[id$="__avis"]::after,
body:has(#achat) .shopify-section[id$="__science"]::before,
body:has(#achat) .shopify-section[id$="__science"]::after,
body:has(#achat) .shopify-section[id$="__trajets"]::before,
body:has(#achat) .shopify-section[id$="__trajets"]::after,
body:has(#achat) .shopify-section[id$="__mecanisme"]::before,
body:has(#achat) .shopify-section[id$="__mecanisme"]::after,
body:has(#achat) .shopify-section[id$="__ages"]::before,
body:has(#achat) .shopify-section[id$="__ages"]::after,
body:has(#achat) .shopify-section[id$="__pages"]::before,
body:has(#achat) .shopify-section[id$="__pages"]::after,
body:has(#achat) .shopify-section[id$="__boite"]::before,
body:has(#achat) .shopify-section[id$="__boite"]::after,
body:has(#achat) .shopify-section[id$="__taille"]::before,
body:has(#achat) .shopify-section[id$="__taille"]::after,
body:has(#achat) .shopify-section[id$="__offrir"]::before,
body:has(#achat) .shopify-section[id$="__offrir"]::after,
body:has(#achat) .shopify-section[id$="__comparatif"]::before,
body:has(#achat) .shopify-section[id$="__comparatif"]::after,
body:has(#achat) .shopify-section[id$="__garantie"]::before,
body:has(#achat) .shopify-section[id$="__garantie"]::after,
body:has(#achat) .shopify-section[id$="__faq"]::before,
body:has(#achat) .shopify-section[id$="__faq"]::after,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::before,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::after
 {
    height: 48px;
  }
}

/* La forme : masquée, posée par-dessus la bande pleine. */body:has(#achat) .shopify-section[id$="__bande"]::before,
body:has(#achat) .shopify-section[id$="__video"]::before,
body:has(#achat) .shopify-section[id$="__avis"]::before,
body:has(#achat) .shopify-section[id$="__science"]::before,
body:has(#achat) .shopify-section[id$="__trajets"]::before,
body:has(#achat) .shopify-section[id$="__mecanisme"]::before,
body:has(#achat) .shopify-section[id$="__ages"]::before,
body:has(#achat) .shopify-section[id$="__pages"]::before,
body:has(#achat) .shopify-section[id$="__boite"]::before,
body:has(#achat) .shopify-section[id$="__taille"]::before,
body:has(#achat) .shopify-section[id$="__offrir"]::before,
body:has(#achat) .shopify-section[id$="__comparatif"]::before,
body:has(#achat) .shopify-section[id$="__garantie"]::before,
body:has(#achat) .shopify-section[id$="__faq"]::before,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::before
 { z-index: 1; }
/* 29/10/2026 : la bande pleine s'arrete 1 px avant le bas, sinon le masque
   de la vague laisse passer un filet de la couleur du dessus sur toute la
   largeur. Ce pixel decouvre le fond de la section, qui est deja le bon. */
body:has(#achat) .shopify-section[id$="__bande"]::before,
body:has(#achat) .shopify-section[id$="__video"]::before,
body:has(#achat) .shopify-section[id$="__avis"]::before,
body:has(#achat) .shopify-section[id$="__science"]::before,
body:has(#achat) .shopify-section[id$="__trajets"]::before,
body:has(#achat) .shopify-section[id$="__mecanisme"]::before,
body:has(#achat) .shopify-section[id$="__ages"]::before,
body:has(#achat) .shopify-section[id$="__pages"]::before,
body:has(#achat) .shopify-section[id$="__boite"]::before,
body:has(#achat) .shopify-section[id$="__taille"]::before,
body:has(#achat) .shopify-section[id$="__offrir"]::before,
body:has(#achat) .shopify-section[id$="__comparatif"]::before,
body:has(#achat) .shopify-section[id$="__garantie"]::before,
body:has(#achat) .shopify-section[id$="__faq"]::before,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::before
 { height: 31px; }
@media screen and (min-width: 750px) { body:has(#achat) .shopify-section[id$="__bande"]::before,
body:has(#achat) .shopify-section[id$="__video"]::before,
body:has(#achat) .shopify-section[id$="__avis"]::before,
body:has(#achat) .shopify-section[id$="__science"]::before,
body:has(#achat) .shopify-section[id$="__trajets"]::before,
body:has(#achat) .shopify-section[id$="__mecanisme"]::before,
body:has(#achat) .shopify-section[id$="__ages"]::before,
body:has(#achat) .shopify-section[id$="__pages"]::before,
body:has(#achat) .shopify-section[id$="__boite"]::before,
body:has(#achat) .shopify-section[id$="__taille"]::before,
body:has(#achat) .shopify-section[id$="__offrir"]::before,
body:has(#achat) .shopify-section[id$="__comparatif"]::before,
body:has(#achat) .shopify-section[id$="__garantie"]::before,
body:has(#achat) .shopify-section[id$="__faq"]::before,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::before
 { height: 47px; } }
body:has(#achat) .shopify-section[id$="__bande"]::after,
body:has(#achat) .shopify-section[id$="__video"]::after,
body:has(#achat) .shopify-section[id$="__avis"]::after,
body:has(#achat) .shopify-section[id$="__science"]::after,
body:has(#achat) .shopify-section[id$="__trajets"]::after,
body:has(#achat) .shopify-section[id$="__mecanisme"]::after,
body:has(#achat) .shopify-section[id$="__ages"]::after,
body:has(#achat) .shopify-section[id$="__pages"]::after,
body:has(#achat) .shopify-section[id$="__boite"]::after,
body:has(#achat) .shopify-section[id$="__taille"]::after,
body:has(#achat) .shopify-section[id$="__offrir"]::after,
body:has(#achat) .shopify-section[id$="__comparatif"]::after,
body:has(#achat) .shopify-section[id$="__garantie"]::after,
body:has(#achat) .shopify-section[id$="__faq"]::after,
body:has(#achat) .shopify-section[id$="__dernier-mot"]::after
 {
  z-index: 2;
  -webkit-mask-image: url("//minoe.fr/cdn/shop/t/5/assets/minoe-vague.svg?v=109820264075816670621793339624");
  mask-image: url("//minoe.fr/cdn/shop/t/5/assets/minoe-vague.svg?v=109820264075816670621793339624");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Les couleurs, section par section, et le sens de l'ondulation. */body:has(#achat) .shopify-section[id$="__bande"] { --minoe-dessus: #FDF3D3; }
/* bande : la couleur de la section monte dans #FDF3D3 */
body:has(#achat) .shopify-section[id$="__bande"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__bande"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__video"] { --minoe-dessus: #1F5A6E; }
/* video : #1F5A6E descend dans la couleur de la section */
body:has(#achat) .shopify-section[id$="__video"]::before { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__video"]::after  {
  background-color: var(--minoe-dessus);
  transform: scaleY(-1);
}
body:has(#achat) .shopify-section[id$="__avis"] { --minoe-dessus: #E3EFDD; }
/* avis : la couleur de la section monte dans #E3EFDD */
body:has(#achat) .shopify-section[id$="__avis"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__avis"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__science"] { --minoe-dessus: #F4EEE2; }
/* science : la couleur de la section monte dans #F4EEE2 */
body:has(#achat) .shopify-section[id$="__science"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__science"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__trajets"] { --minoe-dessus: #E4F0F7; }
/* trajets : #E4F0F7 descend dans la couleur de la section */
body:has(#achat) .shopify-section[id$="__trajets"]::before { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__trajets"]::after  {
  background-color: var(--minoe-dessus);
  transform: scaleY(-1);
}
body:has(#achat) .shopify-section[id$="__mecanisme"] { --minoe-dessus: #FFFCF5; }
/* mecanisme : la couleur de la section monte dans #FFFCF5 */
body:has(#achat) .shopify-section[id$="__mecanisme"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__mecanisme"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__ages"] { --minoe-dessus: #E3EFDD; }
/* ages : #E3EFDD descend dans la couleur de la section */
body:has(#achat) .shopify-section[id$="__ages"]::before { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__ages"]::after  {
  background-color: var(--minoe-dessus);
  transform: scaleY(-1);
}
body:has(#achat) .shopify-section[id$="__pages"] { --minoe-dessus: #FFFCF5; }
/* pages : la couleur de la section monte dans #FFFCF5 */
body:has(#achat) .shopify-section[id$="__pages"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__pages"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__boite"] { --minoe-dessus: #F4EEE2; }
/* boite : #F4EEE2 descend dans la couleur de la section */
body:has(#achat) .shopify-section[id$="__boite"]::before { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__boite"]::after  {
  background-color: var(--minoe-dessus);
  transform: scaleY(-1);
}
body:has(#achat) .shopify-section[id$="__taille"] { --minoe-dessus: #FDF3D3; }
/* taille : la couleur de la section monte dans #FDF3D3 */
body:has(#achat) .shopify-section[id$="__taille"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__taille"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__offrir"] { --minoe-dessus: #E4F0F7; }
/* offrir : #E4F0F7 descend dans la couleur de la section */
body:has(#achat) .shopify-section[id$="__offrir"]::before { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__offrir"]::after  {
  background-color: var(--minoe-dessus);
  transform: scaleY(-1);
}
body:has(#achat) .shopify-section[id$="__comparatif"] { --minoe-dessus: #FBE7A6; }
/* comparatif : la couleur de la section monte dans #FBE7A6 */
body:has(#achat) .shopify-section[id$="__comparatif"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__comparatif"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__garantie"] { --minoe-dessus: #F4EEE2; }
/* garantie : #F4EEE2 descend dans la couleur de la section */
body:has(#achat) .shopify-section[id$="__garantie"]::before { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__garantie"]::after  {
  background-color: var(--minoe-dessus);
  transform: scaleY(-1);
}
body:has(#achat) .shopify-section[id$="__faq"] { --minoe-dessus: #E3EFDD; }
/* faq : la couleur de la section monte dans #E3EFDD */
body:has(#achat) .shopify-section[id$="__faq"]::before { background-color: var(--minoe-dessus); }
body:has(#achat) .shopify-section[id$="__faq"]::after  { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__dernier-mot"] { --minoe-dessus: #F4EEE2; }
/* dernier-mot : #F4EEE2 descend dans la couleur de la section */
body:has(#achat) .shopify-section[id$="__dernier-mot"]::before { background-color: var(--minoe-fond); }
body:has(#achat) .shopify-section[id$="__dernier-mot"]::after  {
  background-color: var(--minoe-dessus);
  transform: scaleY(-1);
}


/* Le contenu passe au-dessus de la vague et lui laisse la place :
   48px de vague + 24px d'air sur ordinateur, 32px + 40px sur mobile. */
body:has(#achat) .shopify-section[id$="__bande"],
body:has(#achat) .shopify-section[id$="__video"],
body:has(#achat) .shopify-section[id$="__avis"],
body:has(#achat) .shopify-section[id$="__science"],
body:has(#achat) .shopify-section[id$="__trajets"],
body:has(#achat) .shopify-section[id$="__mecanisme"],
body:has(#achat) .shopify-section[id$="__ages"],
body:has(#achat) .shopify-section[id$="__pages"],
body:has(#achat) .shopify-section[id$="__boite"],
body:has(#achat) .shopify-section[id$="__taille"],
body:has(#achat) .shopify-section[id$="__offrir"],
body:has(#achat) .shopify-section[id$="__comparatif"],
body:has(#achat) .shopify-section[id$="__garantie"],
body:has(#achat) .shopify-section[id$="__faq"],
body:has(#achat) .shopify-section[id$="__dernier-mot"]
 > * {
  position: relative;
  z-index: 3;
}
body:has(#achat) .shopify-section[id$="__bande"] .section,
body:has(#achat) .shopify-section[id$="__video"] .section,
body:has(#achat) .shopify-section[id$="__avis"] .section,
body:has(#achat) .shopify-section[id$="__science"] .section,
body:has(#achat) .shopify-section[id$="__trajets"] .section,
body:has(#achat) .shopify-section[id$="__mecanisme"] .section,
body:has(#achat) .shopify-section[id$="__ages"] .section,
body:has(#achat) .shopify-section[id$="__pages"] .section,
body:has(#achat) .shopify-section[id$="__boite"] .section,
body:has(#achat) .shopify-section[id$="__taille"] .section,
body:has(#achat) .shopify-section[id$="__offrir"] .section,
body:has(#achat) .shopify-section[id$="__comparatif"] .section,
body:has(#achat) .shopify-section[id$="__garantie"] .section,
body:has(#achat) .shopify-section[id$="__faq"] .section,
body:has(#achat) .shopify-section[id$="__dernier-mot"] .section
 {
  padding-block-start: 72px;
}
@media screen and (min-width: 750px) {
  body:has(#achat) .shopify-section[id$="__bande"] .section,
body:has(#achat) .shopify-section[id$="__video"] .section,
body:has(#achat) .shopify-section[id$="__avis"] .section,
body:has(#achat) .shopify-section[id$="__science"] .section,
body:has(#achat) .shopify-section[id$="__trajets"] .section,
body:has(#achat) .shopify-section[id$="__mecanisme"] .section,
body:has(#achat) .shopify-section[id$="__ages"] .section,
body:has(#achat) .shopify-section[id$="__pages"] .section,
body:has(#achat) .shopify-section[id$="__boite"] .section,
body:has(#achat) .shopify-section[id$="__taille"] .section,
body:has(#achat) .shopify-section[id$="__offrir"] .section,
body:has(#achat) .shopify-section[id$="__comparatif"] .section,
body:has(#achat) .shopify-section[id$="__garantie"] .section,
body:has(#achat) .shopify-section[id$="__faq"] .section,
body:has(#achat) .shopify-section[id$="__dernier-mot"] .section
 {
    padding-block-start: 72px;
  }
}

/* La bande défilante n'a pas d'enfant `.section` : c'est le conteneur de
   section lui-même qui doit descendre sous la vague, de la hauteur exacte de
   l'ondulation — la vague est le bord haut du ruban, pas une marge. */
body:has(#achat) [id$="__bande"] { padding-block-start: 32px; }
@media screen and (min-width: 750px) {
  body:has(#achat) [id$="__bande"] { padding-block-start: 48px; }
}

/* ==========================================================================
   22. PAGE D'ACCUEIL (28/10/2026)
   --------------------------------------------------------------------------
   Toute la charte du site vit derrière `body:has(#achat)`. L'accueil porte
   donc lui aussi une ancre `#achat` — celle du bloc « Choisissez sa mallette »
   — et hérite ainsi de la typographie, des cartes, de la bande et des
   illustrations sans qu'une seule règle soit dupliquée.

   Les clés de section de l'accueil sont préfixées `accueil-` : aucune ne
   tombe dans les sélecteurs de la page produit (`[id$="__bande"]` ne peut pas
   matcher `…__accueil-bande`). Les fonds et les vagues sont donc posés ici,
   séparément, sur la même mécanique que le bloc 21.

   Suite des fonds : lait → pétrole → sauge → lait → sable → pétrole.
   ========================================================================== *//* Les fonds */
body:has(#accueil) .shopify-section[id$="__accueil-hero"] { --minoe-fond: #FFFCF5; }
body:has(#accueil) .shopify-section[id$="__accueil-banniere"] { --minoe-fond: #FFFCF5; }
body:has(#accueil) .shopify-section[id$="__accueil-bande"] { --minoe-fond: #1F5A6E; }
body:has(#accueil) .shopify-section[id$="__accueil-moments"] { --minoe-fond: #E3EFDD; }
body:has(#accueil) .shopify-section[id$="__accueil-gestes"] { --minoe-fond: #FFFCF5; }
body:has(#accueil) .shopify-section[id$="__accueil-avis"] { --minoe-fond: #F4EEE2; }
body:has(#accueil) .shopify-section[id$="__accueil-choix-entete"] { --minoe-fond: #F4EEE2; }
body:has(#accueil) .shopify-section[id$="__accueil-choix"] { --minoe-fond: #FDF3D3; }
body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"] { --minoe-fond: #1F5A6E; }

/* Les vagues, même procédé qu'au bloc 21 */body:has(#accueil) .shopify-section[id$="__accueil-bande"],body:has(#accueil) .shopify-section[id$="__accueil-moments"],body:has(#accueil) .shopify-section[id$="__accueil-gestes"],body:has(#accueil) .shopify-section[id$="__accueil-choix"],body:has(#accueil) .shopify-section[id$="__accueil-avis"],body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"] { position: relative; isolation: isolate; }
body:has(#accueil) .shopify-section[id$="__accueil-bande"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-bande"]::after,body:has(#accueil) .shopify-section[id$="__accueil-moments"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-moments"]::after,body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::after,body:has(#accueil) .shopify-section[id$="__accueil-choix"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-choix"]::after,body:has(#accueil) .shopify-section[id$="__accueil-avis"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-avis"]::after,body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::after {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline-start: 50%; width: 100vw; margin-inline-start: -50vw;
  height: 32px; pointer-events: none;
}
@media screen and (min-width: 750px) { body:has(#accueil) .shopify-section[id$="__accueil-bande"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-bande"]::after,body:has(#accueil) .shopify-section[id$="__accueil-moments"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-moments"]::after,body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::after,body:has(#accueil) .shopify-section[id$="__accueil-choix"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-choix"]::after,body:has(#accueil) .shopify-section[id$="__accueil-avis"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-avis"]::after,body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::before,
body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::after { height: 48px; } }/* Meme correctif du filet d'un pixel que sur la page produit. */
body:has(#accueil) .shopify-section[id$="__accueil-bande"]::before,body:has(#accueil) .shopify-section[id$="__accueil-moments"]::before,body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::before,body:has(#accueil) .shopify-section[id$="__accueil-choix"]::before,body:has(#accueil) .shopify-section[id$="__accueil-avis"]::before,body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::before { height: 31px; }
@media screen and (min-width: 750px) { body:has(#accueil) .shopify-section[id$="__accueil-bande"]::before,body:has(#accueil) .shopify-section[id$="__accueil-moments"]::before,body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::before,body:has(#accueil) .shopify-section[id$="__accueil-choix"]::before,body:has(#accueil) .shopify-section[id$="__accueil-avis"]::before,body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::before { height: 47px; } }
body:has(#accueil) .shopify-section[id$="__accueil-bande"]::after,body:has(#accueil) .shopify-section[id$="__accueil-moments"]::after,body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::after,body:has(#accueil) .shopify-section[id$="__accueil-choix"]::after,body:has(#accueil) .shopify-section[id$="__accueil-avis"]::after,body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::after {
  z-index: 2;
  -webkit-mask-image: url("//minoe.fr/cdn/shop/t/5/assets/minoe-vague.svg?v=109820264075816670621793339624");
  mask-image: url("//minoe.fr/cdn/shop/t/5/assets/minoe-vague.svg?v=109820264075816670621793339624");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
body:has(#accueil) .shopify-section[id$="__accueil-bande"] { --minoe-dessus: #FFFCF5; }
body:has(#accueil) .shopify-section[id$="__accueil-bande"]::before { background-color: var(--minoe-dessus); z-index: 1; }
body:has(#accueil) .shopify-section[id$="__accueil-bande"]::after  { background-color: var(--minoe-fond); }

body:has(#accueil) .shopify-section[id$="__accueil-moments"] { --minoe-dessus: #1F5A6E; }
body:has(#accueil) .shopify-section[id$="__accueil-moments"]::before { background-color: var(--minoe-fond); z-index: 1; }
body:has(#accueil) .shopify-section[id$="__accueil-moments"]::after  { background-color: var(--minoe-dessus); transform: scaleY(-1); }

body:has(#accueil) .shopify-section[id$="__accueil-gestes"] { --minoe-dessus: #E3EFDD; }
body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::before { background-color: var(--minoe-dessus); z-index: 1; }
body:has(#accueil) .shopify-section[id$="__accueil-gestes"]::after  { background-color: var(--minoe-fond); }

body:has(#accueil) .shopify-section[id$="__accueil-choix"] { --minoe-dessus: #FFFCF5; }
body:has(#accueil) .shopify-section[id$="__accueil-choix"]::before { background-color: var(--minoe-dessus); z-index: 1; }
body:has(#accueil) .shopify-section[id$="__accueil-choix"]::after  { background-color: var(--minoe-fond); }

body:has(#accueil) .shopify-section[id$="__accueil-avis"] { --minoe-dessus: #FDF3D3; }
body:has(#accueil) .shopify-section[id$="__accueil-avis"]::before { background-color: var(--minoe-dessus); z-index: 1; }
body:has(#accueil) .shopify-section[id$="__accueil-avis"]::after  { background-color: var(--minoe-fond); }

body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"] { --minoe-dessus: #F4EEE2; }
body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::before { background-color: var(--minoe-dessus); z-index: 1; }
body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"]::after  { background-color: var(--minoe-fond); }


body:has(#accueil) .shopify-section[id$="__accueil-bande"],body:has(#accueil) .shopify-section[id$="__accueil-moments"],body:has(#accueil) .shopify-section[id$="__accueil-gestes"],body:has(#accueil) .shopify-section[id$="__accueil-choix"],body:has(#accueil) .shopify-section[id$="__accueil-avis"],body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"] > * { position: relative; z-index: 3; }
body:has(#accueil) .shopify-section[id$="__accueil-bande"],body:has(#accueil) .shopify-section[id$="__accueil-moments"],body:has(#accueil) .shopify-section[id$="__accueil-gestes"],body:has(#accueil) .shopify-section[id$="__accueil-choix"],body:has(#accueil) .shopify-section[id$="__accueil-avis"],body:has(#accueil) .shopify-section[id$="__accueil-dernier-mot"] .section { padding-block-start: 72px; }

/* Le ruban défilant n'a pas d'enfant `.section` : c'est son conteneur qui
   descend sous la vague, de la hauteur exacte de l'ondulation. */
body:has(#accueil) [id$="__accueil-bande"] { padding-block-start: 32px; }
@media screen and (min-width: 750px) {
  body:has(#accueil) [id$="__accueil-bande"] { padding-block-start: 48px; }
}

/* --- La bannière : texte à gauche, photo à droite --- */
body:has(#accueil) .lp-acc-ban {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
}
@media screen and (min-width: 900px) {
  body:has(#accueil) .lp-acc-ban { grid-template-columns: 1.05fr 1fr; gap: 48px; }
}
body:has(#accueil) .lp-acc-ban__texte { text-align: left; }
body:has(#accueil) .lp-acc-ban__titre {
  font-family: var(--font-heading--family); font-weight: 700; color: #2B2823;
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.125rem); line-height: 1.12;
  margin: 0 0 16px; max-width: 18ch; text-align: left;
}
body:has(#accueil) .lp-acc-ban__sous {
  margin: 0 0 26px; max-width: 46ch; color: #2B2823;
  font-size: 1.1875rem; font-weight: 500; line-height: 1.5; text-align: left;
}
body:has(#accueil) .lp-acc-ban__bouton { min-width: 280px; }
body:has(#accueil) .lp-acc-ban__preuve {
  margin: 14px 0 0; font-size: 0.875rem; color: #615A50; text-align: left;
}
body:has(#accueil) .lp-acc-ban__photo {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 26px; box-shadow: 0 8px 28px rgba(43, 40, 35, 0.09);
}
@media screen and (max-width: 559px) {
  body:has(#accueil) .lp-acc-ban__bouton { min-width: 0; width: 100%; }
}

/* --- Le dernier mot, sur pétrole --- */
body:has(#accueil) [id$="__accueil-dernier-mot"] :is(h2, p) { color: #FFFCF5; }
body:has(#accueil) .lp-acc-fin { text-align: center; }
body:has(#accueil) .lp-acc-fin .button { margin-top: 8px; min-width: 280px; }
@media screen and (max-width: 559px) {
  body:has(#accueil) .lp-acc-fin .button { min-width: 0; width: 100%; }
}

/* --- Le carrousel d'avis Judge.me : on ne touche qu'à sa marge --- */

/* L'accueil n'a que TROIS moments (voiture, restaurant, salle d'attente)
   là où la page produit en a quatre : la grille de deux colonnes laissait un
   trou sous la première carte. Trois colonnes sur ordinateur, deux entre 750
   et 1100 px, une seule sur mobile. */
@media screen and (min-width: 1100px) {
  body:has(#accueil) [id$="__accueil-moments"] .lp-mo__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Les photos de ces cartes sont hautes : on les ramène au carré pour que les
   trois cartes tiennent dans un écran. */
body:has(#accueil) [id$="__accueil-moments"] .lp-mo__img { aspect-ratio: 1 / 1; }
/* La troisième carte porte un dessin au trait et non une photo : on lui
   donne la même boîte, sinon son texte descend plus bas que les deux autres. */
body:has(#accueil) [id$="__accueil-moments"] .lp-mo__dessin { aspect-ratio: 1 / 1; height: auto; }

/* Le dernier mot de l'accueil est sur pétrole : le sous-titre A2 y sortait en
   encre (#2B2823) et le bouton en pétrole sur pétrole, donc invisible.
   Même traitement que le dernier mot de la page produit. */
body:has(#accueil) [id$="__accueil-dernier-mot"] :is(h2, p, .minoe-sous) { color: #FFFCF5; }
body:has(#accueil) [id$="__accueil-dernier-mot"] a.button {
  background: #FFFCF5;
  color: #1F5A6E;
  border-color: #FFFCF5;
}
body:has(#accueil) [id$="__accueil-dernier-mot"] a.button:hover {
  background: #FBE7A6;
  border-color: #FBE7A6;
  color: #1F5A6E;
}

/* Le sous-titre A2 est plus spécifique que la règle ci-dessus (elle contient
   `p[class*="__sous"]`) : il sortait encore en encre sur le pétrole. On ajoute
   `.section` pour passer devant. */
body:has(#accueil) [id$="__accueil-dernier-mot"] .section :is(h2, p, .minoe-sous) { color: #FFFCF5; }

/* La galerie du produit mis en avant pose un fond lait sur son conteneur de
   diaporama, qui recouvrait le sable de la section. */
body:has(#accueil) [id$="__accueil-choix"] slideshow-container { background: transparent; }

/* ==========================================================================
   23. LE SÉLECTEUR DE QUANTITÉ DISPARAÎT (29/10/2026)
   --------------------------------------------------------------------------
   C'est Rapid qui compose le pack — une, deux ou trois mallettes. Le
   sélecteur du thème, posé juste à côté et réglé sur 2 par défaut, laissait
   croire à une seconde multiplication. Il est masqué sur la page produit et
   dans « Choisissez sa mallette » sur l'accueil ; `minoe-panier-sync.js`
   maintient la quantité envoyée à 1.

   On masque, on ne retire pas : le bloc reste dans le template et revient
   d'un clic si l'offre change un jour.
   ========================================================================== */
body:has(#achat) .quantity-selector-wrapper,
body:has(#achat) quantity-selector-component {
  display: none !important;
}
/* Le bouton d'ajout occupait la moitié de la ligne : il la prend toute. */
body:has(#achat) .product-form-buttons .add-to-cart-button { width: 100%; }

/* ==========================================================================
   24. UNE LIGNE DE PACK NE CHANGE PAS DE QUANTITÉ (29/10/2026)
   --------------------------------------------------------------------------
   Au-dessus de trois mallettes, Rapid applique le prix unitaire du Tribu à
   chaque mallette en plus : 4 mallettes étaient facturées 158,67 € au lieu
   de 178 €. Les boutons − et + disparaissent donc sur les lignes composées
   par Rapid ; le chiffre reste lisible, la corbeille reste accessible, et on
   change de pack sur la page produit.

   `minoe-panier-sync.js` pose la classe à partir de la propriété
   `__rapi_offer` lue dans /cart.js — Shopify ne rend pas dans la page les
   propriétés qui commencent par « _ ».
   ========================================================================== */
.minoe-ligne-pack :is(.quantity-minus, .quantity-plus) {
  display: none !important;
}
.minoe-ligne-pack .quantity-selector {
  min-width: 0;
  justify-content: center;
}
/* Le champ s'appelle `updates[]` sur la page /cart et `quantity` dans le
   tiroir : on vise les deux. */
.minoe-ligne-pack :is(input[name="quantity"], input[name="updates[]"]) {
  pointer-events: none;
  text-align: center;
}

/* ==========================================================================
   25. CONTACT, 404, SUIVI DE COMMANDE (29/10/2026)
   ========================================================================== */
body:has(#achat) .lp-contact { text-align: center; max-width: 760px; margin-inline: auto; }
body:has(#achat) .lp-contact .minoe-surtitre { text-align: center; margin-inline: auto; }
body:has(#achat) .lp-contact__titre {
  font-family: var(--font-heading--family); font-weight: 700; color: #2B2823;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem); line-height: 1.15;
  margin: 0 auto 14px; max-width: 20ch; text-align: center;
}
body:has(#achat) .lp-contact__faits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 30px; text-align: left;
}
@media screen and (max-width: 749px) {
  body:has(#achat) .lp-contact__faits { grid-template-columns: 1fr; }
}
body:has(#achat) .lp-contact__fait {
  display: flex; align-items: center; gap: 12px;
  background: #FFFCF5; border-radius: 20px; padding: 16px 18px;
  box-shadow: 0 6px 22px rgba(43, 40, 35, 0.07);
}
body:has(#achat) .lp-contact__fait-titre { margin: 0; font-weight: 700; color: #1F5A6E; font-size: 1rem; }
body:has(#achat) .lp-contact__fait-detail { margin: 2px 0 0; color: #615A50; font-size: 0.9375rem; }

/* Le formulaire de contact : mêmes champs que le reste du site. */
body:has(#achat) :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  border-radius: 14px; border: 1px solid rgba(31, 90, 110, 0.25);
  background: #FFFCF5; padding: 13px 15px; font-size: 1rem;
}
body:has(#achat) :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus-visible {
  outline: 2px solid #1F5A6E; outline-offset: 1px;
}

/* « Suivre votre commande » : page configurée par la fondatrice.
   Le 29/10/2026 j'y avais ajouté un fond « mallette entrouverte ». Retiré à sa
   demande : cette page ne se touche pas. Aucune règle du thème ne la vise. */

}

/* ==========================================================================
   26. LOT FINAL DE LA PAGE PRODUIT (29/10/2026)
   ========================================================================== */

/* --- 1a · barre d'annonce : le bouton du logo sépare les deux accroches,
       une seule ligne sur mobile, même taille partout ------------------- */
body .announcement-bar__text { font-size: 0.9375rem !important; line-height: 1.3; }
@media screen and (max-width: 749px) {
  body .announcement-bar__text {
    white-space: nowrap; font-size: 0.8125rem !important;
  }
  body .announcement-bar__slide { white-space: nowrap; }
}

/* --- 1b · plus une seule ligne blanche aux jonctions ------------------- */
body:has(#achat) [id^="shopify-section-template"] {
  border: 0 !important;
  outline: 0 !important;
}
body:has(#achat) [id^="shopify-section-template"] > .section,
body:has(#achat) [id^="shopify-section-template"] .section-background {
  border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important;
}
body:has(#achat) :is([id^="shopify-section-template"], .minoe-vague) svg { display: block; }
body:has(#achat) .minoe-vague { line-height: 0; font-size: 0; }
/* Le masque laissait parfois un cheveu d'un pixel sous la vague : on la fait
   dépasser d'un pixel vers le bas. */
body:has(#achat) [id^="shopify-section-template"]::after { margin-block-start: -1px; height: calc(32px + 1px); }
@media screen and (min-width: 750px) {
  body:has(#achat) [id^="shopify-section-template"]::after { height: calc(48px + 1px); }
}
body:has(#accueil) [id^="shopify-section-template"]::after { margin-block-start: -1px; }

/* --- 1c · en-têtes : sur-titre à gauche, titre et sous-titre centrés --- */
body:has(#achat) .section :is(.minoe-surtitre, .lp-gs__surtitre, .lp-v3__surtitre, .lp-sci__surtitre) {
  text-align: left !important; margin-inline: 0 !important;
}
body:has(#achat) .section :is(h2, .h2, .lp-gs__titre, .lp-v3__titre, p[class*="__sous"], p[class*="__chapeau"], .minoe-sous) {
  text-align: center !important; margin-inline: auto !important;
}

/* --- 1d · un seul style d'accordéon, chevron à droite, ligne pleine ---- */
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons, .lp-faq__panneau) details,
body:has(#achat) details.minoe-plus {
  border-bottom: 1px solid rgba(31, 90, 110, 0.18);
}
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) summary,
body:has(#achat) details.minoe-plus > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 15px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-heading--family); font-weight: 700; font-size: 1rem; color: #1F5A6E;
}
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) summary::-webkit-details-marker { display: none; }
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-inline-start: auto;
  border-right: 2px solid #1F5A6E; border-bottom: 2px solid #1F5A6E;
  transform: rotate(45deg); transition: transform 180ms ease;
}
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) details[open] > summary::after {
  transform: rotate(-135deg);
}

/* --- 2e · le haut de la fiche produit respire et se délimite ----------- */
body .minoe-entete-fixe { box-shadow: 0 1px 0 rgba(31, 90, 110, 0.10); }
body:has(#achat) [id$="__achat"] .section { padding-block-start: 32px; }
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__achat"] .section { padding-block-start: 20px; }
}
@media screen and (min-width: 990px) {
  body:has(#achat) [id$="__achat"] .product-information__details,
  body:has(#achat) [id$="__achat"] [class*="product-details"] {
    background: #FFFCF5;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(43, 40, 35, 0.06);
    padding: 30px;
  }
}

/* --- Les étoiles Judge.me, juste sous le titre ------------------------- */
body:has(#achat) .minoe-etoiles { margin: 2px 0 10px; min-height: 0; }
body:has(#achat) .minoe-etoiles:empty { display: none; }

/* --- 1a · le séparateur du bandeau est le bouton du logo --------------- */
body .minoe-sep-logo {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  margin-inline: 8px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("//minoe.fr/cdn/shop/t/5/assets/minoe-bouton-logo.svg?v=54248094933963623921793339575") no-repeat center / contain;
  mask: url("//minoe.fr/cdn/shop/t/5/assets/minoe-bouton-logo.svg?v=54248094933963623921793339575") no-repeat center / contain;
}

/* --- 1b · la bande défilante n'a plus de vague en HAUT ----------------- */
body:has(#achat) [id$="__bande"]::before,
body:has(#achat) [id$="__bande"]::after,
body:has(#accueil) [id$="__accueil-bande"]::before,
body:has(#accueil) [id$="__accueil-bande"]::after { content: none !important; }
body:has(#achat) [id$="__bande"],
body:has(#accueil) [id$="__accueil-bande"] { padding-block-start: 0 !important; }
/* La section SUIVANTE garde la sienne : c'est elle qui ferme le ruban. */

/* --- 8b · la note sur l'anglais disparaît de la section 8 pages -------- */
body:has(#achat) [id$="__pages"] .lp-pg__note { display: none !important; }

/* --- 8e · la capsule de l'offre : deux mini-cartes, sans multiplication de prix --- */
body:has(#achat) .minoe-packs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px;
}
@media screen and (max-width: 559px) { body:has(#achat) .minoe-packs { grid-template-columns: 1fr; } }
body:has(#achat) .minoe-pack {
  background: #FFFCF5; border: 2px solid rgba(31, 90, 110, 0.18);
  border-radius: 20px; padding: 16px 18px; text-align: left;
}
body:has(#achat) .minoe-pack__titre {
  margin: 0; font-family: var(--font-heading--family); font-weight: 700;
  font-size: 1.125rem; color: #1F5A6E;
}
body:has(#achat) .minoe-pack__eco {
  display: inline-block; margin: 6px 0 0; padding: 3px 10px;
  border-radius: 999px; background: #FBE7A6; color: #2B2823;
  font-weight: 800; font-size: 0.8125rem;
}
body:has(#achat) .minoe-pack__detail { margin: 8px 0 0; color: #615A50; font-size: 0.9375rem; }

/* --- 3b · les trois cartes apparaissent en cascade, et zooment au survol - */
@media (prefers-reduced-motion: no-preference) {
  body:has(#achat) [id$="__video"] .lp-v3__carte { transition: transform 220ms ease; }
  body:has(#achat) [id$="__video"] .lp-v3__carte:nth-child(2) { transition-delay: 90ms; }
  body:has(#achat) [id$="__video"] .lp-v3__carte:nth-child(3) { transition-delay: 180ms; }
  @media (hover: hover) {
    body:has(#achat) [id$="__video"] .lp-v3__carte { overflow: hidden; }
    body:has(#achat) [id$="__video"] .lp-v3__photo { transition: transform 320ms ease; }
    body:has(#achat) [id$="__video"] .lp-v3__carte:hover .lp-v3__photo { transform: scale(1.04); }
  }
}
/* --- 3b · le fil de couture qui relie les trois numéros ---------------- */
@media screen and (min-width: 990px) {
  body:has(#achat) [id$="__video"] .lp-v3__cartes { position: relative; }
  body:has(#achat) [id$="__video"] .lp-v3__carte { position: relative; }
  body:has(#achat) [id$="__video"] .lp-v3__carte:not(:last-child) .lp-v3__num::after {
    content: ""; position: absolute; top: 50%; left: calc(100% + 5px);
    width: calc(100% + 20px); height: 0;
    border-top: 2px dashed rgba(31, 90, 110, 0.45);
    pointer-events: none;
  }
  body:has(#achat) [id$="__video"] .lp-v3__num { position: relative; }
}

/* --- 8d · la section taille, plus compacte, mallette entière ----------- */
body:has(#achat) [id$="__taille"] .section { padding-block: 56px 48px; }
body:has(#achat) [id$="__taille"] img { object-fit: contain !important; background: transparent; }
body:has(#achat) [id$="__taille"] [class*="__photo"], 
body:has(#achat) [id$="__taille"] [class*="__visuel"] { aspect-ratio: 4 / 3; }

/* ==========================================================================
   27. LOT FINAL, SUITE (29/10/2026)
   ========================================================================== */

/* --- 5 · Études : la mention clinique et les sources passent à DROITE,
       sous le texte ; le visuel de gauche est carré et tient la hauteur --- */
@media screen and (min-width: 900px) {
  body:has(#achat) [id$="__science"] .lp-sci__duo { align-items: stretch; }
  body:has(#achat) [id$="__science"] :is(.lp-sci__visuel, .lp-sci__duo > img, .lp-sci__duo > figure) {
    aspect-ratio: 1 / 1; height: 100%; object-fit: cover; border-radius: 26px;
  }
}
body:has(#achat) [id$="__science"] :is(.lp-sci__clinique, .lp-sci__sources-repli) {
  grid-column: 2; max-width: 62ch; margin-inline: 0; text-align: left;
}
@media screen and (max-width: 899px) {
  body:has(#achat) [id$="__science"] :is(.lp-sci__clinique, .lp-sci__sources-repli) { grid-column: 1; }
}

/* --- 6 · Les moments : 4 cartes plus petites, défilantes sur ordinateur - */
@media screen and (min-width: 750px) {
  body:has(#achat) [id$="__trajets"] .lp-mo__grille {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, calc((100% - 40px) / 3));
    grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 20px; padding-bottom: 8px;
    scrollbar-width: thin;
  }
  body:has(#achat) [id$="__trajets"] .lp-mo__carte { scroll-snap-align: start; }
  body:has(#achat) [id$="__trajets"] .lp-mo__img,
  body:has(#achat) [id$="__trajets"] .lp-mo__dessin { aspect-ratio: 1 / 1; }
}

/* --- 7 · Trois gestes : pas de carrousel sur mobile ------------------- */
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__mecanisme"] .lp-gs__grille {
    display: grid !important; grid-template-columns: 1fr !important;
    overflow: visible !important; scroll-snap-type: none !important;
    padding-inline: 0 !important; margin-inline: 0 !important;
  }
}

/* --- 8a · Repères d'âge : frise VERTICALE sur mobile ------------------ */
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__ages"] :is(.minoe-rail, [class*="__grille"], [class*="__frise"]) {
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 0 !important; overflow: visible !important;
    padding-inline: 0 !important; margin-inline: 0 !important;
    position: relative;
  }
  /* La ligne pointillée qui court à gauche */
  body:has(#achat) [id$="__ages"] :is(.minoe-rail, [class*="__grille"], [class*="__frise"])::before {
    content: ""; position: absolute; left: 26px; top: 18px; bottom: 18px;
    border-left: 2px dashed rgba(31, 90, 110, 0.35);
  }
  body:has(#achat) [id$="__ages"] :is(.minoe-rail, [class*="__grille"], [class*="__frise"]) > * {
    display: grid !important; grid-template-columns: 56px 1fr; align-items: start;
    gap: 14px; padding-block: 14px; text-align: left !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
  }
  body:has(#achat) [id$="__ages"] .minoe-illu { position: relative; z-index: 2; }
}

/* --- 8b · Les 8 pages en carrousel sur mobile ------------------------- */
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__pages"] [class*="__grille"] {
    display: grid !important; grid-auto-flow: column !important;
    grid-auto-columns: 78%; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding-inline: 16px; margin-inline: -16px;
  }
  body:has(#achat) [id$="__pages"] [class*="__grille"] > * { scroll-snap-align: center; }
}

/* --- 10c · la capsule « mallette » ne doit plus être coupée sur mobile - */
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-carte-duo,
  body:has(#achat) .minoe-packs { max-width: 100%; overflow: visible; }
  body:has(#achat) .minoe-pack__titre { white-space: normal; overflow-wrap: anywhere; }
}

/* --- 28 · la photo d'ouverture de la section « Offrir » ----------------
   Ajoutee le 29/10/2026 avec le visuel valide (anniversaire, mallette rose).
   Le 4:5 d'origine est trop haut pour une ouverture de section : on le
   recadre en 3:2 par object-fit, le sujet etant centre dans l'image. */
body:has(#achat) .lp-offrir__photo {
  display: block; width: 100%; max-width: 560px;
  margin: 24px auto 32px; border-radius: 26px;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 38%;
}

/* --- 29 · Réseaux sociaux : pastilles de marque -----------------------
   Ajouté le 29/10/2026 avec les comptes Facebook et Instagram.
   Ce bloc n'est PAS enfermé dans `body:has(#achat)`, contrairement au
   reste du fichier : le pied de page s'affiche sur toutes les pages, y
   compris celles qui n'ont pas d'ancre #achat (panier, politiques, 404).
   Les icônes du thème sont des glyphes pleins posés à nu ; on les repose
   sur la pastille beurre du site, comme les illustrations des sections. */
.social-icons__wrapper { gap: 12px; }

.social-icons__wrapper .social-icons__icon-wrapper {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #FBE7A6;
  transition: transform .18s ease, background-color .18s ease;
}
.social-icons__wrapper .social-icons__icon-wrapper:has(.social-icons__icon path) { width: 40px; }

.social-icons__wrapper .social-icons__icon-wrapper > a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: #1F5A6E;
  --color-utilities: #1F5A6E;
}
.social-icons__wrapper .social-icons__icon { width: 20px; height: 20px; }

@media (hover: hover) {
  .social-icons__wrapper .social-icons__icon-wrapper:hover {
    background: #F4D77A; transform: translateY(-2px);
  }
}

/* La ligne « Suivez-nous » de Contact et de Notre histoire réutilise les
   mêmes pastilles, posées sous un intitulé. */
.minoe-suivez { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-block-start: 28px; }
.minoe-suivez__titre { margin: 0; font-weight: 700; color: #1F5A6E; }
.minoe-suivez__liens { display: flex; gap: 12px; }
.minoe-suivez__lien {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: #FBE7A6; color: #1F5A6E;
  transition: transform .18s ease, background-color .18s ease;
}
.minoe-suivez__lien svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) {
  .minoe-suivez__lien:hover { background: #F4D77A; transform: translateY(-2px); }
}

/* Variante discrète, en fin de page « Notre histoire » : fond pétrole,
   pastilles beurre inversées et une phrase en petit sous le bouton. */
.minoe-suivez--petit { margin-block-start: 20px; gap: 8px; }
.minoe-suivez--petit .minoe-suivez__titre { font-size: .875rem; font-weight: 600; }
.minoe-suivez--petit .minoe-suivez__lien { width: 34px; height: 34px; }
.minoe-suivez--petit .minoe-suivez__lien svg { width: 17px; height: 17px; }

/* Le dernier bloc de « Notre histoire » est sur fond pétrole : l'intitulé
   pétrole y serait illisible. On le passe en crème ; les pastilles beurre,
   elles, ressortent telles quelles sur ce fond. */
.lp-hist__bloc--sombre .minoe-suivez__titre { color: #FFFCF5; }


/* ==========================================================================
   31. DERNIÈRES RETOUCHES DE LA PAGE PRODUIT (29/10/2026)
   Chaque règle porte le numéro du point de la fondatrice.
   ========================================================================== */

/* --- 1b et 1d · le rythme et la typographie du haut du bloc d'achat ---
   Relevé en ligne le 29/10/2026 : la marge basse du h1 valait 0 px. La
   colonne n'est pas un flux de marges mais un `layout-panel-flex` dont
   l'espacement vient d'un `gap` unique — mes marges étaient donc sans
   effet. On agit sur le gap, puis on redonne l'air voulu aux seuls
   éléments concernés. */
@media screen and (min-width: 750px) {
  body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) .layout-panel-flex { gap: 10px; }

  /* 16 px avant l'accroche : elle ouvre un nouveau propos. */
  body:has(#achat) .minoe-accroche { margin-block-start: 6px; }
}

/* --- A4 · le sous-titre et l'accroche prennent du poids --------------- */
body:has(#achat) .minoe-sous-produit {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1F5A6E;
}
body:has(#achat) .minoe-accroche {
  font-size: 1.0625rem;
  color: #2B2823;
}

/* --- 1c · en-têtes : sur-titre à gauche, titre et sous-titre centrés --- */
body:has(#achat) .section :is(.minoe-surtitre, .lp-gs__surtitre, .lp-v3__surtitre, .lp-sci__surtitre) {
  text-align: left !important; margin-inline: 0 !important;
}
body:has(#achat) .section :is(h2, .h2, .lp-gs__titre, .lp-v3__titre, p[class*="__sous"], p[class*="__chapeau"], .minoe-sous) {
  text-align: center !important; margin-inline: auto !important;
}

/* --- 1d · un seul style d'accordéon, chevron à droite, ligne pleine ---- */
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons, .lp-faq__panneau) details,
body:has(#achat) details.minoe-plus {
  border-bottom: 1px solid rgba(31, 90, 110, 0.18);
}
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) summary,
body:has(#achat) details.minoe-plus > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 15px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-heading--family); font-weight: 700; font-size: 1rem; color: #1F5A6E;
}
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) summary::-webkit-details-marker { display: none; }
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-inline-start: auto;
  border-right: 2px solid #1F5A6E; border-bottom: 2px solid #1F5A6E;
  transform: rotate(45deg); transition: transform 180ms ease;
}
body:has(#achat) :is(.minoe-faq-compacte, .minoe-accordeons) details[open] > summary::after {
  transform: rotate(-135deg);
}

/* --- 2e · le haut de la fiche produit respire et se délimite ----------- */
body .minoe-entete-fixe { box-shadow: 0 1px 0 rgba(31, 90, 110, 0.10); }
body:has(#achat) [id$="__achat"] .section { padding-block-start: 32px; }
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__achat"] .section { padding-block-start: 20px; }
}
@media screen and (min-width: 990px) {
  body:has(#achat) [id$="__achat"] .product-information__details,
  body:has(#achat) [id$="__achat"] [class*="product-details"] {
    background: #FFFCF5;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(43, 40, 35, 0.06);
    padding: 30px;
  }
}

/* --- Les étoiles Judge.me, juste sous le titre ------------------------- */
body:has(#achat) .minoe-etoiles { margin: 2px 0 10px; min-height: 0; }
body:has(#achat) .minoe-etoiles:empty { display: none; }

/* --- 1a · le séparateur du bandeau est le bouton du logo --------------- */
body .minoe-sep-logo {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  margin-inline: 8px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("//minoe.fr/cdn/shop/t/5/assets/minoe-bouton-logo.svg?v=54248094933963623921793339575") no-repeat center / contain;
  mask: url("//minoe.fr/cdn/shop/t/5/assets/minoe-bouton-logo.svg?v=54248094933963623921793339575") no-repeat center / contain;
}

/* --- 1b · la bande défilante n'a plus de vague en HAUT ----------------- */
body:has(#achat) [id$="__bande"]::before,
body:has(#achat) [id$="__bande"]::after,
body:has(#accueil) [id$="__accueil-bande"]::before,
body:has(#accueil) [id$="__accueil-bande"]::after { content: none !important; }
body:has(#achat) [id$="__bande"],
body:has(#accueil) [id$="__accueil-bande"] { padding-block-start: 0 !important; }
/* La section SUIVANTE garde la sienne : c'est elle qui ferme le ruban. */

/* --- 8b · la note sur l'anglais disparaît de la section 8 pages -------- */
body:has(#achat) [id$="__pages"] .lp-pg__note { display: none !important; }

/* --- 8e · la capsule de l'offre : deux mini-cartes, sans multiplication de prix --- */
body:has(#achat) .minoe-packs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px;
}
@media screen and (max-width: 559px) { body:has(#achat) .minoe-packs { grid-template-columns: 1fr; } }
body:has(#achat) .minoe-pack {
  background: #FFFCF5; border: 2px solid rgba(31, 90, 110, 0.18);
  border-radius: 20px; padding: 16px 18px; text-align: left;
}
body:has(#achat) .minoe-pack__titre {
  margin: 0; font-family: var(--font-heading--family); font-weight: 700;
  font-size: 1.125rem; color: #1F5A6E;
}
body:has(#achat) .minoe-pack__eco {
  display: inline-block; margin: 6px 0 0; padding: 3px 10px;
  border-radius: 999px; background: #FBE7A6; color: #2B2823;
  font-weight: 800; font-size: 0.8125rem;
}
body:has(#achat) .minoe-pack__detail { margin: 8px 0 0; color: #615A50; font-size: 0.9375rem; }

/* --- 3b · les trois cartes apparaissent en cascade, et zooment au survol - */
@media (prefers-reduced-motion: no-preference) {
  body:has(#achat) [id$="__video"] .lp-v3__carte { transition: transform 220ms ease; }
  body:has(#achat) [id$="__video"] .lp-v3__carte:nth-child(2) { transition-delay: 90ms; }
  body:has(#achat) [id$="__video"] .lp-v3__carte:nth-child(3) { transition-delay: 180ms; }
  @media (hover: hover) {
    body:has(#achat) [id$="__video"] .lp-v3__carte { overflow: hidden; }
    body:has(#achat) [id$="__video"] .lp-v3__photo { transition: transform 320ms ease; }
    body:has(#achat) [id$="__video"] .lp-v3__carte:hover .lp-v3__photo { transform: scale(1.04); }
  }
}
/* --- 3b · le fil de couture qui relie les trois numéros ---------------- */
@media screen and (min-width: 990px) {
  body:has(#achat) [id$="__video"] .lp-v3__cartes { position: relative; }
  body:has(#achat) [id$="__video"] .lp-v3__carte { position: relative; }
  body:has(#achat) [id$="__video"] .lp-v3__carte:not(:last-child) .lp-v3__num::after {
    content: ""; position: absolute; top: 50%; left: calc(100% + 5px);
    width: calc(100% + 20px); height: 0;
    border-top: 2px dashed rgba(31, 90, 110, 0.45);
    pointer-events: none;
  }
  body:has(#achat) [id$="__video"] .lp-v3__num { position: relative; }
}

/* --- 8d · la section taille, plus compacte, mallette entière ----------- */
body:has(#achat) [id$="__taille"] .section { padding-block: 56px 48px; }
body:has(#achat) [id$="__taille"] img { object-fit: contain !important; background: transparent; }
body:has(#achat) [id$="__taille"] [class*="__photo"], 
body:has(#achat) [id$="__taille"] [class*="__visuel"] { aspect-ratio: 4 / 3; }

/* ==========================================================================
   27. LOT FINAL, SUITE (29/10/2026)
   ========================================================================== */

/* --- 5 · Études : la mention clinique et les sources passent à DROITE,
       sous le texte ; le visuel de gauche est carré et tient la hauteur --- */
@media screen and (min-width: 900px) {
  body:has(#achat) [id$="__science"] .lp-sci__duo { align-items: stretch; }
  body:has(#achat) [id$="__science"] :is(.lp-sci__visuel, .lp-sci__duo > img, .lp-sci__duo > figure) {
    aspect-ratio: 1 / 1; height: 100%; object-fit: cover; border-radius: 26px;
  }
}
body:has(#achat) [id$="__science"] :is(.lp-sci__clinique, .lp-sci__sources-repli) {
  grid-column: 2; max-width: 62ch; margin-inline: 0; text-align: left;
}
@media screen and (max-width: 899px) {
  body:has(#achat) [id$="__science"] :is(.lp-sci__clinique, .lp-sci__sources-repli) { grid-column: 1; }
}

/* --- 6 · Les moments : 4 cartes plus petites, défilantes sur ordinateur - */
@media screen and (min-width: 750px) {
  body:has(#achat) [id$="__trajets"] .lp-mo__grille {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, calc((100% - 40px) / 3));
    grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 20px; padding-bottom: 8px;
    scrollbar-width: thin;
  }
  body:has(#achat) [id$="__trajets"] .lp-mo__carte { scroll-snap-align: start; }
  body:has(#achat) [id$="__trajets"] .lp-mo__img,
  body:has(#achat) [id$="__trajets"] .lp-mo__dessin { aspect-ratio: 1 / 1; }
}

/* --- 7 · Trois gestes : pas de carrousel sur mobile ------------------- */
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__mecanisme"] .lp-gs__grille {
    display: grid !important; grid-template-columns: 1fr !important;
    overflow: visible !important; scroll-snap-type: none !important;
    padding-inline: 0 !important; margin-inline: 0 !important;
  }
}

/* --- 8a · Repères d'âge : frise VERTICALE sur mobile ------------------ */
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__ages"] :is(.minoe-rail, [class*="__grille"], [class*="__frise"]) {
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 0 !important; overflow: visible !important;
    padding-inline: 0 !important; margin-inline: 0 !important;
    position: relative;
  }
  /* La ligne pointillée qui court à gauche */
  body:has(#achat) [id$="__ages"] :is(.minoe-rail, [class*="__grille"], [class*="__frise"])::before {
    content: ""; position: absolute; left: 26px; top: 18px; bottom: 18px;
    border-left: 2px dashed rgba(31, 90, 110, 0.35);
  }
  body:has(#achat) [id$="__ages"] :is(.minoe-rail, [class*="__grille"], [class*="__frise"]) > * {
    display: grid !important; grid-template-columns: 56px 1fr; align-items: start;
    gap: 14px; padding-block: 14px; text-align: left !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
  }
  body:has(#achat) [id$="__ages"] .minoe-illu { position: relative; z-index: 2; }
}

/* --- 8b · Les 8 pages en carrousel sur mobile ------------------------- */
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__pages"] [class*="__grille"] {
    display: grid !important; grid-auto-flow: column !important;
    grid-auto-columns: 78%; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding-inline: 16px; margin-inline: -16px;
  }
  body:has(#achat) [id$="__pages"] [class*="__grille"] > * { scroll-snap-align: center; }
}

/* --- 10c · la capsule « mallette » ne doit plus être coupée sur mobile - */
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-carte-duo,
  body:has(#achat) .minoe-packs { max-width: 100%; overflow: visible; }
  body:has(#achat) .minoe-pack__titre { white-space: normal; overflow-wrap: anywhere; }
}

/* --- 28 · la photo d'ouverture de la section « Offrir » ----------------
   Ajoutee le 29/10/2026 avec le visuel valide (anniversaire, mallette rose).
   Le 4:5 d'origine est trop haut pour une ouverture de section : on le
   recadre en 3:2 par object-fit, le sujet etant centre dans l'image. */
body:has(#achat) .lp-offrir__photo {
  display: block; width: 100%; max-width: 560px;
  margin: 24px auto 32px; border-radius: 26px;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 38%;
}

/* --- 29 · Réseaux sociaux : pastilles de marque -----------------------
   Ajouté le 29/10/2026 avec les comptes Facebook et Instagram.
   Ce bloc n'est PAS enfermé dans `body:has(#achat)`, contrairement au
   reste du fichier : le pied de page s'affiche sur toutes les pages, y
   compris celles qui n'ont pas d'ancre #achat (panier, politiques, 404).
   Les icônes du thème sont des glyphes pleins posés à nu ; on les repose
   sur la pastille beurre du site, comme les illustrations des sections. */
.social-icons__wrapper { gap: 12px; }

.social-icons__wrapper .social-icons__icon-wrapper {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #FBE7A6;
  transition: transform .18s ease, background-color .18s ease;
}
.social-icons__wrapper .social-icons__icon-wrapper:has(.social-icons__icon path) { width: 40px; }

.social-icons__wrapper .social-icons__icon-wrapper > a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: #1F5A6E;
  --color-utilities: #1F5A6E;
}
.social-icons__wrapper .social-icons__icon { width: 20px; height: 20px; }

@media (hover: hover) {
  .social-icons__wrapper .social-icons__icon-wrapper:hover {
    background: #F4D77A; transform: translateY(-2px);
  }
}

/* La ligne « Suivez-nous » de Contact et de Notre histoire réutilise les
   mêmes pastilles, posées sous un intitulé. */
.minoe-suivez { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-block-start: 28px; }
.minoe-suivez__titre { margin: 0; font-weight: 700; color: #1F5A6E; }
.minoe-suivez__liens { display: flex; gap: 12px; }
.minoe-suivez__lien {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: #FBE7A6; color: #1F5A6E;
  transition: transform .18s ease, background-color .18s ease;
}
.minoe-suivez__lien svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) {
  .minoe-suivez__lien:hover { background: #F4D77A; transform: translateY(-2px); }
}

/* Variante discrète, en fin de page « Notre histoire » : fond pétrole,
   pastilles beurre inversées et une phrase en petit sous le bouton. */
.minoe-suivez--petit { margin-block-start: 20px; gap: 8px; }
.minoe-suivez--petit .minoe-suivez__titre { font-size: .875rem; font-weight: 600; }
.minoe-suivez--petit .minoe-suivez__lien { width: 34px; height: 34px; }
.minoe-suivez--petit .minoe-suivez__lien svg { width: 17px; height: 17px; }

/* Le dernier bloc de « Notre histoire » est sur fond pétrole : l'intitulé
   pétrole y serait illisible. On le passe en crème ; les pastilles beurre,
   elles, ressortent telles quelles sur ce fond. */
.lp-hist__bloc--sombre .minoe-suivez__titre { color: #FFFCF5; }


/* ==========================================================================
   31. DERNIÈRES RETOUCHES DE LA PAGE PRODUIT (29/10/2026)
   Chaque règle porte le numéro du point de la fondatrice.
   ========================================================================== */

/* --- 1b · le rythme du bloc d'achat ----------------------------------
   Titre, sous-titre, étoiles et accroche étaient espacés au hasard : 24 px
   ici, 8 px là. On pose un pas unique de 10 px, et 16 px avant l'accroche
   qui ouvre un nouveau propos. */
@media screen and (min-width: 750px) {
  body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) .product-details > * { margin-block: 0; }
  body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) :is(h1, [class*="__titre-court"], [class*="__etoiles"]) { margin-block-end: 10px; }
  body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) [class*="__accroche"] { margin-block-start: 16px; }
}

/* --- 1c · le bouton d'achat remonte vers le bloc Rapid ----------------
   Seule la marge EXTÉRIEURE du conteneur est touchée : aucune règle
   n'entre dans le bloc Rapid, conformément au CLAUDE.md. */
/* Mesuré en ligne le 29/10/2026 : 26 px entre la dernière carte Rapi et le
   bouton, contre 10 px de gap partout ailleurs dans la colonne. Le bloc
   Rapi ajoute sa propre marge basse ; on ne touche qu'à la marge
   EXTÉRIEURE de son conteneur, jamais à son contenu. */
body:has(#achat) [id*="rapid_bundle"] { margin-block-end: 6px; }
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) [class*="__boutons"] { margin-block-start: 0; }

/* --- 1d · le filet manquant entre deux accordéons --------------------- */
/* 29/10/2026 : la section FAQ a son propre filet bas sur `.lp-faq__item`.
   Les deux se cumulaient et faisaient une double ligne. La FAQ garde le
   sien, cette règle ne la vise plus. */
/* Mesuré en ligne : les six questions vivent dans DEUX blocs, et le filet
   manquait à la jonture — le 1er accordéon du second bloc n'a pas de
   voisin `details` avant lui. On le lui donne, et on annule l'air en trop
   pour que les six se lisent comme une seule liste. */
body:has(#achat) .minoe-accordeons { margin-block-start: 0; }

/* --- 2 · « Cette fois, sortez la mallette » ---------------------------- */
/* Ordinateur : plus de pointillés à droite des pastilles. */
@media screen and (min-width: 750px) {
  body:has(#achat) .lp-v3__carte::after,
  body:has(#achat) .lp-v3__num::after { content: none !important; }
}
/* Mobile : la pastille reste entière, à cheval sur le bas de la photo.
   Elle était rognée parce que la carte coupait ce qui dépasse. */
@media screen and (max-width: 749px) {
  body:has(#achat) .lp-v3__carte { overflow: visible; }
  body:has(#achat) .lp-v3__photo { border-end-start-radius: 0; border-end-end-radius: 0; }
  body:has(#achat) .lp-v3__num { position: relative; z-index: 4; }
}

/* --- 3 · « Ce que disent les études » ---------------------------------- */
@media screen and (min-width: 750px) {
  /* L'image prend la hauteur de toute la colonne de texte, en 1:1. */
  body:has(#achat) .lp-sci__duo { align-items: stretch; }
  body:has(#achat) .lp-sci__visuel { display: flex; }
  body:has(#achat) .lp-sci__visuel img {
    width: 100%; height: 100%;
    aspect-ratio: 1 / 1; object-fit: cover;
  }
}
/* Mobile : le chiffre centré au-dessus, le texte centré dessous. */
@media screen and (max-width: 749px) {
  body:has(#achat) .lp-sci__chiffre {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  }
  body:has(#achat) .lp-sci__chiffre > * { text-align: center; }
}

/* --- 4 · « Les moments où la mallette peut vous sauver la mise » ------- */
@media screen and (min-width: 750px) {
  /* Le sur-titre était centré alors que les autres sections l'alignent
     sur le bord gauche du contenu. */
  /* Mesuré en ligne le 29/10/2026 : le sur-titre des Moments commençait à
     335 px, celui des Études à 120. `text-align` ne suffisait pas — le
     sur-titre est dans un conteneur centré et rétréci. C'est le conteneur
     qu'il faut rendre à la pleine largeur du contenu. */
  /* Relevé dans le DOM : le bloc de l'en-tête fait 770 px et le panneau
     flex du thème le centre dans les 1200 px du contenu — d'où le décalage
     de 215 px. On rend sa largeur au bloc, le sur-titre retombe alors sur
     le bord gauche du contenu, comme celui des Études. */
  body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) .layout-panel-flex > * {
    width: 100%; max-width: none; align-self: stretch;
  }
  body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) .minoe-surtitre {
    text-align: left; margin-inline: 0;
  }
}
/* L'image des cartes était rognée en 4:5 « cover » : l'enfant et la
   mallette se faisaient couper. On la montre entière, un peu plus haute. */
/* 29/10/2026 : en 5/4 on ne distinguait plus la scène. On passe en 4/5,
   image entière, sur un fond lait quand elle ne remplit pas le cadre. */
body:has(#achat) .lp-mo__img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #FFFCF5;
  height: auto;
}
/* Le bouton de la section avait été étiré sur toute la largeur par une
   règle générale. Il revient à sa largeur naturelle, centré. */
body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) .button,
body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) a.button {
  width: auto !important;
  max-width: none;
  display: inline-block;
  margin-inline: auto;
}
body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) .layout-panel-flex > *:has(> .button) {
  text-align: center;
}

/* --- 5 · repères d'âge, mobile ---------------------------------------
   Les traits verticaux venaient d'une mise en colonne. On reprend la
   frise horizontale de l'ordinateur, en carrousel au doigt. */
@media screen and (max-width: 749px) {
  body:has(#achat) .lp-frise {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 46%;
    grid-template-columns: none !important;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 16px; margin-inline: -16px;
    background-image: repeating-linear-gradient(to right, #C9BFAE 0 10px, transparent 10px 20px);
    background-size: 100% 2px;
    background-position: 0 30px;
    background-repeat: no-repeat;
  }
  body:has(#achat) .lp-frise__etape {
    scroll-snap-align: center;
    display: flex !important; flex-direction: column; align-items: center; text-align: center;
    border: 0 !important; border-inline: 0 !important;
    padding-inline: 8px;
  }
  body:has(#achat) .lp-frise__etape::before,
  body:has(#achat) .lp-frise__etape::after { content: none !important; }
  body:has(#achat) .lp-frise__pastille { margin-inline: auto; }
  body:has(#achat) .lp-frise__texte { margin-block-start: 10px; }
}

/* --- 7 · section taille ------------------------------------------------ */
@media screen and (min-width: 750px) {
  /* Même hauteur pour la photo et les cotes, les cotes un peu plus larges
     mais nettement plus compactes qu'avant. */
  body:has(#achat) .lp-tl__duo {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: stretch;
  }
  /* 29/10/2026 : la fondatrice accepte de ne voir qu'une partie de la
     mallette. Les deux blocs font donc exactement la même hauteur, et la
     photo remplit le sien en `cover`. */
  body:has(#achat) .lp-tl__photo {
    display: flex; background: #FFFCF5;
    aspect-ratio: auto; align-self: stretch; height: 100%;
  }
  /* La mallette entière, poignées et quatre bords compris : le `cover` du
     snippet la coupait à droite. `!important` parce que la feuille de la
     section est injectée après celle-ci. */
  body:has(#achat) .lp-tl__photo img {
    width: 100%; height: 100%;
    object-fit: cover !important;
    object-position: center !important;
  }
  body:has(#achat) .lp-tl__duo { align-items: stretch; }
  body:has(#achat) .lp-tl__plan { padding: 22px 24px; }
  body:has(#achat) .lp-tl__cote { font-size: .9375rem; }
  body:has(#achat) .lp-tl__fait { padding-block: 8px; }
}
@media screen and (max-width: 749px) {
  /* La section faisait deux écrans. La photo quitte le flux et passe en
     fond, très atténuée : le texte garde tout son contraste. */
  body:has(#achat) .lp-tl__photo { display: none; }
  body:has(#achat) [id$="__taille"] .lp-tl {
    position: relative; isolation: isolate;
  }
  body:has(#achat) [id$="__taille"] .lp-tl::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: var(--minoe-taille-fond);
    background-size: contain; background-position: center; background-repeat: no-repeat;
    opacity: .17;
  }
}

/* --- 8 · section Offrir (repris le 29/10/2026) ------------------------
   Le premier essai pilotait la grille par `:has()` sur le conteneur du
   bloc : l'image se retrouvait en bande étroite et le texte écrasé. On
   pose maintenant deux colonnes explicites dans le markup — image à
   gauche, colonne de texte à droite — et le CSS ne fait plus que les
   dimensionner. */
body:has(#achat) .lp-offrir__photo {
  display: block; width: 100%;
  max-width: none;
  margin: 0 0 24px;
  border-radius: 26px;
  aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 38%;
}
@media screen and (min-width: 750px) {
  /* Le groupe « duo » du thème partage encore sa largeur en deux, alors
     que l'image de gauche est masquée : la colonne de texte restait à
     600 px sur 1200. On lui rend toute la largeur du contenu. */
  body:has(#achat) [id$="__offrir"] .group-block,
  body:has(#achat) [id$="__offrir"] .group-block-content {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  body:has(#achat) .lp-offrir {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 40px;
    align-items: stretch;
  }
  /* Le bouton est un bloc du thème, hors du markup des deux colonnes :
     on le cale sous la colonne de texte plutôt que sous l'image. */
  body:has(#achat) [id$="__offrir"] .group-block a.button,
  body:has(#achat) [id$="__offrir"] .group-block .button {
    margin-inline-start: calc(45% + 40px);
  }
  body:has(#achat) .lp-offrir__photo {
    margin: 0;
    height: 100%;
    /* L'image doit être ENTIÈRE : la grand-mère et la mallette ne se font
       pas couper pour remplir la colonne. */
    aspect-ratio: auto;
    object-fit: contain;
    background: #FFFCF5;
    align-self: start;
  }
  body:has(#achat) .lp-offrir__texte { align-self: center; }
}

/* --- 9 · FAQ, premier onglet entier sur mobile ------------------------- */
@media screen and (max-width: 749px) {
  body:has(#achat) .lp-faq__onglets {
    overflow-x: auto;
    scroll-padding-inline-start: 16px;
    padding-inline: 16px; margin-inline: -16px;
    justify-content: flex-start;
  }
  body:has(#achat) .lp-faq__onglet { flex: 0 0 auto; }
}

/* --- 10a · la section des avis : fond, largeur, air ---------------------
   Réécrit le 29/10/2026. La version précédente masquait le titre de
   Judge.me et remettait en page son en-tête : les chiffres de
   l'histogramme finissaient par chevaucher les barres. On ne touche plus
   ni à l'en-tête, ni à l'histogramme, ni à la disposition — c'est le rendu
   natif de l'application. Il ne reste que l'air autour et la largeur. */
body:has(#achat) :is([id$="__avis"], [id$="accueil-avis"]) .section { padding-block: 44px; }
@media screen and (min-width: 750px) {
  body:has(#achat) :is([id$="__avis"], [id$="accueil-avis"]) .section { padding-block: 58px; }
}

/* --- 10b · habillage seul : aucune mise en page n'est imposée ----------
   La fondatrice choisira l'affichage (grille, liste, carrousel) dans
   Judge.me après la publication. On ne fixe donc ni colonnes, ni ordre,
   ni masquage : seulement la police, les couleurs et la carte. */

/* --- 1a · la galerie couvre au moins la hauteur de la colonne --------- */
body:has(#achat) [data-minoe-cachee] { display: none !important; }
body:has(#achat) .minoe-voir-photos {
  grid-column: 1 / -1;
  display: block; width: 100%;
  margin-block-start: 12px; padding: 13px 20px;
  border: 1px solid #1F5A6E; border-radius: 999px;
  background: transparent; color: #1F5A6E;
  font-weight: 700; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) {
  body:has(#achat) .minoe-voir-photos:hover { background: #1F5A6E; color: #FFFCF5; }
}
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-voir-photos { display: none; }
}

/* --- A2 · la galerie suit le coloris ----------------------------------
   Ajouté le 29/10/2026. Les deux galeries partageaient les 20 médias : on
   voyait « Ce que contient la mallette » en rose puis en bleu à la suite.
   Le script range chaque média par son texte alternatif ; ce qui appartient
   à l'autre coloris sort de la galerie, sans être supprimé. */
body:has(#achat) [data-minoe-autre-coloris] { display: none !important; }


/* --- 5 bis · la note de la section taille ------------------------------
   Ajouté le 29/10/2026. « Dimensions du produit fini… » flottait à gauche,
   collée aux cartes. Elle se centre sous elles, en petit et en taupe, la
   pastille alignée sur la PREMIÈRE ligne du texte et non sur son milieu. */
body:has(#achat) .lp-tl__note {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 10px;
  margin: 22px auto 0; max-width: 560px;
  font-size: .8125rem; line-height: 1.5; color: #615A50;
  text-align: left;
}
body:has(#achat) .lp-tl__note :is(svg, img, .minoe-illu) { flex: 0 0 auto; margin-block-start: 1px; }

/* --- 5 ter · le fond mobile de la section taille -----------------------
   La mallette en filigrane était trop petite et trop pâle pour se lire.
   On l'agrandit et on monte à 25 %, ce qui laisse le texte très au-dessus
   de 4,5:1 sur le bleu ciel. */
@media screen and (max-width: 749px) {
  body:has(#achat) [id$="__taille"] .lp-tl::before {
    background-size: 128% auto;
    background-position: center 46%;
    opacity: .25;
  }
}

/* --- 6 · Offrir : l'image remplit son cadre ----------------------------
   Les bandes lait en haut et en bas venaient du `contain`. La fondatrice
   accepte le recadrage : on passe en `cover`, même hauteur que la colonne
   de texte. */
@media screen and (min-width: 750px) {
  body:has(#achat) .lp-offrir__photo {
    object-fit: cover !important;
    object-position: 50% 35%;
    height: 100%; align-self: stretch;
    background: none;
  }
  body:has(#achat) .lp-offrir { align-items: stretch; }
}

/* --- 8 · FAQ mobile : le premier onglet entier -------------------------
   Repris le 29/10/2026. La marge négative compensait le padding et
   ramenait l'onglet sous le bord. On garde le padding, sans la compenser,
   et on remet le défilement à zéro au chargement. */
@media screen and (max-width: 749px) {
  /* Mesuré en ligne : le premier onglet commençait à -22 px. La feuille de
     la section pose une marge négative pour sortir le rail de la colonne ;
     elle gagnait sur la mienne. On l'annule explicitement. */
  body:has(#achat) .lp-faq__onglets {
    overflow-x: auto;
    padding-inline: 16px !important;
    margin-inline: 0 !important;
    scroll-padding-inline-start: 16px;
    justify-content: flex-start !important;
    scroll-snap-type: x proximity;
  }
  body:has(#achat) .lp-faq__onglets > :first-child { margin-inline-start: 0 !important; }
  body:has(#achat) .lp-faq__onglet { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Le retour à la ligne du sous-titre d'Offrir n'existe que sur mobile :
   sur ordinateur la phrase tient largement sur une ligne. */
.minoe-br-mobile { display: none; }
@media screen and (max-width: 749px) { .minoe-br-mobile { display: inline; } }

/* La vidéo de la mosaïque se comporte comme les images qui l'entourent. */
body:has(#achat) .minoe-media-video {
  display: block; width: 100%;
  /* Mesuré en ligne : sans rapport explicite la vidéo tombait à 0 px de
     haut sur ordinateur — son conteneur ne lui donne pas de hauteur. */
  height: auto;
  aspect-ratio: var(--ratio, 0.8);
  object-fit: cover;
  border-radius: inherit;
}

/* Sur ordinateur, la mosaïque donne une hauteur fixe à chaque case et pose
   ses images en absolu : une vidéo en flux normal y tombait à 0 px de haut.
   Elle se range donc comme les images, en absolu dans sa case. */
@media screen and (min-width: 750px) {
  body:has(#achat) .product-media:has(> .minoe-media-video) { position: relative; height: 100%; }
  body:has(#achat) .minoe-media-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
  }
}


/* --- 11c et 11d · l'en-tête de « Choisissez sa mallette » --------------
   Ajouté le 29/10/2026. L'en-tête vivait dans la colonne de droite ; il
   passe au-dessus de la section, centré sur toute la largeur. Les avis,
   l'en-tête et la section partagent le même sable : aucune vague entre
   eux, et donc aucun vide à combler. */
body:has(#achat) [id$="accueil-choix-entete"] .section { padding-block: 40px 8px; }
body:has(#achat) .minoe-entete-choix { text-align: center; max-width: 760px; margin-inline: auto; }
body:has(#achat) [id$="accueil-choix"] .section { padding-block-start: 0; }
/* Le bandeau « Essayez 30 jours » ouvre déjà la colonne : pas d'air en trop. */
body:has(#achat) [id$="accueil-avis"] .section { padding-block-end: 32px; }


/* ==========================================================================
   32. DERNIÈRES CORRECTIONS AVANT MISE EN LIGNE (29/10/2026)
   ========================================================================== */

/* --- 5 · un seul filet entre les questions ----------------------------
   Relevé en ligne : chaque <details> portait À LA FOIS un filet bas
   d'origine et le filet haut que j'avais ajouté — deux lignes entre
   chaque question. On ne garde que le filet BAS, partout, et on l'enlève
   à la toute dernière question de la liste. */
body:has(#achat) :is(.minoe-accordeons, .minoe-faq-compacte) > details {
  border-block-start: 0 !important;
  border-block-end: 1px solid rgb(31 90 110 / .14) !important;
}
body:has(#achat) .minoe-accordeons > details:last-of-type { border-block-end: 0 !important; }
/* La FAQ du bas a la même règle, et son propre filet suffit. */
body:has(#achat) .lp-faq__item { border-block-start: 0 !important; }

/* --- 4 et 6 · « Les moments » : quatre cartes, photos en portrait -----
   Les règles s'étaient accumulées (2 colonnes, 3 colonnes sur l'accueil,
   carrousel à 3 visibles). Ce bloc tranche, pour les deux pages. */
@media screen and (min-width: 750px) {
  body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) .lp-mo__grille,
  body:has(#accueil) [id$="accueil-moments"] .lp-mo__grille {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    gap: 18px;
  }
}
/* Photos en portrait 3:4, nettement plus grandes, image entière. */
body:has(#achat) .lp-mo__img,
body:has(#accueil) [id$="accueil-moments"] .lp-mo__img {
  aspect-ratio: 3 / 4 !important;
  object-fit: contain;
  background: #FFFCF5;
  width: 100%; height: auto;
}
/* Mobile : carrousel, une carte et demie visible. */
@media screen and (max-width: 749px) {
  body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) .lp-mo__grille {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 72%;
    grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding-inline: 16px; margin-inline: -16px;
  }
  body:has(#achat) :is([id$="__trajets"], [id$="accueil-moments"]) .lp-mo__carte { scroll-snap-align: center; }
}

/* --- 3 · aucune case vide dans la mosaïque -----------------------------
   Ajouté le 29/10/2026. La première image occupe les deux colonnes : si
   la galerie est DÉPLIÉE et que le total est pair, la dernière rangée
   reste à moitié vide. On laisse alors la dernière vignette occuper les
   deux colonnes plutôt que de laisser un trou. */
@media screen and (min-width: 750px) {
  body:has(#achat) .media-gallery--large-first-image .media-gallery__grid > .product-media-container:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   33. FOND BEURRE DU BLOC D'ACHAT + CORRECTIFS DE L'ACCUEIL (29/10/2026)
   ========================================================================== */

/* --- 5 · le bloc d'achat passe sur le beurre de « Ce que vous recevez »
   #FDF3D3, exactement le même code que la section `boite`. La carte de la
   colonne de droite, elle, reste crème : c'est elle qui porte le texte. */
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) { --minoe-fond: #FDF3D3; }
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) > .section,
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) .section { background-color: #FDF3D3; }
/* La carte claire de la colonne de droite garde le crème. */
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) .minoe-carte-achat,
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) [class*="product-details"] > .layout-panel-flex {
  background-color: #FFFCF5;
}

/* --- 1a · le rectangle clair en haut de la galerie de l'accueil --------
   La galerie est en `sticky-content` : sur l'accueil, la section étant
   plus haute qu'elle, le calage collant laissait une large bande vide
   au-dessus. On rend la galerie normale sur cette section. */
body:has(#achat) .shopify-section[id$="accueil-choix"] .media-gallery,
body:has(#achat) .shopify-section[id$="accueil-choix"] .sticky-content {
  position: static !important;
  top: auto !important;
}

/* --- 1b · aucune vague à l'intérieur du bloc d'achat ------------------- */
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) .minoe-vague,
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) .minoe-bord { display: none !important; }
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) [class*="product-details"]::before,
body:has(#achat) :is(.shopify-section[id$="__achat"], .shopify-section[id$="accueil-choix"]) [class*="product-details"]::after { content: none !important; }

/* ==========================================================================
   34. BULLES « STORIES » (29/10/2026)
   Les libellés sous les cercles disparaissent : une seule phrase les
   introduit. Chaque cercle porte sa vidéo, posée telle quelle — le rond
   est fait en CSS, le fichier n'est pas recadré.
   ========================================================================== */

body:has(#achat) .minoe-stories-bloc { margin-block-start: 18px; }
body:has(#achat) .minoe-stories__phrase {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-heading--family), "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;              /* la base du theme n'est pas a 16 px : on fixe la valeur */
  color: #2B2823;
}
body:has(#achat) .minoe-stories {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 18px; flex-wrap: wrap;
}
body:has(#achat) .minoe-story {
  border: 0; background: none; padding: 0; cursor: pointer;
  line-height: 0;
}
body:has(#achat) .minoe-story__rond {
  display: block;
  width: 86px; height: 86px;
  border-radius: 50%;
  overflow: hidden;                 /* c'est lui qui fait le rond */
  box-shadow: 0 0 0 3px #1F5A6E, 0 0 0 6px #FFFCF5;   /* anneau pétrole */
  transition: transform .18s ease;
}
@media (hover: hover) {
  body:has(#achat) .minoe-story:hover .minoe-story__rond { transform: scale(1.05); }
}
body:has(#achat) .minoe-story__video {
  width: 100%; height: 100%;
  object-fit: cover;                /* le recadrage est visuel, pas dans le fichier */
  display: block;
}
body:has(#achat) .minoe-story__nom { display: none; }

/* --- Le lecteur plein écran ------------------------------------------- */
.minoe-visio {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgb(23 20 17 / .92);
  padding: 24px;
}
.minoe-visio[hidden] { display: none !important; }
.minoe-visio__video {
  max-width: min(92vw, 520px);
  max-height: 86vh;
  width: auto; height: auto;
  border-radius: 18px;
  background: #000;
}
.minoe-visio button {
  position: absolute;
  border: 0; cursor: pointer;
  background: rgb(255 252 245 / .92);
  color: #1F5A6E;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.minoe-visio__fermer { top: 20px; right: 20px; width: 46px; height: 46px; font-size: 22px; line-height: 1; }
.minoe-visio__prec, .minoe-visio__suiv { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.minoe-visio__prec { left: 16px; }
.minoe-visio__suiv { right: 16px; }
.minoe-visio svg { width: 22px; height: 22px; }
@media screen and (max-width: 749px) {
  .minoe-visio__prec, .minoe-visio__suiv { width: 44px; height: 44px; }
  .minoe-visio__prec { left: 8px; }
  .minoe-visio__suiv { right: 8px; }
}

/* 29/10/2026 : les media hors des 13 de la galerie commune. */
body:has(#achat) [data-minoe-hors-galerie] { display: none !important; }

/* ==========================================================================
   35. LES PAGES DE POLITIQUES (29/10/2026)
   --------------------------------------------------------------------------
   Ces pages sont servies par Shopify, hors de nos sections : elles n'ont ni
   `#achat` ni `#accueil`. La regle ci-dessous n'est donc pas sous ce verrou.

   Le tableau des donnees de la politique de confidentialite debordait de
   l'ecran sur mobile (507 px dans 390). On le contraint a la largeur de la
   page et on laisse les mots revenir a la ligne. Aucun texte n'est touche.
   ========================================================================== */
.shopify-policy__body table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.shopify-policy__body :is(th, td) {
  overflow-wrap: anywhere;
  vertical-align: top;
}
@media screen and (max-width: 749px) {
  .shopify-policy__body :is(th, td) { font-size: 0.875rem; padding: 6px 8px; }
}

/* ==========================================================================
   36. LA VISIONNEUSE DE LA GALERIE (29/10/2026)
   --------------------------------------------------------------------------
   Une seule photo a la fois, ENTIERE (contain), centree, 90 % de l'ecran au
   maximum. Croix en haut a droite, fleches sur les cotes, miniatures en bas.
   Ni debordement, ni defilement.
   ========================================================================== */
.minoe-zoom {
  position: fixed; inset: 0; z-index: 10000;
  display: grid;
  grid-template-rows: 1fr auto;
  background: rgb(23 20 17 / .94);
  padding: 56px 16px 12px;
  overflow: hidden;
}
.minoe-zoom[hidden] { display: none !important; }
.minoe-zoom__scene {
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.minoe-zoom__media {
  max-width: 90vw;
  max-height: 90%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #FFFCF5;
}
.minoe-zoom__vignettes {
  display: flex; gap: 8px; justify-content: center;
  padding: 12px 4px 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.minoe-zoom__vignette {
  flex: none; width: 60px; height: 60px; padding: 0;
  border: 2px solid transparent; border-radius: 10px;
  background: none; cursor: pointer; overflow: hidden;
  opacity: .62; transition: opacity .15s ease, border-color .15s ease;
}
.minoe-zoom__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.minoe-zoom__vignette[aria-current="true"] { opacity: 1; border-color: #FFFCF5; }
@media (hover: hover) { .minoe-zoom__vignette:hover { opacity: 1; } }

.minoe-zoom button:not(.minoe-zoom__vignette) {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: #FFFCF5; color: #1F5A6E;
  cursor: pointer;
}
.minoe-zoom__fermer { top: 14px; right: 16px; width: 46px; height: 46px; font-size: 24px; line-height: 1; }
.minoe-zoom__prec, .minoe-zoom__suiv { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.minoe-zoom__prec { left: 16px; }
.minoe-zoom__suiv { right: 16px; }
.minoe-zoom svg { width: 22px; height: 22px; }

@media screen and (max-width: 749px) {
  .minoe-zoom { padding: 52px 10px 8px; }
  .minoe-zoom__media { max-width: 92vw; }
  .minoe-zoom__vignette { width: 48px; height: 48px; }
  .minoe-zoom__prec, .minoe-zoom__suiv { width: 42px; height: 42px; }
  .minoe-zoom__prec { left: 6px; }
  .minoe-zoom__suiv { right: 6px; }
  .minoe-zoom__vignettes { justify-content: flex-start; }
}

/* ==========================================================================
   37. ACCUEIL · « LES MOMENTS » (29/10/2026)
   --------------------------------------------------------------------------
   L'espace sauge entre la vague et le sur-titre « ON CONNAÎT CES MOMENTS »
   faisait 94 px : on le ramene a peu pres de moitie, sans que le sur-titre
   vienne toucher l'ondulation.
   ========================================================================== */
body:has(#accueil) .shopify-section[id$="__accueil-moments"] .section {
  padding-block-start: 16px;
}
@media screen and (max-width: 749px) {
  body:has(#accueil) .shopify-section[id$="__accueil-moments"] .section {
    padding-block-start: 0;
  }
}

/* ==========================================================================
   38. LA CAPSULE DE RÉASSURANCE DU PANIER (29/10/2026)
   --------------------------------------------------------------------------
   Le tiroir du panier et la page /cart vivent hors de nos sections : la
   page /cart n'a pas d'ancre `#achat`. Les mêmes règles sont donc reposées
   ici sans ce verrou, à l'identique de la capsule de la fiche produit.
   Aucun retour à la ligne n'est bridé : le texte s'affiche en entier.
   ========================================================================== */
.minoe-reass-panier { margin-block: 12px 14px; }
.minoe-reass-panier .minoe-reass-bloc {
  background: #F4EEE2;
  border-radius: 16px;
  padding: 10px 14px;
}
.minoe-reass-panier .minoe-reass-l {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding-block: 6px;
}
.minoe-reass-panier .minoe-reass-l + .minoe-reass-l { border-top: 1px solid #E5DCCB; }
.minoe-reass-panier .minoe-reass-p {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #FDF3D3;
}
.minoe-reass-panier .minoe-reass-p img { width: 20px; height: 20px; display: block; }
.minoe-reass-panier .minoe-reass-l > p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #2B2823;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}
.minoe-reass-panier .minoe-reass-l a { color: #615A50; text-underline-offset: 3px; }

/* Les logos de paiement du panier : memes logos que la fiche produit,
   centres, juste sous le bouton « Payer ». 29/10/2026. */
.minoe-paiements-panier { width: 100%; margin-block-start: 10px; }
.minoe-paiements-panier__liste {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin: 0; padding: 0; list-style: none;
}
.minoe-paiements-panier__liste li { display: flex; }
.minoe-paiements-panier__liste svg { width: 38px; height: 24px; display: block; }
.minoe-reass-panier--tiroir { margin-block: 10px 4px; }

/* 30/10/2026 : la derniere vignette prend les deux colonnes quand la rangee
   serait autrement a moitie vide. */
body:has(#achat) ul.media-gallery__grid > li[data-minoe-large] { grid-column: 1 / -1; }

/* ==========================================================================
   39. ACCUEIL · LE RÉSUMÉ DE L'OFFRE (30/10/2026)
   --------------------------------------------------------------------------
   Rapi ne tient pas sur l'accueil : dès qu'on choisit « Rose licorne », son
   bloc se vide (il s'annonce en page d'index SANS identifiant de produit —
   voir docs/secours-duo-accueil.md). Son bloc et le bouton d'ajout sont donc
   MASQUÉS sur l'accueil, jamais supprimés, et remplacés par ce résumé qui
   renvoie à la fiche produit, là où Rapi fonctionne.

   Classes `minoe-offre__*` : aucune règle ne vise une classe de Rapi.
   ========================================================================== */
body:has(#accueil) .minoe-offre { display: grid; gap: 10px; }
body:has(#accueil) .minoe-offre__titre {
  margin: 0 0 2px; text-align: center;
  font-family: var(--font-heading--family); font-weight: 700;
  font-size: 1.0625rem; color: #2B2823;
}
body:has(#accueil) .minoe-offre__ligne {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 2px solid #E5DCCB; border-radius: 14px;
  background: #FFFCF5; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
body:has(#accueil) .minoe-offre__ligne--reco { border-color: #1F5A6E; }
@media (hover: hover) {
  body:has(#accueil) .minoe-offre__ligne:hover { border-color: #1F5A6E; transform: translateY(-1px); }
}
body:has(#accueil) .minoe-offre__nom {
  font-weight: 700; font-size: 1rem; color: #2B2823; line-height: 1.25;
}
body:has(#accueil) .minoe-offre__nom small {
  display: block; margin-top: 2px;
  font-weight: 500; font-size: 0.8125rem; color: #615A50;
}
body:has(#accueil) .minoe-offre__prix {
  text-align: right; font-weight: 700; font-size: 1.0625rem; color: #2B2823; line-height: 1.25;
}
body:has(#accueil) .minoe-offre__prix small {
  display: block; margin-top: 2px;
  font-weight: 500; font-size: 0.8125rem; color: #615A50; text-decoration: line-through;
}
body:has(#accueil) .minoe-offre__badge {
  position: absolute; inset-block-start: -11px; inset-inline-end: 12px;
  padding: 3px 10px; border-radius: 999px;
  background: #1F5A6E; color: #FFFCF5;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
body:has(#accueil) .minoe-offre__badge--prix { background: #FBE7A6; color: #2B2823; }
body:has(#accueil) .minoe-offre__bouton {
  display: block; margin-top: 6px; padding: 16px 24px;
  border-radius: 999px; background: #1F5A6E; color: #FFFCF5;
  font-weight: 700; text-align: center; text-decoration: none;
}
@media (hover: hover) {
  body:has(#accueil) .minoe-offre__bouton:hover { background: #174757; }
}
body:has(#accueil) .minoe-offre__note {
  margin: 2px 0 0; text-align: center; font-size: 0.8125rem; color: #615A50;
}

/* Le lien « Préférences de cookies » du pied de page : même allure que les
   liens du menu des politiques. Le bouton Rétractation n'est pas touché. */
.minoe-cookies { margin: 8px 0 0; }
.minoe-cookies__lien {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) { .minoe-cookies__lien:hover { opacity: .75; } }

/* ==========================================================================
   40. PAGE /cart (30/10/2026)
   --------------------------------------------------------------------------
   Les boutons « − / + » disparaissent, comme dans le tiroir : un pack Rapi
   se compose dans le bloc d'achat, pas en montant la quantité d'une ligne
   (deux mallettes au prix unitaire ne font pas le prix du Duo). La corbeille reste,
   elle, pour retirer la ligne. Rien n'est touché dans le bloc Rapi.
   Cette page n'a pas d'ancre `#achat` : la règle est donc sans verrou.
   ========================================================================== */
.cart-items :is(button, a)[class*="quantity-minus"],
.cart-items :is(button, a)[class*="quantity-plus"],
.cart-items quantity-selector button,
.cart-items .quantity-selector button,
.cart-items [data-quantity-selector] button {
  display: none !important;
}
.cart-items :is(quantity-selector, .quantity-selector) {
  border: 0 !important;
  background: none !important;
  min-width: 0 !important;
}
.cart-items :is(quantity-selector, .quantity-selector) input {
  border: 0 !important; background: none !important;
  text-align: center; font-weight: 700; pointer-events: none;
  width: 2.5rem !important; min-width: 0 !important;
}

/* La corbeille reste, toujours : quelle que soit la règle ci-dessus, tout
   bouton de suppression de ligne est réaffiché explicitement. */
.cart-items :is(button, a)[class*="remove"],
.cart-items :is(button, a)[class*="delete"],
.cart-items [aria-label*="etirer"],
.cart-items [aria-label*="upprimer"],
.cart-items [href*="/cart/change"] {
  display: inline-flex !important;
}

/* ==========================================================================
   41. LA CAPSULE DE PREUVE EN MOBILE (30/10/2026)
   --------------------------------------------------------------------------
   En 360 et 390 px, les deux pictos mangeaient la place et les deux
   promesses se coupaient n'importe où. Sur mobile seulement : plus de
   pictos, le point séparateur reste, et chaque promesse tient sur deux
   lignes décidées à l'avance. Sur ordinateur, rien ne change.
   ========================================================================== */
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-preuve .minoe-illu--pastille { display: none !important; }
  body:has(#achat) .minoe-preuve { gap: 10px; padding: 8px 12px; }
  body:has(#achat) .minoe-preuve__txt {
    flex: 1 1 0; min-width: 0;
    text-align: center;
    /* Les seules coupures autorisées sont les <br> ci-dessous. */
    white-space: nowrap;
    line-height: 1.25;
  }
  body:has(#achat) .minoe-preuve__sep { flex: none; }
}

/* Le saut de ligne « mobile seulement », posé ici pour ne dépendre d'aucune
   section : la capsule de preuve s'en sert comme la note des repères. */
.minoe-br-mob { display: none; }
@media screen and (max-width: 749px) { .minoe-br-mob { display: inline; } }

/* Le lien « Préférences de cookies » : exactement les liens voisins du pied
   de page. Pas de cadre au clic (le contour ne revient qu'au clavier), pas
   de soulignement permanent. Le bouton Rétractation n'est pas touché. */
a[href$="#preferences-cookies"] {
  font: inherit; color: inherit;
  text-decoration: none;
  border: 0; background: none;
}
a[href$="#preferences-cookies"]:focus:not(:focus-visible) { outline: none; box-shadow: none; }
@media (hover: hover) {
  a[href$="#preferences-cookies"]:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* 30/10/2026 — le résumé de l'offre de l'accueil : chaque ligne est un vrai
   lien vers la fiche produit, avec son pack présélectionné (?pb=). On le
   montre : chevron à droite, fond beurre au survol, et pas de cadre noir au
   clic (le contour ne revient qu'au clavier, comme le lien des cookies). */
body:has(#accueil) .minoe-offre__ligne {
  grid-template-columns: 1fr auto auto;
}
body:has(#accueil) .minoe-offre__chevron {
  width: 18px; height: 18px; flex: none;
  color: #1F5A6E; opacity: .7;
  transition: transform .15s ease, opacity .15s ease;
}
body:has(#accueil) :is(.minoe-offre__ligne, .minoe-offre__bouton):focus:not(:focus-visible) {
  outline: none; box-shadow: none;
}
@media (hover: hover) {
  body:has(#accueil) .minoe-offre__ligne:hover { background: #FDF3D3; }
  body:has(#accueil) .minoe-offre__ligne:hover .minoe-offre__chevron {
    opacity: 1; transform: translateX(2px);
  }
}

/* ==========================================================================
   42. ACCUEIL · LE BOUTON VERS LA FICHE PRODUIT (30/10/2026)
   --------------------------------------------------------------------------
   Décision de la fondatrice pour le lancement : plus de sélecteur Rapi sur
   l'accueil. Un seul bouton, pleine largeur de la colonne, au style du
   bouton principal de la fiche produit — il reprend la classe `button` du
   thème, donc exactement la même allure. En dessous, les logos de paiement
   et le bloc de réassurance ne bougent pas.
   ========================================================================== */
body:has(#accueil) .minoe-vers-produit {
  display: block;
  width: 100%;
  text-align: center;
  margin-block: 4px 2px;
}

/* ==========================================================================
   43. AVIS JUDGE.ME — AUCUN HABILLAGE DE NOTRE PART (30/10/2026)
   --------------------------------------------------------------------------
   La fondatrice insère elle-même le bloc d'application Judge.me et règle
   l'apparence des avis DANS L'APPLICATION. Toute règle CSS de notre côté
   donc plus aucune. Ce commentaire est là pour qu'on n'en remette pas.
   ========================================================================== */

/* ==========================================================================
   44. PANIER · LA PASTILLE DE QUANTITÉ (30/10/2026)
   --------------------------------------------------------------------------
   Comme au paiement Shopify : un petit cercle plein en haut à droite de la
   vignette, en léger débord, visible seulement à partir de deux articles.
   Les prix ne bougent pas — l'unitaire reste sous le nom, le total de la
   ligne à droite. Tiroir et page /cart, sans verrou de page.
   ========================================================================== */
/* Le <a> de la vignette porte `overflow: hidden` en style INLINE : on ne
   peut pas le contrer, et un badge en débord y était rogné. Le badge est
   donc posé sur la CELLULE, et reste À L'INTÉRIEUR du cadre de l'image. */
td.cart-items__media { position: relative; }
.minoe-qte {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  z-index: 2;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #1F5A6E;
  color: #FFFCF5;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px #FFFCF5;
  pointer-events: none;
}
@media screen and (max-width: 749px) {
  .minoe-qte { min-width: 22px; height: 22px; font-size: 0.6875rem; inset-block-start: 3px; inset-inline-end: 3px; }
}

/* ==========================================================================
   45. MOBILE · BULLES ET BARRE D'ANNONCE (30/10/2026)
   ========================================================================== */

/* Les quatre bulles « Les enfants en parlent mieux que nous » : 4 × 86 px et
   3 × 18 px de gouttière font 398 px, soit plus que l'écran en 390 — elles
   tombaient en 3 + 1. Deux par ligne, donc deux lignes de deux, centrées,
   cercles de même taille. Ordinateur inchangé. */
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-stories {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 18px 24px;
  }
}

/* La barre d'annonce était figée à 40 px de haut : en 390 px le texte passe
   sur deux lignes et se faisait rogner par le haut. On laisse la hauteur
   suivre le texte, centré, sans jamais couper. */
@media screen and (max-width: 749px) {
  body .shopify-section-group-header-group .announcement-bar {
    min-height: 0;
    padding-block: 7px !important;
  }
  body .shopify-section-group-header-group .announcement-bar__text {
    white-space: normal;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.3;
    padding-inline: 12px;
  }
  body .shopify-section-group-header-group :is(.announcement-bar__slider,
    .announcement-bar__slides, .announcement-bar__slide) {
    min-height: 0;
    height: auto;
    align-items: center;
  }
}

/* ==========================================================================
   46. BARRE D'ANNONCE · LE PETIT CADEAU (30/10/2026)
   --------------------------------------------------------------------------
   Une icône cadeau au trait fin arrondi, beurre #FBE7A6 sur le pétrole de la
   barre, posée juste avant le texte et alignée dessus. C'est une décoration
   CSS : le TEXTE reste un réglage, modifiable dans l'éditeur sans toucher au
   code. Même facture que les icônes de réassurance du site.
   ========================================================================== */
body .shopify-section-group-header-group .announcement-bar__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body .shopify-section-group-header-group .announcement-bar__text::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBE7A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='2'/%3E%3Cpath d='M3 13h18'/%3E%3Cpath d='M12 9v12'/%3E%3Cpath d='M12 9C10.5 9 7.5 9 6.5 8A2.2 2.2 0 0 1 8 4.2C9.8 4.2 11.4 6.6 12 9z'/%3E%3Cpath d='M12 9c1.5 0 4.5 0 5.5-1A2.2 2.2 0 0 0 16 4.2C14.2 4.2 12.6 6.6 12 9z'/%3E%3C/svg%3E");
}
/* En 390 px : deux lignes centrées, l'icône reste sur la première. */
@media screen and (max-width: 749px) {
  body .shopify-section-group-header-group .announcement-bar__text {
    display: flex;
    flex-wrap: wrap;
    gap: 0 7px;
    max-width: 22rem;
    margin-inline: auto;
  }
}

/* ==========================================================================
   47. MISES EN AVANT « +30 ACTIVITÉS » ET « PAIEMENT SÉCURISÉ » (04/11/2026)
   ========================================================================== */

/* La capsule beurre sous le titre du produit, au style des capsules d'âge.
   04/11/2026 : un cran plus grande et plus aérée, sans venir concurrencer
   le titre. */
body:has(#achat) .minoe-capsule-activites {
  display: inline-block;
  margin: 10px 0 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: #FBE7A6;
  color: #2B2823;
  font-size: 0.9375rem;   /* 15 px */
  font-weight: 800;
  line-height: 1.2;
}

/* La ligne au-dessus de l'offre : « chiffre fort ». Le nombre porte
   l'argument, le reste de la phrase est en encre — un seul style par
   élément, plus de surlignage partiel. Fond sable plein, sans bordure.
   04/11/2026. */
body:has(#achat) .minoe-ligne-activites {
  display: flex;
  align-items: center;      /* le « 30+ » et les deux lignes se centrent entre eux */
  justify-content: center;
  gap: 14px;
  margin: 20px 0 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--minoe-sable, #F4EEE2);
}
body:has(#achat) .minoe-ligne-activites__nombre {
  flex: none;
  font-family: var(--font-heading--family, 'Plus Jakarta Sans'), sans-serif;
  font-size: 1.875rem;      /* 30 px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1F5A6E;
}
body:has(#achat) .minoe-ligne-activites__texte {
  font-size: 1rem;          /* 16 px */
  font-weight: 600;
  line-height: 1.3;
  color: #2B2823;
  text-align: left;
}

/* La ligne de paiement sécurisé : discrète, sous les logos.
   Sans verrou de page : elle sert aussi dans le tiroir et sur /cart. */
.minoe-paiement-sur2 {
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #615A50;
  text-align: center;
}
.minoe-paiement-sur2 svg { width: 14px; height: 14px; flex: none; color: #1F5A6E; }
@media screen and (max-width: 749px) {
  body:has(#achat) .minoe-capsule-activites { font-size: 0.875rem; padding: 8px 15px; }
  body:has(#achat) .minoe-ligne-activites { gap: 12px; padding: 11px 13px; margin: 16px 0 14px; }
  body:has(#achat) .minoe-ligne-activites__nombre { font-size: 1.75rem; }   /* 28 px */
  body:has(#achat) .minoe-ligne-activites__texte { font-size: 0.9375rem; }  /* 15 px */
  .minoe-paiement-sur2 { font-size: 0.6875rem; gap: 6px; }
}