/* ============================================================================
   v7-listing.css — CATALOGUE, CATÉGORIE, RECHERCHE, PAGE MARQUE, PAGE DES MARQUES
   Auteur   : agent Claude — 01/09/2026 — chantier V7 responsive (dev.doudouplanet.com)
   Dépend   : v7/base/v7-tokens.css (jetons), v7/base/v7-socle.css (conteneurs,
              boutons, champs, panneaux, utilitaires) et v7/comp/v7-carte.css
              (la carte et ses badges). Chargé après eux dans le bundle /min/
              déclaré par sites/DDP/tpl/_commun/_base_v7.tpl.
   Portée   : TOUT sélecteur commence par body.v7 ou par une classe .v7-*.
              Une page servie sans le cookie V7 (?v7=0) n'est jamais atteinte.

   LES PAGES CONCERNÉES — une seule chaîne de gabarits pour quatre familles
   -----------------------------------------------------------------------
     page.catalogue.tpl (recherche) · page.category.tpl · page.category.fille.tpl
     page.manufacturer.tpl (marque) · page.collection.tpl · page.catalogue.vide.tpl
       → skel.affinage.tpl → skel.catalogue.tpl → _commun/_base.tpl → _base_v7.tpl
     pages/nos-marques.tpl (liste A-Z) → skel.info.tpl  (hors chaîne catalogue)
   Toute règle écrite ici retombe donc sur les quatre familles de listing :
   c'est voulu, elles partagent le même DOM (#gauche / #droite / #bloc_prod).

   CE QUI ÉTAIT CASSÉ, ET CE QUI LE REMPLACE
   -----------------------------------------
   1. GRILLE PRODUIT FIGÉE À 3 COLONNES.
      page.catalogue.css:153-161 → #bloc_prod > ul > li { width:33%; float:left;
      min-height:344px; overflow:hidden }. Aucune media query ne touchait
      #bloc_prod, nulle part (vérifié par grep sur page.catalogue.css,
      v7/socle.css et sites/DDP/css/phone/main.css). À 360px de large, trois
      colonnes de 120px pour une vignette dessinée à 228px : les cartes se
      chevauchent et les noms longs sont coupés en silence par overflow:hidden.
      → grid fluide, colonnes déduites d'une largeur MINIMALE de carte, jamais
        d'un nombre de colonnes codé en dur. Mêmes paliers que
        .v7-grille--produits du socle (144 / 178 / 208 px) : une seule échelle
        pour tout le site.
   2. LE LIEN DE LA CARTE ÉTAIT EN POSITION ABSOLUE.
      page.catalogue.css:164-176 → #bloc_prod > ul > li > a { position:absolute }.
      Tant que le lien est hors du flux, le <li> ne peut pas se dimensionner sur
      son contenu — d'où le min-height:344px, d'où le vide sous les cartes en
      mobile. Le retour en position:static est le PRÉALABLE à toute grille.
   3. COLONNE D'AFFINAGE EN MUR.
      #gauche portait 13 blocs de facettes AVANT les produits une fois linéarisé.
      → sous 1024px la colonne passe APRÈS les produits (ordre visuel, le DOM ne
        bouge pas), et le style d'un tiroir hors-champ est prêt (§5).
   4. IMAGES DÉFORMÉES.
      _commun/productThumbLight.tpl:25 déclare width="228px" height="228px" — en
      plus d'être une syntaxe invalide (un attribut HTML width n'accepte pas
      d'unité), c'est une hauteur imposée quelle que soit la largeur réelle de la
      colonne. Idem .media img/iframe { width:432px; height:243px }
      (page.catalogue.css:551-562) et #bloc_cat img { max-width:108px }.
      → partout : aspect-ratio + object-fit:contain, jamais de hauteur imposée.
   5. DÉBORDEMENTS HORIZONTAUX CERTAINS : #bl_ent{width:935px}
      (page.catalogue.css:498) et #marques_bloc{width:15%} + float
      (page.nos.marques.tpl.css:3). Le premier n'était masqué que par le filet
      overflow-x du socle : le contenu était COUPÉ, pas adapté.

   CE QUE JE N'AI PAS PU FAIRE, ET QUI DOIT ÊTRE FAIT AILLEURS
   ----------------------------------------------------------
   🔴 LE BOUTON D'OUVERTURE DES FILTRES N'EXISTE PAS DANS LE HTML. Aucun gabarit
      n'émet de déclencheur, et je ne modifie aucun gabarit. Le style de
      .v7-filtres-declencheur est écrit et prêt (§5), mais TANT QUE PERSONNE NE
      L'INJECTE, IL N'Y A PAS DE TIROIR. C'est pourquoi le tiroir n'est PAS le
      comportement par défaut : il est conditionné à la classe
      body.v7.v7-filtres-tiroir, que posera le script qui injectera le bouton.
      Sans ce script, les facettes restent lisibles, simplement reléguées après
      les produits. Livrer l'inverse — un tiroir sans bouton — reviendrait à
      rendre TOUS les filtres inaccessibles au téléphone.
   🔴 LE NOM DU PRODUIT DE LA CARTE HISTORIQUE EST UN NŒUD TEXTE NU
      (_commun/productThumbLight.tpl:28 : le nom sort entre l'<img> et le <div>
      des prix, sans balise). Aucun sélecteur CSS n'atteint un nœud texte : la
      coupure propre à deux lignes (-webkit-line-clamp) est donc IMPOSSIBLE sur
      cette carte, elle n'existe que sur .v7-carte-produit (v7-carte.css §1). Ici
      on se contente de retirer l'overflow:hidden qui tronquait, et le nom pousse
      la carte au lieu d'être amputé.
   🔴 L'INFOBULLE DE LA PAGE DES MARQUES RESTE INUTILISABLE AU DOIGT. Son contenu
      (logo, rayons, compteurs) est cloné au SURVOL par
      sites/DDP/js/page_nos_marques.js:5-13 ; il n'y a aucun événement tactile.
      Le CSS ne peut pas fabriquer l'interaction manquante : on la neutralise là
      où il n'y a pas de survol, et on rend le nom de marque lui-même une vraie
      cible de 44px vers la boutique de la marque.

   SÉLECTEURS INTOUCHABLES — vérifiés dans le JS avant d'écrire une seule règle
   ---------------------------------------------------------------------------
   • .expand / .hidden — block_js.js:143-152 fait
     $("ul").has($(this)).children(".hidden").toggle(). jQuery ne « montre » que
     ce dont le display calculé vaut none. 🔴 CONSÉQUENCE DIRECTE : ce fichier ne
     pose JAMAIS de display sur #gauche … li. Une seule règle
     « #gauche > div > ul > li { display:flex } » battrait .hidden{display:none}
     (page.catalogue.css:73) et déplierait d'office toutes les facettes. Le
     display se pose sur le <a>, jamais sur le <li>.
   • .cb / .cbc / .gb / a.reset / .i0….i4 — la sprite /sites/DDP/img/ui/bloc.gif
     est posée par #gauche > div > ul > li > a:before (page.catalogue.css:46-72).
     La chaîne de sélecteurs doit rester exacte, et .i0…i4 portent l'indentation
     hiérarchique en padding-left : ce fichier n'écrit donc NI padding
     (raccourci) NI padding-left sur ces <a>, seulement padding-block et
     padding-right. Le sprite fait 16x16 et n'est pas redimensionnable : on
     agrandit la ZONE cliquable autour, on ne touche pas à l'image.
   • img[data-src] — les images des cartes n'ont AUCUN src à l'émission, c'est
     jquery.unveil (_base_v7.tpl:148) qui le pose au défilement. La hauteur de la
     cellule ne peut donc pas venir de l'image : elle vient d'aspect-ratio. Ne
     jamais écrire de sélecteur img[src*=…] ici, il serait faux avant le scroll.
   • onProductClick_ID() / ga('ec:addImpression') — les <script> GA sont des
     enfants DIRECTS du <ul> (products.tpl:51-64). Sous display:grid ils
     deviennent des éléments de grille : on les remet explicitement en
     display:none (les scripts le sont déjà par la feuille de l'agent
     utilisateur, mais une grille sans cette ligne dépend d'un défaut).

   PROPORTIONS (CLAUDE.md R6) : espacements en --e0..--e9 (Fibonacci 3 5 8 13 21
   34 55 89 144 233), tailles de police en --v7-t-*. Les seules valeurs
   littérales sont 16px (le sprite, non redimensionnable), 144px et 377px
   (Fibonacci, au-delà de --e9 qui s'arrête à 233) et les pourcentages/1fr.

   MOBILE-FIRST, TROIS PALIERS : corps du fichier = téléphone ;
   @media (min-width:768px) = tablette ; @media (min-width:1024px) = bureau.
   Aucune max-width dans une media query.
   ========================================================================= */


/* ══════════════════════════════════════════════════════════════════════════
   1. LE GABARIT DEUX COLONNES DU LISTING
   #gauche et #droite sont des enfants DIRECTS de <section class="v7-main">
   (skel.catalogue.tpl:9-10, block main). On ne peut donc pas les envelopper.
   On met .v7-main en flex/grid — mais UNIQUEMENT sur les pages qui ont bien un
   #gauche, grâce à :has(). Sans cette garde, la home, la fiche produit et le
   tunnel seraient touchés : ce sont d'autres lots.
   :has() est déjà un prérequis de la chaîne V7 (v7-socle.css:31 pose
   « html:has(body.v7) ») — je n'ajoute donc aucune dépendance nouvelle.
   ══════════════════════════════════════════════════════════════════════════ */

body.v7 .v7-main:has(> #gauche) {
  display: flex;
  flex-direction: column;
  /* Les gouttières de page : sans elles, le texte du catalogue touche le bord
     de l'écran au téléphone. .v7-main n'en a pas (v7-socle.css:96) parce que la
     plupart des pages passent par .v7-conteneur — ce que les gabarits de
     listing, eux, ne font pas. */
  /* 🔴 Corrige le 01/09/2026 sur capture : ce max-width etait pose sur .v7-main
     LUI-MEME, qui porte le fond blanc de la zone de contenu — le blanc
     s.arretait donc a 1220 px et le lilas de la page reapparaissait de part et
     d.autre, sur cette seule famille de pages. On centre desormais par le
     remplissage : le fond reste pleine largeur, le contenu reste borne. */
  max-width: none;
  margin-inline: 0;
  /* 16/09 : home J (pleine largeur) est le modele retenu — le listing
     occupe tout l'ecran, plus de plafond 1220 px. */
  padding-inline: var(--v7-marge-page);
}

/* ORDRE VISUEL AU TÉLÉPHONE : les produits d'abord, les filtres ensuite.
   Le DOM n'est pas modifié (aucun gabarit touché, aucun lecteur d'écran perdu :
   l'ordre de tabulation suit le DOM, et #gauche vient bien avant #droite dans
   le document). C'est le remède au « mur de 13 blocs de facettes » tant que le
   tiroir du §5 n'est pas branché. */
