/* ============================================================================
   v7-produit.css — FICHE PRODUIT et PERSONNALISATION de la V7 DoudouPlanet
   Auteur  : agent Claude — 01/09/2026 — chantier V7 responsive (dev.doudouplanet.com)
   Dépend  : v7-tokens.css (les jetons) puis v7-socle.css (ossature, boutons,
             champs), tous deux chargés AVANT dans le bundle /min/ de
             _base_v7.tpl:96. Cohabite avec /v7/perso.css (module de
             personnalisation), chargé APRÈS ce fichier : les surcharges du §6
             en tiennent compte.

   CE QUE FAIT CE FICHIER
   ----------------------
   Il recouvre sites/DDP/css/product.css (877 l., 2013) sur la page produit
   UNIQUEMENT quand le body porte la classe .v7. Aucune ligne de product.css
   n'est supprimée : la V6 reste servie à l'octet près à ?v7=0.

   LES CINQ DÉFAUTS DE FOND CORRIGÉS ICI — tous relus dans le code, pas supposés
   -----------------------------------------------------------------------------
   1. product.css:157 pose, sous @media (min-width:768px) :
         .produit_bebe_img, .module { float:left; width:448px; margin-right:16px }
      « .module » étant porté par LES DEUX colonnes (skel.produit.tpl:34 et :41),
      la page réclame 448 + 16 + 448 = 912 px dès 768 px : le point de rupture
      est actif exactement là où il casse. On le neutralise, et on ne repasse en
      deux colonnes qu'à 1024 px, là où la place existe réellement.
      🔎 Au passage : la règle voisine product.css:158
      « .produit_bebe_col, , .social_bebe » contient une virgule vide. Un
      sélecteur invalide dans une liste invalide TOUTE la règle : ce float:right
      n'a jamais rien fait. D'où deux colonnes qui flottent à gauche, l'une sous
      l'autre, au lieu de se placer côte à côte.
   2. product.css:14 : .produit_bebe_img { display:table-cell } — proscrit par le
      cahier des charges V7 (grille et flex uniquement) et incompatible avec tout
      réordonnancement sur téléphone.
   3. product.css:21 : -webkit-box-reflect sur l'image principale. Non standard,
      WebKit seulement, et il ajoute sous l'image une hauteur que la mise en page
      ne mesure pas — le reflet n'est pas dans le flux mais occupe l'écran.
   4. product.css:121, :140 et :283 déclarent font-family:"baloo"/"baloo 2" en
      !important sur les trois éléments les plus regardés (nom, prix, bouton).
      🟢 RÉSOLU le 01/09/2026 (après-midi). Aucun @font-face ne déclarait Baloo
      — ces trois éléments s'affichaient donc en Arial depuis 2021 — mais LES
      FICHIERS ÉTAIENT BIEN LÀ : /media/font/Baloo/ et /media/font/Baloo2/,
      déposés le 14/12/2021, servis en HTTP 200 (vérifié par curl). Les deux
      @font-face manquants sont désormais déclarés dans v7-tokens.css §0, et ces
      règles emploient le jeton --v7-police-produit. Le !important n'est pas un
      caprice : c'est le seul moyen de battre un !important adverse.
   5. Cibles tactiles et taille des champs : #quantity et les <select> de
      personnalisation étaient à 40 px de haut et 14 px de police
      (product.css:537-549). Sous 768 px, un champ sous 16 px déclenche le zoom
      automatique d'iOS et la page part de travers. Ce n'est pas un choix
      esthétique, c'est une contrainte de plateforme.

   CHOIX NON ÉVIDENTS, ET POURQUOI
   -------------------------------
   · PORTÉE. Les règles de mise en page s'accrochent à
     `article[itemtype$="/Product"]` — la microdonnée de skel.produit.tpl:30.
     C'est le seul marqueur de « page produit » disponible : le gabarit n'émet ni
     classe ni id sur son <article>, et je n'ai pas le droit de le modifier (un
     autre agent travaille sur les gabarits). Le suffixe `$=` plutôt que
     l'égalité exacte survit à un passage en https:// dans l'URL du vocabulaire.
   · display:contents. Sous 1024 px, .produit_bebe_img s'efface en tant que boîte
     pour que ses trois enfants (image, miniatures, caractéristiques) deviennent
     des éléments de la grille de page et puissent être réordonnés. Sans cela, le
     bloc « caractéristiques » s'intercale entre la galerie et le prix : sur un
     téléphone, le prix et le bouton d'achat passent sous la ligne de flottaison.
     Repli si display:contents n'est pas reconnu : une seule colonne dans l'ordre
     du DOM — dégradation acceptable, rien ne casse.
   · Le bouton d'achat est VERT. Décision déjà prise pour ce chantier : c'est le
     vert du tunnel de commande (--v7-achat / --v7-achat-clair = #309B26/#0FBF47,
     relevé dans funnel_espace_client.css). L'ancienne surcouche v7-site.css:9-31
     le repeignait en #6c5ce7, violet absent de la charte ; cette feuille n'est
     plus chargée par _base_v7.tpl. On reprend ici, à l'identique, l'apparence de
     .v7-bouton--achat du socle (§5 de v7-socle.css) : même fond, même dégradé,
     même ombre intérieure. Une seule référence visuelle pour l'action d'achat.
   · Le prix barré. On masque le <hr class="pp_barre"> — une barre rouge de 64 px
     en position absolue et pivotée de -20°, qui ne peut pas coïncider avec un
     texte de longueur variable — et on emploie text-decoration:line-through, qui
     suit le texte quelle que soit sa longueur. #remise repasse en inline-block :
     un inline atomique n'hérite pas de la décoration de son parent, la pastille
     de remise n'est donc pas barrée elle aussi.

   MOBILE-FIRST, TROIS PALIERS. Le corps du fichier est le téléphone.
     >= 768   tablette · >= 1024  bureau (deux colonnes) · >= 1440  confort seul.
   Aucun @media (max-width:) : la seule exception tolérable serait le retrait d'un
   décor, et il n'y en a pas ici.
   ========================================================================= */


/* ══════════════════════════════════════════════════════════════════════════
   1. CONTENEUR DE PAGE
   product.css:2 met un fond blanc et 16 px de marge intérieure sur <article>.
   En V7 le fond blanc et le rythme vertical viennent déjà de .v7-main (socle
   §2) : ici l'article ne fait plus que centrer et donner la marge latérale.
   ══════════════════════════════════════════════════════════════════════════ */
body.v7 .v7-main > article[itemtype$="/Product"] {
  display: block;
  width: 100%;
  max-width: min(100%, 1980px); /* 20261001 : max 1980 wide; fluide sous 1440 (plus de min 1440) */
  margin-inline: auto;
  padding: 0 var(--v7-marge-page);
  background: transparent;
}
/* 20261001 Pack1 s4 : retire min-width 1440 landscape (causait overflow H a 1280).
   Intention paysage large conserve via max 1980 + confort @media (min-width:1440px). */

/* Les deux <div> anonymes de skel.produit.tpl (l.32 = la fiche, l.71 = les
   rebonds : achetés ensemble, même collection, mêmes rayons). */
body.v7 article[itemtype$="/Product"] > div + div {
  margin-top: var(--v7-respiration);
}


/* ══════════════════════════════════════════════════════════════════════════
   2. NEUTRALISATION DE L'OSSATURE FLOTTANTE DE 2013
   Ces règles doivent rester HORS de toute media query : celles qu'elles
   recouvrent vivent dans @media (min-width:768px), et c'est la spécificité —
   pas l'ordre, pas le point de rupture — qui les emporte.
   ══════════════════════════════════════════════════════════════════════════ */
body.v7 .module,
body.v7 .produit_bebe_img,
body.v7 .produit_bebe_col,
body.v7 .descriptif_bebe,
body.v7 .spec_bebe {
  float: none;
  clear: none;
  width: auto;
  min-width: 0;                 /* indispensable : sans lui, un élément de
                                   grille ne descend pas sous la largeur de son
                                   contenu, et un tableau large élargit la page
                                   entière */
  margin-right: 0;
  margin-bottom: 0;             /* .module portait 16px — le rythme vertical
                                   vient désormais de la gouttière de la grille */
  position: static;
}

/* Le reflet WebKit, retiré partout sur la fiche V7 (défaut n° 3 de l'en-tête). */
/* 20260928.titre : product.css:915-929 impose float + width 58%/40% !important
   des 768 px. La grille V7 ne reprend qu'a 1024 px : entre 768 et 1023 la
   colonne achat restait a ~40 % (~350 px sur tablette) et le titre etait
   coupe. Meme specificite + !important, hors media query, pour annuler. */
body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_img,
body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_img.module,
body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_col,
body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_col.module {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin-right: 0 !important;
}

/* product.css:912 overflow:hidden sur div:first-of-type (= .v7-fiche-haut)
   clipait les titres longs / nowrap de debug. */
body.v7 .v7-fiche-haut,
body.v7 article[itemtype$="/Product"] > div.v7-fiche-haut,
body.v7 .v7-main > article[itemtype$="/Product"] > div:first-of-type {
  overflow: visible;
}

/* Miniatures : pas de reflet. Image principale : reflet V6 restaure plus bas
   sur body.v7 .produit_bebe_img > a > img (meme si video principale est en 1er). */
body.v7 .img_comp img {
  -webkit-box-reflect: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. MISE EN PAGE — une colonne, puis deux à partir de 1024 px

   Sous 1024 px, .produit_bebe_img s'efface (display:contents) et l'ordre de
   lecture devient :
     1 image principale · 2 miniatures · 3 achat · 4 description · 5 fiche technique
   L'ordre du DOM placerait autrement : les caractéristiques sont physiquement
   dans la colonne de gauche, donc juste après les miniatures — avant le prix.
   ══════════════════════════════════════════════════════════════════════════ */
/* 20260926e : grille sur .v7-fiche-haut (wrapper skel).
   Cause P0 mobile : article>div:first-child ne matchait plus (1er enfant =
   <script> ld+json) et .v7-fiche-haut {display:contents} laissait
   .produit_bebe_col sans conteneur grille -> largeur ~42px, pastilles ecrasees. */
body.v7 .v7-fiche-haut,
body.v7 article[itemtype$="/Product"] > div.v7-fiche-haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.v7 .produit_bebe_img { display: contents; }

body.v7 .produit_bebe_img > a { order: 1; }
body.v7 .img_comp          { order: 2; }
body.v7 .produit_bebe_col  { order: 3; }
body.v7 .descriptif_bebe   { order: 4; }
body.v7 .spec_bebe         { order: 5; }

/* skel.produit.tpl:36 émet <div class="img_comp"> même sans photo secondaire.
   Une boîte vide dans une grille consomme quand même une gouttière : on la
   retire. Règle isolée à dessein — si :has() n'est pas reconnu, seule cette
   ligne est ignorée, jamais la mise en page. */
body.v7 .img_comp:not(:has(*)) { display: none; }

@media (min-width: 1024px) {
  body.v7 .v7-fiche-haut,
  body.v7 article[itemtype$="/Product"] > div.v7-fiche-haut {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);   /* 20261001 buyrow: col achat assez large pour 1 rangee a ~1280 */
    column-gap: var(--e5);
    row-gap: var(--v7-respiration);
  }
  /* La colonne de gauche redevient une vraie boite : image, miniatures et
     caracteristiques repassent sous sa responsabilite. */
  /* Spec > product.css:905-918 (body.v7 .v7-main > article[...] .module) */
  body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_img,
  body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_img.module {
    display: block;
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
  }
  body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_col,
  body.v7 .v7-main > article[itemtype$="/Product"] .produit_bebe_col.module {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: none !important;
  }
  body.v7 .descriptif_bebe  { grid-column: 1 / -1; grid-row: 2; }

  body.v7 .produit_bebe_img > a,
  body.v7 .img_comp,
  body.v7 .produit_bebe_col,
  body.v7 .descriptif_bebe,
  body.v7 .spec_bebe { order: 0; }
}

@media (min-width: 1440px) {
  /* Confort uniquement : la gouttière respire, la mise en page ne bouge pas. */
  body.v7 .v7-main > article[itemtype$="/Product"] { padding-inline: var(--e4); }
}


/* ══════════════════════════════════════════════════════════════════════════
   4. GALERIE
   ══════════════════════════════════════════════════════════════════════════ */

/* 4.1 Image principale — cadre carré, image CONTENUE, jamais déformée.
   La photo produit n'est pas recadrable : un doudou coupé aux oreilles est un
   défaut commercial. D'où object-fit:contain et non cover. */
body.v7 .produit_bebe_img > a {
  display: block;
  position: relative;
  width: 100%;
  max-width: 610px;                 /* Fibonacci : au-delà, la photo source
                                       (600 px de large en général) se pixellise */
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;                 /* reflets WebKit hors flux : ne pas clipper */
  padding-bottom: 14%;                 /* place pour le reflet (gradient opaque ~86%+) */
  border-radius: var(--v7-rayon);
  background: var(--v7-fond-surface);
}
body.v7 .produit_bebe_img > a > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;                 /* était max-height:600px — product.css:20 */
  object-fit: contain;
  border: 0;
  border-radius: var(--v7-rayon);       /* coins sans overflow:hidden parent */
  -webkit-box-reflect: below 0 linear-gradient(transparent 86%, rgba(0,0,0,.3)); /* V6 product.css:21 */
}


/* Video principale 800x800 (si product_video_principale). Caption + image ensuite (tpl). */
body.v7 .produit_bebe_img > video.v7-product-video-principale {
  display: block;
  position: relative;
  width: 800px;
  height: 800px;
  max-width: 100%;
  max-height: 800px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 0;
  border-radius: var(--v7-rayon);
  background: var(--v7-fond-surface);
}
body.v7 .produit_bebe_img > video.v7-product-video-principale::-webkit-media-controls,
body.v7 .produit_bebe_img > video.v7-product-video-principale::-webkit-media-controls-enclosure,
body.v7 .produit_bebe_img > video.v7-product-video-principale::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}
/* Caption sous video principale — gris clair palette, petit. */
body.v7 .produit_bebe_img > .v7-video-non-contractuelle {
  display: block;
  margin: var(--e1) auto var(--e3);
  max-width: 800px;
  padding: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--v7-gris-clair);
  text-align: center;
  font-weight: 400;
}
/* 4.2 Miniatures — bande défilante au doigt sous 1024 px.
   Les propriétés sont celles de .v7-bande (socle §2) : je ne peux pas ajouter la
   classe au gabarit (fichier hors de mon lot), je pose donc le même motif sur
   #gallery. Si un jour <ul id="gallery"> reçoit class="v7-bande", ce bloc peut
   disparaître sans rien changer au rendu. */
body.v7 .img_comp {
  margin-top: var(--e3);
  min-width: 0;
}
/* P0 20260926 : grille 4 cols sans overflow-x (pas de barre H ni thumbs sous chat).
   Desktop (>=1024) conserve la grille auto-fill plus bas. */
body.v7 .img_comp #gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e2);
  overflow-x: hidden;
  overflow-y: visible;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}
body.v7 .img_comp #gallery::-webkit-scrollbar { height: 5px; }
body.v7 .img_comp #gallery::-webkit-scrollbar-thumb {
  background: var(--v7-trait);
  border-radius: var(--v7-rayon-pilule);
}
body.v7 .img_comp #gallery > li {
  float: none;                      /* était float:left — product.css:89 */
  flex: unset;
  width: auto;
  min-width: 0;
  list-style: none;
  margin: 0;
}
body.v7 .img_comp #gallery > li > a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--v7-trait-doux);
  border-radius: var(--v7-rayon);
  background: var(--v7-fond-surface);
}
body.v7 .img_comp #gallery > li > a > img {
  width: 100%;
  height: 100%;
  max-width: none;                  /* était max-width:240px — product.css:31 */
  max-height: none;
  margin: 0;
  object-fit: cover;
}
/* Galerie video/iframe : taille imposee par le CSS (plus de 198px inline qui
   forcaient un overflow hors de la li --e7). object-fit contain. Autoplay via
   attributs + kick JS skel.produit (v7KickGalleryVideos). */
/* TEST A/B Remy 45233 (2026-09-28) : affichage galerie video FORCE 300x300
   (master fichier peut etre 900 ; CSS impose le cadre UI). Revert: bak ci-dessus
   ou retablir width:100%/height:auto + minmax(var(--e7)). */
