/* ============================================================================
 * v7-marque.css -- Haut de page MARQUE + rayons pleine largeur (DDP V7)
 *
 * Cree le 09/10/2026 (demande G3dev, capture Trousselier) :
 *  1. le haut des pages marque reprend le langage des pages ambiance
 *     (magazine v07d) : bandeau creme #EFEADF bord a bord, portrait 3:4 a
 *     gauche avec la carte titre, texte Garamond/Georgia #C47A5A, polaroids ;
 *  2. une image d'ambiance par marque : /v7/img/marque/<slug>-ambiance.jpg
 *     (+ .webp). A defaut : presentation_<slug>.jpg, puis 1er best-seller ;
 *  3. les rayons (Nouveautes, Produits phares, Doudous...) occupent toute la
 *     largeur : grille de N colonnes produit (4 tablette, 6 bureau, 8 >=1680),
 *     chaque rayon prend autant de colonnes que de produits (dense = les petits
 *     rayons se rangent cote a cote, plus de grands vides) ; au telephone,
 *     bande qui defile au doigt.
 *
 * Retour 2 (09/10/2026, G3dev) : polaroids retires ; le carrousel des
 * univers (showroom) est DANS le bandeau, colonne de droite, sous le texte ;
 * le portrait part du bord gauche de la page (--mq-fuite) ; accroche et texte
 * long par marque dans _commun/marques_textes.tpl.
 *
 * Retour 3 (09/10/2026, G3dev) : des 768px le portrait ne fixe plus la
 * hauteur du bandeau -- il remplit la hauteur du contenu de droite (texte +
 * carrousel), image en object-fit:cover, plus de grand vide beige ; des
 * 1024px le texte est affiche en entier (2 puis 3 colonnes), « Lire la
 * suite » ne sert plus qu'au petit ecran.
 *
 * Gabarits : page.manufacturer.tpl -> _commun/marque_hero.tpl,
 *            _commun/marque_rayons.tpl, _commun/marque_rayon.tpl,
 *            _commun/productMarque.tpl. HTML hors V7 : inchange.
 * R6 : espacements Fibonacci (--e*), portrait 3:4, rayon 8px, phi en interligne.
 * Mobile-first : corps = telephone ; 768 tablette ; 1024 / 1280 / 1680 bureau.
 * ========================================================================= */

body.v7 .mq-bandeau {
  --mq-creme: #EFEADF;
  --mq-carte: rgba(196, 168, 130, 0.94);
  --mq-histoire: #C47A5A;
  --mq-encre: #3a443c;
  --mq-serif: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mq-portrait: min(377px, 84vw);
  display: block;
  width: auto;
  padding: 0;
  position: relative;
  margin: 0 0 var(--e4);
}

/* ---- Bandeau creme plein bord ------------------------------------------- */
body.v7 .mq-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  --mq-pad-g: var(--e3);
  /* fuite du portrait vers le bord gauche : marge du bandeau + demi-surplus
     au-dela de la largeur maxi du contenu (1980px) */
  --mq-fuite: calc(var(--mq-pad-g) + max(0px, (100vw - 2 * var(--mq-pad-g) - 1980px) / 2));
  padding: var(--e4) var(--e3) var(--e4) var(--mq-pad-g);
  background: var(--mq-creme);
  overflow-x: clip;
}
body.v7 .mq-hero__shell {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  max-width: 1980px;
  margin: 0 auto;
}