body.v7 .v7-main:has(> #gauche) > #droite { order: 1; }
body.v7 .v7-main:has(> #gauche) > #gauche { order: 2; }

/* Le socle a déjà remis #gauche et #droite au flux (v7-socle.css:70-72).
   On ne redit ici que ce qui manque : la protection anti-débordement d'une
   colonne de grille, et la respiration entre les deux blocs. */
body.v7 #droite { min-width: 0; }
body.v7 #gauche { min-width: 0; margin-top: var(--v7-respiration); }

@media (min-width: 1024px) {
  body.v7 .v7-main:has(> #gauche) {
    display: grid;
    grid-template-columns: var(--v7-colonne-facettes) minmax(0, 1fr);
    column-gap: var(--e4);
    align-items: start;
    padding-inline: var(--e3);
  }
  /* Tout ce qui n'est pas une des deux colonnes (bandeau, en-tête de page,
     fil d'Ariane, blocs promotionnels) occupe la largeur entière. */
  body.v7 .v7-main:has(> #gauche) > * { grid-column: 1 / -1; }
  body.v7 .v7-main:has(> #gauche) > #gauche { grid-column: 1; order: 0; margin-top: 0; }
  body.v7 .v7-main:has(> #gauche) > #droite { grid-column: 2; order: 0; }

  /* Colonne collante : les filtres restent sous les yeux pendant qu'on
     parcourt 200 produits. --v7-entete-hauteur est laissée à l'agent en-tête :
     si l'en-tête devient collante, il lui suffit de définir cette variable pour
     que les filtres se calent dessous. Sans elle, la valeur de repli est 0. */
  body.v7 #gauche {
    position: sticky;
    top: calc(var(--v7-entete-hauteur, 0px) + var(--e3));
    max-height: calc(100vh - var(--v7-entete-hauteur, 0px) - var(--e4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. L'EN-TÊTE DE PAGE DU LISTING
   #bandeau > #entete_description + #img_marque + #recherche_similaire
   + #categorie_pushup_product, puis <nav id="puericulture"> (fil d'Ariane).
   ══════════════════════════════════════════════════════════════════════════ */

/* #bandeau était en display:table avec un padding latéral de 6px : il ne
   pouvait ni s'étirer ni contenir un enfant en position absolue proprement. */
body.v7 #bandeau {
  display: block;
  width: auto;
  padding: 0;
  position: relative;
}

/* La description de rayon / de marque : elle flottait à 87% avec un
   text-indent de 20px, ce qui ne se dégrade pas. Pleine largeur, texte lisible. */
body.v7 #entete_description {
  float: none;
  display: block;
  width: auto;
  margin: 0 0 var(--e4);
  padding: var(--e3);
  text-indent: 0;
  text-align: left;
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
  background: var(--v7-fond-surface);
  border-radius: var(--v7-rayon-grand);
}
body.v7 #entete_description p {
  display: block;
  overflow: visible;
  font-size: var(--v7-t-petit);
  padding: 0;
  margin: 0 0 var(--e2);
}

/* Le titre de page. Deux corrections :
   – margin-right:140px réservait la place de #img_marque, qui était en position
     absolue à droite ; ce logo est remis au flux plus bas, le trou n'a plus de
     raison d'être ;
   – la police historique est déclarée « "baloo",Arial !important »
     (page.catalogue.css:428-437) alors que « baloo » n'est PAS l'une des trois
     polices auto-hébergées du site (N3R, Dosis, Cocon — v7-tokens.css §7) :
     elle retombait donc silencieusement sur Arial. Le !important ci-dessous est
     le seul moyen de rendre à ce h1 la police de titre du site, celle que
     v7-socle.css:162 donne déjà à tous les autres h1 de la V7. */
body.v7 #entete_description > h1,
body.v7 #bl_ent > h1,
body.v7 .media h1 {
  margin: 0 0 var(--e3);
  font-family: var(--v7-police-titre) !important;
  font-size: var(--v7-t-titre);
  line-height: var(--v7-interligne-titre);
  color: var(--v7-encre-douce);
  text-align: left;
}

/* Images et vidéos DANS la description : au téléphone elles prennent la largeur
   (un flottant de 120px dans une colonne de 300px hache le texte) ; à partir de
   la tablette elles reprennent leur place à droite. */
body.v7 #entete_description img {
  float: none;
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--e2) 0;
}
body.v7 #entete_description iframe {
  float: none;
  display: block;
  width: 100%;
  max-width: var(--e9);
  height: auto;
  aspect-ratio: 16 / 9;
  margin: var(--e2) 0;
  border: 0;
}
body.v7 #entete_description p > img {
  float: left;
  width: var(--e6);
  height: var(--e6);
  object-fit: contain;
  margin: 0 var(--e2) var(--e1) 0;
}

/* Le bandeau de logos de marque : il était en position:absolute à right:3px,
   avec un <br> tous les 3 logos. Les <br> n'ont plus de sens dans une rangée
   qui se replie toute seule. */
body.v7 #img_marque {
  position: static;
  float: none;
  top: auto;
  right: auto;
  padding: 0;
  margin: 0 0 var(--e3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}
body.v7 #img_marque br { display: none; }
body.v7 #img_marque img {
  max-height: var(--e6);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Recherches similaires : quatre <ul> flottants côte à côte, avec un compteur
   en position absolue. Une seule rangée qui se replie suffit. */
body.v7 #recherche_similaire {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  clear: both;
  padding: var(--e3) 0;
  margin: 0 0 var(--e3);
}
body.v7 #recherche_similaire > div {
  flex: 1 1 100%;
  width: auto;
  margin: 0 0 var(--e2);
  font-size: var(--v7-t-base);
  color: var(--v7-gris);
}
body.v7 #recherche_similaire ul { float: none; margin: 0; padding: 0; }
body.v7 #recherche_similaire li { text-indent: 0; font-size: var(--v7-t-petit); }
body.v7 #recherche_similaire span { position: static; }
body.v7 a.idea_search {
  display: inline-flex;
  align-items: center;
  min-height: var(--v7-cible);
  margin-right: var(--e1);
  font-size: var(--v7-t-petit);
}

/* Les trois onglets Nouveautés / Le meilleur / Promotions. */
body.v7 #categorie_pushup_product {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  margin: var(--e3) 0;
  clear: both;
}
body.v7 .btn_tricat,
body.v7 .btn_tricat_actif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--v7-cible);
  margin-right: 0;
  padding: var(--e1) var(--e4);
  border: 0;
  border-radius: var(--v7-rayon-pilule);
  font-family: var(--v7-police-appui);
  font-size: var(--v7-t-petit);
  font-weight: 700;
  text-decoration: none !important;
}
body.v7 .btn_tricat {
  background: var(--v7-fond-doux);
  color: var(--v7-encre-douce);
}
body.v7 .btn_tricat_actif {
  background: var(--v7-primaire);
  color: var(--v7-blanc);
}

/* Fil d'Ariane : height:18px + li{float:left} (_inc.begin.uncompressed.css).
   Une hauteur de 18px pour un fil qui passe à la ligne dès qu'il y a trois
   niveaux, c'est un chevauchement garanti avec la grille juste en dessous.
   ⚠ <nav id="puericulture"> existe aussi sur la fiche produit (autre lot) :
   sélecteur partagé, signalé dans le compte rendu. */
body.v7 nav#puericulture {
  height: auto;
  margin: var(--e3) 0;
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
}
body.v7 nav#puericulture ul.magasins_bebe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1);
  margin: 0;
  padding: 0;
}
body.v7 nav#puericulture li { float: none; margin-right: 0; }
body.v7 nav#puericulture span { position: static; top: auto; right: auto; }
body.v7 nav#puericulture a {
  display: inline-flex;
  align-items: center;
  min-height: var(--v7-cible);
}


/* ══════════════════════════════════════════════════════════════════════════
   3. LES FACETTES — #gauche
   Rappel du §« sélecteurs intouchables » : aucune règle de display sur les <li>.
   ══════════════════════════════════════════════════════════════════════════ */

/* Chaque bloc de facettes. Était en display:table (donc largeur au contenu) avec
   un rayon de 15px choisi au jugé. */
body.v7 #gauche > div {
  display: block;
  width: auto;
  padding: var(--e2) var(--e2) var(--e2);
  margin-bottom: var(--e3);
  border-radius: var(--v7-rayon);
  background: var(--v7-fond-surface);
}
body.v7 #gauche > div > img { margin-left: 0; max-width: 100%; height: auto; }
body.v7 #gauche > div > p {
  margin: 0 0 var(--e1);
  text-align: left;
  font-size: var(--v7-t-petit);
  color: var(--v7-texte-doux);
}

/* Titre d'un groupe de facettes. position:relative : c'est l'ancre de a.reset. */
body.v7 #gauche > div > h2 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--e5);
  margin: var(--e2) 0 var(--e1);
  padding-right: var(--v7-cible);
  font-family: var(--v7-police-titre);
  font-size: var(--v7-t-petit);
  color: var(--v7-encre-douce);
  border-bottom: 1px solid var(--v7-trait-doux);
}

body.v7 #gauche > div > ul { margin: 0 0 var(--e2); padding: 0; }

/* Une ligne = libelle + compteur. :not(.hidden) pour ne pas battre
   .hidden{display:none} (page.catalogue.css), lu par block_js.js. */
body.v7 #gauche > div > ul > li:not(.hidden) {
  display: flex;
  align-items: center;
  gap: var(--e1);
  min-height: var(--e5);
}
/* 09/10/2026 (G3dev) - compteurs des facettes alignes partout.
   CAUSE : les lignes repliees (li.hidden) sont exclues de la regle ci-dessus ;
   au clic « voir + », block_js.js fait .toggle() et jQuery 1.7 leur pose
   style="display: list-item" -> pas de flex, le <small> colle au libelle
   (Sauthon 38, Noukies 32...) au lieu d'etre cale a droite (Djeco 539...).
   Cette regle ne vise QUE les lignes deja depliees par jQuery (style inline) :
   .hidden{display:none} reste maitre tant que la liste est repliee, et le
   re-pliage (style="display: none") ne correspond plus au selecteur. */
body.v7 #gauche > div > ul > li.hidden[style*="list-item"],
body.v7 #gauche > div > ul > li.hidden[style*="display: block"] {
  display: flex !important;
  align-items: center;
  gap: var(--e1);
  min-height: var(--e5);
}
body.v7 #gauche > div > ul small {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--v7-t-mini);
  font-variant-numeric: tabular-nums;
  color: var(--v7-texte-doux);
}

/* LA LIGNE DE FACETTE. padding-left reste aux classes .i0….i4. */
body.v7 #gauche > div > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--e5);
  padding-block: var(--e0);
  padding-right: var(--e1);
  font-size: var(--v7-t-petit);
  line-height: 1.25;
  color: var(--v7-encre-douce);
  border-radius: var(--v7-rayon);
  overflow-wrap: anywhere;
}
body.v7 #gauche > div > ul > li > a:hover {
  background: transparent;
  color: var(--v7-violet-fonce);
  text-decoration: none;
}

/* Quadrillage (sprite checkbox) : seulement sur les vrais filtres
   multi-choix (.cb/.cbc) et le retour de rayon (.gb). Les sous-rayons
   sont des liens, pas des cases. */
body.v7 #gauche > div > ul > li > a:before {
  display: none;
  float: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-right: 0;
  vertical-align: middle;
}
body.v7 #gauche > div > ul > li > a.cb:before,
body.v7 #gauche > div > ul > li > a.cbc:before,
body.v7 #gauche > div > ul > li > a.gb:before {
  display: block;
}

/* La croix de remise à zéro : 16x16 posés en absolu à droite du <h2>. On garde
   l'image telle quelle et on lui greffe une zone cliquable de 44px avec un
   pseudo-élément transparent — la valeur est CALCULÉE depuis --v7-cible, elle
   n'est donc pas arbitraire et suivra si la cible tactile change. */
body.v7 #gauche a.reset {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
body.v7 #gauche a.reset:after {
  content: "";
  position: absolute;
  inset: calc((var(--v7-cible) - 16px) / -2);
}

/* Le lien « plus / moins » (block_js.js remplace son texte au clic). */
body.v7 #gauche > div > ul > li > a.expand {
  justify-content: flex-start;
  margin-top: var(--e0);
  min-height: var(--e5);
  font-family: var(--v7-police-appui);
  font-weight: 700;
  color: var(--v7-violet-fonce);
  background: transparent;
}

body.v7 #affi {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 0 0 var(--e1);
  margin-bottom: var(--e1);
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
  border-bottom: 1px solid var(--v7-trait-doux);
}
body.v7 #affi p { margin: 0; }
body.v7 .age { margin-left: var(--e3); }
body.v7 .historique_produit { display: block; width: auto; }
body.v7 .historique_produit > a { display: block; width: auto; }