body.v7 .img_comp #gallery > li:has(> video) {
  overflow: hidden; /* cadre carre propre, pas de debordement 198px */
  width: 300px;
  max-width: 300px;
  flex: 0 0 300px;
}
body.v7 .img_comp #gallery > li > iframe,
body.v7 .img_comp #gallery > li > video {
  display: block;
  width: 300px;
  height: 300px;
  max-width: 300px;
  max-height: 300px;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: var(--v7-rayon);
  object-fit: contain;
  background: transparent;
}
/* Masquer les controles natifs (autoplay mute sans UI) - pattern BabyStoria */
body.v7 .img_comp #gallery > li > video::-webkit-media-controls,
body.v7 .img_comp #gallery > li > video::-webkit-media-controls-enclosure,
body.v7 .img_comp #gallery > li > video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}
body.v7 .img_comp #gallery > li > video {
  pointer-events: none; /* pas de clic = pas de barre de controles ; play via JS */
}

@media (min-width: 1024px) {
  /* À la souris, une bande à faire défiler est un mauvais service : les
     miniatures reviennent en grille, qui se replie toute seule. */
  body.v7 .img_comp #gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--e7), 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  body.v7 .img_comp #gallery > li { width: auto; }
}

/* P0 20260926d : FABs hors parcours fiche mobile.
   Premisse 20260926c invalidee (bulle fixe traverse galerie au scroll).
   Ce CSS ne charge que sur fiche produit (skel.produit.tpl) ; marqueur HTML :
   article.v7-fiche-produit. .v7-themer masque globalement dans v7-socle.css.
   padding-bottom:5.5rem sur .img_comp retire (ne servait qu a compenser FABs). */
@media (max-width: 767px) {
  body.v7 #scc-bulle,
  body.v7:has(.v7-fiche-produit) #scc-bulle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. BLOC D'ACHAT
   ══════════════════════════════════════════════════════════════════════════ */
body.v7 .produit_bebe_col {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
body.v7 .produit_bebe_col > hr { margin: var(--e1) 0; width: 100%; }

/* 5.1 Marque — product.css:146 la met en position:absolute; right:0. Dans une
   grille, sans ancêtre positionné, elle s'échapperait de sa colonne. On la
   ramène dans le flux et on la place AVANT le titre : la marque se lit d'abord,
   le nom du produit ensuite — l'ordre naturel d'une fiche, papier comme écran. */
body.v7 #marque_produit_bebe {
  order: -1;
  position: static;
  right: auto;
  margin: 0;
  line-height: 0;                   /* colle le logo : supprime l'espace fantôme
                                       sous une image en contexte inline */
}
body.v7 #marque_produit_bebe img {
  max-height: var(--e6);            /* 55 px */
  width: auto;
  margin: 0;
}

/* 5.2 Nom du produit — 20260928.titre : pleine largeur du conteneur, wrap,
   pas de max-width ni overflow qui coupe. */
body.v7 #nom_produit_bebe {
  margin: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}
/* 20260923h : titre produit comme les H3 du descriptif, sans effet candy.
   20260928.titre : wrap normal (plus de nowrap/balance forcée qui masque
   l'étroitesse du parent) ; overflow-wrap pour les titres très longs. */
body.v7 #nom_produit_bebe h1 {
  margin: 0;
  width: 100%;
  max-width: none;
  font-family: var(--v7-police-titre) !important;
  font-size: var(--v7-t-titre); /* un cran au-dessus du H3 (base x 1,325) */
  line-height: var(--v7-interligne-titre);
  color: var(--v7-violet-fonce);
  text-align: left;
  text-shadow: none;
  white-space: normal;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  overflow: visible;
}

/* 5.3 Prix */
body.v7 #prix_bebe {
  margin: 0;
  font-family: var(--v7-police-produit) !important;  /* Baloo 2, désormais chargée (v7-tokens.css §0) */
  font-size: var(--v7-t-titre);
  line-height: var(--v7-interligne-titre);
  color: var(--v7-prix);
  font-weight: 900;
}
/* Prix précédent et pastille de remise sur une seule ligne, sans débordement.
   Volontairement PAS en flex : un enfant de conteneur flex est « blockifié » et
   hériterait alors du line-through. En display:block plus inline-block, la
   pastille reste un inline atomique, que la décoration ne traverse pas. */
body.v7 #prix_bebe .remise_data {
  display: block;
  position: static;
  margin: 0 0 var(--e1);
  font-size: var(--v7-t-petit); /* buyrow7: meme echelle que pastille -30% */
  font-weight: 400;
  color: var(--v7-prix-barre);
  text-decoration: line-through;
  text-decoration-color: var(--v7-alerte);
}
/* La fausse barre rouge (un <hr> pivoté de -20°, largeur figée à 64 px) ne peut
   pas coïncider avec un prix de longueur variable : le line-through ci-dessus la
   remplace. L'élément reste dans le DOM, il n'est que masqué. */
body.v7 #prix_bebe .remise_data > .pp_barre { display: none; }
/* product.css:142 pose « #prix_bebe span { font-size:.6em } ». Sur le prix net
   c'est voulu (les centimes en petit) ; sur le prix BARRÉ, déjà réduit, cela
   donnait 8 px illisibles. Les centimes barrés reprennent donc leur taille. */
body.v7 #prix_bebe .remise_data span { font-size: inherit; }
body.v7 #prix_bebe #remise {
  display: inline-block;
  position: static;
  top: auto;
  left: auto;
  transform: none;                  /* était rotate(10deg) — product.css:672 */
  margin-left: var(--e2);
  padding: var(--e0) var(--e2);
  border-radius: var(--v7-rayon-pilule);
  background-color: var(--v7-badge-promo-fond);
  color: var(--v7-badge-promo-texte);
  font-family: var(--v7-police-appui);
  font-size: var(--v7-t-petit);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
body.v7 #prix_bebe .panier_magique {
  font-size: var(--v7-t-base);
  font-weight: 400;
  color: var(--v7-gris);
}

/* 5.4 Disponibilité et livraison */
body.v7 #stock_bebe {
  position: static;
  margin: 0;
  padding: 0;
  font-size: var(--v7-t-base);
  color: var(--v7-texte);
}
body.v7 #liv_gratuite { margin: var(--e2) 0 0; max-width: 100%; height: auto; }
body.v7 #information_livraison {
  margin: 0;
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
  color: var(--v7-texte-doux);
}
body.v7 #information_livraison p {
  width: auto;                      /* était width:200px — product.css:213 */
  white-space: normal;              /* était nowrap : débordement garanti */
  font-size: var(--v7-t-petit);
  color: inherit;
  margin: 0;
}

/* 5.5 Tailles disponibles — c'était display:table et table-cell
   (product.css:708-722), donc N colonnes égales quelle que soit la largeur.
   Devient une série de pastilles qui se replient, chacune à la cible tactile. */
body.v7 #taille_bebe { padding: var(--e2) 0; text-align: left; }
body.v7 #taille_bebe > span {
  display: block;
  width: auto;
  margin: 0 0 var(--e2);
  text-align: left;
  font-size: var(--v7-t-base);
  font-weight: 700;
  color: var(--v7-texte);
}
body.v7 #taille_bebe ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}
body.v7 #taille_bebe li {
  display: flex;
  align-items: center;
  gap: var(--e1);
  min-height: var(--v7-cible);
  padding: 0 var(--e3);
  border: 1px solid var(--v7-trait);
  border-radius: var(--v7-rayon-pilule);
  font-size: var(--v7-t-base);
  color: var(--v7-texte);
  cursor: pointer;
}

/* 5.6 Formulaire d'ajout au panier.
   Zone d'achat identifiable d'un coup d'œil : c'est le seul endroit de la page
   où l'on décide. Fond doux de la charte, jamais une teinte nouvelle. */
body.v7 #addProductForm > br { display: none; }
/* Le fond mauve etait sur tout le form : perso + qty + panier. On le retire
   pour que seul le bloc .pv7 (personnalisation) garde l'encart — qty/panier
   sortent visuellement du bloc (demande 2026-09-25). */
body.v7 #addProductForm {
  margin: 0; /* tightened 01/10/2026 — less loose qty row */
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  font-family: var(--v7-police-texte);
  font-size: var(--v7-t-base);
  text-align: left;
}
body.v7 #addProductForm #personnalisation_bebe {
  flex: 1 1 100%;
  width: 100%;
}
/* Deux <span> possibles ici : « Quantité » (avec son select) et le message
   « article plus disponible ». Une seule règle, lisible dans les deux cas. */
/* Quantite + bouton sur une seule ligne (2026-09-25). */
body.v7 #addProductForm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e2);
}
/* Exclure .v7-buy-icones : ce span doit rester en LIGNE (favoris + naissance). */
body.v7 #addProductForm > span:not(.v7-buy-icones) {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--v7-t-base);
  color: var(--v7-texte);
}
body.v7 #addProductForm #quantity {
  width: auto;
  min-width: var(--e7);             /* 89 px : deux chiffres et le chevron */
  margin: var(--e1) 0 0;
}

/* 5.7 LE bouton d'achat. Apparence reprise de .v7-bouton--achat
   (v7-socle.css §5), à l'identique : le vert du tunnel de commande. */
body.v7 #addProductForm {
  --v7-qty-pilule-w: calc(3 * var(--e6) + 2px); /* 2 boutons + valeur + filet pilule */
  --v7-phi2: 2.618; /* reference or ; pas une largeur forcee du CTA */
}
body.v7 #addProductForm input.btv,
body.v7 #addProductSubmit {
  display: inline-block;
  box-sizing: border-box;
  /* Une rangee par defaut : le CTA prend l'espace restant entre qty et icones,
     sans largeur 100% ni borne phi^2 qui forçait le retour a la ligne a ~1280. */
  width: auto;
  flex: 1 1 auto; /* buyrow7: CTA remplit l'espace restant jusqu'aux icones */
  min-width: 8rem;
  max-width: 100%;
  min-height: var(--e6);
  padding: var(--e2) var(--e3);
  border: 0;
  border-radius: var(--v7-rayon-pilule);
  color: var(--v7-blanc);
  background-color: var(--v7-achat);
  background-image: linear-gradient(var(--v7-achat-clair), var(--v7-achat));
  box-shadow: inset 0 1px 0 var(--v7-vert-vif), 0 1px 2px rgba(0, 0, 0, .25);
  font-family: var(--v7-police-produit) !important;
  font-size: var(--v7-t-moyen);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter var(--v7-vite), transform var(--v7-vite);
}
body.v7 #addProductForm input.btv:hover,
body.v7 #addProductSubmit:hover {
  filter: brightness(1.06);
  color: var(--v7-blanc);
  background-color: var(--v7-achat);
  background-image: linear-gradient(var(--v7-achat-clair), var(--v7-achat));
}
/* product.css:376-380 faisait sauter le bouton en position:relative;top:1px et
   virait son texte au jaune vif. On garde le retour tactile, pas le jaune. */
body.v7 #addProductForm input.btv:active,
body.v7 #addProductSubmit:active {
  position: static;
  top: auto;
  transform: translateY(1px);
  color: var(--v7-blanc);
}
/* 5.7a Rangee d'achat : une ligne par defaut ; wrap seulement si trop etroit. */
body.v7 #addProductForm .v7-buy-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* buyrow6: une ligne tant que la colonne a de la place */
  align-items: center;
  justify-content: flex-start;
  gap: var(--e2);
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 5.7b Icones Favoris (coeur) + Liste de naissance (cadeau) a droite du CTA.
   DEFAULT une seule rangee : [qty] [Ajouter au panier] [favoris] [liste naissance].
   Wrap naturel via flex-wrap du form seulement si pas assez de place (narrow/portrait).
   Les 2 icones ne s'empilent JAMAIS verticalement. */
body.v7 #addProductForm .v7-buy-icones {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-self: center;
  gap: var(--e2);
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
body.v7 #addProductForm a.v7-buy-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--v7-cible);
  height: var(--v7-cible);
  min-width: var(--v7-cible);
  min-height: var(--v7-cible);
  padding: 0;
  margin: 0;
  border: 1px solid var(--v7-trait);
  border-radius: var(--v7-rayon-pilule);
  background: #fcfcfc;
  color: var(--v7-texte-lien);
  text-decoration: none;
  line-height: 0;
  transition: background var(--v7-vite), color var(--v7-vite), border-color var(--v7-vite), filter var(--v7-vite);
}
body.v7 #addProductForm a.v7-buy-icone:hover,
body.v7 #addProductForm a.v7-buy-icone:focus-visible {
  background: #fff;
  color: var(--v7-achat, #309B26);
  border-color: var(--v7-achat, #309B26);
  filter: none;
  outline: none;
}
body.v7 #addProductForm a.v7-buy-icone--favoris:hover,
body.v7 #addProductForm a.v7-buy-icone--favoris:focus-visible {
  color: #c62828;
  border-color: #c62828;
}
body.v7 #addProductForm .v7-buy-icone__svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
/* buyrow6: wrap seulement sous breakpoint etroit reel. */
@media (max-width: 480px) {
  body.v7 #addProductForm .v7-buy-row {
    flex-wrap: wrap;
  }
  body.v7 #addProductForm .v7-buy-icones {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}
/* 5.8 Liens de service sous le formulaire (poser une question, frais de port,
   listes, produits similaires). Le white-space:nowrap de product.css:396
   garantissait le débordement dès qu'un libellé dépassait la colonne. */
body.v7 #options_ajouter_page_produit {
  margin-top: var(--e3);
  padding: var(--e3) 0 0;
  border-top: 1px solid var(--v7-trait-doux);
  white-space: normal;
  line-height: var(--v7-interligne);
  text-align: left;
}
/* inline-block (pas inline-flex) : flex mangeait les espaces avant/apres <strong>
   → "Plus deProduits", "uneListe", "laCollectionStitch". */
body.v7 #options_ajouter_page_produit a {
  display: inline-block;
  min-height: var(--v7-cible);
  line-height: var(--v7-interligne);
  padding-block: 0.35em;
  font-size: var(--v7-t-base);
  font-weight: 500;
  color: var(--v7-texte-lien);
  text-shadow: none;
}
body.v7 #options_ajouter_page_produit a strong {
  font-weight: 700;
}

/* Pastilles secondaires restantes sous options (similaires.) :
   meme fond que FAQ (#fcfcfc), rayon 8px. Favoris/naissance = icones ADD. */
body.v7 #options_ajouter_page_produit a.lien_ajouter {
  background: #fcfcfc;
  border-radius: 8px;
}

/* 5.9 Réassurance : 8 pictogrammes en deux <div>
   (_commun/argumentaire_26.tpl, rendu dans #argumentaire_21). */
body.v7 #argumentaire_21 > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--e7), 1fr));
  gap: var(--e2);
  align-items: center;
  justify-items: center;
}
body.v7 #argumentaire_21 img { float: none; max-width: 100%; height: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   6. PERSONNALISATION
   perso.css est déjà écrit, confiné dans #personnalisation_bebe, et je n'ai pas
   le droit d'y toucher : tout ce qui suit le SURCHARGE depuis ici. perso.css
   étant chargé après ce fichier (_base_v7.tpl:97), c'est la spécificité qui
   tranche — d'où le préfixe body.v7 sur chaque sélecteur, qui ajoute une classe
   au calcul et fait passer nos règles devant.

   🔴 CONTRAT À NE PAS ROMPRE : perso.js:577-582 déplace TOUS les champs
   d'origine dans .pv7-origine, masqué, mais TOUJOURS À L'INTÉRIEUR de
   #addProductForm — ce sont eux qui portent le POST. Rien ici ne doit les
   réafficher ni les sortir du formulaire.
   ══════════════════════════════════════════════════════════════════════════ */

/* Garde-fou explicite : aucune règle de ce fichier ne doit rendre visibles les
   champs d'origine. On le réaffirme, au cas où une surcharge future l'oublie. */
body.v7 #personnalisation_bebe .pv7-origine { display: none !important; }

body.v7 #personnalisation_bebe { margin: 0 0 var(--e3); text-align: left; }
body.v7 #personnalisation_bebe .pv7 {
  padding: var(--e3);
  margin: 0 0 var(--e3);
  border-radius: var(--v7-rayon-grand);
  font-size: var(--v7-t-base);
  line-height: var(--v7-interligne);
}

/* 6.1 Champ de saisie du texte à broder.
   16 px pleins sous 768 px, sinon iOS zoome au focus et décale toute la page. */
body.v7 #personnalisation_bebe .pv7-ligne-saisie { gap: var(--e2); }
body.v7 #personnalisation_bebe input.pv7-saisie {
  /* taille/gras : perso.css (27px / 800). Ici cible tactile + rayon V7. */
  flex: 0 1 auto;
  width: 15ch;
  min-width: 15ch;
  max-width: 100%;
  min-height: var(--v7-cible);
  border-radius: var(--v7-rayon);
}
body.v7 #personnalisation_bebe .pv7-compteur { font-size: 14px; font-weight: 700; }