/* ---- Portrait + carte titre --------------------------------------------- */
body.v7 .mq-hero__gauche {
  position: relative;
  /* telephone : le portrait touche le bord gauche, coins arrondis a droite seulement */
  width: calc(var(--mq-portrait) + var(--mq-pad-g));
  margin: 0 auto 0 calc(-1 * var(--mq-pad-g));
}
body.v7 .mq-hero__cadre {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0 var(--e2) var(--e2) 0;
  overflow: hidden;
  background: rgba(196, 168, 130, 0.18);
  box-shadow: 0 13px 34px rgba(40, 50, 30, 0.14);
}
body.v7 .mq-hero__cadre picture,
body.v7 .mq-hero__cadre img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  margin: 0;
  border: 0;
}
body.v7 .mq-hero__carte {
  position: relative;
  margin: calc(-1 * var(--e7)) var(--e3) 0 var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--mq-carte);
  color: #fff;
  border-radius: var(--e2);
  box-shadow: 0 13px 34px rgba(40, 50, 30, 0.16);
  z-index: 2;
}
body.v7 .mq-hero__surtitre {
  margin: 0 0 var(--e1);
  font-family: var(--v7-police-appui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
body.v7 .mq-hero__carte h1 {
  margin: 0 0 var(--e2);
  font-family: var(--mq-serif) !important;
  font-size: clamp(1.618rem, 1.1rem + 1.6vw, 2.618rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(60, 40, 20, 0.16);
}
body.v7 .mq-hero__chapo {
  margin: 0;
  padding: var(--e1) var(--e2);
  border: 1px solid rgba(255, 255, 255, 0.88);
  font-family: var(--mq-serif);
  font-size: 1rem;
  line-height: 1.38;
  color: #fff;
}

/* ---- Colonne de droite : texte + carrousel des univers ------------------- */
body.v7 .mq-hero__droite {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
}
body.v7 .mq-hero__chapo:empty { display: none; }
body.v7 .mq-hero__eyebrow {
  margin: 0;
  font-family: var(--v7-police-appui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mq-histoire);
}

/* Texte de la marque / collection / univers -- 27/10/2026 (G3dev) : affiche tel quel, plus de « Lire la suite /
   Reduire » ni de degrade. Garde-fou IHM : 8 lignes au plus en une colonne, points de suspension au-dela
   (en colonnes, >= 1024 : hauteur bornee plus bas). Le texte reste entier dans le HTML. */
body.v7 .mq-plus, body.v7 .mq-plus__btn { display: none; }
body.v7 .mq-hero__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
  font-family: var(--mq-serif);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
  color: var(--mq-encre);
}
body.v7 .mq-hero__desc a { color: var(--mq-histoire); text-decoration: underline; text-underline-offset: 2px; }
body.v7 .mq-hero__desc br + br { display: none; }

/* Videos eventuelles de la marque (mfVideo) */
body.v7 .mq-hero__video iframe,
body.v7 .mq-hero__video video {
  display: block;
  width: 100%;
  max-width: 610px;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--e2);
}

/* ---- Carrousel des univers, dans le bandeau ------------------------------ */
body.v7 .mq-hero__droite .shw { margin: 0; min-width: 0; }

/* ---- Tablette ------------------------------------------------------------ */
@media (min-width: 768px) {
  body.v7 .mq-hero { --mq-pad-g: var(--e5); padding: var(--e5) var(--e5) var(--e5) var(--mq-pad-g); }
  body.v7 .mq-hero__shell {
    display: grid;
    grid-template-columns: minmax(233px, 34%) minmax(0, 1fr);
    column-gap: var(--e5);
    align-items: stretch;
  }
  /* le portrait deborde de sa colonne jusqu'au bord gauche de la page ; sa
     hauteur suit le contenu de droite (retour 3) : le cadre est pose en
     absolu sur toute la colonne, la carte titre reste en bas a gauche. */
  body.v7 .mq-hero__gauche {
    width: calc(100% + var(--mq-fuite));
    margin: 0 0 0 calc(-1 * var(--mq-fuite));
    min-height: 377px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  body.v7 .mq-hero__cadre {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: var(--e6);
    width: auto;
    aspect-ratio: auto;
  }
  body.v7 .mq-hero__carte { margin: 0 calc(-1 * var(--e4)) 0 calc(var(--e4) + var(--mq-fuite)); }
}

/* ---- Bureau --------------------------------------------------------------- */
@media (min-width: 1024px) {
  body.v7 .mq-hero { --mq-pad-g: clamp(21px, 3.1vw, 55px); padding: var(--e5) clamp(21px, 3.1vw, 55px) var(--e6) var(--mq-pad-g); }
  body.v7 .mq-hero__shell {
    grid-template-columns: clamp(233px, 21vw, 377px) minmax(0, 1fr);
    column-gap: clamp(34px, 3.4vw, 89px);
  }
  /* la carte deborde a droite du portrait, comme sur les ambiances -- de
     13px seulement : au-dela elle recouvrait « Lire la suite » (capture 1440, 09/10) */
  body.v7 .mq-hero__carte { margin: 0 calc(-1 * var(--e3)) 0 calc(var(--e4) + var(--mq-fuite)); }
  body.v7 .mq-hero__droite { padding-top: var(--e3); gap: var(--e5); }
  /* grand ecran : texte en colonnes, sans « Lire la suite » (retour 3). 27/10/2026 : hauteur bornee a 8 lignes ;
     la suite passe dans une colonne hors cadre, masquee -> coupe nette entre deux lignes, jamais au milieu. */
  body.v7 .mq-hero__desc {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    max-height: calc(1.5em * 8);
    column-count: 2;
    column-gap: var(--e5);
  }
  /* un intertitre ne reste jamais seul en bas de colonne, coupe de son texte (univers, 1440) */
  body.v7 .mq-hero__desc h2, body.v7 .mq-hero__desc h3 { break-after: avoid; }
}
@media (min-width: 1280px) {
  body.v7 .mq-hero__desc { column-count: 3; }
}


/* ==========================================================================
   RAYONS DE LA MARQUE -- pleine largeur
   ========================================================================== */
body.v7 .mq-rayons {
  --mq-cols: 4;
  --mq-histoire: #C47A5A;
  --mq-serif: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--e5);
  column-gap: var(--e4);
  grid-auto-flow: row dense;
  margin: 0 0 var(--e5);
}
body.v7 .mq-rayon { min-width: 0; --k: 1; }
body.v7 .mq-rayon__tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  margin: 0 0 var(--e3);
  padding: 0 0 var(--e2);
  border-bottom: 1px solid rgba(196, 168, 130, 0.45);
}
body.v7 .mq-rayon__titre {
  margin: 0;
  font-family: var(--mq-serif) !important;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
}
body.v7 .mq-rayon__titre a { color: var(--mq-histoire); }
body.v7 .mq-rayon__nb {
  font-size: var(--v7-t-petit);
  color: var(--v7-texte-doux);
}
body.v7 .mq-rayon__tout {
  margin-left: auto;
  font-family: var(--v7-police-appui);
  font-size: var(--v7-t-mini);
  font-weight: 600;
  color: var(--mq-histoire);
  white-space: nowrap;
}