/* ── Nuancier (facette couleur) ─────────────────────────────────────────── */
body.v7 .v7-nuancier > li > a.v7-nuancier__lien {
  display: flex;
  width: 100%;
  gap: var(--e2);
}
body.v7 .v7-nuancier__pastille {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(36, 31, 56, .18);
  background: var(--v7-gris-pale);
}
body.v7 .v7-nuancier__pastille[data-c="rose"]         { background: #E8A0B8; }
body.v7 .v7-nuancier__pastille[data-c="bleu"]         { background: #5B8FD9; }
body.v7 .v7-nuancier__pastille[data-c="gris"]         { background: #9AA0A6; }
body.v7 .v7-nuancier__pastille[data-c="blanc"]        { background: #fff; }
body.v7 .v7-nuancier__pastille[data-c="vert"]         { background: #5A9E6F; }
body.v7 .v7-nuancier__pastille[data-c="beige"]        { background: #D8C4A0; }
body.v7 .v7-nuancier__pastille[data-c="noir"]         { background: #222; }
body.v7 .v7-nuancier__pastille[data-c="rouge"]        { background: #C0392B; }
body.v7 .v7-nuancier__pastille[data-c="marron"]       { background: #8B5A2B; }
body.v7 .v7-nuancier__pastille[data-c="orange"]       { background: #E67E22; }
body.v7 .v7-nuancier__pastille[data-c="jaune"]        { background: #E8C547; }
body.v7 .v7-nuancier__pastille[data-c="violet"]       { background: #7B68C8; }
body.v7 .v7-nuancier__pastille[data-c="multicolore"]  {
  background: linear-gradient(135deg, #E8A0B8 0%, #5B8FD9 45%, #E8C547 100%);
}
body.v7 .v7-nuancier__nom {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: capitalize;
}
body.v7 .v7-nuancier__lien--on { font-weight: 700; color: var(--v7-violet-fonce); }
body.v7 .v7-nuancier__lien--on .v7-nuancier__pastille {
  box-shadow: 0 0 0 2px var(--v7-violet);
}


/* ══════════════════════════════════════════════════════════════════════════
   4. LE TIROIR DE FILTRES — prêt, mais volontairement DÉSARMÉ
   🔴 À LIRE AVANT DE S'EN SERVIR : ces règles ne s'appliquent QUE si un script
   ajoute la classe v7-filtres-tiroir sur le <body>. Ce script doit, dans le
   même geste, injecter le bouton .v7-filtres-declencheur et basculer la classe
   est-ouvert sur #gauche (plus .est-bloque sur le body, déjà prévu par
   v7-socle.css:422, et l'ouverture de #v7-voile). Rien de tout cela n'existe
   aujourd'hui : voir le compte rendu.
   Le mécanisme est celui de .v7-panneau--droite du socle, recopié ici parce
   qu'on ne peut pas ajouter la classe .v7-panneau sur #gauche sans toucher au
   gabarit skel.catalogue.tpl.
   ══════════════════════════════════════════════════════════════════════════ */

.v7-filtres-declencheur {
  position: fixed;
  left: 50%;
  bottom: var(--e4);
  transform: translateX(-50%);
  z-index: var(--z-menu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--v7-cible);
  padding: var(--e2) var(--e5);
  border: 0;
  border-radius: var(--v7-rayon-pilule);
  background: var(--v7-primaire);
  color: var(--v7-blanc);
  font-family: var(--v7-police-appui);
  font-size: var(--v7-t-base);
  font-weight: 700;
  line-height: 1.2;
  box-shadow: var(--v7-ombre-forte);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Le compteur de filtres actifs, si le script en pose un. */
.v7-filtres-declencheur__compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--e4);
  height: var(--e4);
  padding-inline: var(--e1);
  border-radius: var(--v7-rayon-pilule);
  background: var(--v7-blanc);
  color: var(--v7-violet-fonce);
  font-size: var(--v7-t-mini);
}

body.v7.v7-filtres-tiroir #gauche {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(89vw, 377px);            /* Fibonacci, comme .v7-panneau du socle */
  max-width: 100%;
  margin-top: 0;
  padding: var(--e3);
  z-index: var(--z-panneau);
  background: var(--v7-fond-surface);
  box-shadow: var(--v7-ombre-forte);
  transform: translateX(100%);
  transition: transform var(--v7-doux);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.v7.v7-filtres-tiroir #gauche.est-ouvert { transform: translateX(0); }

@media (min-width: 1024px) {
  /* Au-dessus de 1024px il n'y a plus de tiroir : la colonne reprend sa place,
     même si la classe est restée sur le <body>. */
  .v7-filtres-declencheur { display: none; }
  body.v7.v7-filtres-tiroir #gauche {
    position: sticky;
    top: calc(var(--v7-entete-hauteur, 0px) + var(--e3));
    right: auto;
    bottom: auto;
    width: auto;
    padding: 0;
    z-index: auto;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. TRI, NOMBRE PAR PAGE ET PAGINATION — #order_by
   Contrainte de départ : #order_by empile, sur une SEULE ligne de 33px
   (page.catalogue.css:101-112), le compteur de résultats, jusqu'à cinq numéros
   de page, cinq choix de densité et le <select> de tri. Et tout cela est
   entrecoupé de nœuds texte nus (« Afficher », les virgules, « résultats par
   page ») que le CSS ne peut ni grouper ni déplacer.
   → On garde donc le FLUX INLINE (le seul qui gère correctement des textes et
     des liens mélangés) et on transforme chaque lien en pastille de 44px, avec
     une hauteur de ligne qui laisse les pastilles se replier sans se toucher.
     Une « ligne défilante » aurait exigé un conteneur dédié autour des seuls
     numéros : il n'existe pas dans sort.tpl, et je ne modifie pas les gabarits.
   ══════════════════════════════════════════════════════════════════════════ */

body.v7 #order_by {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1) var(--e3);
  text-align: left;
  padding: var(--e1) 0 var(--e2);
  margin: 0 0 var(--e3);
  font-size: var(--v7-t-petit);
  line-height: 1.3;
  color: var(--v7-gris);
  border-bottom: 1px solid var(--v7-trait-doux);
}
body.v7 #order_by > span,
body.v7 .v7-pager__meta {
  position: static;
  float: none;
  left: auto;
  display: inline;
  margin: 0;
  white-space: nowrap;
}
body.v7 #order_by strong { color: var(--v7-texte); }

body.v7 .v7-pager__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
  flex: 1 1 auto;
  min-width: 0;
}
body.v7 .v7-pager__pages,
body.v7 .v7-pager__taille {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--e1);
}
body.v7 .v7-pager__mot {
  color: var(--v7-gris);
  white-space: nowrap;
}
body.v7 .v7-pager__suspension { color: var(--v7-gris); padding-inline: var(--e0); }

/* Pastilles compactes : 28 px, plus les gros carres de 44 px. */
body.v7 #order_by a,
body.v7 #order_by b,
body.v7 .v7-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 47px;
  min-height: 28px;
  padding-inline: var(--e1);
  margin-right: 0;
  border-radius: var(--v7-rayon);
  line-height: 1;
  vertical-align: middle;
  font-size: var(--v7-t-petit);
  font-family: var(--v7-police-appui);
}
body.v7 #order_by a,
body.v7 a.v7-pager__btn {
  background: var(--v7-fond-doux);
  color: var(--v7-texte-lien);
  text-decoration: none;
}
body.v7 #order_by a:hover,
body.v7 a.v7-pager__btn:hover { filter: brightness(.96); text-decoration: none; }
body.v7 #order_by b,
body.v7 .v7-pager__btn--on {
  background: var(--v7-primaire);
  color: var(--v7-blanc);
}
body.v7 #order_by b u { text-decoration: none; }
body.v7 #order_by br { display: none; }

body.v7 #order_by select#orderById {
  display: inline-flex;
  width: auto;
  max-width: 21ch;
  margin: 0 0 0 auto;
  min-height: 28px;
  height: 28px;
  padding: 0 var(--e2);
  font-size: var(--v7-t-petit);
}
@media (min-width: 1024px) {
  body.v7 #order_by { flex-wrap: nowrap; }
  body.v7 .v7-pager__ligne { flex-wrap: nowrap; }
}

/* La tuile « page suivante » : 250 x 325 en image de fond non redimensionnable,
   dans une cellule qui fait rarement 250px. On la ramène au format de la carte
   voisine et on laisse l'image se contenir. */
body.v7 .page_suivante {
  display: block;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. LA GRILLE DE PRODUITS — #bloc_prod
   Le nombre de colonnes n'est jamais écrit : il découle de --v7-carte-min.
   Une seule règle couvre 320 comme 1920, et les trois valeurs sont EXACTEMENT
   celles de .v7-grille--produits (v7-socle.css:115-127) : la grille du listing
   et celle des rails de la home donnent la même carte à la même largeur.
   ══════════════════════════════════════════════════════════════════════════ */

body.v7 #bloc_prod > ul {
  --v7-carte-min: 144px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--v7-carte-min), 1fr));
  gap: var(--v7-gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px)  { body.v7 #bloc_prod > ul { --v7-carte-min: 144px; } }
@media (min-width: 1024px) { body.v7 #bloc_prod > ul { --v7-carte-min: 130px; } }

/* Les <script> GA sont des enfants directs du <ul> (products.tpl:51-64) : sous
   display:grid ils deviendraient des cellules fantômes. La feuille de l'agent
   utilisateur les masque déjà, mais une grille ne doit pas dépendre d'un défaut. */
body.v7 #bloc_prod > ul > script { display: none; }

body.v7 #bloc_prod > ul > li {
  float: none;
  width: auto;
  min-height: 0;
  overflow: visible;                  /* c'est l'overflow:hidden qui coupait les noms */
  position: relative;                 /* conservé : ancre des badges (v7-carte.css §5) */
  display: flex;
  flex-direction: column;
  list-style: none;
  text-align: left;
  /* Pas de cadre / ombre autour des vignettes catalogue */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
body.v7 #bloc_prod > ul > li:hover,
body.v7 #bloc_prod > ul > li:focus-within {
  box-shadow: none;
  transform: none;
}

/* LE LIEN REPASSE AU FLUX. Sans cette ligne, rien de ce qui précède ne tient :
   un enfant en position:absolute ne donne aucune hauteur à son parent. */
body.v7 #bloc_prod > ul > li > a {
  position: static;
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  width: auto;
  height: 100%;
  padding: var(--e2) var(--e2) var(--e3);
  text-align: left;
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne-titre);
  font-weight: 400;
  color: var(--v7-texte);
  text-decoration: none !important;
  overflow-wrap: anywhere;            /* une référence sans espace n'élargit pas la colonne */
}

/* L'IMAGE. aspect-ratio remplace les attributs width="228px" height="228px" —
   invalides, et surtout inadaptés dès que la colonne ne fait plus 228px.
   🔴 C'est aussi elle qui RÉSERVE la hauteur : ces <img> n'ont pas de src avant
   que jquery.unveil ne le pose au défilement (_base_v7.tpl:148). Sans
   aspect-ratio, chaque carte encore non révélée serait haute comme son texte,
   et la page sauterait à chaque image chargée. */
body.v7 #bloc_prod img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
body.v7 #bloc_prod > ul > li > a > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
  border-radius: 0;
  background: transparent;            /* pas de pastille grise derrière la vignette */
  box-shadow: none;
  font-size: var(--v7-t-mini);        /* si le texte alternatif s'affiche, il reste discret */
  overflow: hidden;
}

/* Le bloc des prix remontait de 16px pour compenser le lien en absolu. */
body.v7 #bloc_prod > ul > li > a > div {
  margin: auto 0 0;                   /* le prix se cale en bas de la carte */
  text-align: left;
  color: var(--v7-texte-doux);
}
body.v7 #bloc_prod > ul > li > a > span { white-space: normal; }


/* ══════════════════════════════════════════════════════════════════════════
   7. LA PAGE D'UNE MARQUE — #bl_ent, .media, #bloc_cat
   ══════════════════════════════════════════════════════════════════════════ */

/* #bl_ent{width:935px} est LE débordement horizontal certain du périmètre : il
   n'était masqué que par le filet overflow-x du socle, donc le contenu était
   coupé, pas adapté. */
body.v7 #bl_ent {
  float: none;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0 0 var(--e4);
  padding-top: var(--e2);
  position: relative;
  text-align: left;
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
}
/* 🔴 showroom.css:62 pose « #bl_ent.bl_ent--vitrine { min-height:0;
   margin-bottom:0 } » — spécificité (1,1,0), que la règle ci-dessus (1,1,1)
   bat, quel que soit l'ordre de chargement. On la réaffirme donc plus fort,
   sinon la marge basse revient sous la vitrine des univers et rouvre les 30px
   de blanc corrigés le 04/08. */
body.v7 #bl_ent.bl_ent--vitrine { min-height: 0; margin-bottom: 0; }

body.v7 #bl_ent ul { padding-left: 0; margin: 0; }
body.v7 #bl_ent li { float: none; }

/* Le média de présentation : 432x243 imposés en CSS ET en attributs HTML.
   La largeur suivait déjà (max-width du socle), la HAUTEUR restait bloquée à
   243px — c'est exactement ce qui déforme les visuels de marque. */
body.v7 .media {
  float: none;
  display: block;
  width: auto;
  height: auto;
  max-width: 377px;                   /* Fibonacci */
  margin: 0 0 var(--e3);
  text-align: left;
}
body.v7 .media img,
body.v7 .media video {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
body.v7 .media iframe {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* Le titre de marque était en position absolue sur un fond décoratif calé sur
   une hauteur de 33px : il chevauchait la vidéo dès que celle-ci rétrécissait.
   Le décor part avec la hauteur fixe qui le portait. */
body.v7 .media h1 {
  position: static;
  height: auto;
  line-height: var(--v7-interligne-titre);
  padding: 0;
  background: none;
  text-transform: none;
}
/* page.manufacturer.tpl:33 et :38 écrivent width/height EN DUR dans l'attribut
   style pour la seule marque BabyStoria (198x198). Un style inline ne se bat
   qu'avec !important, et l'attribut [style] limite la portée aux seuls éléments
   concernés. À supprimer du gabarit quand quelqu'un y touchera. */
body.v7 .media[style] { width: auto !important; height: auto !important; }
body.v7 .media video[style] { width: 100% !important; height: auto !important; }

body.v7 #ent_medaille { float: none; width: var(--e7); margin: var(--e2) 0; }
body.v7 .tpl_img_marque { float: none; margin: 0 0 var(--e3); max-width: 100%; }
body.v7 .desc_marque { float: none; text-align: left; }

/* L'éventail de best-sellers : recouvrement calculé en pixels durs, avec un
   style="left:-12Npx" écrit par Twig. Illisible sous 500px. La page marque ne
   l'affiche plus en V7 (page.manufacturer.tpl:56 : {% if not v7 %}) mais la
   page collection, elle, l'émet encore. On le remet simplement au flux plutôt
   que de le laisser déborder — sa vraie disparition passe par le gabarit. */
body.v7 .vignettes {
  height: auto;
  background: none;
  margin: var(--e5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  clear: both;
}
body.v7 .decalage { margin-left: 0; display: contents; }
body.v7 .ent_ {
  position: static;
  float: none;
  left: auto !important;              /* neutralise le style inline du gabarit */
  width: auto;
  height: auto;
}
body.v7 .image-cropper { width: auto; height: auto; overflow: visible; }
body.v7 .vig {
  position: static;
  left: auto;
  top: auto;
  width: var(--e7);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Les rails « Nouveautés / Produits phares / par rayon » : deux colonnes à 49%
   flottantes, chacune contenant six vignettes à 16% — soit ~25px par vignette
   au téléphone. */
body.v7 #bloc_cat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  margin-bottom: var(--e4);
}
body.v7 #bloc_cat > div {
  float: none;
  width: auto;
  min-height: 0;
  margin-right: 0;
  clear: none;                        /* annule le fix nth-child(2n+1) du 25/07 */
}
body.v7 #bloc_cat h2 {
  white-space: normal;
  font-family: var(--v7-police-titre);
  font-size: var(--v7-t-moyen);
  color: var(--v7-encre-douce);
  margin: 0 0 var(--e2);
}
body.v7 #bloc_cat > div > a { height: auto; padding: 0; }
body.v7 #bloc_cat > div > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--e7), 1fr));
  gap: var(--e2);
  width: auto;
  margin: 0;
  padding: var(--e2) 0 0;
  border-top: 1px solid var(--v7-trait-doux);
}
body.v7 #bloc_cat > div > ul > li {
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  overflow: visible;
  position: relative;
  font-size: var(--v7-t-mini);
  text-align: center;
}
body.v7 #bloc_cat > div > ul > li > a { max-width: none; display: block; }
body.v7 #bloc_cat img {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 0 var(--e1);
}