/* 6.2 Aperçu du texte brodé.
   perso.css:206 le réduisait via @media (max-width:767px) ; ici l'échelle est
   fluide et croissante, donc plus aucune requête en max-width. */
body.v7 #personnalisation_bebe .pv7-apercu {
  min-height: var(--e7);            /* 89 px */
  padding: var(--e3) var(--e2);
  margin: var(--e3) 0 var(--e1);
}
body.v7 #personnalisation_bebe .pv7-apercu-texte {
  /* font-size : echelle 1 cm/lettre posee en inline par perso.js */
  overflow-wrap: anywhere;
}
body.v7 #personnalisation_bebe .pv7-apercu-vide { font-size: var(--v7-t-petit); }

/* 6.3 Pastilles de couleur — 30 px (perso.css:114) est sous la cible tactile.
   Elles passent à 44 px au doigt et redescendent à 34 px dès qu'on est à la
   souris. La coche de sélection était calée en pixels sur le diamètre d'origine
   (left:9px; top:4px) : on la recentre par transform, elle suit désormais
   n'importe quelle taille de pastille. */
body.v7 #personnalisation_bebe .pv7-couleurs { gap: var(--e2); }
body.v7 #personnalisation_bebe .pv7-pastille {
  width: var(--v7-cible);
  height: var(--v7-cible);
  flex: 0 0 auto;
}
body.v7 #personnalisation_bebe .pv7-pastille.pv7-actif::after {
  left: 50%;
  top: 50%;
  transform: translate(-55%, -65%) rotate(45deg);
}
/* Repli texte quand la valeur n'a pas de code couleur connu (Liberty, métaux…) */
body.v7 #personnalisation_bebe .pv7-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--v7-cible);
  padding: 0 var(--e3);
  font-size: var(--v7-t-base);
}

/* 6.4 Choix de l'écriture — c'était un flex à min-width:104px
   (perso.css:158-160), valeur qui laissait déborder la dernière carte sur les
   petits écrans. Grille auto-remplie : le nombre de colonnes découle de la
   largeur disponible, jamais l'inverse. */
body.v7 #personnalisation_bebe .pv7-ecritures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--e7), 1fr));
  gap: var(--e2);
}
body.v7 #personnalisation_bebe .pv7-ecriture {
  min-width: 0;
  min-height: var(--v7-cible);
  padding: var(--e2);
  border-radius: var(--v7-rayon);
}
body.v7 #personnalisation_bebe .pv7-ecriture-rendu { font-size: var(--v7-t-moyen); }
body.v7 #personnalisation_bebe .pv7-ecriture-nom   { font-size: var(--v7-t-mini); }

body.v7 #personnalisation_bebe .pv7-label { font-size: var(--v7-t-petit); }
body.v7 #personnalisation_bebe .pv7-aide  { font-size: var(--v7-t-petit); }
body.v7 #personnalisation_bebe .pv7-aide button { font-size: var(--v7-t-petit); }

/* 6.5 REPLI SANS perso.js — cas réel, vérifié dans le code : perso.js:186 sort
   par `return` dès qu'il n'y a AUCUN input[type=text] dans
   #personnalisation_bebe (fiches à options sans texte libre). Le balisage
   d'origine reste alors visible, avec ses valeurs de 2013 : label indenté de
   75 px, largeur minimale 30 %, champs de 40 px à 14 px de police. C'est
   exactement ce qui déborde sur téléphone. */
body.v7 .perso_fieldset { padding: 0; margin: 0; border: 0; }
body.v7 .perso_fieldset legend {
  padding: 0;
  margin-bottom: var(--e2);
  font-family: var(--v7-police-titre);
  font-size: var(--v7-t-moyen);
  font-weight: 600;
  text-align: left;
}
body.v7 .perso_fieldset label {
  display: block;
  width: auto;
  min-width: 0;                     /* était 30 % */
  margin: 0 0 var(--e0);            /* était margin-left:75px */
  white-space: normal;              /* était nowrap */
  line-height: var(--v7-interligne);
  font-size: var(--v7-t-petit);
  font-weight: 400;
  color: var(--v7-gris);
}
body.v7 .perso_fieldset select,
body.v7 .perso_fieldset input,
body.v7 #addProductForm .choix_nb_exemplaires {
  height: auto;                     /* était height:40px et line-height:40px */
  min-height: var(--v7-cible);
  padding: var(--e2) var(--e3);
  margin: 0 0 var(--e3);
  border: 2px solid var(--v7-gris-bord);
  border-radius: var(--v7-rayon);
  line-height: normal;
  font-family: var(--v7-police-texte);
  font-size: 16px;                  /* seuil iOS, cf. socle §6 */
  color: var(--v7-texte);
  vertical-align: middle;
}
/* #data_perso est masqué en style en ligne par le gabarit, puis révélé par
   block_js.js:108-109 en display:block. Rien à faire ici sinon lui garantir sa
   largeur : sans cela il hérite d'un span inline et ses champs se chevauchent. */
body.v7 #personnalisation_bebe #data_perso { max-width: 100%; }

@media (min-width: 768px) {
  /* Au-dessus de 768 px, iOS ne zoome plus : on revient à l'échelle du site. */
  /* input.pv7-saisie : taille 27px/800 reste dans perso.css, ne pas ecraser */
  body.v7 .perso_fieldset select,
  body.v7 .perso_fieldset input,
  body.v7 #addProductForm .choix_nb_exemplaires { font-size: var(--v7-t-base); }

  /* apercu font-size : echelle 1cm/lettre geree par perso.js */
}

@media (min-width: 1024px) and (pointer: fine) {
  /* À la souris, la cible de 44 px n'a plus lieu d'être : les pastilles
     retrouvent une taille de nuancier.
     🔎 Ajout du 01/09/2026 après mesure : la condition portait sur la seule
     largeur, si bien qu'une tablette en paysage (1024 px, mais au doigt)
     recevait des pastilles de 34 px. La taille d'une cible dépend du pointeur,
     pas de la largeur de l'écran — d'où « pointer: fine ». */
  body.v7 #personnalisation_bebe .pv7-pastille {
    width: 22px;
    height: 22px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. DESCRIPTION, FICHE TECHNIQUE, VIDÉO
   ══════════════════════════════════════════════════════════════════════════ */

/* Titres de section : .descriptif_bebe > p, .spec_bebe > p, #argumentaire_21 > p
   (product.css:50) étaient à 20 px fixes, en gris transparent sur blanc. */
/* 20260923f : Reference / titres de bloc fiche = sobres (Cocon + letter-spacing
   cassait l affichage type "DN58 5 8" sur le SKU). */
body.v7 .descriptif_bebe > p,
body.v7 .spec_bebe > p,
body.v7 #argumentaire_21 > p {
  margin: 0 0 var(--e2);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--v7-trait-doux);
  font-family: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--v7-t-base);
  font-weight: 700;
  letter-spacing: normal;
  word-spacing: normal;
  color: var(--v7-encre-douce);
  text-align: left;
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-stroke: 0;
}
body.v7 .spec_bebe > p span[itemprop="model"],
body.v7 .spec_bebe > p span[itemprop="sku"] {
  font-family: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  word-spacing: normal;
}

body.v7 .descriptif_bebe { margin: 0; }
/* <span id="_des"> porte la cible du itemref de l'article (skel.produit.tpl:30) :
   son id est contractuel pour la microdonnée, on n'y touche pas — on le passe
   simplement en bloc pour pouvoir le limiter à une largeur de lecture.
   product.css:58-64 lui donnait width:100% ET margin-left:36px, soit une largeur
   totale de 100 % plus 36 px : débordement systématique. */
body.v7 .descriptif_bebe > span {
  display: block;
  width: auto;
  max-width: none; /* 20260923f pleine largeur */
  margin: 0;
  font-size: var(--v7-t-base);
  line-height: var(--v7-interligne);
  color: var(--v7-texte);
  overflow-wrap: break-word;
}
/* La lettrine reste : elle fait partie de l'identité éditoriale du site. */
body.v7 .descriptif_bebe > span:first-letter {
  float: left;
  font-family: var(--v7-police-appui);
  font-size: 3em;
  line-height: 1;
  margin-right: .2em;
  color: var(--v7-encre-douce);
}
/* Le descriptif vient de la base et peut contenir n'importe quel HTML. Un
   tableau large défile DANS son conteneur au lieu d'élargir la page entière. */
body.v7 .descriptif_bebe table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.v7 .descriptif_bebe img { max-width: 100%; height: auto; }

/* Vidéo : elle était figée à 432 × 243 et flottante à droite
   (product.css:624-631). Ratio 16/9 fluide, plus aucun pixel en dur. */
body.v7 .video_produit {
  float: none;
  display: block;
  width: 100%;
  max-width: 610px;                 /* Fibonacci */
  height: auto;
  aspect-ratio: 16 / 9;
  margin: var(--e3) 0;
}
body.v7 .video_produit iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--v7-rayon);
}

/* Fiche technique — deux <ul id="specification_bebe"> (id dupliqué par
   _specification.tpl:16, connu et assumé : un sélecteur d'id CSS s'applique bien
   aux deux éléments). Les libellés flottaient sur 120 px ; ils deviennent la
   première colonne d'une grille, calée sur la section d'or (38,2 %). */
/* Fiche technique - un seul <ul id="specification_bebe"> (plus de decoupe
   en deux listes). Libelle + valeur SUR LA MEME LIGNE (grille 2 cols) :
   6 lignes totales, pas 12. Ordre Twig : Marque, Collection, Nom, Age,
   Composition, Entretien (+ Reference en tete). */
body.v7 .spec_bebe {
  display: block;
  margin: 0 0 var(--e5);
}
body.v7 #specification_bebe {
  float: none;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--v7-t-base);
  line-height: var(--v7-interligne);
  color: var(--v7-texte);
  text-align: left;
}
body.v7 #specification_bebe li {
  display: grid;
  grid-template-columns: minmax(6em, 38.2%) 1fr;
  column-gap: 0.75em;
  align-items: baseline;
  list-style: none;
  clear: both;
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--v7-trait-doux);
}
body.v7 #specification_bebe label {
  float: none !important;
  display: block;
  width: auto !important;
  max-width: 100%;
  margin: 0;
  font-size: var(--v7-t-petit);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v7-gris);
  text-align: left;
}
body.v7 #specification_bebe li > span {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  font-size: var(--v7-t-base);
  font-weight: 500;
  color: var(--v7-texte);
  overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. REBONDS — achetés ensemble, même collection, mêmes rayons
   product.css:421-465 : #bloc_cat > ul en display:table et li en inline-table à
   16 % de large. Six colonnes imposées à toutes les largeurs, soit environ 50 px
   par vignette sur un téléphone. Grille auto-remplie : le nombre de colonnes
   découle de la largeur disponible, jamais l'inverse.
   ══════════════════════════════════════════════════════════════════════════ */
body.v7 #bloc_cat { display: block; width: 100%; }
body.v7 #bloc_cat > a,
body.v7 #bloc_cat > p {
  display: block;
  margin: var(--e4) 0 var(--e2);
}
body.v7 #bloc_cat > a > h2,
body.v7 #bloc_cat p {
  margin: 0;
  font-family: var(--v7-police-titre);
  font-size: var(--v7-t-grand);
  font-weight: 600;
  color: var(--v7-encre-douce);
  text-align: left;
}
body.v7 #bloc_cat > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--e8), 1fr));   /* 144 px */
  gap: var(--v7-gouttiere);
  float: none;
  width: 100%;
  margin: 0 0 var(--e4);
  padding: var(--e3) 0 0;
  border-top: 1px solid var(--v7-trait-doux);
  list-style: none;
}
/* La ligne fantôme display:table-row de product.css:451 n'a plus d'objet. */
body.v7 #bloc_cat > ul::before,
body.v7 #bloc_cat > div > ul::after { content: none; display: none; }
body.v7 #bloc_cat > ul > li {
  display: block;
  width: auto;
  margin: 0;
  padding: var(--e2) var(--e1);
  font-size: var(--v7-t-petit);
  color: var(--v7-texte);
  text-align: center;
}
body.v7 #bloc_cat > ul > li > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--e1);
}
body.v7 #bloc_cat a {
  font-size: var(--v7-t-petit);
  color: var(--v7-texte-lien);
  text-align: center;
}
body.v7 #bloc_cat > ul > li > div {
  font-size: var(--v7-t-base);
  color: var(--v7-prix);
  font-weight: 700;
  text-align: center;
  text-shadow: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. FENÊTRES SUPERPOSÉES (lightbox et colorbox)
   ⚠️ media/css/colorbox.css et media/css/jquery.lightbox-0.5.css ne sont PAS
   présents dans le miroir local : je n'ai pas pu lire leurs valeurs. Ce qui suit
   borne les largeurs sans rien redéfinir de leur fonctionnement, et n'emploie
   que des identifiants existants — aucun n'est renommé.

   Qui fait quoi, vérifié dans sites/DDP/js/boutons.js :
     l.61  $('.produit_bebe_img a, #gallery a').lightBox()  → jquery.lightbox,
           identifiants #jquery-overlay / #jquery-lightbox / #lightbox-*
     l.57  $('.lien_ajouter').colorbox(), l.66 $('.ajout_panier').colorbox(),
           l.26 estimation des frais de port                → identifiants #cbox*
   ══════════════════════════════════════════════════════════════════════════ */

/* 9.1 jquery.lightbox — la galerie produit. Le script calcule top, left et width
   en pixels à partir de la taille NATURELLE de l'image (600 px en général) : sur
   un téléphone de 360 px, le calcul de centrage donne un `left` négatif et la
   fenêtre sort de l'écran. On la reprend en position fixe, centrée par le
   navigateur : c'est le seul moyen de neutraliser un positionnement posé en
   style en ligne. Les !important y sont indispensables — ils s'opposent
   précisément à ces styles en ligne. */
body.v7 #jquery-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: var(--z-voile);
}
body.v7 #jquery-lightbox {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  max-width: 100vw;
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modale);
}
/* Image + titre partagent la meme colonne (largeur image).
   Avant : width:auto !important sur data-box -> barre titre retrecie au texte. */
body.v7 #jquery-lightbox {
  display: grid !important;
  grid-template-columns: max-content;
  grid-template-areas: "lb";
  justify-content: center;
  align-content: center;
  justify-items: stretch;
}
body.v7 #lightbox-container-image-box {
  grid-area: lb;
  position: relative !important;
  max-width: calc(100vw - 2 * var(--e3, 1rem)) !important;
  width: max-content !important;
  box-sizing: border-box;
}
body.v7 #lightbox-container-image {
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box;
  position: relative;
}
body.v7 #lightbox-image {
  display: block;
  max-width: min(100%, calc(100vw - 2 * var(--e3, 1rem)));
  max-height: 70vh;
  height: auto;
  object-fit: contain;
}
/* Titre : largeur = image, en absolute sous le cadre photo */
body.v7 #lightbox-container-image-data-box {
  grid-area: lb;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--e2, 0.5rem) var(--e3, 1rem) !important;
  box-sizing: border-box !important;
  background-color: #fff;
  font: inherit;
  font-size: var(--v7-t-petit, 0.92rem);
  line-height: 1.4;
  overflow: visible;
  z-index: 12;
}
body.v7 #lightbox-container-image-data {
  padding: 0 !important;
  color: var(--v7-encre-douce, #5d5677);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e2, 0.5rem);
}
body.v7 #lightbox-container-image-data #lightbox-image-details {
  float: none !important;
  width: auto !important;
  flex: 1 1 auto;
  text-align: left;
}
body.v7 #lightbox-image-details-caption {
  font-weight: 600;
  color: var(--v7-encre, #241f38);
}
body.v7 #lightbox-image-details-currentNumber {
  display: block;
  clear: none;
  padding-bottom: 0;
  font-size: var(--v7-t-mini, 0.8rem);
  color: var(--v7-texte-doux, #6b6578);
}
body.v7 #lightbox-secNav-btnClose {
  float: none !important;
  width: var(--v7-cible, 44px) !important;
  min-width: var(--v7-cible, 44px);
  min-height: var(--v7-cible, 44px);
  padding: 0 !important;
  flex: 0 0 auto;
  position: relative;
  background-image: none !important;
}
body.v7 #lightbox-secNav-btnClose img { display: none !important; }
body.v7 #lightbox-secNav-btnClose::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(45deg, transparent 42%, var(--v7-violet-fonce, #6A46C8) 42%, var(--v7-violet-fonce, #6A46C8) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--v7-violet-fonce, #6A46C8) 42%, var(--v7-violet-fonce, #6A46C8) 58%, transparent 58%);
}
/* Fleches : plus de GIF hand-drawn ; pastilles + chevrons V7 */
body.v7 #lightbox-nav-btnPrev,
body.v7 #lightbox-nav-btnNext {
  min-width: var(--v7-cible, 44px);
  min-height: var(--v7-cible, 44px);
  background: transparent none !important;
  position: relative;
  opacity: 1 !important;
}
body.v7 #lightbox-nav-btnPrev:hover,
body.v7 #lightbox-nav-btnNext:hover {
  background: transparent none !important;
}
body.v7 #lightbox-nav-btnPrev::before,
body.v7 #lightbox-nav-btnNext::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -1.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(36, 31, 56, 0.18);
  pointer-events: none;
}
body.v7 #lightbox-nav-btnPrev::after,
body.v7 #lightbox-nav-btnNext::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.35rem;
  border-top: 2px solid var(--v7-violet-fonce, #6A46C8);
  border-right: 2px solid var(--v7-violet-fonce, #6A46C8);
  pointer-events: none;
}
body.v7 #lightbox-nav-btnPrev::before { left: 0.75rem; }
body.v7 #lightbox-nav-btnPrev::after {
  left: 1.55rem;
  transform: rotate(-135deg);
}
body.v7 #lightbox-nav-btnNext::before { right: 0.75rem; }
body.v7 #lightbox-nav-btnNext::after {
  right: 1.55rem;
  transform: rotate(45deg);
}