/* Telephone : bande qui defile au doigt (2,5 produits visibles) */
body.v7 .mq-rayon__grille {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: var(--e3);
  margin: 0;
  padding: 0 0 var(--e2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.v7 .mq-rayon__grille > li {
  min-width: 0;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  scroll-snap-align: start;
}

/* La carte produit */
body.v7 .mq-produit { display: flex; flex-direction: column; gap: var(--e1); text-align: left; }
body.v7 .mq-produit__lien { display: flex; flex-direction: column; gap: var(--e2); color: var(--v7-encre); text-decoration: none; }
body.v7 .mq-produit__lien:hover { text-decoration: none; }
body.v7 .mq-produit__img {
  display: block;
  aspect-ratio: 1;
  padding: var(--e2);
  background: #faf8f4;
  border-radius: var(--e2);
  overflow: hidden;
  transition: box-shadow var(--v7-doux) ease;
}
body.v7 .mq-produit__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  object-fit: contain;
  margin: 0;
  mix-blend-mode: multiply;
  transition: transform var(--v7-doux) ease;
}
body.v7 .mq-produit__lien:hover .mq-produit__img { box-shadow: 0 5px 13px rgba(40, 50, 30, 0.12); }
body.v7 .mq-produit__lien:hover .mq-produit__img img { transform: scale(1.04); }
body.v7 .mq-produit__nom {
  font-family: var(--v7-police-produit);
  font-size: var(--v7-t-mini);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}
body.v7 .mq-produit__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e1);
  margin: 0;
  font-family: var(--v7-police-produit);
  font-size: var(--v7-t-base);
}
body.v7 .mq-produit__prix strong { color: var(--v7-prix); font-weight: 700; }
body.v7 .mq-produit__prix small { font-size: 0.72em; vertical-align: super; }
body.v7 .mq-produit__barre { color: var(--v7-prix-barre); font-size: 0.85em; }
body.v7 .mq-produit__remise {
  padding: 0 var(--e1);
  border-radius: var(--v7-rayon-pilule);
  background: var(--v7-badge-promo-fond, #D81083);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Tablette : 4 colonnes produit ; un rayon prend autant de colonnes que de
   produits ; les petits rayons se rangent cote a cote (dense). */
@media (min-width: 768px) {
  body.v7 .mq-rayons { grid-template-columns: repeat(var(--mq-cols), minmax(0, 1fr)); }
  body.v7 .mq-rayon { grid-column: span var(--k); }
  body.v7 .mq-rayon--n1 { --k: 1; }
  body.v7 .mq-rayon--n2 { --k: 2; }
  body.v7 .mq-rayon--n3 { --k: 3; }
  body.v7 .mq-rayon--n4, body.v7 .mq-rayon--n5, body.v7 .mq-rayon--n6,
  body.v7 .mq-rayon--n7, body.v7 .mq-rayon--n8 { --k: 4; }
  body.v7 .mq-rayon--n1 { grid-column: span 1; }
  body.v7 .mq-rayon--n2 { grid-column: span 2; }
  body.v7 .mq-rayon--n3 { grid-column: span 3; }
  body.v7 .mq-rayon--n4, body.v7 .mq-rayon--n5, body.v7 .mq-rayon--n6,
  body.v7 .mq-rayon--n7, body.v7 .mq-rayon--n8 { grid-column: span 4; }
  body.v7 .mq-rayon__grille {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(var(--k), minmax(0, 1fr));
    gap: var(--e4);
    overflow: visible;
    padding: 0;
  }
  body.v7 .mq-rayon__grille > li:nth-child(n+5) { display: none; }
}
@media (min-width: 1280px) {
  body.v7 .mq-rayons { --mq-cols: 6; }
  body.v7 .mq-rayon--n4 { --k: 4; grid-column: span 4; }
  body.v7 .mq-rayon--n5 { --k: 5; grid-column: span 5; }
  body.v7 .mq-rayon--n6, body.v7 .mq-rayon--n7, body.v7 .mq-rayon--n8 { --k: 6; grid-column: span 6; }
  body.v7 .mq-rayon__grille > li:nth-child(n+5) { display: block; }
  body.v7 .mq-rayon__grille > li:nth-child(n+7) { display: none; }
}
@media (min-width: 1680px) {
  body.v7 .mq-rayons { --mq-cols: 8; }
  body.v7 .mq-rayon--n6 { --k: 6; grid-column: span 6; }
  body.v7 .mq-rayon--n7 { --k: 7; grid-column: span 7; }
  body.v7 .mq-rayon--n8 { --k: 8; grid-column: span 8; }
  body.v7 .mq-rayon__grille > li:nth-child(n+7) { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  body.v7 .mq-produit__img img { transition: none; }
}


/* ==========================================================================
   11/10/2026 (G3dev) -- LOGO DE LA MARQUE + pages MARQUE x COLLECTION
   Gabarits : _commun/marque_logo.tpl (inclus par marque_hero.tpl et
   collection_hero.tpl), _commun/collection_hero.tpl (page.collection.tpl,
   V7 seulement), editos dans _commun/collections_textes.tpl.
   Images collection : /v7/img/collection/<marque>-<collectionId>.jpg (+ .webp).
   ========================================================================== */
body.v7 .mq-hero__entete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
}
body.v7 .mq-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: var(--e1);
  box-sizing: border-box;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 5px 13px rgba(40, 50, 30, 0.12);
  overflow: hidden;
}
body.v7 .mq-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  margin: 0;
  border: 0;
}
body.v7 .mq-hero__eyebrow a { color: inherit; text-decoration: none; }
body.v7 .mq-hero__eyebrow a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Edito de collection : texte court, une colonne de lecture confortable */
body.v7 .mq-hero__desc--edito p { margin: 0 0 var(--e2); }
body.v7 .mq-hero__desc--edito p:last-child { margin-bottom: 0; }