/* Bloc collections (aujourd'hui neutralisé par {% if 1==3 %} dans le gabarit,
   règle défensive au cas où il serait réactivé). */
body.v7 #bloc_col > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--e7), 1fr));
  gap: var(--e3);
  width: auto;
  margin: 0;
  padding: 0;
}
body.v7 #bloc_col > ul > li {
  float: none;
  width: auto;
  min-height: 0;
  margin-right: 0;
  text-align: center;
}
body.v7 #bloc_col > ul > li > a > img { max-width: 100%; height: auto; }

@media (min-width: 768px) {
  /* 2 colonnes seulement si structure marque (enfants > div), pas fiche produit (a+ul) */
  body.v7 #bloc_cat:has(> div) { grid-template-columns: 1fr 1fr; }
  body.v7 #entete_description img {
    float: right;
    width: auto;
    max-width: var(--e8);
    margin: 0 0 var(--e2) var(--e3);
  }
  body.v7 #entete_description iframe {
    float: right;
    max-width: var(--e9);
    margin: 0 0 var(--e2) var(--e3);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. LA PAGE DES MARQUES — /nos-marques.html
   Six colonnes à 15% en float, figées CÔTÉ CSS **et** côté gabarit : Twig
   injecte un <div style="clear:both"> tous les six blocs
   (pages/nos-marques.tpl:91-93). On ne peut pas retirer ce <div> — mais il est
   VIDE, ce qui permet de le neutraliser sans ambiguïté : :empty ne peut pas
   attraper un bloc de marques, qui contient toujours au moins sa lettre.
   ══════════════════════════════════════════════════════════════════════════ */

body.v7 .information:has(#marques_bloc) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: var(--e4) var(--e3);
  align-items: start;
}
body.v7 .information:has(#marques_bloc) > h1 { grid-column: 1 / -1; }
body.v7 .information:has(#marques_bloc) > div:empty { display: none; }

body.v7 #marques_bloc {
  float: none;
  width: auto;
  margin: 0;
  background: var(--v7-fond-surface);
}
body.v7 .marques_lettre {
  padding: 0 0 var(--e0) var(--e1);
  margin-bottom: var(--e1);
  font-family: var(--v7-police-titre);
  font-size: var(--v7-t-moyen);
  font-weight: 700;
  color: var(--v7-mauve);
  border-bottom: 1px solid var(--v7-mauve);
}
/* Le nom de marque devient une vraie cible : 44px de haut, plusieurs lignes
   autorisées (white-space:nowrap faisait déborder « Maisons du Monde » d'une
   colonne de 144px), et un survol qui se voit. */
body.v7 .marques_bebe > a {
  display: flex;
  align-items: center;
  min-height: var(--v7-cible);
  padding: 0 var(--e1);
  white-space: normal;
  font-size: var(--v7-t-base);
  line-height: var(--v7-interligne-titre);
  color: var(--v7-texte-lien);
  border-radius: var(--v7-rayon);
  overflow-wrap: anywhere;
}
body.v7 .marques_bebe > a:hover {
  background: var(--v7-fond-doux);
  text-decoration: none;
}

/* L'infobulle déplacée dans <body> par page_nos_marques.js. On borne sa largeur
   (elle est positionnée en JS avec offset().left + width() + 10, ce qui la fait
   sortir de l'écran près du bord droit) et on l'accorde à la charte. */
body.v7 #marques_liens {
  max-width: min(89vw, 377px);
  padding: var(--e2);
  z-index: var(--z-menu);
  border: 1px solid var(--v7-mauve);
  border-radius: var(--v7-rayon);
  box-shadow: var(--v7-ombre-forte);
  font-size: var(--v7-t-petit);
}
body.v7 #marques_liens ul,
body.v7 #marques_liens li { font-size: var(--v7-t-petit); }
body.v7 #marques_liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--e5);
}
body.v7 #marques_infos_contenu img {
  max-height: var(--e5);
  width: auto;
  margin-left: var(--e2);
  object-fit: contain;
}
/* 🔴 Là où il n'y a pas de vrai survol, l'infobulle ne peut pas être fermée :
   un appui la déclenche puis la laisse ouverte 100 secondes
   (page_nos_marques.js:13 : setTimeout(…, 100000)). On la retire. Ce n'est pas
   une media query de largeur : c'est une requête de CAPACITÉ du pointeur. */
@media (hover: none) {
  body.v7 #marques_liens { display: none !important; }
}

/* Mur de logos de marques : le socle fournit la grille (.v7-grille--marques),
   ce fichier fournit le CADRE. Un logo n'est jamais recadré ni étiré — c'est la
   cause directe des visuels déformés relevés le 01/09 sur la page /Kaloo. */
.v7-grille--marques img,
.v7-logo-marque {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--v7-fond-surface);
  border-radius: var(--v7-rayon);
}


/* ══════════════════════════════════════════════════════════════════════════
   9. GRAND ÉCRAN — confort uniquement, aucune mise en page nouvelle (R3)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  body.v7 .v7-main:has(> #gauche) {
    padding-inline: var(--e4);
    column-gap: var(--e5);
    grid-template-columns: 377px minmax(0, 1fr);
  }
}


/* Le bouton flottant « Filtrer » remonté le 01/09/2026. À 21 px du bas il
   passait sous le widget d'avis Google (« Note du magasin sur Google »), qui
   s'ancre lui aussi en bas d'écran et n'appartient pas à ce site ; à 55 px il
   affleurait encore (constaté sur capture). 89 px le dégagent tout en le
   laissant dans la zone du pouce.
   ⓘ Valeur mesurée sur le rendu, pas choisie : le widget occupe environ 70 px
   avec sa marge. Si ce widget change de taille, c'est ici qu'il faut revenir. */
.v7-filtres-declencheur { bottom: var(--e7); }


/* ══════════════════════════════════════════════════════════════════════════
   TAILLE DES VIGNETTES DU CATALOGUE — revue le 01/09/2026 (demande utilisateur :
   « sur les pages catalogue on passe en 250x250 pour les images, ou 228x228
   comme avant »).

   CE QUI A ÉTÉ MESURÉ AVANT DE TOUCHER QUOI QUE CE SOIT
   -----------------------------------------------------
   · Le listing sert /media/product_images/vente-*.jpg, dont la taille NATIVE
     est 250 × 250 (lue sur le fichier, pas supposée).
   · Le dépôt /media/product/fixed/ ne contient que trois tailles :
     250px (42 302 fichiers), 130px (40 689), 120px (40 951).
     🔑 250 est donc le maximum disponible : au-delà, on n'agrandit pas une
     image, on la rend floue.
   · À 1440 px, la vignette s'affichait à 196 × 196 — soit la colonne (212) moins
     les 16 px de marge intérieure du lien. Deux tailles trop petites d'un coup.

   CE QUI CHANGE
   -------------
   1. La marge intérieure passe du LIEN aux blocs de TEXTE : l'image occupe
      désormais toute la largeur de la colonne, le texte garde sa respiration.
   2. La largeur minimale de colonne passe à 228 px dès 768 px (elle valait 178
      puis 208) : au-dessus de 1024 px la colonne fait de 235 à 300 px.
   3. L'image est BORNÉE À 250 px et centrée. C'est la contrainte qui compte :
      elle ne descend plus sous ~228 et ne dépasse jamais sa résolution native.
   ══════════════════════════════════════════════════════════════════════════ */
/* 06/10/2026 : 7 produits par ligne sur bureau - vignette native 250px :
   trop peu de colonnes etirait l'image au-dela de sa resolution (flou).
   Sous 1024 : grille fluide ; a partir de 1024 : exactement 7 colonnes. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.v7 #bloc_prod > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  body.v7 #bloc_prod > ul {
    --v7-carte-min: 0px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* La marge intérieure quitte le lien… */
body.v7 #bloc_prod > ul > li > a {
  padding-inline: 0;
  padding-top: 0;
}
/* …et va sur ce qui en a besoin : les textes et les prix. */
body.v7 #bloc_prod > ul > li > a > div,
body.v7 #bloc_prod > ul > li > a > span,
body.v7 #bloc_prod > ul > li > a > small,
body.v7 #bloc_prod > ul > li > a > br + * { padding-inline: var(--e2); }