/* 9.2 colorbox — listes de naissance, favoris, estimation des frais de port.
   Bornage seul : sa fenêtre ne doit jamais dépasser la largeur de l'écran. */
body.v7 #colorbox,
body.v7 #cboxWrapper,
body.v7 #cboxContent,
body.v7 #cboxLoadedContent {
  max-width: 100vw;
  box-sizing: border-box;
}
body.v7 #cboxLoadedContent img,
body.v7 #cboxLoadedContent iframe { max-width: 100%; }

/* 9.3 Contenus servis DANS ces fenêtres et dimensionnés en dur en 2013. */
body.v7 #pop_up_ajout_au_panier {
  min-width: 0;                     /* était min-width:600px — product.css:813 */
  width: auto;
  max-width: 100%;
}
body.v7 #mappemonde { max-width: 100%; }
body.v7 .calcul     { max-width: 100%; }
body.v7 .div_lien   { font-size: var(--v7-t-moyen); }


/* ============================================================================
   23/09/2026 — Refonte fiche produit Powergym-like (onglets, pastilles, grille,
   modules bas, description courte, option Montage). Jetons V7 + Fibonacci R6.
   ========================================================================= */

/* Description courte (buy box) - TEXTE NU, sans lien / sans underline (01/10/2026) */
body.v7 .v7-desc-courte {
  display: block;
  margin: 0 0 var(--e3);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  cursor: default;
  font-family: "Poppins", "Poppins FB", Arial, system-ui, sans-serif;
  font-size: 15px;
}

body.v7 .v7-desc-courte__titre {
  margin: 0 0 var(--e2);
  font-family: var(--v7-police-produit);
  font-size: var(--v7-t-base);
  font-weight: 700;
  color: var(--v7-encre, #241f38);
  line-height: 1.35;
}
body.v7 .v7-desc-courte__texte {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--v7-encre-douce, #5d5677);
}
body.v7 .v7-desc-courte__texte strong,
body.v7 .v7-desc-courte__texte b {
  color: var(--v7-encre, #241f38);
  font-weight: 700;
}

/* Option Montage chez nous */
body.v7 .v7-montage-bloc {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  border: 1px dashed var(--v7-accent, #5b4fa8);
  border-radius: var(--v7-rayon-grand, 13px);
  background: linear-gradient(180deg, #efecfd 0%, #ffffff 100%);
}
body.v7 .v7-montage-bloc__entete { margin-bottom: var(--e3); }
body.v7 .v7-montage-bloc__badge {
  display: inline-block;
  margin: 0 0 var(--e1);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--v7-accent, #5b4fa8);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.v7 .v7-montage-bloc__titre {
  margin: 0 0 var(--e1);
  font-family: var(--v7-police-produit);
  font-size: var(--v7-t-grand, 1.15rem);
  color: inherit;
}
body.v7 .v7-montage-bloc__intro {
  margin: 0;
  font-size: var(--v7-t-petit, 0.9rem);
  color: var(--v7-encre-douce, #5d5677);
}

/* Pastilles reassurances — 8 cartes detachees, Comic */
/* 20260925a : fond blanc + bordure degrade teinte->blanc (sprites sans demarcation)
   Icones : PNG individuels sites/DDP/img/page_produit/sprite/*.png */
body.v7 .v7-pastilles-reassurance {
  margin-top: var(--e5);
  padding: var(--e4) 0;
  background: #fff;
}
body.v7 .v7-pastilles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}
@media (min-width: 768px) {
  body.v7 .v7-pastilles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* P0 20260926 : IHM mobile pastilles reassurances
   20260926e : largeur pleine pour col achat + pastilles (grille fiche-haut). */
@media (max-width: 767px) {
  body.v7 .produit_bebe_col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }
  body.v7 .v7-pastilles-reassurance,
  body.v7 .v7-pastilles {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.v7 .v7-pastilles-reassurance { padding: var(--e3) 0; margin-top: var(--e4); }
  body.v7 .v7-pastilles { gap: var(--e2); }
  body.v7 .v7-pastille {
    padding: var(--e3) var(--e2) var(--e2);
    border-radius: 13px;
    gap: var(--e1);
  }
  body.v7 .v7-pastille img { width: 48px; height: 48px; }
  body.v7 .v7-pastille__texte {
    font-size: 0.72rem;
    line-height: 1.25;
  }
}
/* Fond blanc = meme teinte que le fond des PNG sprite (pas de demarcation).
   Bordure : double background clip — teinte pastel qui fond vers blanc. */
body.v7 .v7-pastille {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e2);
  margin: 0;
  padding: var(--e4) var(--e2) var(--e3);
  border-radius: 18px;
  border: 1.5px solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(106, 70, 200, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  text-align: center;
  box-shadow: 0 4px 14px rgba(36, 31, 56, 0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.v7 .v7-pastille:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(91, 79, 168, 0.08);
}
body.v7 .v7-pastille img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  background: transparent;
}
body.v7 .v7-pastille__texte {
  font-family: var(--v7-police-titre, "Cocon", "Dosis", Arial, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--v7-encre, #241f38);
}
body.v7 .v7-pastille--violet {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(106, 70, 200, 0.32) 0%, rgba(255, 255, 255, 0) 72%);
}
body.v7 .v7-pastille--vert {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(46, 168, 110, 0.30) 0%, rgba(255, 255, 255, 0) 72%);
}
body.v7 .v7-pastille--bleu {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(64, 132, 220, 0.30) 0%, rgba(255, 255, 255, 0) 72%);
}
body.v7 .v7-pastille--lavande {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(140, 110, 210, 0.30) 0%, rgba(255, 255, 255, 0) 72%);
}
body.v7 .v7-pastille--menthe {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(50, 170, 140, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
}
body.v7 .v7-pastille--ciel {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(80, 150, 230, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
}
body.v7 .v7-pastille--prune {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(170, 90, 170, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
}
body.v7 .v7-pastille--turquoise {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(165deg, rgba(40, 160, 170, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
}

/* Onglets Powergym */
body.v7 .v7-prod-tabs {
  margin-top: var(--v7-respiration, var(--e6));
  clear: both;
}
body.v7 .v7-prod-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  border-bottom: 2px solid var(--v7-trait, #e0dcf2);
}
body.v7 .v7-prod-tabs__nav li {
  position: relative;
  margin: 0;
  padding: var(--e3) var(--e4);
  cursor: pointer;
  font-family: var(--v7-police-titre);
  font-size: var(--v7-t-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--v7-encre-douce, #5d5677);
  user-select: none;
}
body.v7 .v7-prod-tabs__nav li.is-active {
  color: #c0342c;
}
body.v7 .v7-prod-tabs__nav li.is-active::after {
  content: "";
  position: absolute;
  left: var(--e3);
  right: var(--e3);
  bottom: -2px;
  height: 3px;
  background: #c0342c;
  border-radius: 2px 2px 0 0;
}
body.v7 .v7-prod-tabs__panel { display: none; }
body.v7 .v7-prod-tabs__panel.is-active { display: block; }

/* Corps description — style Powergym (paragraphes courts, gras) */
/* 20260929 : description a plat, sans carte ni cadre. */
body.v7 #v7-tab-description,
body.v7 .v7-descriptif,
body.v7 .v7-descriptif__corps {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.v7 .v7-descriptif > .v7-descriptif__kicker {
  padding-bottom: 0;
  border-bottom: 0;
}body.v7 .v7-descriptif {
  padding: 0;
  font-family: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: #222;
}
body.v7 .v7-descriptif__corps,
body.v7 .v7-descriptif__corps p,
body.v7 .v7-descriptif__corps li,
body.v7 .v7-descriptif__corps dt,
body.v7 .v7-descriptif__corps dd,
body.v7 .v7-descriptif__corps td,
body.v7 .v7-descriptif__corps th {
  font-family: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
body.v7 .v7-descriptif__kicker {
  margin: 0 0 var(--e2);
  font-size: var(--v7-t-petit);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v7-encre-douce, #5d5677);
}
body.v7 .v7-descriptif__titre {
  margin: 0 0 var(--e4);
  font-family: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--v7-encre, #241f38);
  line-height: 1.3;
}
body.v7 .v7-descriptif__corps {
  display: block;
  max-width: none; /* 20260923f : texte jusqu au bout du conteneur (responsive) */
  width: 100%;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--v7-encre, #241f38);
}
body.v7 .v7-descriptif__corps p {
  margin: 0 0 var(--e3);
  max-width: none; /* plus de colonne 42em trop etroite */
  text-align: left;
}
body.v7 .v7-descriptif__corps strong,
body.v7 .v7-descriptif__corps b {
  font-weight: 700;
  color: inherit;
}
body.v7 .v7-descriptif__corps em,
body.v7 .v7-descriptif__corps i {
  font-style: italic;
  color: inherit;
}
/* 20260923f : titres techniques / hors lettrine = sobres (PAS d effet fun).
   L effet Cocon violet reste reserve a .header-container h3/h2. */
body.v7 .v7-descriptif__corps h3,
body.v7 .v7-descriptif__corps h2 {
  margin: var(--e5) 0 var(--e3);
  font-family: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--v7-t-moyen, 1.1rem);
  font-weight: 700;
  line-height: var(--v7-interligne-titre, 1.3);
  letter-spacing: normal;
  word-spacing: normal;
  color: var(--v7-encre, #241f38);
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-stroke: 0;
}

/* 20260923g : lettrine header-container = meme rendu Qualite pour TOUS les blocs.
   HTML reel (Grogu etc.) : <div.header-container><img.header-image><h3></div><p|ul|dl>
   Le H3 est SEUL dans le container ; le texte est frere suivant. Si le container
   cree une boite (display:block), sa hauteur = H3 : un titre long mange les 80px
   du float et le p ne s enroule plus (vide sous H3). Qualite marchait car H3 court
   + ul immediat laissait le float DEBORDER.
   Fix : display:contents — img + h3 participent au flux du parent comme freres du
   p/ul (equivalent visuel a "tout dans le container"), sans changer le HTML CMS.
   Pas de flow-root sur le container (cause vide 20260923b). */
body.v7 .v7-descriptif__corps .header-container,
body.v7 .descriptif_bebe .header-container {
  display: contents; /* img+h3 dans le meme BFC que les p/ul/dl suivants */
}
body.v7 .v7-descriptif__corps .header-image,
body.v7 .descriptif_bebe .header-image {
  float: left;
  display: block;
  width: 80px;
  max-width: 80px;
  height: auto;
  margin: 0 var(--e3, 13px) var(--e2, 8px) 0; /* gouttiere a droite = texte a DROITE */
  vertical-align: top;
  shape-outside: margin-box;
  clear: left; /* chaque nouvelle lettrine reprend sous le float precedent */
}
/* H3 lettrine UNIQUEMENT (.header-container) : Cocon violet, aligne au sprite */
body.v7 .v7-descriptif__corps .header-container h3,
body.v7 .v7-descriptif__corps .header-container h2,
body.v7 .descriptif_bebe .header-container h3,
body.v7 .descriptif_bebe .header-container h2 {
  /* margin-top = rythme de section (l ancien margin du container disparait avec contents) */
  margin: var(--e3, 13px) 0 0 0;
  /* Sommet glyphe ~ sommet sprite (Cocon) */
  padding: 8px 0 0 0;
  text-align: left;
  vertical-align: top;
  font-family: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--v7-t-base) * 1.325);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #222;
  text-shadow: none;
  overflow-wrap: break-word;
}
/* Suite immediate : colle sous le H3, s enroule a droite du float (etoile/pouce/badge) */
body.v7 .v7-descriptif__corps .header-container + p,
body.v7 .v7-descriptif__corps .header-container + ul,
body.v7 .v7-descriptif__corps .header-container + dl,
body.v7 .descriptif_bebe .header-container + p,
body.v7 .descriptif_bebe .header-container + ul,
body.v7 .descriptif_bebe .header-container + dl {
  margin-top: 0;
  padding-top: 0;
  clear: none; /* NE PAS clear : rester a droite de la lettrine */
}
/* Separateurs de sections du descriptif : coupent le float avant la lettrine suivante */
body.v7 .v7-descriptif__corps > hr,
body.v7 .descriptif_bebe > hr,
body.v7 .v7-descriptif__corps hr,
body.v7 .descriptif_bebe hr {
  clear: both;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 96px;
}
/* Paragraphe d intro avec icone clearfix : meme lettrine, texte en haut */
body.v7 .v7-descriptif__corps p:has(> .header-image),
body.v7 .descriptif_bebe p:has(> .header-image) {
  display: flow-root;
  text-align: justify;
}
/* Grille extraits images 3x3 / auto-fill */
body.v7 .v7-extraits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--e3);
  margin: var(--e5) 0 0;
  padding: 0;
}
body.v7 .v7-extraits__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--v7-rayon, 8px);
  background: var(--v7-surface-2, #faf9ff);
  border: 1px solid var(--v7-trait, #e0dcf2);
  aspect-ratio: 1 / 1;
}
body.v7 .v7-extraits__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
body.v7 .v7-extraits__item:hover img { transform: scale(1.05); }

/* Details du produit */
body.v7 .v7-details__titre {
  margin: 0 0 var(--e2);
  font-family: var(--v7-police-produit);
  font-weight: 700;
}
body.v7 .v7-details__sous { margin: 0 0 var(--e4); color: var(--v7-encre-douce, #5d5677); }

/* Avis */
body.v7 .v7-avis__titre {
  margin: 0 0 var(--e3);
  font-family: var(--v7-police-produit);
  font-weight: 700;
}
body.v7 .v7-avis__love {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e4);
  font-size: var(--v7-t-base);
}
body.v7 .v7-avis-produit #bloc_avis_client {
  margin-top: var(--e4);
}

/* Modules bas — 3 bandes premium */
body.v7 .v7-fiche-bas {
  margin-top: var(--v7-respiration, var(--e6));
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}
body.v7 .v7-bande-produits {
  padding: var(--e5) 0;
  border-top: 1px solid var(--v7-trait, #e0dcf2);
}
body.v7 .v7-bande-produits__titre {
  margin: 0 0 var(--e2);
  font-family: var(--v7-police-produit);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--v7-encre, #241f38);
}
body.v7 .v7-bande-produits__sous {
  margin: 0 0 var(--e4);
  color: var(--v7-encre-douce, #5d5677);
  font-size: var(--v7-t-petit);
}
body.v7 .v7-bande-produits__lien-titre {
  text-decoration: none;
  color: inherit;
}
body.v7 .v7-bande-produits__lien-titre:hover .v7-bande-produits__titre {
  color: inherit;
}
body.v7 .v7-bande-produits__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--e4);
  list-style: none;
  margin: 0;
  padding: 0;
}
body.v7 .v7-bande-produits__carte {
  margin: 0;
  padding: var(--e3);
  background: var(--v7-surface, #fff);
  border: 1px solid var(--v7-trait, #e0dcf2);
  border-radius: var(--v7-rayon-grand, 13px);
  box-shadow: var(--v7-ombre, 0 1px 2px rgba(36,31,56,.06));
  transition: transform .18s ease, box-shadow .18s ease;
}
body.v7 .v7-bande-produits__carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 21px rgba(91,79,168,.12);
}

/* 20260926e : .v7-fiche-haut EST la grille (voir §3). Plus de display:contents
   (cassait le mobile : pas de conteneur apres injection <script> ld+json). */

/* Masquer l ancien titre "Description" seul dans le flux si doublon */
body.v7 #argumentaire_21 > p { display: none; }

/* P0 20260926 tabs : pas de debordement H, cibles tactiles */
@media (max-width: 767px) {
  body.v7 .v7-prod-tabs__nav {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: var(--e4);
    max-width: 100%;
  }
  body.v7 .v7-prod-tabs__nav li {
    flex: 1 1 auto;
    min-height: var(--v7-cible, 44px);
    padding: var(--e2) var(--e3);
    font-size: var(--v7-t-petit);
    text-align: center;
    box-sizing: border-box;
  }
  body.v7 .v7-prod-tabs__nav li.is-active::after {
    left: var(--e2);
    right: var(--e2);
  }
  body.v7 .img_comp { max-width: 100%; }
}

/* ============================================================================
   2026-09-29 — Colonne achat V7 (refonte maquette Powergym / user)
   Prix fort, stock masque si dispo, livraison offerte texte, qty +/-,
   date reception, videos rondes stub, FAQ Diadia, pastilles 1 ligne.
   ============================================================================ */

/* 1. Prix en gras fort (magenta charte, weight 900 comme maquette TTC) */
body.v7 #prix_bebe {
  font-weight: 900;
  letter-spacing: -0.02em;
}
body.v7 #prix_bebe > div > div:not(.remise_data):not(.panier_magique) {
  font-weight: 900;
  color: var(--v7-prix);
}
body.v7 #prix_bebe #cents {
  font-weight: 800;
}

/* 2. Masquer « Il reste X … en stock » quand le produit EST en stock.
   Garder rupture / precommande / indispo (data-instock="0"). */
body.v7 .ddp-stock-msg[data-instock="1"] {
  display: none !important;
}
body.v7 .ddp-stock-msg[data-instock="0"] {
  display: block;
  color: var(--v7-alerte);
  font-weight: 600;
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
}

/* 3. « Livraison offerte » texte (remplace le GIF) */
body.v7 #liv_gratuite,
body.v7 .v7-livraison-offerte {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  margin: var(--e2) 0 0;
  padding: var(--e1) var(--e3);
  border-radius: var(--v7-rayon-pilule);
  background: var(--v7-achat-clair, #0FBF47);
  background: color-mix(in srgb, var(--v7-achat, #309B26) 14%, #fff);
  color: var(--v7-achat, #309B26);
  font-family: var(--v7-police-appui);
  font-size: var(--v7-t-petit);
  font-weight: 700;
  line-height: 1.3;
  max-width: 100%;
  height: auto;
}
/* 26/10/2026 (G3dev : « c'est colle ») : espace elargie apres « en stock », avant la pastille. Une espace et pas une
   marge : si la pastille passe a la ligne, l'espace reste en fin de ligne et la pastille reste alignee a gauche
   (une marge la decalait de 13 px, vu en capture a 1100 px). Sans effet sur neo (<b> dans .ddp-stock-msg). */
body.v7 #stock_bebe > b:last-of-type::after { content: " "; word-spacing: var(--e2); }
body.v7 .v7-livraison-offerte::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* 4. Controle quantite +/- (pilule) — sur la meme rangee que le CTA + icones */
/* 01/10/2026 qty UX : label INLINE devant la pilule ;
   portrait/mobile : masquer le mot Quantite, garder - / N / +. */
body.v7 #addProductForm .v7-qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--e1);
  margin: 0;
  min-width: 0;
}
body.v7 #addProductForm .v7-qty__label {
  font-size: var(--v7-t-petit);
  font-weight: 700;
  color: var(--v7-texte);
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (orientation: portrait), (max-width: 767px) {
  body.v7 #addProductForm .v7-qty__label {
    display: none;
  }
}
body.v7 #addProductForm .v7-qty__pilule {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--v7-trait);
  border-radius: var(--v7-rayon-pilule);
  overflow: hidden;
  background: var(--v7-blanc, #fff);
  min-height: 40px; /* buyrow6: pilule plus compacte */
}
body.v7 #addProductForm .v7-qty__btn {
  width: var(--e6);
  min-width: var(--v7-cible);
  border: 0;
  background: transparent;
  color: var(--v7-texte-doux);
  font-size: var(--v7-t-moyen);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.v7 #addProductForm .v7-qty__btn:hover {
  background: var(--v7-fond-doux, #f6f5f8);
  color: var(--v7-texte);
}
body.v7 #addProductForm .v7-qty__val,
body.v7 #addProductForm #quantity.v7-qty__val {
  width: var(--e6);
  min-width: 2.5rem;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--v7-trait);
  border-right: 1px solid var(--v7-trait);
  border-radius: 0;
  text-align: center;
  font-size: var(--v7-t-moyen);
  font-weight: 700;
  color: var(--v7-texte);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
body.v7 #addProductForm .v7-qty__val::-webkit-outer-spin-button,
body.v7 #addProductForm .v7-qty__val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 5. Date de reception prevue (InformationLivraison) */
body.v7 #information_livraison.v7-info-livraison,
body.v7 .v7-info-livraison {
  margin: var(--e2) 0 var(--e3);
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
  color: var(--v7-texte);
}
body.v7 .v7-livraison-date {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin: 0;
}
body.v7 .v7-livraison-date__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--v7-achat, #309B26);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  flex: 0 0 auto;
}
body.v7 .v7-livraison-date__texte {
  color: var(--v7-texte);
  font-weight: 700;
}
body.v7 .v7-livraison-date__texte strong {
  font-weight: 800;
}
body.v7 .v7-livraison-date__express {
  color: var(--v7-texte-doux);
  font-size: 0.95em;
  font-weight: 400;
}

/* 6. Quatre videos rondes (stub pret a brancher) */
body.v7 .v7-videos-metier {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e2);
  margin: var(--e4) 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
body.v7 .v7-videos-metier__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  color: var(--v7-texte-doux);
  font-family: inherit;
  font-size: var(--v7-t-petit);
}
body.v7 .v7-videos-metier__rond {
  display: block;
  width: 100%;
  max-width: 89px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--v7-trait);
  background:
    linear-gradient(145deg, #f3f1f8, #e4e0ef);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
body.v7 .v7-videos-metier__item--stub .v7-videos-metier__rond::after {
  content: "▶";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(0, 0, 0, 0.28);
  font-size: 1.1rem;
}
body.v7 .v7-videos-metier__label {
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 480px) {
  body.v7 .v7-videos-metier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e3);
  }
}

/* 7-9. FAQ Diadia */
body.v7 .v7-faq-diadia {
  margin: var(--e4) 0;
  padding: var(--e3) 0 0;
  border-top: 1px solid var(--v7-trait-doux);
}
body.v7 .v7-faq-diadia__titre {
  margin: 0 0 var(--e3);
  font-family: var(--v7-police-produit);
  font-size: var(--v7-t-moyen);
  font-weight: 800;
  line-height: var(--v7-interligne-titre);
  color: var(--v7-texte);
}
body.v7 .v7-faq-diadia__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0 0 var(--e3);
  padding: 0;
  list-style: none;
}
body.v7 .v7-faq-diadia__q,
body.v7 .v7-faq-diadia__poser {
  display: inline-flex;
  align-items: center;
  min-height: var(--v7-cible);
  padding: var(--e1) var(--e3);
  border: 1px solid var(--v7-trait);
  border-radius: var(--v7-rayon-pilule);
  background: #fcfcfc; /* pastilles question : gris tres clair */
  color: var(--v7-texte);
  font-family: inherit;
  font-size: var(--v7-t-petit);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--v7-vite), background var(--v7-vite);
}
body.v7 .v7-faq-diadia__q:hover {
  border-color: var(--v7-texte);
}
body.v7 .v7-faq-diadia__poser {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  font-weight: 700;
}
body.v7 .v7-faq-diadia__poser:hover {
  filter: brightness(1.08);
}