/* Push produits dans le bandeau creme */
body.v7 .mq-push { margin: 0; }
body.v7 .mq-push .mq-rayon__tete { border-bottom-color: rgba(196, 168, 130, 0.6); }
body.v7 .mq-push .mq-produit__img { background: #fff; }
body.v7 .mq-push .mq-produit__img img { mix-blend-mode: normal; }

@media (min-width: 768px) {
  body.v7 .mq-logo { width: 89px; height: 89px; }
  /* dans le bandeau : 4 produits par ligne, jamais plus large que le texte */
  body.v7 .mq-push .mq-rayon__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.v7 .mq-push .mq-rayon__grille > li:nth-child(n+5) { display: none; }
}
@media (min-width: 1024px) {
  body.v7 .mq-hero__desc--edito { column-count: 1; max-width: 46em; }
}
@media (min-width: 1280px) {
  body.v7 .mq-hero__desc--edito { column-count: 2; max-width: none; }
  body.v7 .mq-push .mq-rayon__grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.v7 .mq-push .mq-rayon__grille > li:nth-child(n+5) { display: block; }
  body.v7 .mq-push .mq-rayon__grille > li:nth-child(n+7) { display: none; }
}


/* ==========================================================================
   11/10/2026 (G3dev, retour 2) -- VISUEL V7 COMPOSE (repli image collection)
   Quand une collection n'a ni image, ni ambiance de marque : jamais la
   vignette 250px floue -- jusqu'a 3 produits en photo 800px sur fond creme
   degrade, nom de la collection en Garamond en filigrane (collection_hero.tpl).
   ========================================================================== */
body.v7 .mq-visuel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 105%, rgba(196, 168, 130, 0.38), rgba(196, 168, 130, 0) 62%),
    linear-gradient(180deg, #F6F1E7 0%, #EFEADF 100%);
}
body.v7 .mq-visuel__nom {
  position: absolute;
  top: var(--e4);
  left: var(--e4);
  right: var(--e4);
  font-family: var(--mq-serif);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 4.2rem);
  font-style: italic;
  line-height: 1;
  color: rgba(196, 122, 90, 0.22);
  overflow-wrap: anywhere;
}
body.v7 .mq-hero__cadre .mq-visuel img.mq-visuel__p {
  position: absolute;
  width: 62%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 13px 13px rgba(60, 40, 20, 0.12));
}
body.v7 .mq-visuel--n1 .mq-visuel__p1 { width: 82%; left: 9%; top: 18%; }
body.v7 .mq-visuel--n2 .mq-visuel__p1 { left: 2%; top: 20%; }
body.v7 .mq-visuel--n2 .mq-visuel__p2 { right: 2%; top: 44%; }
body.v7 .mq-visuel--n3 .mq-visuel__p1 { width: 52%; left: 2%; top: 16%; }
body.v7 .mq-visuel--n3 .mq-visuel__p2 { width: 52%; right: 2%; top: 22%; }
body.v7 .mq-visuel--n3 .mq-visuel__p3 { width: 66%; left: 17%; top: 46%; }