/* L'image : pleine largeur de colonne, jamais au-delà de sa résolution native. */
body.v7 #bloc_prod > ul > li > a > img {
  max-width: 250px;
  margin-inline: auto;
  border-radius: var(--v7-rayon) var(--v7-rayon) 0 0;
}


/* ============================================================================
   PASSAGE POWERGYM + HOME K - catalogue / listing - 21/09/2026
   Meme ligne que la fiche produit : air, cartes, sticky filtres, pas de noir.
   ========================================================================= */

/* 22/09/2026e->f : le plafond 1220 (Powergym 21/09) recassait le listing
   responsive (3 colonnes + vide a droite). On revient a la regle 16/09 :
   pleine largeur ; la grille auto-fill decide du nombre de colonnes.
   Portrait/mobile : inchanges (flex column + order produits puis filtres). */
body.v7 .v7-main:has(#bloc_prod),
body.v7 .v7-main:has(#gauche),
body.v7 .v7-main:has(> #gauche) {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--v7-marge-page);
}

body.v7 #bl_ent > h1,
body.v7 #droite h1 {
  font-family: var(--v7-police-produit);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--v7-encre-douce);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  body.v7 #gauche {
    position: sticky;
    top: var(--e4);
    align-self: start;
    padding: var(--e3);
    border: 1px solid var(--v7-trait-doux);
    border-radius: var(--v7-rayon-grand);
    background: #fff;
    box-shadow: 0 var(--e1) var(--e3) rgba(28, 28, 28, 0.05);
  }
}

body.v7 #gauche > div {
  border-bottom: 1px solid var(--v7-trait-doux);
  padding-bottom: var(--e2);
  margin-bottom: var(--e2);
}
body.v7 #gauche > div:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Catalogue : vignettes plates (pas de carte / cadre / ombre) — override final */
body.v7 #bloc_prod > ul > li {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  transition: none;
}
body.v7 #bloc_prod > ul > li:hover,
body.v7 #bloc_prod > ul > li:focus-within {
  box-shadow: none;
  transform: none;
}
body.v7 #bloc_prod > ul > li > a > img {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}


/* === DDP-AGENT-FIX listing-pleine 20260922f === */
/* Garde-fou : jamais de plafond 1220 sur les pages listing/catalogue. */
body.v7 .v7-main:has(> #gauche),
body.v7 .v7-main:has(#bloc_prod) {
  max-width: none !important;
  margin-inline: 0;
}
/* Colonnes: defaut bureau = 7 (voir media 1024 + lab v7-lab-cols-7). */

/* Portrait etroit : 2 colonnes confortables, sans toucher au landscape. */
@media (orientation: portrait) and (max-width: 900px) {
  body.v7 #bloc_prod > ul { --v7-carte-min: 144px; }
}

/* === DDP-AGENT-FIX listing-flat-cards 20260922g === */
/* Demande 22/09 : retirer le cadre des vignettes listing, SANS effacer le design
   carte (ombre / fond / radius). Pour REACTIVER le design cadre, commenter
   tout ce bloc "flat" ci-dessous — les regles d'origine plus haut restent. */

/* Neutralise le chrome carte (base ~804 + Powergym ~1300) */
body.v7 #bloc_prod > ul > li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
body.v7 #bloc_prod > ul > li:hover,
body.v7 #bloc_prod > ul > li:focus-within {
  box-shadow: none !important;
  transform: none !important;
}

/* Design CADRE conserve (desactive) — decommenter pour revenir :
body.v7 #bloc_prod > ul > li {
  background: var(--v7-fond-surface);
  border: 1px solid var(--v7-trait-doux);
  border-radius: var(--v7-rayon-grand);
  box-shadow: var(--v7-ombre);
}
body.v7 #bloc_prod > ul > li:hover,
body.v7 #bloc_prod > ul > li:focus-within {
  box-shadow: 0 var(--e2) var(--e4) rgba(28, 28, 28, 0.1);
  transform: translateY(-2px);
}
*/

/* === DDP-AGENT-FIX listing-gauche-no-scrollbar 20260922g === */
/* Masque la barre verticale moche du menu facettes (#gauche sticky).
   Le panneau peut toujours defiler (molette / touch), sans track visible. */
body.v7 #gauche {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* vieux Edge */
}
body.v7 #gauche::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chrome / Safari */
}
/* Si le scroll vient d'un enfant interne du panneau facettes */
body.v7 #gauche * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.v7 #gauche *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* === DDP-AGENT-FIX listing-lab-cols 20260922h === */
/* Lab temporaire : forcer N colonnes (4..10) + plus d'espace optionnel.
   Classes posees sur #bloc_prod par v7-listing.js (localStorage). A retirer
   quand un style sera choisi. */

.v7-lab-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.55rem;
  margin: 0.35rem 0 0.6rem;
  padding: 0.35rem 0.5rem;
  border: 1px dashed var(--v7-trait-doux, #d8d4e0);
  border-radius: 8px;
  background: #faf9fc;
  font-size: 0.78rem;
}
.v7-lab-grid__mot {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v7-texte-doux, #6b6578);
  margin-right: 0.25rem;
}
.v7-lab-grid__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.v7-lab-grid__opt input { margin: 0; accent-color: var(--v7-magenta, #c2185b); }

/* Colonnes forcees + images bornees (4 cols ~600px max comme demande) */
body.v7 #bloc_prod.v7-lab-cols-4 > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.v7 #bloc_prod.v7-lab-cols-5 > ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.v7 #bloc_prod.v7-lab-cols-6 > ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.v7 #bloc_prod.v7-lab-cols-7 > ul { grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.v7 #bloc_prod.v7-lab-cols-8 > ul { grid-template-columns: repeat(8, minmax(0, 1fr)); }
body.v7 #bloc_prod.v7-lab-cols-9 > ul { grid-template-columns: repeat(9, minmax(0, 1fr)); }
body.v7 #bloc_prod.v7-lab-cols-10 > ul { grid-template-columns: repeat(10, minmax(0, 1fr)); }

body.v7 #bloc_prod.v7-lab-cols-4 > ul > li > a > img { max-width: 600px; width: 100%; }
body.v7 #bloc_prod.v7-lab-cols-5 > ul > li > a > img { max-width: 480px; width: 100%; }
body.v7 #bloc_prod.v7-lab-cols-6 > ul > li > a > img { max-width: 400px; width: 100%; }
body.v7 #bloc_prod.v7-lab-cols-7 > ul > li > a > img,
body.v7 #bloc_prod.v7-lab-cols-8 > ul > li > a > img,
body.v7 #bloc_prod.v7-lab-cols-9 > ul > li > a > img,
body.v7 #bloc_prod.v7-lab-cols-10 > ul > li > a > img { max-width: 100%; width: 100%; }

/* + espace entre vignettes */
body.v7 #bloc_prod.v7-lab-gap > ul {
  gap: clamp(1.25rem, 2.2vw, 2.5rem) clamp(1rem, 1.8vw, 2rem);
}

/* Ligne / espace parasite entre nom et prix (hr barre + marge historique) */
body.v7 #bloc_prod .prix_init > hr {
  display: none !important;
}
body.v7 #bloc_prod > ul > li > a > div {
  border-top: 0 !important;
  margin-top: 0.15rem !important;
  padding-top: 0 !important;
}
body.v7 #bloc_prod .prix_init {
  top: 0 !important;
}

/* === DDP-AGENT-FIX nuancier-flashy 20260922i === */
/* Pastilles facette couleur plus flashy (taille, contraste, leger relief).
   Anciennes teintes mutees conservees en commentaire pour rollback. */
/*
  rose #E8A0B8 / bleu #5B8FD9 / gris #9AA0A6 / vert #5A9E6F / beige #D8C4A0
  rouge #C0392B / marron #8B5A2B / orange #E67E22 / jaune #E8C547 / violet #7B68C8
*/
body.v7 .v7-nuancier__pastille {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(36, 31, 56, 0.22),
    0 1px 3px rgba(36, 31, 56, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  background-clip: padding-box;
}
body.v7 .v7-nuancier__pastille[data-c="rose"]        { background: #FF4FA3; }
body.v7 .v7-nuancier__pastille[data-c="bleu"]        { background: #2F6BFF; }
body.v7 .v7-nuancier__pastille[data-c="gris"]        { background: #7A7F89; }
body.v7 .v7-nuancier__pastille[data-c="blanc"]       { background: #FFFFFF; }
body.v7 .v7-nuancier__pastille[data-c="vert"]        { background: #1DB954; }
body.v7 .v7-nuancier__pastille[data-c="beige"]       { background: #E8C58A; }
body.v7 .v7-nuancier__pastille[data-c="noir"]        { background: #111111; }
body.v7 .v7-nuancier__pastille[data-c="rouge"]       { background: #E31C23; }
body.v7 .v7-nuancier__pastille[data-c="marron"]      { background: #A05A2C; }
body.v7 .v7-nuancier__pastille[data-c="orange"]      { background: #FF7A00; }
body.v7 .v7-nuancier__pastille[data-c="jaune"]       { background: #FFD400; }
body.v7 .v7-nuancier__pastille[data-c="violet"]      { background: #8B5CF6; }
body.v7 .v7-nuancier__pastille[data-c="multicolore"] {
  background: conic-gradient(
    from 0deg,
    #FF4FA3 0deg 60deg,
    #2F6BFF 60deg 120deg,
    #1DB954 120deg 180deg,
    #FFD400 180deg 240deg,
    #FF7A00 240deg 300deg,
    #8B5CF6 300deg 360deg
  );
}
body.v7 .v7-nuancier__lien:hover .v7-nuancier__pastille {
  transform: scale(1.12);
}
body.v7 .v7-nuancier__lien--on .v7-nuancier__pastille {
  box-shadow:
    0 0 0 2px var(--v7-magenta, #e91e8c),
    0 0 0 4px rgba(233, 30, 140, 0.25),
    0 2px 6px rgba(36, 31, 56, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* === DDP-AGENT-FIX nuancier-no-ring 20260922k === */
/* Couleurs flashy conservees ; cerclage / ombre / anneau selection retires. */
body.v7 .v7-nuancier__pastille {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body.v7 .v7-nuancier__pastille[data-c="blanc"] {
  border: 1px solid rgba(36, 31, 56, 0.2) !important; /* blanc visible sans anneau epais */
}
body.v7 .v7-nuancier__lien:hover .v7-nuancier__pastille {
  transform: none !important;
}
body.v7 .v7-nuancier__lien--on .v7-nuancier__pastille {
  box-shadow: none !important;
  outline: none !important;
  /* selection = leger scale seulement, pas de double cercle */
  transform: scale(1.08);
}
/* === DDP-AGENT-FIX listing-landscape-5 20260922k === */
/* Version bac a sable : en paysage (desktop), 5 produits par ligne.
   Le lab Colonnes (auto/4..10) peut encore surcharger via classes v7-lab-cols-*. */
@media (min-width: 1024px) and (orientation: landscape) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* === DDP-AGENT-FIX listing-filtres-ux 20260922l === */
/* 1) Survol choix filtre : fond gris leger */
body.v7 #gauche > div > ul > li > a:hover {
  background: rgba(36, 31, 56, 0.06) !important;
  color: var(--v7-violet-fonce);
  text-decoration: none;
}

/* 2) Choix selectionne (case cochee / couleur active) */
body.v7 #gauche > div > ul > li > a.cbc,
body.v7 #gauche > div > ul > li > a.v7-nuancier__lien--on {
  background: rgba(106, 70, 200, 0.10);
  color: var(--v7-violet-fonce);
  font-weight: 700;
}
body.v7 .v7-nuancier__lien--on .v7-nuancier__nom {
  font-weight: 700;
}

/* 3) Arborescence Ariane redondante a gauche (liens .gb.i*) — filet de securite */
body.v7 #gauche > div > ul > li > a.gb.i0,
body.v7 #gauche > div > ul > li > a.gb.i1,
body.v7 #gauche > div > ul > li > a.gb.i2,
body.v7 #gauche > div > ul > li > a.gb.i3,
body.v7 #gauche > div > ul > li > a.gb.i4 {
  display: none !important;
}
body.v7 #gauche > div > ul > li:has(> a.gb.i0),
body.v7 #gauche > div > ul > li:has(> a.gb.i1),
body.v7 #gauche > div > ul > li:has(> a.gb.i2),
body.v7 #gauche > div > ul > li:has(> a.gb.i3),
body.v7 #gauche > div > ul > li:has(> a.gb.i4) {
  display: none !important;
}

/* 4) Fil d'Ariane : degrasage (retire le bump 1.05rem; reste --v7-t-petit plus haut) */
body.v7 nav#puericulture {
  font-size: var(--v7-t-petit);
  font-weight: 400;
  color: var(--v7-texte-doux, #6b6578);
}
body.v7 nav#puericulture a,
body.v7 nav#puericulture li {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}
body.v7 nav#puericulture a:hover {
  color: var(--v7-violet-fonce, #6A46C8);
}

/* 6) Croix reset + libelle "effacer criteres" a droite */
body.v7 #gauche a.reset {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  width: auto !important;
  height: auto !important;
  min-height: 16px;
  padding: 0.15rem 0.25rem 0.15rem 18px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--v7-texte-doux);
  text-decoration: none;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: left center;
}
body.v7 #gauche a.reset:hover {
  color: var(--v7-violet-fonce);
}
body.v7 #gauche > div > h2 {
  padding-right: 9.5rem; /* place pour croix + texte */
}

/* 7) Retirer "Afficher les resultats pour" (bloc vide) */
body.v7 #affi {
  display: none !important;
}

/* 8) Retirer les traces gris entre blocs de filtres */
body.v7 #gauche > div > h2 {
  border-bottom: 0 !important;
}
body.v7 #gauche > div {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.v7 #affi {
  border-bottom: 0 !important;
}
/* === DDP-AGENT-FIX listing-filtres-ux 20260922l (end) === */
/* === DDP-AGENT-FIX reset-label-gap 20260922m === */
/* La sprite croix (16x16) et le texte "effacer criteres" ne doivent plus se chevaucher.
   On reserve 16px + ecart a gauche pour l'icone, et on elargit le padding du h2. */
body.v7 #gauche a.reset {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  width: auto !important;
  height: 16px !important;
  min-width: 0;
  padding: 0 0 0 20px !important; /* 16px icone + 4px air */
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 16px;
  color: var(--v7-violet-fonce, #6A46C8);
  text-indent: 0 !important;
  white-space: nowrap;
  overflow: visible;
  background-image: url(/sites/DDP/img/ui/bloc.gif);
  background-repeat: no-repeat;
  background-position: 0 center; /* croix a gauche, texte a droite */
  background-size: auto;
}
body.v7 #gauche a.reset:after {
  /* zone tactile elargie, sans recouvrir le texte */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--v7-cible, 44px);
  transform: translateY(-50%);
  pointer-events: auto;
}
body.v7 #gauche > div > h2 {
  padding-right: 8.2rem !important;
  gap: 0.5rem;
}
body.v7 #gauche > div > h2 > a.reset {
  flex: 0 0 auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
/* === DDP-AGENT-FIX reset-label-gap 20260922m (end) === */
/* === DDP-AGENT-FIX listing-5-3-gros 20260922n === */
/* Grille fixe : 5 produits en paysage, 3 en portrait.
   Vignettes plus grandes : pleine largeur de colonne (plus de plafond 250px
   qui les laissait petites dans une cellule deja large). object-fit:contain
   conserve le ratio ; les fichiers natifs ~250 restent nets tant que la
   colonne ne deborde pas trop au-dela. Le lab Colonnes peut encore forcer. */

/* Portrait : 3 colonnes (tablette / ecran portrait) */
@media (orientation: portrait) and (min-width: 600px) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
  }
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul > li > a > img {
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
}

/* Petit portrait (telephone) : 2 cols pour ne pas ecraser les vignettes */
@media (orientation: portrait) and (max-width: 599px) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul > li > a > img {
    max-width: none;
    width: 100%;
  }
}

/* Paysage desktop : 5 colonnes + vignettes qui remplissent la cellule */
@media (min-width: 1024px) and (orientation: landscape) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.2vw, 1.35rem);
  }
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul > li > a {
    padding-inline: 0;
    padding-top: 0;
  }
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul > li > a > img {
    max-width: none; /* liberer le plafond 250px pour utiliser toute la colonne */
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin-inline: auto;
  }
}