/* Panneau Diadia (overlay local, pre-reponse sans IA) */
body.v7 .v7-diadia[hidden] { display: none !important; }
body.v7 .v7-diadia {
  position: fixed;
  inset: 0;
  z-index: 2147482990;
}
body.v7 .v7-diadia__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 30, 0.42);
}
body.v7 .v7-diadia__panel {
  position: absolute;
  right: 21px;
  bottom: 144px;
  display: flex;
  flex-direction: column;
  width: min(377px, calc(100vw - 34px));
  height: min(560px, calc(100vh - 160px));
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
body.v7 .v7-diadia__entete {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e3);
  background: #8a7fe8;
  color: #fff;
}
body.v7 .v7-diadia__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 800;
}
body.v7 .v7-diadia__entete strong {
  display: block;
  font-size: var(--v7-t-base);
  font-weight: 800;
}
body.v7 .v7-diadia__sous {
  display: block;
  font-size: 11px;
  opacity: 0.9;
}
body.v7 .v7-diadia__fermer {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
body.v7 .v7-diadia__messages {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  background: #f7f6fb;
}
body.v7 .v7-diadia__bulle {
  max-width: 92%;
  padding: var(--e2) var(--e3);
  border-radius: 13px;
  font-size: var(--v7-t-petit);
  line-height: 1.45;
  white-space: pre-wrap;
}
body.v7 .v7-diadia__bulle--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--v7-trait-doux, #e8e6ef);
  color: var(--v7-texte);
}
body.v7 .v7-diadia__bulle--user {
  align-self: center;
  background: #8a7fe8;
  color: #fff;
}
body.v7 .v7-diadia__suggestions {
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--v7-trait-doux);
  background: #fff;
  max-height: 140px;
  overflow: auto;
}
body.v7 .v7-diadia__sugg-titre {
  margin: 0 0 var(--e1);
  font-size: 12px;
  font-weight: 700;
  color: var(--v7-texte-doux);
}
body.v7 .v7-diadia__sugg {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: #f1f1f5;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}
body.v7 .v7-diadia__sugg:hover { background: #e4e4ec; }
body.v7 .v7-diadia__compose {
  display: flex;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--v7-trait-doux);
  background: #fff;
}
body.v7 .v7-diadia__compose textarea {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 88px;
  padding: 8px 10px;
  border: 1px solid var(--v7-trait);
  border-radius: 10px;
  resize: vertical;
  font-family: inherit;
  font-size: var(--v7-t-petit);
}
body.v7 .v7-diadia__envoyer {
  flex: 0 0 auto;
  align-self: center;
  min-height: 44px;
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--v7-rayon-pilule);
  background: #8a7fe8;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
body.v7 .v7-diadia__pied {
  margin: 0;
  padding: 0 var(--e3) var(--e3);
  background: #fff;
  text-align: center;
}
body.v7 .v7-diadia__ouvrir-widget {
  border: 0;
  background: transparent;
  color: #8a7fe8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
body.v7 .u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* 10. Pastilles confiance : une seule ligne horizontale (8 items) */
body.v7 .v7-pastilles-reassurance {
  width: 100%;
  margin-top: var(--e4);
  padding: var(--e3) 0 0;
}
body.v7 .v7-pastilles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--e1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.v7 .v7-pastille {
  flex: 1 1 0;
  min-width: 72px;
  max-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
  padding: var(--e2) var(--e1);
  text-align: center;
}
body.v7 .v7-pastille img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
body.v7 .v7-pastille__texte {
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
}
@media (min-width: 768px) {
  body.v7 .v7-pastilles {
    gap: var(--e2);
  }
  body.v7 .v7-pastille {
    min-width: 0;
    max-width: none;
  }
  body.v7 .v7-pastille img {
    width: 48px;
    height: 48px;
  }
  body.v7 .v7-pastille__texte {
    font-size: 11px;
  }
}
/* Annule l'ancienne grille 2x4 / 4 col pour forcer la row unique */
@media (min-width: 0) {
  body.v7 .v7-pastilles {
    grid-template-columns: none;
  }
}


body.v7 .v7-desc-courte,
body.v7 .v7-desc-courte__texte {
  font-family: "Poppins", "Poppins FB", Arial, system-ui, sans-serif;
  font-size: 15px;
}
body.v7 .v7-desc-courte__texte em,
body.v7 .v7-desc-courte__texte i {
  font-style: italic;
}
body.v7 .v7-desc-courte__texte {
  font-weight: 400;
  color: var(--v7-encre, #241f38);
}

/* Pastilles: ne jamais s ecraser a cote des specs (display:contents mobile) */
body.v7 .v7-pastilles-reassurance,
body.v7 #argumentaire_21.v7-pastilles-reassurance {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  clear: both;
  order: 6;
}
@media (min-width: 1024px) {
  body.v7 .produit_bebe_img .v7-pastilles-reassurance,
  body.v7 .produit_bebe_img #argumentaire_21.v7-pastilles-reassurance {
    display: block;
    width: 100%;
    margin-top: var(--e4);
  }
}

/* ============================================================================
   2026-09-29 - Issue1 prix gras fort (maquette TTC) - TAKE 2
   Cause : @font-face "baloo 2" weight 500-800 pointait vers Regular, donc
   font-weight:900 resolvait vers Regular sans faux-gras. Fix : faces Bold/
   ExtraBold reelles dans v7-tokens.css + stroke leger pour que ca SE VOIE.
   Cible le noeud texte (#prix_bebe > div > div) et #cents.
   ============================================================================ */
body.v7 #prix_bebe {
  font-family: var(--v7-police-produit) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-synthesis: weight;
}
body.v7 #prix_bebe > div > div:not(.remise_data):not(.panier_magique),
body.v7 #prix_bebe > div > div:not(.remise_data):not(.panier_magique) #cents {
  font-family: var(--v7-police-produit) !important;
  font-weight: 800 !important;
  color: var(--v7-prix);
  font-synthesis: weight;
  /* Filet de secours visuel : meme si la face ExtraBold tarde a charger,
     le prix parait deja plus gras que le titre. */
  -webkit-text-stroke: 0.45px currentColor;
  paint-order: stroke fill;
}
body.v7 #prix_bebe #cents {
  font-weight: 800 !important;
  -webkit-text-stroke: 0.35px currentColor;
}

/* ==========================================================================
   2026-10-08 - Prix promo lisible + CTA pleine largeur (buyrow7 / user img1+2)
   --v7-t-petit GLOBAL reste clamp(...14px) : trop d'usages hors prix (home,
   labels, livraisons...). On le remonte UNIQUEMENT dans #prix_bebe a 18px
   (reduit ~15-16px sur petit ecran). Prix de vente : +10% et gras conserve.
   ========================================================================== */
body.v7 #prix_bebe {
  --v7-t-petit: clamp(15px, 0.92rem + 0.35vw, 18px);
}
body.v7 #prix_bebe .remise_data {
  font-size: var(--v7-t-petit);
  line-height: 1.35;
}
body.v7 #prix_bebe #remise {
  font-size: var(--v7-t-petit);
  line-height: 1.45;
  padding: 0.15em 0.55em;
}
/* Prix de vente : 10% plus grand que --v7-t-titre, gras reel (faces ExtraBold) */
body.v7 #prix_bebe,
body.v7 #prix_bebe > div > div:not(.remise_data):not(.panier_magique) {
  font-size: calc(var(--v7-t-titre) * 1.1);
  font-weight: 800 !important;
}
body.v7 #prix_bebe #cents {
  font-weight: 800 !important;
}
@media (max-width: 480px) {
  body.v7 #prix_bebe {
    --v7-t-petit: clamp(14px, 3.8vw, 16px);
  }
}

/* ==========================================================================
   2026-10-09 - buyrow8 : CTA ne chevauche plus les icones + texte gras reel
   CAUSE chevauchement : v7-site.css:21-31 pose sur #addProductSubmit
     :hover  -> transform: translateY(-3px) scale(1.04) + ombre 0 12px 26px
     :active -> scale(.95)
   Nos regles :hover de 5.7 ne remettaient pas transform -> le scale 1.04
   s'appliquait a un CTA flex:1 (~460px => +18px, > gap 8px) : il debordait
   sur coeur + cadeau. On neutralise transform/ombre ici (specificite 1,1,1+).
   GRAS : la v7-tokens.css SERVIE sur .240 declare "baloo 2" 500-800 -> fichier
   Regular (le correctif Bold/ExtraBold local n'est pas deploye). On ne touche
   pas le global : alias de police dedie au CTA, pointant sur le vrai Bold.
   ========================================================================== */