/* ==========================================================================
   11/10/2026 17h30 (G3dev) -- LOGO EN FORME LIBRE (plus de pastille ronde)
   Quasiment aucun logo n'est rond : le logo garde sa forme (contain), sans
   fond ni ombre ; hauteur fixe, largeur libre plafonnee. mix-blend-mode
   multiply efface le fond blanc des anciens .gif sur le creme du bandeau.
   ========================================================================== */
body.v7 .mq-logo {
  width: auto;
  height: 55px;
  max-width: 144px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body.v7 .mq-logo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (min-width: 768px) {
  body.v7 .mq-logo { width: auto; height: 72px; max-width: 180px; }
}

/* ==========================================================================
   11/10/2026 22h (G3dev) -- HISTOIRE D'OURS, SOLUTION 1 : bandeau pleine
   largeur (banniere officielle, nette, non recadree) au-dessus du texte,
   a la place du cadre 4:5 quand la banniere est trop etroite.
   ========================================================================== */
body.v7 .mq-hero__bandeau {
  margin: 0 auto var(--e4);
  max-width: 1980px;
  border-radius: var(--e2);
  overflow: hidden;
  background: rgba(196, 168, 130, 0.18);
}
body.v7 .mq-hero__bandeau img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
body.v7 .mq-hero--bandeau .mq-hero__gauche {
  width: auto;
  margin: 0;
  min-height: 0;
  justify-content: flex-start;
}
body.v7 .mq-hero--bandeau .mq-hero__carte { margin: 0; }
@media (min-width: 768px) {
  body.v7 .mq-hero--bandeau .mq-hero__gauche { width: auto; margin: 0; min-height: 0; }
  body.v7 .mq-hero--bandeau .mq-hero__carte { margin: 0; }
}
/* ==========================================================================
   12/10/2026 (G3dev) -- IMAGE JAMAIS PLUS GRANDE QUE SA TAILLE NATIVE
   Regle : « si la resolution est plus faible on affiche une image moins
   grande ». L'attribut onload des <img> de marque_hero.tpl / collection_hero.tpl
   mesure naturalWidth/naturalHeight, pose data-natif="LxH" sur la figure et,
   si la source est plus petite que la boite, la classe .petite + --nw/--nh :
   la boite est reduite a la taille native (zoom <= 1, jamais d'upscale).
   ========================================================================== */
body.v7 .mq-hero__cadre.petite {
  width: min(100%, var(--nw));
  max-height: var(--nh);
  background: none;
}
body.v7 .mq-hero__bandeau.petite {
  max-width: var(--nw);
}
body.v7 .mq-hero__bandeau.petite img { max-width: var(--nw); }
@media (min-width: 768px) {
  body.v7 .mq-hero__cadre.petite {
    right: auto;
    bottom: auto;
    width: min(100%, var(--nw));
    height: min(calc(100% - var(--e6)), var(--nh));
  }
}

/* ==========================================================================
   12/10/2026 (G3dev) -- LOGO DANS UN RECTANGLE BLANC ARRONDI, BORDURE
   ASSORTIE A LA COULEUR DOMINANTE DE CHAQUE LOGO (mesuree sur le PNG).
   Classe .mq-logo--<slug> posee par _commun/marque_logo.tpl ; defaut : or V7.
   ========================================================================== */
body.v7 .mq-logo {
  --mq-logo-c: #C4A882;
  height: 63px;
  max-width: 170px;
  padding: 6px 10px;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--mq-logo-c);
  border-radius: 10px;
  box-shadow: 0 5px 13px rgba(40, 50, 30, 0.10);
  overflow: hidden;
}
body.v7 .mq-logo img { mix-blend-mode: normal; }
@media (min-width: 768px) {
  body.v7 .mq-logo { height: 80px; max-width: 200px; padding: 8px 13px; }
}
body.v7 .mq-logo--littledutch   { --mq-logo-c: #A5B3A0; } /* vert sauge */
body.v7 .mq-logo--kaloo         { --mq-logo-c: #5E504F; } /* taupe fonce */
body.v7 .mq-logo--nattou        { --mq-logo-c: #8C7F73; } /* taupe clair (Nattou = meme gris que Kaloo, eclairci pour les distinguer) */
body.v7 .mq-logo--djeco         { --mq-logo-c: #6FBF2A; } /* vert gecko */
body.v7 .mq-logo--moulinroty    { --mq-logo-c: #A8172A; } /* rouge du M */
body.v7 .mq-logo--lilliputiens  { --mq-logo-c: #00703A; } /* vert */
body.v7 .mq-logo--histoiredours { --mq-logo-c: #1A1A1A; } /* noir */
body.v7 .mq-logo--trousselier   { --mq-logo-c: #B89048; } /* or */
body.v7 .mq-logo--jazwares      { --mq-logo-c: #10308F; } /* bleu */

/* 12/10/2026 couleurs cadre logos (lot amb-logos) */
body.v7 .mq-logo--anima { --mq-logo-c: #4D4D4D; }
body.v7 .mq-logo--bluey { --mq-logo-c: #5A5A90; }
body.v7 .mq-logo--disney { --mq-logo-c: #231A23; }
body.v7 .mq-logo--doudouetcompagnie { --mq-logo-c: #84A6B4; }
body.v7 .mq-logo--lesdeglingos { --mq-logo-c: #2E2E2E; }
body.v7 .mq-logo--tartineetchocolat { --mq-logo-c: #3A2B24; }
body.v7 .mq-logo--vulli { --mq-logo-c: #E07B1F; }

/* 12/10/2026 pages univers au gabarit collection : pastille a la place du logo */
body.v7 .mq-logo.mq-pastille-univers { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-height: 0; padding: .5em 1.2em; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #6B5A45; --mq-logo-c: #C4A882; }

/* 12/10/2026 univers : a 1440 le texte editorial est borne pour remonter En stock (27/10/2026 : sans « Lire la suite » ni degrade) */
@media (min-width: 1024px) {
  body.v7 .mq-hero--univers .mq-hero__desc { max-height: calc(1.5em * 12); }
}
/* === CSS-BOSS MQ_LOGO_COULEURS_20261014 (page cat/marque) (start) === */
.mq-logo--babyeinstein{--mq-logo-c:#1A1A1A}
.mq-logo--brightstarts{--mq-logo-c:#F2672A}
.mq-logo--ingenuity{--mq-logo-c:#7FD8A4}
.mq-logo--giochipreziosi{--mq-logo-c:#2E9B47}
.mq-logo--malarkeykids{--mq-logo-c:#8FD3C8}
/* === CSS-BOSS MQ_LOGO_COULEURS_20261014 (end) === */

/* CSS-BOSS mq-logo-couleurs 20261020 */
/* (page cat/marque 20/10) ajout seul. Couleurs de bordure logos marques. */
body.v7 .mq-logo--hansa{--mq-logo-c:#1A1A1A}
body.v7 .mq-logo--disneyhome{--mq-logo-c:#504080}
body.v7 .mq-logo--gloop{--mq-logo-c:#404040}
body.v7 .mq-logo--nanobebe{--mq-logo-c:#00A0A0}
body.v7 .mq-logo--un2croix{--mq-logo-c:#1A1A1A}
/* fin CSS-BOSS mq-logo-couleurs 20261020 */
/* CSS-BOSS babystoria-logo 20261020 */
/* (page cat/marque 20/10, G3dev : aucune perte de qualite) ajout seul. Nouveau logo carre illustre
   v7/img/logo/babystoria_logo_450x467.jpg : la boite .mq-logo (height 63/80px, l.639-654) l'ecrasait a ~45-58px,
   slogan illisible. Meme balise a.mq-logo.mq-logo--babystoria (_commun/marque_logo.tpl) sur la page marque
   (.mq-hero__entete) et les pages croisees (.amb-v07d-logo) -> une seule regle ici, v7-marque.css etant charge sur les deux.
   (0,3,1) bat body.v7 .mq-logo (0,2,1). Hauteur donnee par l'image (attributs 450x467) : ratio conserve, pas d'aspect-ratio
   sur la boite (bordure+padding le fausseraient). Image 164px (<768) / 204px (>=768) : jamais au-dessus de 450px natifs
   jusqu'a DPR 2. Bordure --mq-logo-c / fond blanc inchanges. /nos-marques.html non touche (#marques_bloc (1,3,1) gagne). */
body.v7 .mq-logo.mq-logo--babystoria{width:180px;max-width:100%;height:auto;padding:6px}
body.v7 .mq-logo.mq-logo--babystoria img{width:100%;height:auto;max-width:450px;max-height:none;object-fit:contain}
@media (min-width:768px){body.v7 .mq-logo.mq-logo--babystoria{width:220px}}
/* fin CSS-BOSS babystoria-logo */
/* CSS-BOSS babystoria-160 20261020 */
/* (page cat/marque 20/10, choix G3dev 6B) ajout seul. Le logo 220px (babystoria-logo l.711) allongeait les en-tetes
   de ~148px. Mesures .240 (1280) : c16m76 article.mag-dest 525.6 avant / 673.8 a 220 / 611.5 a 160 ; /BabyStoria .mq-hero
   924.6 / 1072.3 / 1010.1. La rangee logo grandit 1:1 avec la boite : retour a ~525 impossible sans boite ~80px (slogan illisible).
   -> 160px (image 144x149, slogan lisible) sur les pages croisees >=1100 ET sur la page marque >=768 (elle grandissait aussi).
   Pages croisees 768-1099 (logo empile) et mobile (<768, 180px) inchanges. (0,4,1)/(0,4,1) battent (0,3,1). */
@media (min-width:768px){body.v7 .mq-hero__entete > .mq-logo.mq-logo--babystoria{width:160px}}
@media (min-width:1100px){body.v7 .amb-v07d-logo > .mq-logo.mq-logo--babystoria{width:160px}}
/* fin CSS-BOSS babystoria-160 */
/* CSS-BOSS logo-carre 20261020 */
/* (page cat/marque 20/10, choix G3dev 3B) ajout seul. Logos carres hd400 : a.mq-logo.mq-logo--<slug>.mq-logo--carre
   (_commun/marque_logo.tpl CED84D31) + img /v7/img/logo/hd400/<slug>[-v2].png 400x400 (marges incluses).
   Cadre carre a la hauteur actuelle de la rangee : 63x63 (<768) / 80x80 (>=768) -> en-tetes inchanges.
   Padding 3px / 4px (au lieu de 6x10 / 8x13) : image 53 / 68px (47 / 60 avant). Jamais au-dessus des 400 natifs (68 x DPR3 = 204).
   Bordure --mq-logo-c, fond blanc, radius inchanges. (0,3,1) bat body.v7 .mq-logo (0,2,1) ; #marques_bloc (1,3,1) reste maitre sur
   /nos-marques.html. vertical-align:top : en .amb-v07d-logo (bloc, a inline-flex) la ligne de base du cadre au padding 4px faisait
   grandir la rangee logo de 2.5px (mesure c10m45) ; sans effet en flex (page marque). */
body.v7 .mq-logo.mq-logo--carre{width:63px;max-width:none;padding:3px;vertical-align:top}
body.v7 .mq-logo.mq-logo--carre img{width:100%;height:100%;max-width:400px;max-height:400px;object-fit:contain}
@media (min-width:768px){body.v7 .mq-logo.mq-logo--carre{width:80px;padding:4px}}
/* fin CSS-BOSS logo-carre */

/* CSS-BOSS haba-break-inside 20261021 */
@media (min-width:1280px){ body.v7 .mq-hero__desc p { break-inside: avoid-column; } }
/* fin CSS-BOSS haba-break-inside 20261021 */