/* Tablette paysage un peu plus etroit : toujours 5 si possible, sinon 4 */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul > li > a > img {
    max-width: none;
    width: 100%;
  }
}
/* === DDP-AGENT-FIX listing-5-3-gros 20260922n (end) === */
/* === DDP-AGENT-FIX gauche-un-scroll-reset-texte 20260922o === */
/* 1) Plus de double scroll : #gauche suit la page (partie centrale).
   Sticky + max-height + overflow-y creaient un 2e ascenseur. */
@media (min-width: 1024px) {
  body.v7 #gauche {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overscroll-behavior: auto;
    align-self: start;
  }
}
/* Tiroir mobile : garder le scroll interne du panneau ouvert (hors desktop). */
body.v7.v7-filtres-tiroir #gauche {
  overflow-y: auto;
}

/* 2) "effacer criteres" : texte seul, sans icone / sprite croix devant. */
body.v7 #gauche a.reset {
  background-image: none !important;
  background: none !important;
  padding-left: 0.25rem !important;
  width: auto !important;
  height: auto !important;
  min-height: 1.1em;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--v7-violet-fonce, #6A46C8);
  text-decoration: none;
  white-space: nowrap;
}
body.v7 #gauche a.reset:before,
body.v7 #gauche a.reset:after {
  content: none !important;
  display: none !important;
  background: none !important;
}
body.v7 #gauche > div > h2 {
  padding-right: 7.5rem !important;
}
/* === DDP-AGENT-FIX gauche-un-scroll-reset-texte 20260922o (end) === */
/* === DDP-AGENT-FIX listing-fibo-5x6 20260922p === */
/* R6 / PALETTE_V7 + v7-tokens : espacements Fibonacci uniquement.
   Modele catalogue paysage : 5 produits + 6 espaces
     [S][P][S][P][S][P][S][P][S][P][S]
   En CSS : padding-inline = S (x2) + gap = S (x4 entre 5 cards) => 6S.
   Formule : P = (U - 6*S) / 5  avec U = largeur utile de #bloc_prod.
   S = --e2 (8px) pour GAGNER en largeur vs un card ~478 trop etroit
   (un gap en vw / clamp elargissait les gouttieres sur grand ecran).
   Contigu Fibonacci autorise : exterieur --e3 (13) si besoin de respiration
   page ; ici on unifie a --e2 pour maximiser P tout en restant dans la suite.
   Portrait 3 produits => 4 espaces : [S][P][S][P][S][P][S] = 4S+3P.

   Exemples (S=8) :
     U=2400 → P=(2400-48)/5 = 470.4
     U=2560 → P=(2560-48)/5 = 502.4  (> 478)
     U=2800 → P=(2800-48)/5 = 550.4
   Or (phi 1.618) = interligne deja en tokens ; plastique (~1.325) = titres.
*/

body.v7 #bloc_prod > ul {
  --v7-listing-espace: var(--e2); /* 8px - Fibonacci, gouttiere catalogue */
  box-sizing: border-box;
  padding-inline: var(--v7-listing-espace);
  gap: var(--v7-listing-espace);
}

@media (orientation: portrait) and (min-width: 600px) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: var(--e2);
    gap: var(--e2); /* 4 espaces + 3 produits */
  }
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul > li > a > img {
    max-width: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-inline: var(--e2); /* 2 des 6 espaces */
    column-gap: var(--e2);     /* 4 des 6 espaces */
    row-gap: var(--e3);        /* 13px entre rangées (Fibonacci voisin) */
  }
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul > li > a > img {
    max-width: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
}

/* Lab "+ espace" : remonte d'un cran Fibonacci (8 → 13), pas de vw libre */
body.v7 #bloc_prod.v7-lab-gap > ul {
  --v7-listing-espace: var(--e3);
  padding-inline: var(--e3);
  gap: var(--e3);
}
/* === DDP-AGENT-FIX listing-fibo-5x6 20260922p (end) === */
/* === DDP-AGENT-FIX filtres-indent-fibo 20260922q === */
/* Legere indentation sous les titres de facettes (R6 Fibonacci --e2 = 8px).
   Uniformise Rayon / Marques / Critere / Couleur (le sprite .cb/.cbc
   et certaines pastilles decalaient deja certaines lignes).
   Responsive : meme jeton --e2 a tous les paliers (pas de px inventes). */
body.v7 #gauche > div > ul {
  padding-inline-start: var(--e2); /* 8px */
}
body.v7 #gauche > div > ul > li > a {
  padding-inline-start: 0;
}
/* Critere (.cb/.cbc) : l'icone 16px + gap ; pas de double indent */
body.v7 #gauche > div > ul > li > a.cb,
body.v7 #gauche > div > ul > li > a.cbc {
  margin-inline-start: 0;
}
/* Nuancier : aligner toutes les pastilles (eviter Blanc plus a droite) */
body.v7 #gauche > div > ul.v7-nuancier > li > a.v7-nuancier__lien {
  padding-inline-start: 0;
  margin-inline-start: 0;
}
/* Sous-rayons historiques .i0..i4 : baser sur Fibonacci, pas 10/20/30 arbitraires */
body.v7 #gauche > div > ul > li > a.i0 { padding-inline-start: 0; }
body.v7 #gauche > div > ul > li > a.i1 { padding-inline-start: var(--e2); }  /* 8 */
body.v7 #gauche > div > ul > li > a.i2 { padding-inline-start: var(--e3); }  /* 13 */
body.v7 #gauche > div > ul > li > a.i3 { padding-inline-start: var(--e4); }  /* 21 */
body.v7 #gauche > div > ul > li > a.i4 { padding-inline-start: var(--e5); }  /* 34 */

/* Rappel R6 responsive catalogue : gouttieres toujours en --e* (jamais vw libre) */
@media (max-width: 767px) {
  body.v7 #gauche > div > ul {
    padding-inline-start: var(--e2);
  }
  body.v7 #bloc_prod > ul {
    padding-inline: var(--e2);
    gap: var(--e2);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.v7 #bloc_prod > ul {
    padding-inline: var(--e2);
    gap: var(--e2);
  }
}
/* === DDP-AGENT-FIX filtres-indent-fibo 20260922q (end) === */
/* === DDP-AGENT-FIX pack1-step5-fab-filtrer 20261001a (start) === */
/* Pack1 step5 FIX mobile (~390px) : le FAB Filtrer (position:fixed, centre,
   bottom --e7) recouvrait prix / textes des vignettes pendant le scroll.
   Strategie (sans toucher P0 20260926g bandeau livraison) :
   1) basculer le FAB a gauche (chat #scc-bulle reste a droite) ;
   2) padding-bottom du listing = hauteur FAB + offset, pour liberer la
      derniere rangee de cartes ;
   3) le JS exige aussi #bloc_prod (pas de fuite fiche produit). */
@media (max-width: 1023px) {
  body.v7.v7-filtres-tiroir .v7-filtres-declencheur {
    left: var(--e3); /* 13px - coin gauche, hors zone chat droite */
    right: auto;
    transform: none;
    z-index: var(--z-menu); /* 200 : sous panneau/chat, au-dessus cartes */
  }
  /* Air sous la grille : bottom FAB (--e7=89) + cible (44) + marge (--e3=13) */
  body.v7.v7-filtres-tiroir #bloc_prod,
  body.v7.v7-filtres-tiroir #droite {
    padding-bottom: calc(var(--e7) + var(--v7-cible) + var(--e3)) !important;
  }
}
/* Bureau : rien a faire (FAB deja display:none >=1024). */
/* === DDP-AGENT-FIX pack1-step5-fab-filtrer 20261001a (end) === */

/* === DDP-AGENT-FIX gauche-h2-nowrap 20261009a ===
   "Collections / Themes" passait sur 2 lignes : padding-right 7.5rem etait
   toujours reserve pour a.reset, meme absent. Place seulement si reset present ;
   nowrap evite un wrap parasite sur le slash. <br> des libelles multi-lignes
   (collection_theme_produits_similaires) reste actif. */