@font-face {
  font-family: "ddp-cta-baloo2";
  src: url("/media/font/Baloo2/baloo2-bold-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
body.v7 #addProductForm input.btv,
body.v7 #addProductSubmit {
  font-family: "ddp-cta-baloo2", var(--v7-police-produit) !important;
  font-weight: 700;
  font-synthesis: none;
  margin-left: 17px;
  margin-right: 17px;
  flex: 1 1 auto;
  min-width: 8rem;
  transform: none;
}
body.v7 #addProductForm input.btv:hover,
body.v7 #addProductSubmit:hover,
body.v7 #addProductForm input.btv:focus,
body.v7 #addProductSubmit:focus,
body.v7 #addProductForm input.btv:focus-visible,
body.v7 #addProductSubmit:focus-visible {
  transform: none;
  box-shadow: inset 0 1px 0 var(--v7-vert-vif), 0 1px 2px rgba(0, 0, 0, .25);
  filter: brightness(1.06);
}
body.v7 #addProductForm input.btv:active,
body.v7 #addProductSubmit:active {
  transform: translateY(1px);   /* retour tactile vertical, jamais d'agrandissement */
}
body.v7 #addProductForm .v7-buy-icones { position: relative; z-index: 1; }
@media (max-width: 480px) {
  body.v7 #addProductForm input.btv,
  body.v7 #addProductSubmit {
    margin-right: 0;   /* icones passent a la ligne : pas de marge droite inutile */
  }
}
/* buyrow8b : le libelle gras (~148px a 19px) etait rogne quand le CTA
   tombait a 167px (1280) ou 128px (1024). Le CTA ne descend plus sous sa
   largeur de contenu ; si la rangee manque de place, les icones passent a la
   ligne (wrap) au lieu d'etre recouvertes. 1280 : tient sur une ligne. */
body.v7 #addProductForm input.btv,
body.v7 #addProductSubmit {
  padding-left: var(--e2);
  padding-right: var(--e2);
  /* max-content d'un <input> = largeur UA (~237px), pas le texte : borne en em sur le libelle "Ajouter au Panier" (~7.8em en gras) */
  min-width: calc(7.9em + 2 * var(--e2));
  flex: 1 1 0%;  /* base 0 : un <input> en flex-basis:auto prend sa largeur UA, pas son texte */
}
body.v7 #addProductForm .v7-buy-row {
  flex-wrap: wrap;
  row-gap: var(--e2);
}
/* ============================================================================
   09/10/2026 reassur1 : reassurance sous le lien "Decouvrez toute la Collection"
   (skel.produit.tpl, apres #options_ajouter_page_produit) + suppression du vide
   sous "Poser ma question".
   ============================================================================ */
body.v7 .v7-faq-diadia { margin-bottom: 0; }
body.v7 .v7-faq-diadia__poser { margin-bottom: 0; }
body.v7 #options_ajouter_page_produit {
  margin-top: var(--e2);
  padding-top: var(--e2);
}
/* <br><br> final de listAdd = ligne vide sous le lien collection */
body.v7 #options_ajouter_page_produit > br + br { display: none; }
/* font-size/line-height 0 : _commun/argumentaire_26.tpl commence par un BOM (U+FEFF)
   qui cree une ligne vide (~26px) avant la <ul> */
body.v7 .produit_bebe_col #argumentaire_21.v7-reassur-sous-collection {
  margin: var(--e2) 0 0;
  padding: var(--e2) 0 0;
  font-size: 0;
  line-height: 0;
}
body.v7 #argumentaire_21.v7-reassur-sous-collection .v7-pastilles {
  font-size: var(--v7-t-base);
  line-height: var(--v7-interligne);
}
/* Icone + texte seuls pour toutes les fiches (v7-tpl-g-trusttexte.css, qui porte
   .v7-pastilles--nues, n'est charge que pour 45232/27951/18973) */
body.v7 #argumentaire_21.v7-reassur-sous-collection .v7-pastille {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body.v7 #argumentaire_21.v7-reassur-sous-collection .v7-pastille:hover {
  transform: none;
  box-shadow: none;
}
@media (max-width: 599px) {
  body.v7 #argumentaire_21.v7-reassur-sous-collection .v7-pastilles {
    flex-wrap: wrap;
    row-gap: var(--e3);
  }
  body.v7 #argumentaire_21.v7-reassur-sous-collection .v7-pastille {
    flex: 1 0 22%;
  }
}

/* 10/10/2026 pastilles : icones pleine largeur a partir de 768px (demande user) ; height auto sinon object-fit garde 48px */
@media (min-width: 768px) {
  body.v7 .v7-pastille img { width: 100%; height: auto; }
}

/* ============================================================================
   10/10/2026 tabsbas : onglets Video|Photo (tpl G : 45232, 18973, 27951) SOUS le media.
   CSS seul (aucune modif des _tpl_g_images*.tpl ni de v7-tpl-g-trusttexte.css).
   Ordre : media -> "video non contractuelle" -> onglets. En mode Photo, l'image porte
   -webkit-box-reflect (product.css:32, ~14 % visible sous l'image) : marge haute pour
   laisser le reflet visible au-dessus des onglets.
   ============================================================================ */
body.v7 article.v7-fiche-produit .v7-tpl-g-hero {
  display: flex;
  flex-direction: column;
}
body.v7 article.v7-fiche-produit .v7-tpl-g-hero > .v7-tpl-g-panel { order: 1; }
body.v7 article.v7-fiche-produit .v7-tpl-g-hero > .v7-tpl-g-tabs {
  order: 2;
  margin: var(--e3, 8px) 0 0;
  border-bottom: 0;
  border-top: 1px solid #ddd;
}
body.v7 article.v7-fiche-produit .v7-tpl-g-hero > .v7-tpl-g-tabs .v7-tpl-g-tab {
  border-bottom: 0;
  border-top: 2px solid transparent;
}
body.v7 article.v7-fiche-produit .v7-tpl-g-hero > .v7-tpl-g-tabs .v7-tpl-g-tab.is-active {
  border-top-color: #111;
}
body.v7 article.v7-fiche-produit .v7-tpl-g-hero:has(> [data-tpl-g-panel="photo"]:not([hidden])) > .v7-tpl-g-tabs {
  margin-top: 14%;
}
/* 10/10/2026 logox2 : logo marque au-dessus du titre x2 (55 -> 110px de haut max ; logos sources 120px => net) */
body.v7 #marque_produit_bebe img {
  max-height: calc(2 * var(--e6, 55px));
  height: auto;
  width: auto;
}

/* ============================================================================
   10/10/2026 media1 : media fiche sans onglets + galerie apres donnees techniques
   + lien "Lire la suite" de la description courte.
   ============================================================================ */
body.v7 .v7-desc-courte__suite {
  margin-left: .25em;
  color: var(--v7-violet-fonce, #6A46C8);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.v7 .v7-ancre-description { display: block; height: 0; scroll-margin-top: 24px; }
/* Galerie (photos + videos secondaires) : sous Reference / donnees techniques */
body.v7 .img_comp { margin-top: var(--e4, 13px); }
@media (max-width: 1023px) {
  /* produit_bebe_img en display:contents : galerie apres achat (3), fiche technique (5) et reassurance (6) */
  body.v7 .img_comp { order: 7; }
}
/* media1b : video principale en haut - carre, sans hauteur fixe 800px (vide sur mobile) */
body.v7 .produit_bebe_img > video.v7-product-video-principale {
  width: 100%;
  height: auto !important;
  max-height: 800px;
  aspect-ratio: 1 / 1;
}

/* 11/10/2026 bandeau1 : fiche produit - la marge haute du fil d'Ariane (#puericulture 13px) traversait main
   (margin collapsing) et laissait voir le fond lavande du body (#CCF) sur toute la largeur. */
body.v7 .v7-main:has(> article.v7-fiche-produit) { display: flow-root; }

/* 12/10/2026 reassur3 : infobulle (ancien libelle) au-dessus de l'icone au survol / focus clavier.
   Pas d'infobulle sur ecran tactile (hover:none). Legendes longues sur 2-3 lignes. */
body.v7 .v7-pastille { position: relative; }
body.v7 .v7-pastille:focus-visible { outline: 2px solid var(--v7-violet, #7B5CD6); outline-offset: 3px; border-radius: 12px; }
body.v7 .v7-pastille__texte { overflow-wrap: break-word; hyphens: manual; }
body.v7 .v7-pastille__tip {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
  z-index: 20; width: max-content; max-width: 180px; padding: 6px 10px; border-radius: 8px;
  background: #4B3A8C; color: #fff; font-size: 13px; line-height: 1.3; font-weight: 600; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.18); pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
body.v7 .v7-pastille__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #4B3A8C;
}
@media (hover: hover) {
  body.v7 .v7-pastille:hover .v7-pastille__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
body.v7 .v7-pastille:focus-visible .v7-pastille__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: none) { body.v7 .v7-pastille__tip { display: none; } }
/* reassur3b : legendes longues <= 3 lignes dans la rangee de 8 (colonne ~66px) */
@media (min-width: 1024px) {
  body.v7 .v7-reassur-sous-collection .v7-pastilles { gap: 2px; }
  body.v7 .v7-reassur-sous-collection .v7-pastille__texte { font-size: 10.5px; letter-spacing: -.1px; }
}

/* reassur3c : ul.v7-pastilles a overflow:auto (repli defilement) qui coupait l'infobulle ; la rangee tient en largeur sur desktop */
@media (min-width: 1024px) and (hover: hover) {
  body.v7 .v7-pastilles { overflow: visible; }
}

/* reassur3d : infobulle au premier plan (le lien collection au-dessus la recouvrait) */
body.v7 .v7-reassur-sous-collection { position: relative; z-index: 5; }
body.v7 .v7-pastille:hover, body.v7 .v7-pastille:focus-visible { z-index: 30; }
/* === CSS-BOSS produit 20261013 (start) ===
   Demande Page produit. Surcharges ajoutees en fin de fichier (meme specificite, plus tard = gagne) ;
   les lignes d'origine (~1895-1915, ~2725-2729) ne sont pas modifiees. transform (translateY) conserve. */
body.v7 .v7-bande-produits__carte { border: 0; border-radius: 0; box-shadow: none; }
body.v7 .v7-bande-produits__carte:hover { box-shadow: none; }
body.v7 .v7-bande-produits__grille { grid-template-columns: repeat(auto-fit, minmax(148px, 180px)); justify-content: center; }
@media (max-width: 767px) {
  body.v7 .v7-bande-produits__grille { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 1023px) {
  body.v7 .img_comp { order: 2; }
}
/* === CSS-BOSS produit 20261013 (end) === */
/* (deplace depuis v7-funnel.css le 20261013, CSS-BOSS - demande Funnel ; v7-produit.css charge apres le bundle, aucune autre regle sur ces selecteurs) */
/* === PRODUIT_DESC_REPLIABLE_20261013 (CSS-BOSS, demande Funnel) === */
body.v7 .tv7-lire-suite[hidden]{display:none!important}
@media (max-width:767px){
 body.v7 #_des.tv7-desc-repliee{max-height:233px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
 body.v7 .tv7-lire-suite{display:inline-flex;align-items:center;min-height:44px;margin:13px 0 21px;padding:8px 21px;border:1px solid var(--v7-lilas-bord);border-radius:999px;background:#fff;color:var(--v7-violet-fonce);font:600 15px/1.2 var(--v7-police-texte);cursor:pointer}
 body.v7 .tv7-lire-suite:focus-visible{outline:2px solid var(--v7-violet-fonce);outline-offset:2px}
}
@media (min-width:768px){body.v7 .tv7-lire-suite{display:none}}
/* === PRODUIT_DESC_REPLIABLE_20261013 (end) === */
/* === CSS-BOSS produit-thumbs4 20261013 (start) === demande Page produit */
@media (min-width: 1024px) {
  body.v7 .img_comp { margin-bottom: var(--e5, 34px); }
}
/* === CSS-BOSS produit-thumbs4 20261013 (end) === */
/* === CSS-BOSS BANDES_V6_20261013 (Page produit) (start) === titres a gauche, gris, sans ellipse ; filet au-dessus de la grille ;
   l'ancien border-top de .v7-bande-produits (l.1874) est neutralise par override. Prix : la div sans classe ni id enfant directe
   de la carte (productTiny : <div>14&euro;<small>90</small></div>) ; #pt2_px_ba garde son style. Cartes sans contour / rangees centrees (blocs precedents) conserves. */
body.v7 .v7-bande-produits { border-top: 0; }
body.v7 .v7-bande-produits__lien-titre{display:block;text-align:left;text-decoration:none}
body.v7 .v7-bande-produits__titre{text-align:left;font-size:20px;font-weight:800;color:rgba(0,0,0,.34);margin:0 0 4px;white-space:normal;overflow:visible;text-overflow:clip}
body.v7 .v7-bande-produits__grille{border-top:1px solid rgba(0,0,0,.1);padding-top:var(--e3,13px)}
body.v7 .v7-bande-produits__carte small,
body.v7 .v7-bande-produits__carte #cents,
body.v7 .v7-bande-produits__carte > div:not([class]):not([id]){color:#999999}
@media (max-width:767px){body.v7 .v7-bande-produits__titre{font-size:16px}}
/* le titre perdait (couleur + taille) face a body.v7 #bloc_cat h2 (1,1,2) -> variante (1,2,1) */
body.v7 #bloc_cat .v7-bande-produits__titre{font-size:20px;color:rgba(0,0,0,.34)}
@media (max-width:767px){body.v7 #bloc_cat .v7-bande-produits__titre{font-size:16px}}
/* === CSS-BOSS BANDES_V6_20261013 (end) === */
/* === CSS-BOSS PERSO_LARGEUR_20261015 (Fiche produit, demande G3dev) (start) ===
   div.v7-montage (enveloppe de #personnalisation_bebe, enfant direct du flex #addProductForm) n'avait aucune regle : flex-item en largeur de contenu,
   cale a gauche. On lui donne toute la ligne comme .v7-buy-row (flex:1 1 100%) -> memes bords que la description courte et la rangee d'achat. */
body.v7 #addProductForm > .v7-montage{flex:1 1 100%;width:100%;max-width:none;min-width:0;margin-inline:0;box-sizing:border-box}
body.v7 #addProductForm .v7-montage > #personnalisation_bebe{width:100%;max-width:none;margin-inline:0;box-sizing:border-box}
body.v7 #addProductForm #personnalisation_bebe .pv7{width:auto;max-width:none;margin-inline:0;box-sizing:border-box}
/* 15/10 : couleurs du fil a la ligne (perso.css l.166 nowrap + overflow-x:auto coupait la derniere pastille a 1280) ; taille des pastilles inchangee */
body.v7 #addProductForm #personnalisation_bebe .pv7-couleurs{flex-wrap:wrap;overflow-x:visible;gap:var(--e2)}
/* === CSS-BOSS PERSO_LARGEUR_20261015 (end) === */
/* === CSS-BOSS PPPD_ORDER_20261015 (Page produit) (start) === meme specificite (0,1,1) que la section 3 (l.191-195) ; aucune autre regle sur .v7-pppd-col -> resultat identique a une insertion en section 3. L'order:6 inline du tpl gagne tant qu'il est en place. */
body.v7 .v7-pppd-col{order:6} /* OFFRES SPECIALES apres achat + fiche technique sous 1024px */
@media (min-width:1024px){body.v7 .v7-pppd-col{order:0}}
/* === CSS-BOSS PPPD_ORDER_20261015 (end) === */
/* CSS-BOSS paliers-cadeaux 20261015 */
/* ===== CSS-BOSS paliers-cadeaux 20261015 : bloc « Vos cadeaux » (fiche produit) ===== */
.ddp-paliers{--ddp-paliers-ok:1;--pl-violet:#4B3A8C;--pl-violet-2:#6d5bb8;--pl-lilas:#efeaf8;--pl-trait:#d9d2ea;--pl-encre:#2e2a39;--pl-gris:#6f6a7c;--pl-or:#ffd36e;margin:18px 0 8px;font-family:inherit}
.ddp-paliers[hidden]{display:none!important}
.ddp-paliers__tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 10px}
.ddp-paliers__titre{margin:0;font-size:18px;line-height:1.2;font-weight:700;color:var(--pl-encre);text-transform:none;letter-spacing:0}
.ddp-paliers__sous{margin:0;font-size:14px;color:var(--pl-gris)}
.ddp-paliers__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ddp-palier{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;margin:0;padding:0}
.ddp-palier__case{position:relative;box-sizing:border-box;width:100%;aspect-ratio:1/1;border-radius:14px;border:2px solid var(--pl-trait);background:repeating-linear-gradient(-45deg,#f5f2fb 0 6px,#ebe6f5 6px 8px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 4px;transition:border-color .3s .5s,background .3s .5s,box-shadow .3s .5s}
.ddp-palier__haut,.ddp-palier__bas{font-size:13px;line-height:1.1;color:#5b5370;text-align:center;transition:opacity .3s .2s}
.ddp-palier__haut{font-weight:700}
.ddp-palier__cadenas{position:relative;display:block;width:22px;height:26px;transition:opacity .3s .2s,transform .3s .2s}
.ddp-palier__anse{position:absolute;left:4px;top:0;box-sizing:border-box;width:14px;height:14px;border:3px solid #6b6385;border-bottom:0;border-radius:8px 8px 0 0;transform-origin:100% 100%;transition:transform .3s}
.ddp-palier__serrure{position:absolute;left:0;bottom:0;width:22px;height:15px;border-radius:4px;background:#6b6385}
.ddp-palier__serrure::after{content:"";position:absolute;left:9px;top:4px;width:4px;height:6px;border-radius:2px;background:#ebe6f5}
.ddp-palier__nom{font-size:13.5px;line-height:1.2;text-align:center;color:var(--pl-encre);opacity:.5;max-width:100%;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ddp-palier__cadeau{position:absolute;left:16%;top:16%;width:68%;height:68%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4)}
.ddp-palier__cadeau svg{width:100%;height:100%;display:block}
/* paquet cadeau dessine en CSS */
.ddp-palier__paquet{position:absolute;left:50%;bottom:16%;width:58%;height:58%;transform:translateX(-50%);opacity:0;pointer-events:none}
.ddp-paliers .ddp-paquet__corps{position:absolute;left:8%;right:8%;bottom:0;height:62%;border-radius:4px;background:linear-gradient(90deg,transparent 42%,var(--pl-or) 42%,var(--pl-or) 58%,transparent 58%),#cbbdf2;box-shadow:inset 0 -6px 0 rgba(75,58,140,.12)}
.ddp-paliers .ddp-paquet__couvercle{position:absolute;left:0;right:0;bottom:60%;height:20%;border-radius:4px;background:linear-gradient(90deg,transparent 42%,var(--pl-or) 42%,var(--pl-or) 58%,transparent 58%),#b9a8ea}
.ddp-paliers .ddp-paquet__noeud{position:absolute;left:50%;bottom:79%;width:46%;height:26%;transform:translateX(-50%)}
.ddp-paliers .ddp-paquet__noeud::before,.ddp-paliers .ddp-paquet__noeud::after{content:"";position:absolute;bottom:0;box-sizing:border-box;width:50%;height:100%;border:4px solid var(--pl-or);border-radius:50% 50% 10% 50%}
.ddp-paliers .ddp-paquet__noeud::before{left:0;transform:rotate(-18deg)}
.ddp-paliers .ddp-paquet__noeud::after{right:0;transform:scaleX(-1) rotate(-18deg)}
/* debloque */
.ddp-palier.is-ouvert .ddp-palier__case,.ddp-palier.is-anime .ddp-palier__case{border-color:var(--pl-violet);background:#fff8fb;box-shadow:0 6px 16px rgba(75,58,140,.14)}
.ddp-palier.is-ouvert .ddp-palier__case{transition:none}
.ddp-palier.is-ouvert .ddp-palier__haut,.ddp-palier.is-ouvert .ddp-palier__bas,.ddp-palier.is-ouvert .ddp-palier__cadenas,.ddp-palier.is-anime .ddp-palier__haut,.ddp-palier.is-anime .ddp-palier__bas{opacity:0}
.ddp-palier.is-ouvert .ddp-palier__cadenas{display:none}
.ddp-palier.is-ouvert .ddp-palier__cadeau{opacity:1;transform:none}
.ddp-palier.is-ouvert .ddp-palier__nom,.ddp-palier.is-anime .ddp-palier__nom{opacity:1;font-weight:700;color:var(--pl-violet)}
/* animation d'ouverture (environ 3,2 s) */
.ddp-palier.is-anime .ddp-palier__anse{transform:translateY(-5px) rotate(10deg)}
.ddp-palier.is-anime .ddp-palier__cadenas{opacity:0;transform:scale(.8)}
.ddp-palier.is-anime .ddp-palier__paquet{animation:ddpPlPaquet 1.9s 1.2s both}
.ddp-palier.is-anime .ddp-paquet__couvercle{animation:ddpPlCouvercle 1s 1.2s both}
.ddp-palier.is-anime .ddp-paquet__noeud{animation:ddpPlNoeud 1.1s 1.2s both}
.ddp-palier.is-anime .ddp-palier__cadeau{animation:ddpPlCadeau 2s 1.2s both}
/* de plus en plus etincelant : lueur doree aux paliers 3 et 4, reflet au palier 4 */
.ddp-palier[data-palier="2"].is-anime .ddp-palier__case{animation:ddpPlLueur 1s 1.4s 1 both}
.ddp-palier[data-palier="3"].is-anime .ddp-palier__case{animation:ddpPlLueur 1.2s 1.4s 2 both}
.ddp-palier[data-palier="4"].is-anime .ddp-palier__case{background:linear-gradient(100deg,transparent 40%,rgba(255,240,190,.95) 50%,transparent 60%) no-repeat,#fff8fb;background-size:260% 100%;animation:ddpPlLueurForte 1.2s 1.4s 2 both,ddpPlReflet 1s 2.2s both}
.ddp-palier[data-palier="4"].is-ouvert .ddp-palier__case{box-shadow:0 0 0 3px rgba(255,211,110,.55),0 6px 16px rgba(75,58,140,.16)}
@keyframes ddpPlPaquet{0%{opacity:0;transform:translateX(-50%) translateY(30%) scale(.6)}15%{opacity:1;transform:translateX(-50%) translateY(-8%) scale(1.05)}25%{transform:translateX(-50%) translateY(0) scale(1)}55%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(10%) scale(.3)}}
@keyframes ddpPlCouvercle{0%,30%{transform:none;opacity:1}60%{transform:translate(-40%,-120%) rotate(-35deg);opacity:1}100%{transform:translate(-70%,-160%) rotate(-60deg);opacity:0}}
@keyframes ddpPlNoeud{0%,25%{transform:translateX(-50%) scale(1);opacity:1}55%{transform:translateX(-50%) translateY(-140%) scale(1.2) rotate(15deg);opacity:1}100%{transform:translateX(-50%) translateY(-200%) scale(.4);opacity:0}}
@keyframes ddpPlCadeau{0%,30%{opacity:0;transform:translateY(30%) scale(.3)}60%{opacity:1;transform:translateY(-6%) scale(1.15)}80%{transform:translateY(0) scale(.96)}100%{opacity:1;transform:none}}
@keyframes ddpPlLueur{0%,100%{box-shadow:0 6px 16px rgba(75,58,140,.14)}50%{box-shadow:0 0 0 4px rgba(255,211,110,.6),0 0 22px rgba(255,211,110,.7)}}
@keyframes ddpPlLueurForte{0%,100%{box-shadow:0 6px 16px rgba(75,58,140,.14)}50%{box-shadow:0 0 0 5px rgba(255,211,110,.75),0 0 34px 6px rgba(255,211,110,.85)}}
@keyframes ddpPlReflet{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
/* a portee avec la quantite choisie */
.ddp-palier.is-portee .ddp-palier__case{border-style:dashed;border-color:var(--pl-violet-2)}
.ddp-palier.is-portee .ddp-palier__bas{color:var(--pl-violet);font-weight:700}
.ddp-palier.is-portee .ddp-palier__nom{opacity:.85}
/* pochette non proposee (meuble ou gros article) */
.ddp-palier.is-indispo .ddp-palier__case{background:#f6f5f8;border-style:dotted}
.ddp-palier.is-indispo .ddp-palier__cadenas{display:none}
.ddp-palier.is-indispo .ddp-palier__nom{text-decoration:line-through;opacity:.4}
/* textes sous les cases */
.ddp-paliers__aide{margin:10px 0 0;font-size:14.5px;line-height:1.4;color:var(--pl-encre)}
.ddp-paliers__ajout{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--pl-violet);font-weight:700}
.ddp-paliers__ajout:empty{display:none}
/* message bref (3 s) */
.ddp-paliers__toast{position:fixed;left:50%;bottom:24px;z-index:10001;max-width:calc(100% - 32px);box-sizing:border-box;padding:10px 18px;border-radius:999px;background:#4B3A8C;color:#fff;font-size:15px;font-weight:700;text-align:center;box-shadow:0 10px 30px rgba(46,42,57,.25);opacity:0;transform:translate(-50%,16px);transition:opacity .3s,transform .3s;pointer-events:none}
.ddp-paliers__toast.is-visible{opacity:1;transform:translate(-50%,0)}
.ddp-confettis{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10000}
@media (max-width:767px){
 .ddp-paliers__liste{gap:7px}
 .ddp-palier__case{padding:7px 2px;border-radius:12px}
 .ddp-palier__haut,.ddp-palier__bas{font-size:11.5px}
 .ddp-palier__nom{font-size:12px}
 .ddp-palier__cadenas{transform:scale(.85)}
}
@media (prefers-reduced-motion:reduce){
 .ddp-palier__paquet{display:none}
 .ddp-palier,.ddp-palier *,.ddp-palier *::after{animation:none!important;transition:none!important}
 .ddp-palier.is-anime .ddp-palier__cadeau{opacity:1;transform:none}
}
/* ===== fin CSS-BOSS paliers-cadeaux 20261015 ===== */
/* 15/10 Page produit : ligne d'aide sous les cases a 21px (--e4) au lieu de 10px ; (0,2,0) > .ddp-paliers__aide (0,1,0) */
.ddp-paliers .ddp-paliers__aide{margin-top:var(--e4)}
/* fin CSS-BOSS paliers-cadeaux 20261015 */
/* === CSS-BOSS 20261016 question-2lignes (start) ===
   Fiche produit, bloc "Une question sur cet article ?" (skel.produit.tpl, block v7FaqDiadia) :
   "Poser ma question" est dans le flux des pastilles depuis le 15/10. Sur une fiche brodable a 1280 (colonne ~545px),
   5 pastilles a 14px / padding 5px 13px / gap 8px = 3 lignes. Ici 13px, padding var(--e1) var(--e2), gap var(--e1) -> 2 lignes.
   >=768px uniquement : le mobile garde la regle de base (l.2190-2227). Specificite (0,3,1) > (0,2,1) de base. */
@media (min-width: 768px) {
  body.v7 .v7-faq-diadia .v7-faq-diadia__liste {
    gap: var(--e1);
  }
  body.v7 .v7-faq-diadia .v7-faq-diadia__q,
  body.v7 .v7-faq-diadia .v7-faq-diadia__poser {
    padding: var(--e1) var(--e2);
    font-size: 13px;
  }
}
/* === CSS-BOSS 20261016 question-2lignes (end) === */
/* === CSS-BOSS 20261016 pppd-cta-disabled (start) === (Page produit) bouton "Ajouter le pack" desactive (ex. Duo personnalise / BRODERIE, fiche 52384)
   restait vert. Base = <style> de _tpl_pppd_offres_html.php l.29 ".pppd-cta" (0,1,0), sans !important : (0,4,0) suffit ; !important sur fond, couleur,
   curseur et transform pour neutraliser tout etat :hover/:active/:focus herite. [aria-disabled="true"] couvert. */
.pppd-zone .pppd-card .pppd-cta:is([disabled],[aria-disabled="true"]),
.pppd-zone .pppd-card .pppd-cta:is([disabled],[aria-disabled="true"]):is(:hover,:active,:focus,:focus-visible){background:var(--v7-gris-pale,#f6f5f3)!important;color:var(--v7-gris,#666)!important;box-shadow:inset 0 0 0 1px #e8e2da!important;cursor:not-allowed!important;transform:none!important;filter:none!important;opacity:1;transition:none!important;text-decoration:none!important}
/* === CSS-BOSS 20261016 pppd-cta-disabled (end) === */
/* CSS-BOSS coffres 20261016 */
/* ===== CSS-BOSS coffres 20261016 : bloc « Vos cadeaux » en coffres (fiche produit) =====
   Demande Page produit (Grok Bot, owner PPPD) du 16/10/2026. Cible : v7/comp/v7-produit.css.
   Markup : sites/DDP/tpl/page.product/_tpl_paliers_cadeaux.tpl (section.ddp-paliers.ddp-coffres[data-ddp-coffres], hidden)
   JS : v7/comp/v7-coffres-cadeaux.js ; il n'affiche les coffres que si --ddp-coffres-ok vaut 1 (pose ci-dessous).
   Images : /media/img/coffres/*.webp (balises img posees par le JS, aucune url() ici).
   Police : celle du site, var(--v7-police-produit) = "baloo 2" (v7-tokens.css §0, 400/700/800). Aucune @font-face ajoutee.
   CONSIGNES CSS Boss :
   1. Poser ce bloc dans v7/comp/v7-produit.css entre les marqueurs « CSS-BOSS coffres 20261016 » (debut / fin ci-dessous).
   2. Supprimer l'ancien bloc « CSS-BOSS paliers-cadeaux 20261015 » (v7-produit.css l. 2833 a 2917 au 16/10, MD5 fichier f6407127ccb5f764e25d22d4e90ff173) :
      son markup (.ddp-paliers__*, .ddp-palier*, .ddp-paquet__*, .ddp-confettis) n'est plus produit nulle part
      (v7-paliers-cadeaux.js n'est inclus par aucun template). Le plus simple : poser ce bloc a sa place.
      Sa regle .ddp-paliers[hidden]{display:none!important} est reprise ci-dessous.
   3. Dans sites/DDP/tpl/skel.produit.tpl : v7-produit.css?v=20261016.pppdoff -> ?v=20261016.coffres1
   4. Toutes les regles sont prefixees .ddp-paliers ; keyframes renommees ddpCf* (aucune collision).
   Le canvas du feu d'artifice est style en ligne par le JS. Toast : celui de Funnel (.tv7-paliers-toast) s'il existe, sinon .ddp-coffres__toast ci-dessous. */
.ddp-paliers[hidden]{display:none!important}
.ddp-paliers.ddp-coffres{--cf-v:#5e3f86;--cf-v2:#7a5ea8;--cf-lav:#c7b3da;--cf-lav2:#efe8f7;--cf-or:#f3cf73;--cf-encre:#2e2a39;--cf-gris:#6f6a7c;
 --ddp-coffres-ok:1;position:relative;box-sizing:border-box;margin:14px 0 8px;padding:18px 16px 14px;border-radius:22px;background:#fffefc;box-shadow:0 8px 28px rgba(94,63,134,.10),0 1px 0 rgba(94,63,134,.06);overflow:hidden;font-family:var(--v7-police-produit,"baloo 2",sans-serif);text-align:left;color:var(--cf-encre)}
.ddp-paliers .ddp-coffres__deco{position:absolute;pointer-events:none;z-index:0;user-select:none}
.ddp-paliers .ddp-coffres__deco--nuage-d{right:-26px;top:6px;width:120px;opacity:.95}
.ddp-paliers .ddp-coffres__deco--nuage-g{left:-22px;bottom:64px;width:96px;opacity:.9}
.ddp-paliers .ddp-coffres__tete{position:relative;z-index:2;margin:0 0 4px}
.ddp-paliers .ddp-coffres__titre{display:inline-flex;align-items:flex-start;gap:6px;margin:0;font-size:31px;line-height:1.05;font-weight:800;color:var(--cf-v);letter-spacing:-.2px}
.ddp-paliers .ddp-coffres__coeur{width:40px;height:auto;margin-top:-2px}
.ddp-paliers .ddp-coffres__vague{display:block;width:min(250px,72%);height:auto;margin:2px 0 0 -2px}
.ddp-paliers .ddp-coffres__sous{margin:4px 0 0;font-size:14.5px;color:var(--cf-gris);line-height:1.3}
.ddp-paliers .ddp-coffres__liste{position:relative;z-index:2;list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--cf-nb,4),minmax(0,1fr));gap:8px}
.ddp-paliers .ddp-coffre{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:0;--cf-ls:.9}
.ddp-paliers .ddp-coffre[data-niveau="2"]{--cf-ls:1}
.ddp-paliers .ddp-coffre[data-niveau="3"]{--cf-ls:1.1}
.ddp-paliers .ddp-coffre[data-niveau="4"]{--cf-ls:1.22}
.ddp-paliers .ddp-coffre__seuil{position:relative;z-index:8;display:inline-block;max-width:100%;padding:1px 12px 2px;border:2px solid var(--cf-lav);border-radius:999px;background:var(--cf-lav);color:#fff;font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
/* scene : canevas commun 460x600 (2x), ancre bas-centre ; le haut vide sert au couvercle qui saute */
.ddp-paliers .ddp-coffre__scene{position:relative;width:100%;aspect-ratio:460/600;margin-top:-22%;z-index:3}
.ddp-paliers .ddp-coffre__sol{position:absolute;left:8%;right:8%;bottom:-1%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,120,200,.32),rgba(150,120,200,0));z-index:0}
.ddp-paliers .ddp-coffre__lueur{position:absolute;left:50%;top:60%;width:118%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3);z-index:1;background:radial-gradient(circle,rgba(255,246,206,1) 0,rgba(255,224,140,.75) 28%,rgba(255,224,140,.25) 50%,rgba(255,224,140,0) 68%)}
.ddp-paliers .ddp-coffre__rayons{position:absolute;left:50%;top:52%;width:120%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3);z-index:1;background:repeating-conic-gradient(rgba(255,214,120,.55) 0 6deg,rgba(255,214,120,0) 6deg 18deg);-webkit-mask:radial-gradient(circle,transparent 18%,#000 30%,transparent 68%);mask:radial-gradient(circle,transparent 18%,#000 30%,transparent 68%)}
.ddp-paliers .ddp-coffre__coffre{position:absolute;inset:0;z-index:3;transform-origin:50% 96%}
.ddp-paliers .ddp-coffre__sprite{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none;-webkit-user-drag:none;user-select:none}
.ddp-paliers .ddp-coffre__sprite--ferme{opacity:1;z-index:2}
.ddp-paliers .ddp-coffre__sprite--sans{z-index:2}
.ddp-paliers .ddp-coffre__sprite--cadenas{z-index:6;transform-origin:50% 55%}
.ddp-paliers .ddp-coffre__sprite--entrouvert{z-index:3}
.ddp-paliers .ddp-coffre__sprite--couvercle{z-index:2;transform-origin:86% 52%}
.ddp-paliers .ddp-coffre__sprite--corps{z-index:4}
.ddp-paliers .ddp-coffre__cadeau{position:absolute;left:30%;top:44%;width:40%;aspect-ratio:1/1;z-index:3;opacity:0;transform:translateY(45%) scale(.3);pointer-events:none}
.ddp-paliers .ddp-coffre__cadeau svg{width:100%;height:100%;filter:drop-shadow(0 3px 5px rgba(94,63,134,.3))}
.ddp-paliers .ddp-coffre__etoile{position:absolute;width:13%;z-index:7;opacity:0;pointer-events:none}
.ddp-paliers .ddp-coffre__etoile--a{left:2%;top:34%}
.ddp-paliers .ddp-coffre__etoile--b{right:0;top:28%;width:16%}
.ddp-paliers .ddp-coffre__etoile--c{left:8%;top:80%;width:10%}
.ddp-paliers .ddp-coffre__questions{position:absolute;right:-4%;top:22%;width:24%;z-index:7;opacity:0;pointer-events:none}
.ddp-paliers .ddp-coffre__nom{min-height:2.5em;margin-top:3px;font-size:13.5px;line-height:1.15;font-weight:700;color:var(--cf-v);text-align:center;opacity:0;transition:opacity .4s}
/* decor du croquis : etoiles autour des coffres, « ? » qui flottent au dernier */
.ddp-paliers .ddp-coffre[data-niveau="1"] .ddp-coffre__etoile--b{opacity:.9}
.ddp-paliers .ddp-coffre[data-niveau="1"] .ddp-coffre__etoile--c{opacity:.55;filter:hue-rotate(215deg) saturate(.6) brightness(1.08)}
.ddp-paliers .ddp-coffre[data-niveau="2"] .ddp-coffre__etoile--a{opacity:.5;filter:hue-rotate(215deg) saturate(.6) brightness(1.08)}
.ddp-paliers .ddp-coffre.is-dernier:not(.is-ouvert) .ddp-coffre__questions{opacity:1;animation:ddpCfFlotteQ 2.8s ease-in-out infinite}
/* teasing */
.ddp-paliers .ddp-coffre.is-prochain .ddp-coffre__coffre{animation:ddpCfAppel 3.6s 1.2s infinite}
.ddp-paliers .ddp-coffre.is-portee .ddp-coffre__seuil{background:#fff;color:var(--cf-v);border-color:var(--cf-lav);border-style:dashed}
.ddp-paliers .ddp-coffre.is-portee .ddp-coffre__coffre{animation:ddpCfAppel 1.6s infinite}
.ddp-paliers .ddp-coffre.is-portee .ddp-coffre__lueur{opacity:.55;transform:translate(-50%,-50%) scale(.85);animation:ddpCfRespire 2.2s ease-in-out infinite}
.ddp-paliers .ddp-coffre.is-portee .ddp-coffre__etoile{opacity:.95;animation:ddpCfScintille 1.8s ease-in-out infinite}
.ddp-paliers .ddp-coffre.is-portee .ddp-coffre__etoile--b{animation-delay:.6s}
.ddp-paliers .ddp-coffre.is-portee .ddp-coffre__etoile--c{animation-delay:1.1s}
/* ouvert (etat stable) */
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__seuil{background:var(--cf-or);border-color:var(--cf-or);color:var(--cf-v)}
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__sprite--ferme,.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__sprite--sans,.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__sprite--cadenas,.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__sprite--entrouvert{opacity:0}
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__sprite--corps{opacity:1}
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__sprite--couvercle{opacity:1;transform:translate(1.7%,-10.3%) rotate(11deg)}
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__cadeau{opacity:1;transform:translateY(-34%) scale(1)}
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__lueur{opacity:.9;transform:translate(-50%,-50%) scale(var(--cf-ls))}
.ddp-paliers .ddp-coffre.is-ouvert:not([data-niveau="1"]) .ddp-coffre__rayons{opacity:.7;transform:translate(-50%,-50%) scale(var(--cf-ls))}
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__nom{opacity:1}
.ddp-paliers .ddp-coffre.is-ouvert .ddp-coffre__etoile{opacity:.95}
.ddp-paliers .ddp-coffre.is-ouvert.is-stable .ddp-coffre__cadeau{animation:ddpCfFlotte 3s ease-in-out infinite alternate}
.ddp-paliers .ddp-coffre.is-ouvert.is-stable .ddp-coffre__etoile{animation:ddpCfScintille 2.4s ease-in-out infinite}
.ddp-paliers .ddp-coffre.is-ouvert.is-stable:not([data-niveau="1"]):not([data-niveau="2"]) .ddp-coffre__rayons{animation:ddpCfTourne 14s linear infinite}
/* sequence d'ouverture (sprites) : tremblement -> cadenas qui tombe -> ferme > entrouvert > ouvert -> couvercle qui saute -> cadeau qui sort */
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__coffre{animation:ddpCfSecoue .5s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__sprite--ferme{animation:ddpCfFerme 1.4s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__sprite--sans{animation:ddpCfSans 1.4s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__sprite--cadenas{animation:ddpCfCadenas 1.4s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__sprite--entrouvert{animation:ddpCfEntrouvert 1.4s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__sprite--corps{animation:ddpCfCorps 1.4s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__sprite--couvercle{animation:ddpCfCouvercle 1.4s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__lueur{animation:ddpCfLueur 1.4s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__rayons{animation:ddpCfLueur 1.5s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__cadeau{animation:ddpCfCadeau 1.6s both}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__nom{transition-delay:1.25s}
.ddp-paliers .ddp-coffre.is-anime .ddp-coffre__seuil{transition-delay:.9s}
/* coffre 4 : plus long, plus fort */
.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__coffre{animation:ddpCfSecoueFort .8s both}
.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__sprite--ferme,.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__sprite--sans,.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__sprite--cadenas,.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__sprite--entrouvert,.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__sprite--corps,.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__lueur,.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__rayons{animation-duration:1.7s}
.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__sprite--couvercle{animation:ddpCfCouvercleFort 1.7s both}
.ddp-paliers .ddp-coffre[data-niveau="4"].is-anime .ddp-coffre__cadeau{animation-duration:1.9s}
@keyframes ddpCfFerme{0%,30%{opacity:1}31%,100%{opacity:0}}
@keyframes ddpCfSans{0%,30%{opacity:0}31%,44%{opacity:1}56%,100%{opacity:0}}
@keyframes ddpCfCadenas{0%,30%{opacity:0;transform:none}31%{opacity:1;transform:none}38%{opacity:1;transform:translateY(-3%) rotate(-12deg)}62%{opacity:1;transform:translate(2%,16%) rotate(24deg)}74%,100%{opacity:0;transform:translate(3%,22%) rotate(34deg)}}
@keyframes ddpCfEntrouvert{0%,42%{opacity:0}50%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes ddpCfCorps{0%,56%{opacity:0}62%,100%{opacity:1}}
@keyframes ddpCfCouvercle{0%,56%{opacity:0;transform:none}60%{opacity:1;transform:translate(0,-4%) rotate(3deg)}72%{opacity:1;transform:translate(1%,-24%) rotate(16deg)}84%{transform:translate(1.7%,-7%) rotate(9deg)}92%{transform:translate(1.7%,-12%) rotate(12deg)}100%{opacity:1;transform:translate(1.7%,-10.3%) rotate(11deg)}}
@keyframes ddpCfCouvercleFort{0%,56%{opacity:0;transform:none}60%{opacity:1;transform:translate(0,-6%) rotate(4deg)}70%{opacity:1;transform:translate(1%,-36%) rotate(22deg)}82%{transform:translate(1.7%,-5%) rotate(8deg)}90%{transform:translate(1.7%,-14%) rotate(13deg)}100%{opacity:1;transform:translate(1.7%,-10.3%) rotate(11deg)}}
@keyframes ddpCfLueur{0%,40%{opacity:0;transform:translate(-50%,-50%) scale(.3)}62%{opacity:1;transform:translate(-50%,-50%) scale(calc(var(--cf-ls) * 1.3))}100%{opacity:.9;transform:translate(-50%,-50%) scale(var(--cf-ls))}}
@keyframes ddpCfCadeau{0%,48%{opacity:0;transform:translateY(45%) scale(.3)}72%{opacity:1;transform:translateY(-58%) scale(1.2)}88%{transform:translateY(-56%) scale(.95)}100%{opacity:1;transform:translateY(-34%) scale(1)}}
@keyframes ddpCfAppel{0%,82%,100%{transform:none}86%{transform:translateY(-4%) rotate(-3deg)}90%{transform:translateY(0) rotate(2deg)}94%{transform:translateY(-2%) rotate(-1deg)}}
@keyframes ddpCfSecoue{0%,100%{transform:none}15%{transform:rotate(-5deg)}30%{transform:rotate(5deg)}45%{transform:rotate(-4deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
@keyframes ddpCfSecoueFort{0%,100%{transform:none}10%{transform:rotate(-6deg) scale(1.03)}22%{transform:rotate(6deg)}34%{transform:rotate(-7deg) scale(1.05)}46%{transform:rotate(7deg)}58%{transform:rotate(-5deg) scale(1.07)}72%{transform:translateY(-5%) rotate(3deg)}86%{transform:translateY(0) rotate(-1deg)}}
@keyframes ddpCfRespire{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.8)}50%{opacity:.7;transform:translate(-50%,-50%) scale(.92)}}
@keyframes ddpCfScintille{0%,100%{transform:scale(.7) rotate(0);opacity:.5}50%{transform:scale(1.1) rotate(20deg);opacity:1}}
@keyframes ddpCfFlotte{from{transform:translateY(-34%)}to{transform:translateY(-42%)}}
@keyframes ddpCfFlotteQ{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8%) rotate(6deg)}}
@keyframes ddpCfTourne{from{transform:translate(-50%,-50%) scale(var(--cf-ls)) rotate(0)}to{transform:translate(-50%,-50%) scale(var(--cf-ls)) rotate(360deg)}}
/* textes */
.ddp-paliers .ddp-coffres__aide{position:relative;z-index:2;margin:4px 0 0;font-size:15px;line-height:1.35;color:var(--cf-encre)}
.ddp-paliers .ddp-coffres__ajout{position:relative;z-index:2;margin:2px 0 0;font-size:14.5px;line-height:1.35;color:var(--cf-v);font-weight:700}
.ddp-paliers .ddp-coffres__ajout:empty{display:none}
.ddp-paliers .ddp-coffres__toast{position:fixed;left:50%;bottom:24px;z-index:10001;max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;background:var(--cf-v,#5e3f86);color:#fff;font-family:var(--v7-police-produit,"baloo 2",sans-serif);font-size:15px;font-weight:700;text-align:center;box-shadow:0 10px 30px rgba(46,42,57,.25);opacity:0;transform:translate(-50%,16px);transition:opacity .3s,transform .3s;pointer-events:none;background:#5e3f86}
.ddp-paliers .ddp-coffres__toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media (max-width:767px){.ddp-paliers.ddp-coffres{padding:14px 10px 12px;border-radius:18px}.ddp-paliers .ddp-coffres__titre{font-size:26px}.ddp-paliers .ddp-coffres__coeur{width:32px}.ddp-paliers .ddp-coffres__liste{gap:4px;margin-top:8px}.ddp-paliers .ddp-coffre__seuil{padding:0 7px 1px;font-size:11.5px;border-width:1.5px}.ddp-paliers .ddp-coffre__nom{font-size:11px}.ddp-paliers .ddp-coffres__deco--nuage-d{width:86px;right:-24px}.ddp-paliers .ddp-coffres__deco--nuage-g{width:70px}.ddp-paliers .ddp-coffres__aide{font-size:14px}}
@media (prefers-reduced-motion:reduce){.ddp-paliers .ddp-coffre,.ddp-paliers .ddp-coffre *,.ddp-paliers .ddp-coffre *::before,.ddp-paliers .ddp-coffre *::after{animation:none!important;transition:none!important}}
/* 16/10 integration fiche : 3e coffre indisponible (meuble ou article volumineux) */
.ddp-paliers .ddp-coffre.is-indispo .ddp-coffre__coffre{filter:grayscale(1) opacity(.45)}
.ddp-paliers .ddp-coffre.is-indispo .ddp-coffre__seuil{background:#e7e3ee;border-color:#e7e3ee;color:#8a8496}
.ddp-paliers .ddp-coffre.is-indispo .ddp-coffre__nom{opacity:1;color:var(--cf-gris);font-weight:600}
/* 3 coffres (surprise indisponible) : centres, meme taille qu'a 4 */
.ddp-paliers .ddp-coffres__liste{grid-template-columns:repeat(var(--cf-nb,4),minmax(0,calc((100% - 24px) / 4)));justify-content:center}
.ddp-paliers .ddp-coffres__tete{text-align:left}
.ddp-paliers .ddp-coffres__titre,.ddp-paliers .ddp-coffre__seuil,.ddp-paliers .ddp-coffre__nom{font-family:var(--v7-police-produit,"baloo 2",sans-serif)}
.ddp-paliers .ddp-coffres__sous,.ddp-paliers .ddp-coffres__aide,.ddp-paliers .ddp-coffres__ajout{font-family:inherit}
@media (max-width:767px){.ddp-paliers .ddp-coffres__liste{grid-template-columns:repeat(var(--cf-nb,4),minmax(0,calc((100% - 12px) / 4)))}}
/* fin CSS-BOSS coffres 20261016 */
/* CSS-BOSS coffres-sans-ombre 20261016 */
/* (Page produit, G3dev 16/10) ajout seul : l'ombre visible venait du bloc lui-meme, box-shadow 0 8px 28px rgba(94,63,134,.10) + 0 1px 0 rgba(94,63,134,.06)
   (bloc CSS-BOSS coffres 20261016, .ddp-paliers.ddp-coffres (0,2,0)). Aucun conteneur (form#addProductForm, .produit_bebe_col, .v7-fiche-haut, article, main)
   ne porte de box-shadow, filter ni pseudo-element d'ombre : aucun :has() necessaire. (0,2,1) > (0,2,0), sans !important.
   Les filtres internes du dessin sont gardes (etoiles hue-rotate, drop-shadow du cadeau SVG). */
section.ddp-paliers.ddp-coffres{box-shadow:none;filter:none}
/* fin CSS-BOSS coffres-sans-ombre 20261016 */
/* CSS-BOSS coffres-rev2 20261016 */
/* (Page produit 16/10 18:31) ajout seul : delta de css_boss_coffres_20261016.css rev2 (MD5 4d0420dd...) par rapport au bloc coffres 20261016 en ligne
   (b129987b) et a coffres-sans-ombre. Nouvelles regles seulement : libelle des coffres non ouverts visible (le JS y met "Coffre N", "Ferme", "Des 79 EUR"),
   note sous les coffres. Aucune valeur modifiee ailleurs ; box-shadow du bloc non reprise (coffres-sans-ombre reste en vigueur).
   Retirees dans rev2 mais gardees en ligne (regle : on ne supprime rien) : .ddp-paliers .ddp-coffres__toast et .is-visible (le toast est desormais celui de Funnel). */
.ddp-paliers .ddp-coffre:not(.is-ouvert) .ddp-coffre__nom{opacity:1;color:var(--cf-gris);font-weight:600}
.ddp-paliers .ddp-coffres__note{margin-top:2px;font-size:13px;color:var(--cf-gris)}
/* fin CSS-BOSS coffres-rev2 20261016 */