body.v7 #gauche > div > h2 {
  padding-right: 0 !important;
  white-space: nowrap;
}
body.v7 #gauche > div > h2:has(> a.reset) {
  padding-right: 7.5rem !important;
}
/* === DDP-AGENT-FIX gauche-h2-nowrap 20261009a (end) === */


/* 09/10/2026 (G3dev) - scroll infini V7 (products.tpl + infinite_scroll.js) :
   indicateur de chargement et message de fin, sous la grille #bloc_prod. */
body.v7 .v7-infini__charge,
body.v7 .v7-infini__fin {
  clear: both;
  margin: var(--e4) 0;
  text-align: center;
  font-size: var(--v7-t-petit);
  color: var(--v7-texte-doux);
}
body.v7 .v7-infini__charge img { display: inline-block; width: auto; height: auto; }

/* ==========================================================================
   12/10/2026 (G3dev) -- SLIDER COLONNES (remplace .v7-lab-grid, lab radio)
   Sur la ligne du tri (.v7-pager__ligne). Gauche = 4 col (grands), droite =
   10 col (petits). Visible >= 1024px seulement (en dessous : grille auto).
   ========================================================================== */
.v7-lab-grid { display: none !important; }
.v7-cols {
  display: none;
  align-items: center;
  gap: var(--e2, 8px);
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--v7-texte-doux, #6b6578);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .v7-cols { display: inline-flex; }
}
.v7-cols__mot { letter-spacing: 0.03em; }
.v7-cols__range {
  --v7-cols-pct: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 144px;
  height: 21px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.v7-cols__range:focus { outline: none; }
.v7-cols__range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--v7-magenta, #c2185b) 0 var(--v7-cols-pct), #e4dfea var(--v7-cols-pct) 100%);
}
.v7-cols__range::-moz-range-track { height: 5px; border-radius: 3px; background: #e4dfea; }
.v7-cols__range::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--v7-magenta, #c2185b); }
.v7-cols__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--v7-magenta, #c2185b);
  box-shadow: 0 2px 5px rgba(36, 31, 56, 0.18);
}
.v7-cols__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--v7-magenta, #c2185b);
  box-shadow: 0 2px 5px rgba(36, 31, 56, 0.18);
}
.v7-cols__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.25); }
.v7-cols__val {
  min-width: 1.4em;
  text-align: center;
  font-weight: 700;
  color: var(--v7-texte, #241f38);
}
.v7-cols__gap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: var(--e1, 5px);
  cursor: pointer;
  user-select: none;
}
.v7-cols__gap input { margin: 0; width: 13px; height: 13px; accent-color: var(--v7-magenta, #c2185b); }

/* 12/10/2026 -- slider colonnes : la ligne du tri peut passer a la ligne
   (sinon le tri sortait a droite a 1280px) ; slider compact, mots masques < 1440. */
@media (min-width: 1024px) {
  body.v7 .v7-pager__ligne { flex-wrap: wrap; }
}
.v7-cols { flex: 0 0 auto; }
.v7-cols__range { width: 110px; }
@media (max-width: 1439px) {
  .v7-cols__mot { display: none; }
}

/* 12/10/2026 soir (G3dev) : slider colonnes = libelle "Taille affichage", sans chiffre ni case + espace,
   colle a gauche apres Page/Afficher, couleurs des boutons de la ligne (fond-doux / primaire), plus de magenta. */
body.v7 .v7-cols { margin-left: var(--e3, 13px); margin-right: 0; gap: var(--e1, 5px); color: var(--v7-texte, #241f38); font-size: var(--v7-t-petit); font-family: var(--v7-police-appui); }
body.v7 .v7-cols__lib { white-space: nowrap; }
body.v7 .v7-cols__mot, body.v7 .v7-cols__val, body.v7 .v7-cols__gap { display: none !important; }
body.v7 .v7-cols__range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--v7-primaire) 0 var(--v7-cols-pct), var(--v7-fond-doux) var(--v7-cols-pct) 100%); }
body.v7 .v7-cols__range::-moz-range-track { background: var(--v7-fond-doux); }
body.v7 .v7-cols__range::-moz-range-progress { background: var(--v7-primaire); }
body.v7 .v7-cols__range::-webkit-slider-thumb { border-color: var(--v7-primaire); }
body.v7 .v7-cols__range::-moz-range-thumb { border-color: var(--v7-primaire); }
body.v7 .v7-cols__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--v7-fond-doux); }
/* === CSS-BOSS listing-gap 20261013 (start) ===
   Demande page cat/marque : espaces grille produits #bloc_prod. Bureau (>=1024) +6px, mobile (<=767) +3px.
   Anciens defauts : bureau 8px/8px (classes v7-lab-cols-*, l.1836) et 8px col / 13px rangee (paysage sans classe, l.1857) ;
   mobile 8px/8px (l.1912, l.1843). Tablette 768-1023 inchangee. Memes selecteurs/medias, places apres = gagnent. */
@media (min-width: 1024px) {
  body.v7 #bloc_prod > ul,
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul { column-gap: calc(var(--e2) + 6px); row-gap: calc(var(--e2) + 6px); }
}
@media (min-width: 1024px) and (orientation: landscape) {
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul { column-gap: calc(var(--e2) + 6px); row-gap: calc(var(--e3) + 6px); }
}
@media (max-width: 767px) {
  body.v7 #bloc_prod > ul,
  body.v7 #bloc_prod:not([class*="v7-lab-cols-"]) > ul { column-gap: calc(var(--e2) + 3px); row-gap: calc(var(--e2) + 3px); }
}
/* === CSS-BOSS listing-gap 20261013 (end) === */
/* === CSS-BOSS nos-marques 20261013 (start) === demande page cat/marque
   Le gabarit sort UN #marques_bloc par lettre (25), chacun = .marques_lettre + .marques_bebe > a.nm-carte.
   Chaque bloc-lettre prend toute la largeur et devient une grille de cartes. Les cadres .mq-logo--<slug>
   (v7-marque.css l.639-672, poses sur certains .nm-carte__logo) gardent leur taille/bordure : :not(.mq-logo). */
body.v7 .information:has(#marques_bloc) > #marques_bloc { grid-column: 1 / -1; }
body.v7 #marques_bloc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 13px;
  align-items: start;
}
body.v7 #marques_bloc > .marques_lettre { grid-column: 1 / -1; }
body.v7 #marques_bloc .marques_bebe { min-width: 0; text-align: center; }
body.v7 #marques_bloc .nm-carte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--e2, 8px);
  text-align: center;
}
body.v7 #marques_bloc a,
body.v7 #marques_bloc a:hover,
body.v7 #marques_bloc a:focus {
  text-decoration: none;
  background: none;
}
body.v7 #marques_bloc a:focus { outline: none; }
body.v7 #marques_bloc a:focus-visible {
  outline: 2px solid var(--v7-violet-fonce, #6A46C8);
  outline-offset: 2px;
  border-radius: var(--v7-rayon, 5px);
}
body.v7 #marques_bloc .nm-carte__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.v7 #marques_bloc .nm-carte__logo:not(.mq-logo) {
  width: 100%;
  max-width: 120px;
  height: 120px;
  max-height: 120px;
}
body.v7 #marques_bloc .nm-carte__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body.v7 #marques_bloc .nm-carte__nom { display: block; width: 100%; text-align: center; }
@media (max-width: 767px) {
  body.v7 #marques_bloc { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
/* === CSS-BOSS nos-marques 20261013 (end) === */
/* === CSS-BOSS intro-recherche 20261013 (start) === demande Contenu texte : <p class="intro-recherche"> en tete de #droite (page.catalogue.tpl).
   Taille = texte courant (--v7-t-base) ; largeur = celle du conteneur listing (pleine largeur, max-width:none comme .v7-main:has(#bloc_prod) l.1350).
   Le gabarit sert body.v7 aussi en UA iPhone (verifie sur /bluey.html et /lapin.html) : pas de variante phone. */
body.v7 .intro-recherche {
  margin: 0 0 16px;
  font-size: var(--v7-t-base);
  max-width: none;
}
/* === CSS-BOSS intro-recherche 20261013 (end) === */
/* === CSS-BOSS tri-select 20261013 (start) === demande page cat/marque : le select de tri (#orderById, enfant direct de .v7-pager__ligne)
   etait plafonne a max-width:21ch (l.765) -> "Le choix de Doudoupla...". Il prend sa largeur de contenu et ne retrecit plus ;
   s'il ne tient pas, la ligne deborde (scrollWidth>clientWidth ou retour a la ligne) et v7-listing.js (barre tri sur une ligne,
   l.210-250) masque les [data-prio] 1..6 jusqu'a ce que ca tienne. margin-left:auto (l.766) lui donne l'espace libre a gauche. */
body.v7 #order_by select#orderById {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  min-width: 0;
  text-overflow: clip;
}
@supports (field-sizing: content) {
  body.v7 #order_by select#orderById { field-sizing: content; padding-right: calc(var(--e2) + 18px); }
}
/* === CSS-BOSS tri-select 20261013 (end) === */
/* === CSS-BOSS ariane-mag 20261013 (start) === demande page cat/marque : nav#puericulture.v7-ariane--mag (pages magazine).
   Mesures CDP 13/10 : le cartouche titre (.amb-v07d-pack / .mq-hero__carte) finit 28px au-dessus du bas de article.mag-dest
   et 55px au-dessus du bas de #bandeau.mq-bandeau (+21px de marge basse), stable de 1200 a 1920. CSS seul : decalages
   fixes, pas de lien geometrique reel avec le cartouche. Sous 1200 l'en-tete mag-dest s'empile (ecart variable) -> pas de remontee. */
body.v7 nav#puericulture.v7-ariane--mag {
  margin: 8px 0;
  font-size: 13px;
  line-height: 18px;
  min-width: 0;
  overflow: hidden;
}
body.v7 nav#puericulture.v7-ariane--mag ul.magasins_bebe {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v7 nav#puericulture.v7-ariane--mag li { display: inline; margin-right: 4px; }
body.v7 nav#puericulture.v7-ariane--mag a { display: inline; min-height: 0; }
@media (min-width: 1024px) {
  /* colonne du listing : bord gauche = .v7-pager__meta, a droite du cartouche */
  body.v7 main#contenu > nav#puericulture.v7-ariane--mag {
    grid-column: 2 / -1;
    margin: 6px 0 4px;
    position: relative;
    z-index: 1;
  }
  body.v7 main#contenu > nav#puericulture.v7-ariane--mag + #gauche,
  body.v7 main#contenu > nav#puericulture.v7-ariane--mag ~ #droite { margin-top: 0; }
}
@media (min-width: 1200px) {
  /* haut de l'Ariane = bas du cartouche */
  body.v7 main#contenu > article.mag-dest + nav#puericulture.v7-ariane--mag { margin-top: -27px; }
  body.v7 main#contenu > #bandeau.mq-bandeau + nav#puericulture.v7-ariane--mag { margin-top: -76px; }
}
/* === CSS-BOSS ariane-mag 20261013 (end) === */
/* === CSS-BOSS ariane-mag-v2 20261013 (start) === override du bloc ariane-mag (page cat/marque, Ariane v2), >=1200 uniquement.
   Haut de l'Ariane = bas de la bande beige (mag-dest : .mag-scene finit 72px au-dessus du bas de l'article ; marque/collection :
   la bande beige .mq-hero = tout #bandeau, on annule ses 21px de marge basse). Debut 55px avant #droite (= 21px avant la fin de #gauche),
   toujours a droite du cartouche marron (mesure CDP). */
@media (min-width: 1200px) {
  body.v7 main#contenu > article.mag-dest + nav#puericulture.v7-ariane--mag { margin-top: -72px; margin-left: -55px; }
  body.v7 main#contenu > #bandeau.mq-bandeau + nav#puericulture.v7-ariane--mag { margin-top: -21px; margin-left: -55px; }
}
/* 1200-1439 : le cartouche marron depasse la fin de #gauche (ex. 1280 : cartouche jusqu'a 298px, #gauche jusqu'a 246px, #droite des 280px) ;
   en-tete mag-dest uniquement, on decale a DROITE pour rester hors du marron (impossible de commencer avant la fin des filtres sans le chevaucher). */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  body.v7 main#contenu > article.mag-dest + nav#puericulture.v7-ariane--mag { margin-left: 70px; } /* 70px : cartouche jusqu'a ~329px a 1439 */
}
/* 14/10 CSS-BOSS (page cat/marque, valide G3dev) : debut de l'Ariane sur la diagonale a 45deg passant par le coin haut-droit de l'encart marron
   (captures .240 c10m15 : 1280 coin (305,471), Ariane (338,536) -> +32px ; 1440 coin (336,499), Ariane (370,572) -> +39px). Hauteur inchangee. */
@media (min-width:1200px) and (max-width:1439.98px){body.v7 main#contenu > article.mag-dest + nav#puericulture.v7-ariane--mag{margin-left:102px}}
@media (min-width:1440px){body.v7 main#contenu > article.mag-dest + nav#puericulture.v7-ariane--mag{margin-left:-16px}}
/* 14/10 soir CSS-BOSS ariane v3 (bug G3dev Idees cadeaux : 102/-16 calcules pour c10m15 posaient l'Ariane sur l'encart). En-tete v07d :
   bord droit de l'encart = gauche de main + padding scene (~2vw) + --amb-v07d-portrait-w x 1.27 (pack-anchor right:-27% du portrait, v7-magazine-destination l.2316/2350),
   portrait = clamp(210px,16vw,460px) -> ne depend que du viewport, jamais du texte. Bas de l'encart fixe (pack-drop 88px) sous la bande beige -> l'Ariane (haut = bas de la bande)
   est a cote de l'encart : on la fait partir de la colonne 1 et commencer 18px apres son bord droit (point le plus proche de la diagonale a 45deg sans chevauchement). */
@media (min-width:1200px){body.v7 main#contenu > article.mag-dest.mag-dest--layout-v07d + nav#puericulture.v7-ariane--mag{grid-column:1 / -1;margin-left:calc(2vw + 1.27 * clamp(210px, 16vw, 460px) + 18px)}}
/* autres en-tetes mag-dest (sans v07d) : retour aux valeurs d'avant la diagonale (70px / -55px) */
@media (min-width:1200px) and (max-width:1439.98px){body.v7 main#contenu > article.mag-dest:not(.mag-dest--layout-v07d) + nav#puericulture.v7-ariane--mag{margin-left:70px}}
@media (min-width:1440px){body.v7 main#contenu > article.mag-dest:not(.mag-dest--layout-v07d) + nav#puericulture.v7-ariane--mag{margin-left:-55px}}
/* === CSS-BOSS ariane-mag-v2 20261013 (end) === */
/* === CSS-BOSS NM_LOGOS_20261014 (page cat/marque) (start) === logos encadres mq-logo sur /nos-marques.html : meme cadre que les autres cartes, image jamais agrandie */
body.v7 #marques_bloc .nm-carte__logo.mq-logo{width:100%;max-width:150px;height:120px;padding:10px 14px;box-sizing:border-box}
body.v7 #marques_bloc .nm-carte__logo.mq-logo img{max-width:100%;max-height:100%;width:auto;height:auto}
@media (max-width:390px){body.v7 #marques_bloc .nm-carte__logo.mq-logo{height:96px}}
/* 14/10 page cat/marque : cadres mq-logo a 120px comme les autres cartes (image jamais agrandie : max-width/max-height 100%, width/height auto ci-dessus) */
body.v7 #marques_bloc .nm-carte__logo.mq-logo{max-width:120px}
/* === CSS-BOSS NM_LOGOS_20261014 (end) === */
/* === CSS-BOSS 20261016 ariane-10px === (page cat/marque 16/10) ajout seul : fil d'Ariane +10px vers le bas, -10px vers la gauche, partout (toutes pages, tous en-tetes, toutes largeurs).
   Proposition recue : position:relative;top:10px;left:-10px. Non retenue : le nav est deja position:relative (v7-listing L2189 >=1024px, style inline du gabarit),
   et ses margin-left/margin-top varient selon la largeur et l'en-tete (overrides >=1200px du 14/10, calc v07d). La propriete translate seule (aucune regle
   existante ne pose transform/translate/top/left/sticky sur ce nav) decale de -10/+10 depuis la position actuelle quelle qu'elle soit, sans reflow et sans toucher a transform. */
body.v7 nav#puericulture.v7-ariane--mag{translate:-10px 10px}
/* === CSS-BOSS 20261016 ariane-10px (fin) === */
/* CSS-BOSS ariane-marque 20261019 */
/* (Mega menu 19/10) ajout seul. Ariane marque/collection apres #bandeau.mq-bandeau.
   >=1200 : margin-top 14px bat margin-top:-21px (ariane-mag-v2 l.2210, meme selecteur (1,3,3), ecrit apres) ;
   translate:-10px 0 bat translate:-10px 10px (ariane-10px l.2241, (0,2,1)) car selecteur plus specifique + ecrit apres.
   <1200 : margins 12/14, sans translate (le -10px 10px global reste). */
@media (min-width:1200px){
  body.v7 main#contenu > #bandeau.mq-bandeau + nav#puericulture.v7-ariane--mag{margin-top:14px;margin-bottom:16px;translate:-10px 0}
}
@media (max-width:1199.98px){
  body.v7 main#contenu > #bandeau.mq-bandeau + nav#puericulture.v7-ariane--mag{margin:12px 0 14px}
}
body.v7 #droite > .mq-rayons:first-child{padding-top:4px}
/* fin CSS-BOSS ariane-marque 20261019 */
/* CSS-BOSS ariane-20px 20261019 */
/* (page cat/marque 19/10) ajout seul. Fil d'Ariane magazine a 20px partout (marque, collection, broderie, mag-dest).
   Meme selecteur que ariane-mag l.2172 (font-size:13px), (1,2,2), ecrit apres -> gagne. Les a/li heritent deja
   (l.1609-1613 font-size:inherit). Ne touche pas aux pages produit sans .v7-ariane--mag. */
body.v7 nav#puericulture.v7-ariane--mag{font-size:20px}
/* fin CSS-BOSS ariane-20px 20261019 */
/* CSS-BOSS ariane-weight 20261019 */
/* (page cat/marque 19/10) ajout seul. Fil d'Ariane magazine en graisse normale (mesure avant : deja 400,
   on force normal sur le nav et les enfants au cas ou un strong/b ou une regle plus specifique reapparait).
   Ne touche pas a font-size:20px (ariane-20px). Meme selecteur (1,2,2) que ariane-20px, ecrit apres. */
body.v7 nav#puericulture.v7-ariane--mag{font-weight:normal}
body.v7 nav#puericulture.v7-ariane--mag a,
body.v7 nav#puericulture.v7-ariane--mag li,
body.v7 nav#puericulture.v7-ariane--mag strong,
body.v7 nav#puericulture.v7-ariane--mag b{font-weight:normal}
/* fin CSS-BOSS ariane-weight 20261019 */
/* CSS-BOSS prix-barre-v6 20261019 */
/* (page cat/marque 19/10) ajout seul. Prix barre listings comme V6 : trait rose en biais via .prix_init > hr
   (productThumbLight.tpl), plus de text-decoration:line-through.
   Ecrase sans supprimer :
   - v7-carte.css L342-350 : text-decoration:line-through + hr{display:none} (listing charge apres le bundle)
   - v7-listing.css L1476-1478 : #bloc_prod .prix_init > hr{display:none!important} -> display:block!important apres
   position:relative requis (carte avait pose static) pour que le hr absolute se positionne dans .prix_init.
   Source V6 : sites/DDP/css/page.catalogue.css L912-926. Span vente deja inline-block / sans barre (carte L351). */
body.v7 .prix_init,
body.v7 #bloc_prod .prix_init{
  text-decoration:none;
  position:relative
}
body.v7 .prix_init > hr,
body.v7 #bloc_prod .prix_init > hr{
  display:block!important;
  position:absolute;
  transform:rotate(-12deg);
  background-color:#fb2b9ee6;
  background-image:none;
  height:1px;
  margin-left:69px;
  width:50px;
  bottom:-10px;
  border:0;
  padding:0
}
/* fin CSS-BOSS prix-barre-v6 20261019 */
/* CSS-BOSS prix-barre-v6-pos 20261019 */
/* (page cat/marque 19/10) ajout seul. Ajuste margin/width : V6 margin-left:69px tombait sur le prix solde
   en layout V7 (mesure broderie 1280 : hr L352-402 vs span solde L351-381). Trait sur le prix initial seulement.
   rotate(-12deg) et #fb2b9ee6 inchanges. */
body.v7 .prix_init > hr,
body.v7 #bloc_prod .prix_init > hr{
  margin-left:0;
  width:52px;
  left:2px;
  bottom:4px
}
/* fin CSS-BOSS prix-barre-v6-pos 20261019 */
/* CSS-BOSS prix-barre-v6-pos2 20261019 */
/* Ajustement vertical : bottom:4px laissait le trait au-dessus du prix ; on le recentre sur le texte. */
body.v7 .prix_init > hr,
body.v7 #bloc_prod .prix_init > hr{bottom:-2px}
/* fin CSS-BOSS prix-barre-v6-pos2 20261019 */
/* CSS-BOSS prix-barre-v6-pos3 20261019 */
body.v7 .prix_init > hr,
body.v7 #bloc_prod .prix_init > hr{
  bottom:-9px;
}
/* fin CSS-BOSS prix-barre-v6-pos3 20261019 */
/* CSS-BOSS ariane-em 20261020 */
/* (page cat/marque 20/10) ajout seul. Fil d'Ariane magazine : 20px -> equivalent em. Parent = main#contenu.v7-main,
   font-size calcule 16px a 1280 (mesure headless .240, c10m95) -> 20/16 = 1.250em (= 20px a 1280, inchange).
   A 390 le parent vaut 14.165px -> 17.706px (l'Ariane suit desormais la taille du texte). Meme selecteur (1,2,2)
   que ariane-20px (l.2260), ecrit apres -> gagne. font-weight normal conserve ; translate:-10px 10px (ariane-10px l.2241)
   non redeclare, donc inchange (et ariane-marque l.2249 reste prioritaire sur marque/collection). */
body.v7 nav#puericulture.v7-ariane--mag{font-size:1.250em;font-weight:normal}
/* fin CSS-BOSS ariane-em */
/* CSS-BOSS ariane-em-mobile 20261020 */
/* (page cat/marque 20/10, G3dev : 17.7px trop gros en mobile) ajout seul. <768 : 1.05em du parent main#contenu
   (14.165px a 390 -> 14.873px, tient sur une ligne : mesure .240 c10m95, dernier li a 290px pour 349px dispo).
   >=768 inchange : 1.250em (ariane-em l.2329). Meme selecteur (1,2,2), ecrit apres. translate non redeclare. */
@media (max-width:767px){
  body.v7 nav#puericulture.v7-ariane--mag{font-size:1.05em}
}
/* fin CSS-BOSS ariane-em-mobile */
/* CSS-BOSS obj-intro 20261023 */
/* (page cat/marque 23/10) <p class="v7-obj-intro"> : intro (~260 car.) des listings filtres par UN objectif pedagogique,
   rendue par _commun/objectif_intro.tpl en 1re ligne de page.listProducts/products.tpl, donc dans #droite, entre la barre
   de tri #order_by et la grille #bloc_prod, sur toutes les pages listing (rayon, marque, collection, catalogue, ambiance).
   Modele = intro de rayon #entete_description p (l.218) : --v7-t-petit, interligne --v7-interligne, couleur heritee ; sans fond
   ni cadre (pas de 2e carte sous l'en-tete). Aucune troncature : ni clamp, ni max-height, ni overflow cache. Largeur de lecture 75ch. */
body.v7 .v7-obj-intro {
  display: block;
  float: none;
  clear: both;
  width: auto;
  max-width: 75ch;
  height: auto;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: none;
  white-space: normal;
  margin: var(--e3) 0 var(--e4);
  padding: 0;
  text-indent: 0;
  text-align: left;
  font-size: var(--v7-t-petit);
  line-height: var(--v7-interligne);
  text-wrap: pretty;
}
/* fin CSS-BOSS obj-intro */