/** Shopify CDN: Minification failed

Line 1111:0 Unexpected "}"

**/
/*
 * MJV — essai « à la Stretch », sur une copie de 2026 | Aligné.
 *
 * ⚠️ FICHIER AJOUTÉ, AUCUN FICHIER D'ORIGINE RÉÉCRIT.
 * Tout passe par des surcharges de variables ou des règles ajoutées. La seule
 * ligne touchée dans le thème est le chargement de cette feuille dans
 * layout/theme.liquid. Le jour d'une 8.2, rien à fusionner à la main.
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. LA TYPOGRAPHIE — BEBAS NEUE ÉTAIT DÉJÀ LÀ, INUTILISÉE
   ══════════════════════════════════════════════════════════════════════════

   Le thème était réglé sur Helvetica en titraille et Instrument Sans en
   texte. Or le kit Adobe de la maison (use.typekit.net/gkq8tdt, chargé depuis
   theme.liquid) sert déjà « bebas-neue-by-fontfabric » en cinq graisses, dont
   un 700. On payait la police et on ne l'affichait pas.

   Le sélecteur de police de Shopify ne propose que SA bibliothèque : il ne
   peut pas désigner une fonte Adobe. D'où la surcharge ici — c'est le seul
   chemin, pas un contournement.

   On garde Instrument Sans pour le texte courant : c'est l'appariement que
   décrit la Charte Luxe — une display pour nommer, une humaniste pour lire. */
:root {
  --heading-font-family: "bebas-neue-by-fontfabric", "bebas-neue", Helvetica, Arial, sans-serif;
  --heading-font-weight: 700;
}

/* La navigation en 700 et resserrée. Bebas est déjà étroite : la générosité
   de chasse de Prestige (1,8 % hérité d'Helvetica) la faisait flotter. */
.header__link,
.header__primary-nav a,
.header nav a {
  font-family: var(--heading-font-family);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   1b. JOST EN VARIABLE — LE TEXTE COURANT
   ══════════════════════════════════════════════════════════════════════════

   Référence apportée par Vincent le 17/10/2026, relevée à la source dans
   l'inspecteur du site qu'il regardait : `font-family: var(--fontFutura)`,
   `letter-spacing: 0.04em`. C'est donc du Futura, en graisse légère.

   Futura n'est pas dans la bibliothèque Shopify : réglé sur `futura_n4`, le
   thème a servi **Jost** — vérifié, le fichier téléchargé est bien
   `/cdn/fonts/jost/…`. Jost est la renaissance libre de Futura (licence SIL
   OFL), donc Shopify répond déjà « Futura » par « Jost ».

   Mais Shopify ne sert que les graisses 400 et 700 (mesuré : `document.fonts`
   ne contenait que « Jost 400 » et « Jost 700 »). Le Light de la référence
   restait donc hors d'atteinte — comme il l'était avec les deux polices
   précédentes.

   ÉPILOGUE : Vincent a ajouté la VRAIE Futura au kit Adobe le 17/10/2026 —
   deux familles de Neufville, `futura-100` (400 et 700, romain et oblique)
   et `futura-100-book` (400 seulement), dans ce même kit gkq8tdt que le
   thème charge déjà. C'est donc elle qui passe en tête, et Jost recule au
   rang de repli.

   Pourquoi garder Jost derrière : un kit Typekit est restreint par domaine
   et tombe aussi avec un bloqueur. Sans repli, la page retomberait sur
   Helvetica — une grotesque, à l'opposé d'une géométrique. Jost tient le
   dessin. Et il ne coûte rien tant que Futura répond : le navigateur ne
   télécharge que la première famille effectivement utilisée.

   Pourquoi `futura-100-book` en tête : c'est la plus légère des deux (mesuré
   217 px contre 225 px pour la même ligne au même corps), et la référence
   est en graisse légère. Mais elle n'existe qu'en 400 : demander du gras sur
   elle ferait fabriquer au navigateur un faux gras. Le gras est donc renvoyé
   explicitement sur `futura-100`, qui a un vrai 700. */

@font-face {
  font-family: "Jost Variable";
  src: url("mjv-jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost Variable";
  src: url("mjv-jost-latinext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --text-font-family: "futura-100-book", "futura-100", "Jost Variable", "Jost",
    Helvetica, Arial, sans-serif;
}

/* Le gras va chercher la famille qui en a un vrai, jamais un faux gras
   fabriqué par le navigateur sur une fonte qui n'existe qu'en 400. */
strong, b, th,
.text-bold, [style*="font-weight: 700"], [style*="font-weight:700"] {
  font-family: "futura-100", "Jost Variable", "Jost", Helvetica, Arial, sans-serif;
}

/* L'interlettrage de la référence (0,04 em) est posé sur le TEXTE COURANT
   seulement, pas sur la navigation ni les boutons : il y est déjà réglé au
   cas par cas, et un interlettrage global déformerait tout le site d'un
   coup. Élargir se décide, ça ne se subit pas. */
.prose p,
.prose li,
.product-info__block-item[data-block-type="description"] {
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. LE MEGA MENU — VISUELS PLEIN CADRE, TEXTE DESSOUS
   ══════════════════════════════════════════════════════════════════════════

   Balisage réel de Prestige (snippets/mega-menu.liquid + mega-menu-images) :

     .mega-menu
       ul.mega-menu__linklist          ← les colonnes de liens
       .mega-menu__promo               ← les visuels
         a.v-stack.justify-items-center.gap-4.group
           .overflow-hidden > img.zoom-image
           .v-stack.text-center        ← p.h6 (titre) + p.smallcaps (prix)

   Même traitement que la grille produit : image à fond perdu, nom et prix
   DESSOUS, alignés à gauche — simplement un cran plus petits, parce qu'un
   menu n'est pas une page de collection et ne doit pas rivaliser avec elle. */

.mega-menu__promo {
  align-self: stretch;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 0;
  /* Sortir du rembourrage du panneau pour toucher les bords — sauf en bas,
     où le texte a besoin de rester à l'intérieur. */
  margin: calc(var(--container-gutter) * -1);
  margin-inline-start: 0;
  margin-block-end: 0;
}

/* Deux rangées : l'image prend tout ce qui reste, la légende sa hauteur. */
.mega-menu__promo > * {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: 0 !important;
}

.mega-menu__promo .overflow-hidden {
  height: 100%;
  min-height: 0;
}

.mega-menu__promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le nom et le prix, sous l'image, à gauche — en encre, plus en blanc. */
.mega-menu__promo .v-stack:not(.group) {
  position: static;
  padding: 0.5rem 0 0;
  text-align: left !important;
  justify-items: start !important;
  gap: 0.05rem;
  text-shadow: none;
}

.mega-menu__promo .v-stack:not(.group) > * {
  font-family: var(--heading-font-family);
  font-weight: 700;
  letter-spacing: 0.03em;
  /* Un cran sous la grille : 0,72 rem contre ~0,85. */
  font-size: 0.72rem;
}

.mega-menu__promo .v-stack:not(.group) > :first-child {
  color: rgb(var(--text-color));
}

/* ── LE SOULIGNEMENT QUI SE DÉROULE AU SURVOL ──────────────────────────── */

/* Demandé le 24/10 : « un trait souligné qui apparaisse de gauche à droite,
   un peu comme sur le menu principal ».

   LA BARRE DU MENU PRINCIPAL NE SE REPREND PAS TELLE QUELLE. Prestige la
   fabrique avec `content: attr(data-title)` sur `.header__primary-nav-item`
   — le pseudo-élément recopie le titre dans la police de titraille pour
   prendre exactement sa largeur, puis se réduit à 2 px de haut et s'étire
   en `scaleX`. Astucieux, mais il faut un attribut `data-title` sur chaque
   élément : les liens du méga-menu n'en ont pas, et en ajouter un à chacun
   voudrait dire modifier mega-menu.liquid, donc une ligne de plus à
   refusionner à chaque mise à jour Maestrooo.

   On prend l'autre technique, celle que Prestige emploie lui-même pour sa
   classe `.link` : un dégradé en guise de trait, dont on anime la LARGEUR
   DE FOND. Rien à ajouter au balisage, et le trait suit le texte s'il passe
   à la ligne — ce que `scaleX` ne sait pas faire.

   Le sens est inversé par rapport à `.link`, qui efface son trait au survol
   (100 % → 0). Ici il se déroule (0 → 100 %), de la gauche vers la droite.

   1 px et non 2 : les liens du méga-menu sont deux crans sous les entrées de
   la barre. `currentColor` laisse `.link-faded` faire son propre travail —
   le texte passe de 65 % à pleine encre pendant que le trait se déroule. */
.mega-menu__linklist a {
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-repeat: no-repeat;
  /* `min(100%, 1.35em)` : collé sous la première ligne, jamais au bas d'un
     bloc de deux lignes. C'est le calage de Prestige, repris tel quel. */
  background-position: 0 min(100%, 1.35em);
  background-size: 0% 1px;
  transition: background-size 0.25s ease-in-out;
}

.mega-menu__linklist a:hover,
.mega-menu__linklist a:focus-visible {
  background-size: 100% 1px;
}

/* Un trait qui se déroule est une animation : elle se coupe quand la
   personne a demandé qu'on lui en épargne. Le trait reste, il arrive d'un
   coup. */
@media (prefers-reduced-motion: reduce) {
  .mega-menu__linklist a { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. LA GRILLE DE COLLECTION — PLEIN CADRE, SANS DÉGRADÉ
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 3a. Gouttière à zéro ──
   Le réglage du Theme Editor s'arrête à 0,2 : c'est la borne du schéma, pas
   une limite du rendu. On écrase les variables calculées plutôt que le
   facteur, pour que le reste du calcul de Prestige (largeur de carte, nombre
   par rangée) continue de fonctionner. */
.product-list {
  --product-list-calculated-column-gap: 0px;
  --product-list-calculated-row-gap: 1.1rem;
  --product-list-default-column-gap: 0px;
  --product-list-default-row-gap: 1.1rem;
  column-gap: 0 !important;
  /* Les photos se touchent HORIZONTALEMENT — c'est l'effet voulu. Sous le
     prix il faut juste de quoi séparer deux rangées, pas un entracte. */
  row-gap: 1.1rem !important;
}

/* ── 3a bis. LA MARGE NÉGATIVE DE PRESTIGE SUR TÉLÉPHONE ──
 *
 * Prestige tire la grille de 0,625 rem vers l'extérieur sous 700 px
 * (`.product-list:not(.product-list--carousel) { margin-inline: -.625rem }`),
 * pour compenser la gouttière du conteneur. Notre §3b ayant mis cette
 * gouttière à zéro, il ne reste que le débordement : 10 px de chaque côté.
 *
 * Ça ne se voyait pas comme un bug mais comme une page mal fichue — la
 * colonne de gauche rognée, « ALM… » au lieu de « ALMA BANDEAU », et la
 * page qui défile latéralement de 10 px. Constaté le 22/10/2026 sur la
 * grille de collection ET sur l'accueil.
 */
@media screen and (max-width: 699px) {
  .product-list:not(.product-list--carousel) {
    margin-inline: 0;
  }
}

/* ── 3b. Plein cadre : plus de marge sur les côtés ──
   La grille vivait dans un .container avec une gouttière de 3 rem au large.
   On l'annule pour ce conteneur-là uniquement : le fil d'Ariane, le titre de
   collection et la barre d'outils gardent la leur, sinon ils viendraient
   coller au bord de l'écran. */
.container:has(.product-list) {
  --container-gutter: 0px;
  max-width: 100%;
  padding-inline: 0;
}

/* `:has(> .product-list)` ne marchait pas : la grille n'est pas fille directe
   du conteneur, elle est enfouie sous .collection > .collection__main. On
   vise donc le conteneur ASCENDANT, pas le parent. */

/* ── 3b bis. Plus de blanc entre les filtres et la première rangée ──
 *
 * Il ne venait ni de la grille ni de la barre d'outils, mais du
 * `v-stack gap-6 sm:gap-12` de main-collection qui les empile : 3 rem au
 * large. On le ramène à zéro — la barre d'outils porte déjà un filet en bas,
 * les produits se posent dessus sans avoir besoin d'un entracte.
 *
 * On vise la section de collection seulement : ce v-stack sert ailleurs. */
/* Le `gap` se pose sur le PARENT, pas sur le frère — ma première tentative
   visait `.collection-toolbar ~ *`, qui est le voisin de la barre d'outils et
   ne porte rien. Et le préfixe #MainContent que j'avais ajouté ne
   correspondait à rien dans ce gabarit. Mesuré après coup : il restait
   47 px exactement, soit le `sm:gap-12` intact. */
.shopify-section--main-collection .v-stack:has(> .collection-toolbar) {
  gap: 0 !important;
}

/* ── 3c. Nom et prix SOUS la photo, encre et gris ──
 *
 * Retour en arrière assumé (Vincent, 16/10). Le texte posé sur l'image était
 * joli sur les fonds sombres et illisible sur les packshots clairs — et la
 * moitié du catalogue est shooté sur gris pâle. Sous la photo, il n'y a plus
 * de problème de contraste du tout : encre sur blanc.
 *
 * Prestige mettait déjà le prix en « text-subdued », c'est-à-dire en gris. On
 * cesse simplement de tout forcer en blanc, et on aligne à gauche. */
/* CES RÈGLES VALENT À TOUTES LES LARGEURS.
 *
 * Elles étaient enfermées dans un `min-width: 1000px` : sur téléphone,
 * Prestige reprenait donc la main et rendait une carte centrée, en Futura
 * plus gros, avec la ligne des tailles — c'est-à-dire exactement ce qu'on
 * avait retiré sur ordinateur. Vincent, le 22/10 : « sur tel la grille est
 * pas aussi belle que sur PC ». La grille doit se tenir pareil partout,
 * seules les dimensions changent.
 */
.product-list .product-card__info {
  padding: 0.55rem 1.1rem 0;
  text-align: left;
}

/* ALIGNÉ À GAUCHE, POUR DE BON.
 *
 * Prestige empile DEUX .v-stack imbriqués portant chacun la classe
 * utilitaire « justify-items-center », et le <price-list> est un troisième
 * élément à part. Viser le .v-stack extérieur ne suffisait pas : le bloc
 * restait centré. On force donc sur le conteneur ET sa descendance, en
 * alignement de grille ET en alignement de texte — les deux agissent. */
.product-list .product-card__info,
.product-list .product-card__info .v-stack,
.product-list .product-card__info price-list,
.product-list .product-card__info sale-price {
  justify-items: start !important;
  justify-content: start !important;
  text-align: left !important;
}

.product-list .product-card__info .v-stack {
  gap: 0.1rem;
}

/* Le nom en encre, le prix en gris — Prestige portait déjà « text-subdued »
   sur le prix, il suffit de ne plus tout repeindre en blanc. */
.product-list .product-card__info .product-title {
  color: rgb(var(--text-color));
}

/* Le nom et le prix en Bebas, comme la titraille. Le réglage natif
   « product_card_text_font » est passé sur « heading » en parallèle ; cette
   règle couvre le prix, que le réglage ne touche pas. */
.product-list .product-card__info .product-title,
.product-list .product-card__info price-list,
.product-list .product-card__info sale-price,
.product-list .product-card__info compare-at-price {
  font-family: var(--heading-font-family);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ── 3d. Les tailles sous le nom (05/11/2026) ──
   Vincent : toutes les tailles sur la carte, celles qui ne sont plus
   disponibles barrées (snippets/product-card.liquid, .mjv-tailles-carte). */
.mjv-tailles-carte {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .7rem;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mjv-tailles-carte s { color: rgb(var(--text-color) / .6); }

/* Sur une carte de 195 px — deux colonnes sur téléphone — 1,1 rem de
   retrait mange un dixième de la largeur. On resserre, l'aplomb reste
   celui du tag « Nouveauté » du §18. */
@media screen and (max-width: 699px) {
  .product-list .product-card__info {
    padding: 0.5rem 0.6rem 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. DÉFILEMENT CONTINU
   ══════════════════════════════════════════════════════════════════════════

   La pagination N'EST PAS supprimée : elle reste dans le HTML, avec ses liens
   rel="prev"/rel="next" explorables — sans eux Google ne verrait que les 48
   premiers produits sur 523. Elle n'est masquée que si mjv-infini.js a pu
   s'armer, ce que signale la classe posée sur <html>. Sans JavaScript, ou si
   le chargement échoue, elle redevient visible et cliquable.

   Le lazy loading, lui, n'a rien demandé : Prestige pose déjà loading="lazy"
   sur les images de carte (346 sur cette page). */
.mjv-infini-actif nav.pagination {
  display: none;
}

.mjv-infini__etat {
  margin: 1.5rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-color-subdued, #6b6559);
}

.mjv-infini__etat:empty {
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. LA FICHE PRODUIT — PHOTO IMMENSE, EN-TÊTE PAR-DESSUS
   ══════════════════════════════════════════════════════════════════════════

   Prestige ne sait pas rendre l'en-tête transparent sur une fiche produit :
   seuls le diaporama, la bannière de collection et l'image-avec-texte
   déclarent `allow_transparent_header`. On ne passe donc PAS par son
   mécanisme — on le refait en CSS, ce qui a l'avantage de ne dépendre
   d'aucun ordre d'exécution de script.

   La clé est `--header-height`, que Prestige pose au runtime sur :root
   depuis un <height-observer>. On remonte la section de cette hauteur exacte
   et la photo passe dessous. Si la variable manquait, le repli à 0 laisse
   simplement la page dans son état normal : rien ne casse.

   Le plein cadre, lui, est natif : container_size = full, posé dans les trois
   gabarits produit. */

body:has(.shopify-section--main-product) {
  /* L'en-tête devient un calque posé sur la photo. */
  --mjv-entete: var(--header-height, 0px);
}

/* LA PHOTO PASSE SOUS LE MENU — par le mécanisme natif de Prestige.
 *
 * `allow-transparent-header` est posé dans main-product.liquid (fichier
 * modifié, à refusionner — arbitrage Vincent du 16/10). On ne force donc plus
 * rien ici : ni remontée de section, ni en-tête sorti du flux. Les deux
 * avaient été essayés et mesurés, les deux échouaient.
 *
 * ⚠️ IL RESTE UNE SEULE CHOSE À CORRIGER : LA COULEUR DU TEXTE.
 * Prestige passe l'en-tête transparent en BLANC, parce que ses cas d'usage
 * sont des visuels de campagne sombres. Ici le fond est un packshot sur gris
 * très clair — du blanc dessus ne se lit pas. On repasse en encre, sur les
 * fiches produit uniquement : l'accueil garde son blanc sur la photo pleine
 * page, où il est juste. */
/* La spécificité : Prestige pose cette variable sur #shopify-section-…__header,
   un sélecteur d'ID. Une règle de classe ne peut pas gagner — il faut viser
   l'en-tête lui-même ET forcer. */
body:has(.shopify-section--main-product) .shopify-section--header {
  --header-transparent-header-text-color: 20 18 15 !important;
}

/* Et le logo suit : Prestige bascule sur la version BLANCHE quand l'en-tête
   est transparent.

   ⚠️ PAS AVEC display — j'ai essayé, les deux logos avaient disparu.
   Les deux images sont superposées et pilotées par l'OPACITÉ, à partir d'une
   seule variable : le logo noir vaut `calc(1 - var(--header-show-transparent-logo))`,
   le blanc vaut cette variable. Masquer le blanc en display laissait le noir
   à opacité 0 — donc rien à l'écran.

   On remet simplement la variable à 0 : le noir revient, le blanc s'efface.
   Le !important est nécessaire parce que la valeur est posée en style inline
   par le script de l'en-tête. */
body:has(.shopify-section--main-product) .shopify-section--header,
body:has(.shopify-section--main-product) .header {
  --header-show-transparent-logo: 0 !important;
}

/* ⚠️ LA GOUTTIÈRE EST UNE MARGE, PAS UN REMBOURRAGE.
   Lu dans theme.css, pas supposé :

     .container {
       --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width)/2);
       margin-inline-start: max(…);
       margin-inline-end:   max(…);
     }

   Deux conséquences, et deux erreurs que j'ai faites avant de lire ce
   fichier : `padding-inline: 0` ne peut rien annuler, et il faut aussi
   remettre `--distance-to-bleed` à zéro, parce que la classe `full-bleed`
   du carrousel de la galerie s'en sert pour calculer son débord. */
body:has(.shopify-section--main-product) .shopify-section--main-product .container {
  --container-gutter: 0px;
  --distance-to-bleed: 0px;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  max-width: 100%;
}

/* ── LA LIGNE DE PARTAGE TOMBE PILE AU MILIEU ──
 *
 * Les deux colonnes sont bien à 50 %, mais `.product` est une grille avec
 * `gap: var(--product-gap, 1.875rem)` — 30 px entre elles. La frontière
 * visible tombait donc 15 px à gauche du centre de la page, alors que le
 * logo, lui, est centré sur la page : les deux ne s'alignaient pas, et ça se
 * voit tout de suite.
 *
 * On met la gouttière à zéro. La colonne d'infos a déjà son propre
 * rembourrage (padding-inline ci-dessous), le texte ne vient donc pas coller
 * à la photo. */
body:has(.shopify-section--main-product) .product {
  --product-gap: 0px;
  gap: 0 !important;
}

/* La colonne d'infos doit démarrer SOUS l'en-tête, sinon le titre passe
   dessous. Et respirer sur les côtés, puisque le conteneur est à fond perdu. */
body:has(.shopify-section--main-product) .product-info {
  padding-block-start: calc(var(--mjv-entete) + 2.5rem);
  padding-inline: clamp(1.5rem, 4vw, 4.5rem);
  padding-block-end: 4rem;
}

/* ── LA PHOTO COLLÉE AU BORD GAUCHE ──
 *
 * Elle gardait ~45 px de blanc. Ce n'était PAS la gouttière du conteneur
 * (déjà annulée) : le carrousel porte « full-bleed md:unbleed », et c'est
 * `md:unbleed` qui remet la marge dès 750 px de large. Il faut neutraliser
 * cette classe-là, pas celle du conteneur. */
body:has(.shopify-section--main-product) .product-gallery,
body:has(.shopify-section--main-product) .product-gallery__image-list,
body:has(.shopify-section--main-product) .product-gallery__carousel,
body:has(.shopify-section--main-product) .product-gallery__media {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  width: 100%;
}

body:has(.shopify-section--main-product) .product-gallery__media img {
  width: 100%;
  display: block;
}

/* Le nom du produit en Bebas, à la taille d'un titre de page — c'est lui le
   h1 ici, il doit porter. */
/* La classe `product-title` ne désigne PAS que le nom du produit : les cartes
   posées dans la colonne — pièces coordonnées, produits complémentaires de
   Prestige — la portent aussi, sur un <a>. Sans le `:is(h1, h2)`, un nom de
   carte sortait à 27 px au lieu de 12 (mesuré le 23/10/2026). On vise donc le
   titre de la fiche par sa balise, pas par sa classe. */

body:has(.shopify-section--main-product) .product-info :is(h1, h2).product-title,
body:has(.shopify-section--main-product) .product-info h1 {
  font-family: var(--heading-font-family);
  font-weight: 700;
  letter-spacing: 0.02em;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. LA COLONNE D'INFOS PRODUIT — REGISTRE ÉDITORIAL
   ══════════════════════════════════════════════════════════════════════════

   Référence apportée par Vincent le 17/10/2026. Elle tranche au passage la
   question de typo restée en suspens : sur la fiche produit, c'est du
   BAS-DE-CASSE en graisse légère, très espacé — l'inverse exact de Bebas
   capitales. Bebas reste en navigation et en titres de page ; ici il ne
   conviendrait pas, et la référence le montre mieux que n'importe quel
   argument.

   Tout est en surcharge sauf UNE chose : le prix posé dans le bouton, qui
   demande du Liquid (voir snippets/buy-buttons.liquid). */

/* ⚠️ LE `font-weight: 300` DE CETTE SECTION EST SANS EFFET — relevé le
   17/10/2026, à ne pas re-déboguer.
   La bibliothèque de polices Shopify ne sert que les graisses déclarées par
   le thème, soit 400 et 700. Mesuré sur la page : `document.fonts` ne
   contient que « Inter 400 » et « Inter 700 ». Le navigateur calcule donc
   bien un poids de 300, mais rend du 400 — c'était déjà le cas avec la
   police précédente, qui n'avait elle non plus que 400 et 700.

   Conséquence : le registre « bas-de-casse en graisse légère » de la
   référence n'est PAS atteignable par le sélecteur de police du thème. Il
   faudrait héberger Inter en variable dans assets/ (toutes les graisses, un
   seul fichier woff2, aucune dépendance extérieure) ou ajouter la graisse au
   kit Adobe déjà chargé. Décision non prise : les déclarations restent en
   place, elles prendront vie le jour où la fonte suivra. */

@media screen and (min-width: 1000px) {

  /* ── L'air ──
     La première référence faisait descendre le contenu très bas, d'où un
     `padding-block-start` de 12vh posé ici. Il est devenu un doublon le
     17/10/2026 quand la colonne s'est mise à se répartir sur la hauteur de
     l'écran (section 11) : les deux s'additionnaient et laissaient 216 px
     de vide AU-DESSUS du titre, mesurés. Je l'ai alors ramené à 2,5 rem —
     et Vincent a tranché l'inverse le même jour : « le vide d'en haut était
     pas mal ». Il revient donc à 12vh. Ce n'était pas le vide du haut le
     problème, c'était la DEUXIÈME marge automatique (section 11), qui
     empêchait les liens du bas d'être collés en bas. */
  body:has(.shopify-section--main-product) .product-info {
    padding-block-start: calc(var(--mjv-entete) + 12vh);
    /* Les liens du bas s'arrêtent à ~86 % de la hauteur, pas collés au
       bord : repère posé par Vincent le 17/10/2026 (le trait vert sur sa
       capture). 11vh de marge basse, donc proportionnel à l'écran. */
    padding-block-end: 11vh;
    padding-inline: clamp(2rem, 5vw, 6rem);
  }

  body:has(.shopify-section--main-product) .product-info__block-list {
    max-width: 34rem;
  }

  /* ── Le nom du produit ──
     Humaniste, graisse légère, chasse ouverte, pas de capitales. */
  body:has(.shopify-section--main-product) .product-info :is(h1, h2).product-title,
  body:has(.shopify-section--main-product) .product-info h1 {
    font-family: var(--text-font-family);
    font-weight: 300;
    font-size: clamp(1.35rem, 1.9vw, 1.75rem);
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: none;
  }

  /* ── Le prix quitte la colonne ──
     Il est désormais rendu DANS le bouton (buy-buttons.liquid). Le laisser
     ici en ferait un doublon. */
  body:has(.shopify-section--main-product) .product-info [data-block-type="price"] {
    display: none;
  }
  /* …sauf quand le bouton ne porte pas de prix (taille épuisée, « Être
     prévenue ») : sans ce repli, la fiche n'affichait aucun prix sur
     ordinateur (audit du 05/11/2026). */
  body:has(.shopify-section--main-product) .product-info:not(:has(button[type="submit"] .mjv-atc__prix)) [data-block-type="price"] {
    display: block;
  }

  /* ── Les tailles : des chiffres, pas des cases ──
     Prestige rend des <label class="block-swatch"> encadrés. La référence
     n'a ni cadre ni fond : juste les tailles, espacées, la sélectionnée
     soulignée. */
  body:has(.shopify-section--main-product) [data-option-selector] {
    gap: 1.6rem;
  }

  body:has(.shopify-section--main-product) .block-swatch {
    border: 0 !important;
    background: none !important;
    padding: 0.2rem 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    font-family: var(--text-font-family);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: rgb(var(--text-color));
    box-shadow: none !important;
  }

  /* La taille choisie se signale par un filet, pas par un cadre. */
  body:has(.shopify-section--main-product) input:checked + .block-swatch {
    box-shadow: 0 1px 0 0 currentColor !important;
  }

  body:has(.shopify-section--main-product) input:disabled + .block-swatch {
    opacity: 0.3;
    text-decoration: line-through;
  }

  /* L'étiquette « Taille: » passe en petit, discrète. */
  body:has(.shopify-section--main-product) .variant-picker__option-info legend {
    font-family: var(--text-font-family);
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--text-color-subdued, #6b6559);
  }

  /* ── Un filet au-dessus des tailles, comme la référence ── */
  body:has(.shopify-section--main-product) [data-block-type="variant-picker"] {
    padding-block-start: 1.75rem;
    /* Plus de filet ici : Vincent l'a retiré le 17/10/2026 — il se lisait
       comme un trait SOUS LE TITRE du produit, pas comme une séparation
       au-dessus des tailles. L'air suffit à séparer. */
  }

  /* ── Le bouton : un cadre, l'intitulé à gauche, le prix à droite ── */
  body:has(.shopify-section--main-product) [data-block-type="buy-buttons"] .button,
  body:has(.shopify-section--main-product) [data-block-type="buy-buttons"] button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: rgb(var(--text-color)) !important;
    color: rgb(var(--background, 255 255 255)) !important;
    border: 1px solid rgb(var(--text-color)) !important;
    border-radius: 0 !important;
    padding: 1.3rem 1.6rem;
    font-family: var(--text-font-family);
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* ⚠️ --text-color EST UN TRIPLET RVB, PAS UNE COULEUR.
     Prestige l'utilise partout en `rgb(var(--text-color))`. Écrit seul, il
     produit une déclaration invalide : le cadre du bouton était donc
     simplement absent, et le texte retombait sur la couleur héritée — ce qui
     passait inaperçu. Corrigé partout dans ce fichier.

     Le bouton gagne aussi du poids : c'est l'action principale de la page,
     elle ne peut pas être le plus discret des éléments. */
  body:has(.shopify-section--main-product) .mjv-atc__prix {
    margin-inline-start: auto;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  /* ── La description, en lecture ── */
  body:has(.shopify-section--main-product) [data-block-type="description"] {
    font-family: var(--text-font-family);
    font-weight: 300;
    line-height: 1.75;
    padding-block-start: 2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. LA RUPTURE PREND LA PLACE DE L'ACHAT
   ══════════════════════════════════════════════════════════════════════════

   Demandé par Vincent le 17/10/2026 : quand la taille choisie est épuisée,
   le bloc d'alerte ne vient pas s'ajouter SOUS un bouton mort — il le
   remplace.

   COMMENT PRESTIGE SIGNALE LA RUPTURE, vérifié avant d'écrire une ligne.
   Côté serveur : rien, tant qu'une seule taille manque. buy-buttons.liquid
   calcule `button_disabled` depuis `selected_or_first_available_variant`,
   et Shopify résout « first AVAILABLE » : la page arrive donc avec un bouton
   actif même si XS est épuisé. Mesuré sur naya-culotte-midi-teahupoo-bleu :
   bouton NON désactivé, intitulé « Ajouter au panier ».
   Côté client, en revanche, <buy-buttons> pose à chaque `variant:change`
   (relevé dans theme.js) :
       addToCartButton.disabled = !variant || !variant.available
   `disabled` est une propriété réfléchie : l'attribut apparaît réellement
   dans le DOM, et CSS peut donc le voir. D'où `:has(button[disabled])`,
   sans une ligne de JS pour l'échange lui-même.

   ⚠️ `:not([aria-busy="true"])` EST INDISPENSABLE. Pendant l'envoi au
   panier, Prestige désactive le bouton — mesuré le 17/10/2026 : il pose
   `disabled` ET `aria-busy="true"` pendant 612 ms, puis les retire. Sans
   cette exclusion, le bloc d'achat disparaissait une demi-seconde à chaque
   ajout et le bouton « ÊTRE PRÉVENUE » clignotait à sa place. Le bouton
   désactivé ne signifie « épuisé » que lorsqu'il n'est PAS occupé.

   mjv-rupture.js double la règle d'une classe `mjv-epuise` : si une mise à
   jour de Maestrooo changeait ce mécanisme, l'échange tiendrait quand même.
   Et la CSS seule couvre le cas du produit INTÉGRALEMENT épuisé, désactivé
   par le serveur — donc sans clignotement au chargement. */

/* Au repos, l'alerte attend : la fiche n'a qu'une action, acheter. */
.product-info__block-item:has(mjv-stock-alert) { display: none; }

/* Taille épuisée : l'achat s'efface… */
.product-info__block-item[data-block-type="buy-buttons"]:has(button[type="submit"][disabled]:not([aria-busy="true"])),
.product-info__block-item.mjv-epuise { display: none; }

/* …et l'alerte prend exactement sa place. */
.product-info__block-item[data-block-type="buy-buttons"]:has(button[type="submit"][disabled]:not([aria-busy="true"]))
  + .product-info__block-item:has(mjv-stock-alert),
.product-info__block-item.mjv-epuise
  + .product-info__block-item:has(mjv-stock-alert) { display: block; }

/* ── L'invitation prend le gabarit du bouton d'achat ──
   Elle hérite d'une mise en page faite pour vivre SOUS la fiche : filets
   au-dessus et au-dessous, Georgia, un lien souligné à droite. À la place
   de l'action principale, il lui faut le même poids que le bouton qu'elle
   remplace — sinon la page donne l'impression d'avoir perdu son achat. */
.product-info__block-item:has(mjv-stock-alert) mjv-stock-alert { margin-block: 0; }

.product-info__block-item:has(mjv-stock-alert) .mjv-alert__invitation {
  display: block;
  border-block: 0;
  padding: 0;
}

/* « Une attention pour vous » est juste au-dessus d'un bouton : de trop. */
.product-info__block-item:has(mjv-stock-alert) .mjv-alert__invitation .mjv-alert__eyebrow {
  display: none;
}

.product-info__block-item:has(mjv-stock-alert) .mjv-alert__invitation h3 {
  font-family: var(--text-font-family);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0 0 0.3rem;
}

.product-info__block-item:has(mjv-stock-alert) .mjv-alert__invitation p {
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

/* Le même bouton que l'achat, au caractère près : encre pleine, intitulé à
   gauche, signe à droite. Volontairement hors media query — la bascule doit
   avoir lieu sur téléphone aussi, où se fait l'essentiel des ruptures. */
.product-info__block-item:has(mjv-stock-alert) .mjv-alert__open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background: rgb(var(--text-color));
  color: rgb(var(--background, 255 255 255));
  border: 1px solid rgb(var(--text-color));
  border-radius: 0;
  padding: 1.3rem 1.6rem;
  font-family: var(--text-font-family);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-info__block-item:has(mjv-stock-alert) .mjv-alert__open span {
  margin-left: 0;
}

/* Dans l'éditeur de thème, le bloc reste visible : sans cela, un merchandiser
   qui vient le régler ne verrait rien à l'écran et le croirait cassé. */
body.shopify-design-mode .product-info__block-item:has(mjv-stock-alert) {
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. LA PALETTE RETENUE — « Craie & noir, accent sable »
   ══════════════════════════════════════════════════════════════════════════

   Arbitrée par Vincent le 17/10/2026, après cinq palettes mises en maquette
   sur la fiche produit. Il a retenu la 2 (Craie & noir) en remplaçant son
   accent sauge par un sable.

       Fond principal ................. blanc cassé  #FAF9F6
       Fonds secondaires, séparateurs . craie        #EEECE6
       Textes et boutons principaux ... noir         #151515
       Accents, sélection de taille ... sable        #C8B79E
       Petits textes, liens d'accent .. sable foncé  #292725

   Deux règles de contraste posées avec la palette :
       sur un bouton noir → texte en blanc cassé #FAF9F6
       sur un élément sable → texte en noir #151515

   HISTORIQUE, pour ne pas refaire le chemin : la palette précédente était
   celle de la Charte (encre #14120f, crème #f7f3ec, dim #ece5d8, filet
   #ddd3c2), puis la crème a été diluée à 70 % (#f9f7f2) le temps d'un essai.
   Les deux sont abandonnées ici. ⚠️ Cette palette N'EST PAS encore celle du
   module Retours, de la FAQ, des alertes ni des chartes PDF — ils sont
   toujours sur la Charte. La divergence est volontaire le temps de l'essai,
   et doit être résorbée si la palette est retenue.

   Les couleurs vivent dans les schémas du thème (config/settings_data.json),
   pas ici. Ce fichier ne porte que ce que les schémas ne savent pas faire. */

/* Le séparateur, que Prestige calcule sinon tout seul à partir du texte.
   Classe doublée : Prestige pose aussi une `color-scheme--bg-<empreinte>`
   qui, à spécificité égale, passerait devant. */
.color-scheme--scheme-1.color-scheme--scheme-1,
.color-scheme--scheme-2.color-scheme--scheme-2,
.color-scheme--scheme-5.color-scheme--scheme-5 {
  --border-color: 238 236 230;
}

/* ── La taille choisie : rien, c'est-à-dire le réglage d'origine ──
   Trois essais le 17/10/2026, tous écartés par Vincent : aplat sable, puis
   soulignement sable épais, puis retour au trait noir fin. Prestige le fait
   déjà nativement — et pas avec `text-decoration` mais avec une OMBRE
   PORTÉE `box-shadow: rgb(21,21,21) 0 1px 0 0`, ce qui explique le
   soulignement en double du deuxième essai.
   La bonne correction est donc l'absence de correction : aucune règle ici,
   le trait noir fin de Prestige fait exactement ce qui est demandé. Ne rien
   réécrire sans relire ce commentaire. */


/* ── Petits textes et liens d'accent ── */
.text-subdued,
.product-info legend {
  color: #292725;
}

/* ── Le volet d'alerte suit la palette ── */
mjv-stock-alert {
  --mjv-ink: #151515;
  --mjv-cream: #faf9f6;
  --mjv-line: #eeece6;
  --mjv-muted: #292725;
}

/* L'en-tête transparent retombe sur le noir de la palette. */
body:has(.shopify-section--main-product) .shopify-section--header {
  --header-transparent-header-text-color: 21 21 21 !important;
}

/* ── Les liens du pied : aucun habillage ──
   J'avais mis du blanc pur, gras, souligné, à la demande de Vincent. Revu
   par lui le 17/10/2026 : trop appuyé, retour au style d'origine de
   Prestige. Le compromis est assumé — un lien du pied ne se distingue plus
   du texte qui l'entoure autrement que par le survol. */


/* ── Le pied de page : noir, blanc cassé, aucun sable ──
   Demandé par Vincent le 17/10/2026. Le sable foncé des petits textes est
   une couleur de FOND CLAIR : posé sur le noir, il donnait un brun terne et
   illisible. La règle générale `.text-subdued` est donc neutralisée ici.
   Les liens gardent le blanc pur : le texte courant étant en blanc cassé,
   c'est ce qui distingue encore un lien de la phrase qui l'entoure. */
.color-scheme--scheme-3 .text-subdued,
.color-scheme--scheme-3 legend,
.color-scheme--scheme-3 .footer__aside,
.color-scheme--scheme-3 .footer__aside a {
  color: #faf9f6;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. LA LIGNE DES TAILLES, ET LE GUIDE EN TIROIR
   ══════════════════════════════════════════════════════════════════════════

   Référence apportée par Vincent le 17/10/2026 (une fiche de prêt-à-porter,
   puis le guide des tailles de Jacquemus) : le label « Taille » à gauche,
   « Guide des tailles » à droite sur la même ligne, et en dessous les
   tailles en petit, très espacées, la choisie soulignée d'un trait noir fin.

   Le trait noir fin est celui de Prestige, on n'y touche pas (voir la note
   de la section 8). Ici on ne règle que le corps, l'espacement et la ligne
   de label. Le tiroir lui-même est un bloc Liquid dans le gabarit produit,
   déplacé sur la bonne ligne par mjv-guide.js. */

/* ── Les tailles : petites et aérées ── */
.variant-picker .block-swatch {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  padding-inline: 0;
  border: 0;
  background: transparent;
}

.variant-picker .variant-picker__option-values {
  gap: 1.9rem;
}

.variant-picker legend {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ── « Guide des tailles », posé à droite de la ligne du label ──
   `.variant-picker__option-info` est déjà en `justify-between` chez
   Prestige : une fois le bouton déplacé dedans par mjv-guide.js, il se range
   tout seul à droite, sans positionnement absolu ni marge négative. */
.mjv-guide__ouvrir {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--text-font-family);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #292725;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.mjv-guide__ouvrir:hover { color: #151515; }

/* ── Les tiroirs ──
   Trois volets au même gabarit : guide des tailles, détails, fabrication.
   Même géométrie que le volet d'alerte de rupture — ils viennent de la
   droite, pleine hauteur, et se replient en bas de l'écran sur téléphone.
   Quatre volets qui s'ouvriraient de quatre façons, ce serait du bruit. */
.mjv-volet {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(760px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: #ffffff;
  color: #151515;
  border: 0;
  padding: 54px 48px 40px;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--text-font-family);
  font-weight: 400;
}

.mjv-volet::backdrop {
  background: rgb(21 21 21 / 40%);
  backdrop-filter: blur(3px);
}

.mjv-volet__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
}

.mjv-volet h2 {
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: none;
}

.mjv-volet__fermer {
  background: none;
  border: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #151515;
}

.mjv-volet__corps { max-width: 64ch; }
.mjv-volet__corps p { margin: 0 0 1.4rem; line-height: 1.85; font-size: 0.92rem; }
.mjv-volet__corps p:last-child { margin-bottom: 0; }

/* Les puces de fabrication sont des faits, pas une énumération décorative :
   un filet par ligne les rend lisibles d'un coup d'œil. */
.mjv-volet__corps li {
  list-style: none;
  padding: 16px 0;
  border-block-end: 1px solid #eeece6;
  font-size: 0.92rem;
  line-height: 1.7;
}
.mjv-volet__corps li:first-child { border-block-start: 1px solid #eeece6; }

.mjv-volet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.mjv-volet th,
.mjv-volet td {
  padding: 14px 10px;
  text-align: center;
  border: 0;
  border-block-end: 1px solid #eeece6;
  font-weight: 400;
}

.mjv-volet th:first-child,
.mjv-volet td:first-child {
  text-align: left;
  padding-inline-start: 0;
  white-space: nowrap;
}

.mjv-volet thead th {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: #292725;
}

.mjv-volet tbody td { color: #292725; }

/* Le focus par défaut du navigateur dessine un halo bleu, hors palette. On
   ne le supprime pas — il sert à qui navigue au clavier — on le recolore. */
.mjv-volet :focus-visible {
  outline: 1px solid #151515;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .mjv-volet {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    padding: 36px 20px 24px;
  }
  .mjv-volet table { font-size: 0.74rem; }
  .mjv-volet th,
  .mjv-volet td { padding: 11px 5px; }
}
}

/* ⚠️ PRESTIGE ENVELOPPE LA SORTIE D'UN BLOC LIQUID DANS UN <div class="liquid">.
   Relevé le 17/10/2026 après deux corrections inutiles : la chaîne réelle est
   .product-info__block-item › div.liquid › .mjv-liens. Tout sélecteur en
   `:has(> .mjv-liens)` ne matche donc JAMAIS — ni pour la marge automatique,
   ni pour la mise en page du bloc hôte. Toujours en descendant ici.

   Le bloc Liquid qui porte le guide ne doit pas occuper de place : une fois
   le bouton déplacé sur la ligne du label, il ne contient plus que le
   <dialog>, invisible tant qu'il n'est pas ouvert. `display: contents` le
   fait disparaître de la mise en page sans casser le repli — si le script
   ne tournait pas, le bouton resterait affiché sous les tailles. */
.product-info__block-item:has(.mjv-liens) {
  display: contents;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. L'EN-TÊTE — LE NOM DE LA MAISON, ET LE MENU EN FUTURA
   ══════════════════════════════════════════════════════════════════════════

   Demandé par Vincent le 17/10/2026 : « BELLES DES PINS » à gauche, en
   capitales Bebas, plus grand que le reste du menu ; et les liens du menu
   en Futura.

   Relevé avant correction : les liens sortaient en `bebas-neue-by-fontfabric`
   12 px graisse 700. Bebas reste donc au nom de la maison — ce qui lui rend
   son rôle de titraille — et le menu passe au texte courant. */

.mjv-marque {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  margin-inline-end: 2.4rem;
  align-self: center;
}

/* Les liens du menu passent en Futura, principal et secondaire — deux
   polices dans la même barre se verraient.

   ⚠️ `summary` est indispensable dans ce sélecteur. Les entrées qui ouvrent
   un méga-menu ne sont ni des liens ni des boutons : Prestige les rend en
   <details><summary class="h6">. Sans lui, MAILLOTS, PRÊT-À-PORTER et
   ARCHIVES restaient en Bebas pendant que BIJOUX et IM.INNOCENTE passaient
   en Futura — d'où l'impression que « certains paraissent plus gras »,
   relevée par Vincent le 17/10/2026. Ce n'était pas une graisse, c'était
   une autre police. */
.header__primary-nav a:not(.mjv-marque),
.header__primary-nav button,
.header__primary-nav summary,
.header__secondary-nav a,
.header__secondary-nav button,
.header__secondary-nav summary {
  font-family: var(--text-font-family);
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* Le corps de la BARRE du haut seulement — pas les liens à l'intérieur des
   méga-menus, qui gardent leur hiérarchie. Les entrées de premier niveau
   sont les enfants directs des <li> de la liste de la nav. */
.header__primary-nav > ul > li > a,
.header__primary-nav > ul > li > details > summary {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}

/* Sur téléphone, la navigation se replie derrière le bouton hamburger : le
   nom resterait seul au milieu du vide, et doublerait le logo déjà centré. */
@media screen and (max-width: 999px) {
  .mjv-marque { display: none; }
}

/* ── Deux retouches du tiroir de tailles, relevées sur le rendu ── */

/* Prestige trace des filets VERTICAUX entre colonnes ; la référence n'a que
   des filets horizontaux. */


/* ── L'écart entre les entrées de la barre ──
   Relevé avant réglage : 40px de gouttière, soit 40 px mesurés entre deux
   entrées. Vincent le trouve trop large le 17/10/2026 : −30 %. On ne règle
   que la rangée de premier niveau ; la gouttière de la nav sert aussi aux
   méga-menus ouverts. */
.header__primary-nav > ul > li + li {
  margin-inline-start: -0.9rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. LA COLONNE PRODUIT RÉPARTIE SUR LA HAUTEUR
   ══════════════════════════════════════════════════════════════════════════

   Trois groupes, poussés aux trois tiers de l'écran : le titre et l'amorce
   en haut, les tailles et l'achat au milieu, les deux liens de tiroir en
   bas. Deux `margin-block-start: auto` suffisent — dans une colonne flex,
   deux marges automatiques se partagent l'espace libre à parts égales. Pas
   de hauteur calculée, donc rien à recalculer quand le texte change. */

@media screen and (min-width: 1000px) {
  body:has(.shopify-section--main-product) .product-info {
    display: flex;
    flex-direction: column;
    /* ⚠️ Prestige centre la colonne verticalement. Une fois la colonne
       étirée à la hauteur de l'écran, ce centrage repoussait le titre vers
       le milieu et laissait un grand vide au-dessus — relevé le 17/10/2026.
       Les trois groupes se répartissent par les marges automatiques, pas
       par l'alignement du conteneur. */
    justify-content: flex-start;
    min-height: calc(100vh - var(--header-height, 0px));
  }

  /* ⚠️ LES BLOCS NE SONT PAS LES ENFANTS DIRECTS DE LA COLONNE.
     Prestige intercale un `.product-info__block-list`. Une marge
     automatique posée sur un bloc s'applique donc DANS cette liste, qui
     n'a pas de hauteur libre : mesuré le 17/10/2026, 272 px restaient
     inutilisés sous les liens. La liste doit elle-même s'étirer. */
  body:has(.shopify-section--main-product) .product-info__block-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Prestige plafonne la liste à 544 px et la cale à gauche de sa moitié
       de page : mesuré le 17/10/2026, la colonne allait de 1096 à 1640 dans
       une moitié qui va de 1096 à 1904. Centrée, demandé par Vincent. */
    margin-inline: auto;
  }

  /* ⚠️ UNE SEULE marge automatique. Avec deux, l'espace libre se partage à
     parts égales et plus rien n'est collé en bas : mesuré le 17/10/2026,
     les liens tombaient à 750 px sur une fenêtre de 913. Toute la place
     disponible va donc au bloc du bas, et l'air du milieu est posé en dur. */
  /* Moitié moins d'air entre l'amorce et les tailles : demandé par Vincent
     le 17/10/2026. Valeur précédente clamp(2.5rem, 7vh, 6rem), divisée par
     deux — bornes comprises, pour que la réduction tienne à toutes les
     hauteurs d'écran et pas seulement au milieu de la plage. */
  body:has(.shopify-section--main-product)
    .product-info__block-item[data-block-type="variant-picker"] {
    margin-block-start: clamp(1.25rem, 3.5vh, 3rem);
  }

  /* Tailles, quantité et achat se lisent comme UN bloc : l'intervalle y est
     resserré exprès. Première version le 17/10/2026 avec le même écart
     partout — Vincent a tranché l'inverse dans la journée : « rapproche les
     boutons et les tailles, pour former visuellement un bloc ». */
  body:has(.shopify-section--main-product)
    .product-info__block-item[data-block-type="quantity-selector"] {
    margin-block-start: 1.25rem;
  }

  /* Classe doublée + !important : Prestige pose un `margin-top: 24px` sur
     chaque bloc qui suit un autre, et cette règle passait devant la mienne.
     Relevé le 17/10/2026 : marge calculée « 24px 0px 0px » au lieu de auto,
     d'où 160 px qui restaient sous les liens à l'intérieur de la liste. */
  body:has(.shopify-section--main-product)
    .product-info__block-item.product-info__block-item:has(.mjv-liens) {
    margin-block-start: auto !important;
  }
}

/* ── L'amorce : une phrase, sous le titre ── */
/* ⚠️ `.mjv-amorce *` est nécessaire : le paragraphe est DÉPLACÉ depuis la
   description, il arrive donc avec le <strong> que l'éditeur y avait mis.
   Relevé le 17/10/2026 — l'amorce sortait en 700. */
.mjv-amorce,
.mjv-amorce * {
  font-weight: 400;
}

.mjv-amorce {
  margin: 1.6rem 0 0;
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  max-width: 46ch;
}

/* ── La barre de liens, en bas de colonne ── */
.mjv-liens {
  display: flex;
  justify-content: center;   /* centrés dans la colonne, demandé le 17/10 */
  gap: clamp(2rem, 6vw, 5rem);
  padding-block-start: 2.6rem;
}

.mjv-lien,
.mjv-guide {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #151515;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  text-align: left;
}

/* Le guide, lui, est posé à côté d'un label : il doit s'effacer devant. */
.mjv-guide { color: #292725; text-decoration-color: #292725; }
.mjv-lien:hover,
.mjv-guide:hover { color: #151515; text-decoration-thickness: 2px; }

[hidden] { display: none !important; }

/* ── L'ancienne application d'alerte (Swym) ──
   Elle injecte son propre « EMAIL ME WHEN AVAILABLE » en orange dès qu'une
   variante est épuisée, exactement là où notre bloc d'alerte s'affiche. Deux
   systèmes pour la même chose, dont un hors charte.

   Elle n'est pas désactivable depuis le thème : elle s'injecte globalement
   par l'application, et n'apparaît même pas dans le DOM tant qu'aucune
   variante n'est en rupture — c'est pourquoi on la masque ici au lieu de la
   régler. LA VRAIE CORRECTION est de désinstaller Swym le jour où notre
   système passe en production ; cela touche la boutique publiée, donc c'est
   la décision de Vincent, pas une ligne de CSS. */
#swym-plugin,
.swym-button-bar,
.swym-btn-container,
.swym-add-to-watchlist,
.swym-watchlist-cta,
[class*="swym-backinstock"],
[class*="swym-notify"],
[class*="swym-ui-button"] {
  display: none !important;
}

/* ⚠ NE JAMAIS ÉCRIRE `[class*="swym-button"]` NI `[class*="swym-"]` ICI.
   Swym estampille le <body> lui-même — `swym-buttons-loaded swym-ready` —
   et un sélecteur par sous-chaîne attrape donc le body entier : la boutique
   est tombée en page blanche le 23/10/2026, le temps d'une mesure. Les
   classes se nomment en entier, une par une. */

/* 23/10 — Vincent le voit réapparaître en bas d'une fiche produit, par-dessus
   la grille de recommandations. Ce n'était pas la grille : Swym injecte
   `div.swym-btn-container > button.swym-add-to-watchlist` en FIN DE BODY,
   hors de tout conteneur du thème, et le bloc retombe là. Aucun des cinq
   sélecteurs d'origine ne le visait — d'où les trois ajoutés ci-dessus, dont
   `swym-inject`, qui est le marqueur que l'application pose elle-même sur
   tout ce qu'elle injecte. Le masquage reste un pansement : tant que Swym est
   installée, elle peut poser demain une classe que nous ne listons pas. */

/* ══════════════════════════════════════════════════════════════════════════
   12. L'EN-TÊTE QUI SE REPLIE
   ══════════════════════════════════════════════════════════════════════════

   Demandé par Vincent le 17/10/2026, en deux temps :
   · le menu doit rester centré entre « BELLES DES PINS » et le logo, et
     quand la fenêtre se réduit, seuls les deux écarts changent ;
   · quand c'est vraiment trop étroit, le menu descend sous le logo, centré
     sur la page.

   Prestige pose une grille `"primary-nav logo secondary-nav"`. La nav est
   un flex, et la liste `<ul>` est en `display: contents` — les `<li>` sont
   donc des enfants directs du flex, ce qui rend les deux réglages faisables
   sans toucher au balisage. */

/* ⚠️ SEUIL CALCULÉ, PAS CHOISI — et recalculé le 24/10/2026.
   Premier réglage : 1500 px. Mesure du 24/10 à cette largeur exacte, dans
   le navigateur : les deux écarts tombent à 40 px pile et le dernier lien
   affleure le bord de la colonne (débordement 0). Le seuil était donc posé
   au millimètre, sans un pixel de marge — et un 13 pouces fait 1440, soit
   juste en dessous. D'où le menu qui descendait au centre sur une machine
   que personne n'appelle « petit écran ». Signalé par Vincent.

   Trois pincées, aucune sur la typographie : l'écart après le nom passe de
   40 à 24, les quatre écarts entre entrées de 26 à 20, et la gouttière de
   la grille de l'en-tête de 40 à 28. Ni le corps, ni l'interlettrage, ni la
   taille du nom ne changent.

   LE SEUIL EST LU, PAS CALCULÉ. Sonde posée à 1300 px le 24/10 pour voir
   le comportement réel : l'écart entre le dernier lien et le logo vaut
   47 px à 1500, 32 à 1440, 27 à 1420, 17 à 1400, 7 à 1380. En dessous de
   20 px — l'écart entre deux entrées du menu — le logo cesse de se lire
   comme un bloc distinct et devient une sixième entrée. D'où 1420, qui
   laisse 32 px sur un 13 pouces (1440), la machine qui a motivé la
   demande. Descendre plus bas demanderait de toucher à la typographie :
   c'est une décision d'image, pas de mise en page. */
@media screen and (min-width: 1420px) {
  /* `nowrap` : si un jour le menu s'allonge, il débordera au lieu de passer
     à la ligne en silence — un débordement se voit, un repli se confond
     avec une mise en page voulue. */
  .header__primary-nav { flex-wrap: nowrap; column-gap: 1.5rem; }

  /* ⚠️ `flex-wrap: nowrap` N'EMPÊCHE PAS LES MOTS DE SE CASSER.
     Il interdit aux cases de passer à la ligne ; il ne les empêche pas de
     RÉTRÉCIR. Une case flex peut descendre jusqu'à la largeur de son plus
     long mot, et le libellé se replie alors à l'intérieur. Relevé à 1440 px
     le 24/10/2026 : « MAILLOT / S », « ARCHIVE / S », « IM.INNOCENT / E ».
     Le menu tenait sur un rang, et c'était plus laid que l'empilement qu'on
     voulait éviter. `nowrap` sur le texte donne aux cases une largeur
     minimale incompressible — le débordement redevient visible, donc
     mesurable, au lieu d'être absorbé en silence. */
  .header__primary-nav > ul > li,
  .header__primary-nav > ul > li > a,
  .header__primary-nav > ul > li > details > summary { white-space: nowrap; }

  /* La gouttière de la grille de l'en-tête : 40 px de série. À droite du
     logo elle sépare deux blocs qui ont 400 px d'air ; à gauche elle mange
     la seule colonne qui soit à l'étroit. 28 px suffisent à détacher le
     dernier lien du logo et rendent 12 px à chaque colonne. */
  .header { column-gap: 1.75rem; }

  /* L'écart entre entrées est la gouttière de la nav (1,5 rem) corrigée par
     cette marge : 24 − 4 = 20 px. La règle non scopée plus haut vaut
     −0,9 rem, calibrée sur l'ancienne gouttière de 40 px ; elle n'a plus
     cours ici. */
  .header__primary-nav > ul > li + li { margin-inline-start: -0.25rem; }

  /* Deux marges automatiques encadrent le groupe des entrées : l'espace
     libre se partage à parts égales de part et d'autre, donc le menu reste
     centré entre le nom et le logo quelle que soit la largeur. */
  .mjv-marque { margin-inline-end: auto; }
  .header__primary-nav > ul > li:last-child { margin-inline-end: auto; }
}

@media screen and (min-width: 1000px) and (max-width: 1419px) {
  /* Trop étroit pour tenir sur une ligne : le menu passe dessous, centré
     sur la page entière. La nav s'efface en `display: contents` pour que
     ses enfants deviennent des cases de la grille de l'en-tête — c'est ce
     qui permet de séparer le nom (qui reste en haut à gauche) du menu (qui
     descend sur toute la largeur) sans changer le HTML. */
  .header {
    grid-template-areas:
      "primary-nav logo secondary-nav"
      "menu        menu menu";
    row-gap: 0.9rem;
  }

  .header__primary-nav { display: contents; }

  .mjv-marque {
    grid-area: primary-nav;
    justify-self: start;
    align-self: center;
    margin-inline-end: 0;
  }

  .header__primary-nav > ul {
    display: flex;
    grid-area: menu;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
  }

  /* Le bouton hamburger de Prestige n'a rien à faire ici : il est prévu
     pour le téléphone, et on est encore sur une mise en page de bureau. */
  .header__primary-nav > button { display: none; }

  /* La marge négative qui resserre les entrées sur une seule ligne n'a plus
     de sens une fois qu'elles sont centrées par `gap`. */
  .header__primary-nav > ul > li + li { margin-inline-start: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   13. L'AJOUT AU PANIER, SANS QUITTER LA PAGE
   ══════════════════════════════════════════════════════════════════════════

   Le réglage du thème est passé de `cart_type: page` à `message` : plus de
   redirection. Prestige affiche alors sa propre bannière verte de succès —
   hors charte, et redondante avec ce qui suit. */

.shopify-section--main-product .banner--success { display: none !important; }

/* ── Le bouton confirme ──
   Pas de changement de couleur : la palette n'a pas de vert, et une alerte
   de couleur sur un geste réussi serait du bruit. Le libellé s'efface une
   seconde derrière un « Ajouté », puis revient. */
body:has(.shopify-section--main-product) [data-block-type="buy-buttons"] .button {
  position: relative;
  overflow: hidden;
}

/* ⚠️ `color: transparent` sur le bouton, pas `opacity` sur ses enfants :
   le libellé « Ajouter au panier » est un NŒUD DE TEXTE, pas un élément, et
   `> *` ne l'atteignait donc pas. Les deux textes se superposaient —
   signalé par Vincent le 17/10/2026. */
/* Sélecteur long à dessein : la couleur du bouton est posée en section 6
   par `body:has(…) [data-block-type="buy-buttons"] .button` avec un
   `!important`. Deux `!important` : c'est la spécificité qui tranche, et un
   simple `.mjv-ajoute` perdait — relevé le 17/10/2026, le libellé restait
   crème et se superposait à « Ajouté ». */
body:has(.shopify-section--main-product)
  [data-block-type="buy-buttons"] .button.mjv-ajoute,
.mjv-ajoute {
  /* `transition: none` et pas seulement l'absence de transition de ma part :
     c'est `.button` de Prestige qui en porte une, et retirer la mienne ne
     suffisait pas — mesuré le 17/10/2026, la couleur passait encore par une
     dizaine de valeurs intermédiaires. Le libellé s'efface donc d'un coup,
     et le mouvement est porté par le ::after seul. */
  color: transparent !important;
  transition: none !important;
}

.mjv-ajoute::after {
  content: "Ajouté";
  color: rgb(var(--background, 250 249 246));
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.16em;
  animation: mjv-monte 0.28s ease-out both;
}

@keyframes mjv-monte {
  from { opacity: 0; transform: translateY(0.6em); }
  to   { opacity: 1; transform: none; }
}

/* ── L'icône du panier tressaille ── */
@keyframes mjv-tressaut {
  0%, 100% { transform: none; }
  25%      { transform: translateY(-3px) scale(1.12); }
  60%      { transform: translateY(1px)  scale(0.98); }
}

.mjv-panier-anime { animation: mjv-tressaut 0.5s ease-out; }

/* ── Continuer, ou aller voir ──
   N'apparaît qu'à partir du deuxième article. */
.mjv-apres-ajout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block-start: 1.1rem;
  animation: mjv-monte 0.3s ease-out both;
}

.mjv-apres-ajout button,
.mjv-apres-ajout a {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #292725;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.mjv-apres-ajout__voir { color: #151515; }
.mjv-apres-ajout button:hover,
.mjv-apres-ajout a:hover { color: #151515; text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mjv-ajoute::after,
  .mjv-apres-ajout { animation: none; }
  .mjv-panier-anime { animation: none; }
}

/* ── L'attente, pendant l'envoi au panier ──
   Relevé le 17/10/2026 : Prestige ne montre RIEN pendant la requête. Ni
   pseudo-élément, ni opacité, ni curseur — le bouton reste identique
   pendant les 600 ms de l'appel, et bien plus sur une connexion lente. On
   n'a donc aucun indicateur à remplacer, seulement un à poser.

   Deux signaux, pas un : le libellé dit ce qui se passe, et un filet
   glisse sous le bouton pour montrer que ça avance. Le texte seul peut
   passer pour un état figé ; la barre seule ne dit pas quoi.

   Entièrement en CSS, sur l'attribut que Prestige pose déjà : aucun
   JavaScript à exécuter au moment précis où le navigateur est occupé. */

body:has(.shopify-section--main-product)
  [data-block-type="buy-buttons"] .button[aria-busy="true"] {
  color: transparent !important;
  transition: none !important;
  cursor: progress;
}

[data-block-type="buy-buttons"] .button[aria-busy="true"]::before {
  content: "Un instant…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--background, 250 249 246));
  letter-spacing: 0.16em;
  animation: mjv-respire 1.4s ease-in-out infinite;
}

[data-block-type="buy-buttons"] .button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  height: 2px;
  width: 34%;
  background: rgb(var(--background, 250 249 246));
  opacity: 0.5;
  animation: mjv-glisse 1.15s ease-in-out infinite;
}

@keyframes mjv-glisse {
  from { transform: translateX(-100%); }
  to   { transform: translateX(294%); }
}

@keyframes mjv-respire {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Sans animation, l'information reste : le libellé change, et le filet se
   pose à gauche sans glisser. */
@media (prefers-reduced-motion: reduce) {
  [data-block-type="buy-buttons"] .button[aria-busy="true"]::before,
  [data-block-type="buy-buttons"] .button[aria-busy="true"]::after {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. LE MÉGA-MENU
   ══════════════════════════════════════════════════════════════════════════

   Demandé par Vincent le 17/10/2026 : les titres de colonne en Bebas gras,
   et le texte des cartes produit aligné à gauche sous l'image. */

/* ── Les titres de colonne ──
   Relevés : des `a.h6` à 12 px, passés en Futura par la règle du menu
   (section 10). Ils redeviennent de la titraille — c'est leur rôle, et ça
   les sépare enfin des entrées qu'ils coiffent, qui restent en Futura.
   Le sélecteur est `.mega-menu .h6` et pas `.mega-menu a` : les entrées de
   liste portent `link-faded`, pas `h6`. */
.mega-menu a.h6,
.header__dropdown-menu a.h6 {
  font-family: var(--heading-font-family);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ── Les cartes produit : texte à gauche ──
   Le centrage ne vient pas d'un `text-align` mais d'un
   `justify-items: center` sur le lien, doublé d'une classe `text-center`
   sur la pile intérieure — relevé sur l'élément, d'où les deux règles. En
   passant le lien à `stretch` plutôt qu'à `start`, l'image garde toute la
   largeur de sa colonne : `start` l'aurait rétrécie à sa largeur propre. */
.mega-menu__promo a.v-stack {
  justify-items: stretch;
}

.mega-menu__promo .v-stack.text-center,
.mega-menu__promo .text-center {
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════════
   15. LE DIPTYQUE
   ══════════════════════════════════════════════════════════════════════════

   Les styles de la section sections/mjv-diptyque.liquid. Ils vivent ici et
   pas dans la section pour une seule raison : tout le reste du thème a ses
   couleurs et ses polices dans ce fichier, et deux endroits où chercher une
   règle, c'est un endroit de trop. */

.mjv-diptyque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--mjv-dip-hauteur, 92vh);
  background: rgb(var(--background, 250 249 246));
}

.mjv-diptyque--inverse .mjv-diptyque__propos { order: 2; }

/* La grande image va jusqu'aux bords, sans gouttière : c'est elle le sujet. */
/* ⚠️ L'image est en position absolue, et ce n'est pas un caprice : avec une
   image en flux, Shopify pose des attributs width/height, le navigateur en
   déduit un rapport d'aspect, et c'est CETTE boîte qui fixe la hauteur de
   la rangée — relevé le 17/10/2026, 1066 px pour une fenêtre de 913, donc
   une section « pleine page » qu'on ne voyait pas d'un écran. Sortie du
   flux, elle remplit la rangée au lieu de la dicter. */
.mjv-diptyque__image {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.mjv-diptyque__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le propos est centré dans sa moitié, pas collé au bord — la référence
   laisse respirer autant à gauche qu'au-dessus. */
.mjv-diptyque__propos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.8rem, 4vh, 3.2rem);
  padding: clamp(2rem, 6vw, 7rem);
}

/* La vignette est plafonnée en HAUTEUR, pas seulement en largeur : une
   image portrait de 377 px de large poussait la section à 1066 px pour une
   fenêtre de 913 — mesuré le 17/10/2026. Une section « pleine page » qu'on
   ne voit pas d'un seul écran rate son effet. */
.mjv-diptyque__vignette {
  margin: 0;
  max-width: 62%;
  max-height: 34vh;
}

.mjv-diptyque__vignette img {
  max-height: 34vh;
  width: auto;
  object-fit: contain;
  object-position: left top;
}
.mjv-diptyque__vignette img { display: block; }

.mjv-diptyque__texte { max-width: 46ch; }

.mjv-diptyque__titre {
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0 0 1.1rem;
}

.mjv-diptyque__corps p {
  font-size: 0.92rem;
  line-height: 1.85;
  margin: 0 0 0.9rem;
  color: #292725;
}

.mjv-diptyque__corps p:last-child { margin-bottom: 0; }

/* Un bouton à filet, pas un aplat : l'aplat encre est réservé à l'achat.
   Ici on invite, on ne conclut pas une transaction. */
.mjv-diptyque__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 2.2rem;
  min-width: min(100%, 22rem);
  padding: 1.1rem 1.8rem;
  border: 1px solid rgb(var(--text-color, 21 21 21));
  text-decoration: none;
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.mjv-diptyque__bouton:hover {
  background: rgb(var(--text-color, 21 21 21));
  color: rgb(var(--background, 250 249 246));
}

/* Sur téléphone, l'image passe en premier : c'est elle qui donne envie de
   lire ce qui suit, l'inverse ne marche pas. */
@media screen and (max-width: 999px) {
  .mjv-diptyque {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Sur téléphone la rangée n'a plus de hauteur imposée : on redonne un
     rapport d'aspect à l'image, sinon, sortie du flux, elle n'en a plus. */
  .mjv-diptyque__image { order: -1; aspect-ratio: 4 / 5; position: relative; }
  .mjv-diptyque--inverse .mjv-diptyque__propos { order: 0; }
  .mjv-diptyque__vignette { max-width: 58%; }
  .mjv-diptyque__bouton { min-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   16 · DISPONIBILITÉ EN BOUTIQUES, ET LA PAGE DES LIEUX
   Demande de Vincent du 17/10/2026 : un tiroir sur chaque produit, et une
   page « Boutiques et pop-ups ».
   Aucune couleur nouvelle : les quatre jetons du §8 suffisent — la Charte
   Luxe interdit d'en ajouter un cinquième, pas d'avoir une liste de lieux.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le lien du tiroir vit dans la rangée du bas, avec Détails et Fabrication :
   il en hérite tout le style. Rien à redéfinir — seule la largeur de la
   rangée change, à trois liens elle doit pouvoir passer à la ligne. */
.mjv-liens { flex-wrap: wrap; }

.mjv-dispo__attente,
.mjv-dispo__inconnu {
  color: var(--mjv-muted, #292725);
  font-style: italic;
}

/* ── L'en-tête : de quelle pièce on parle ────────────────────────────── */
/* Sans lui, « en stock » est ambigu dès que la cliente a changé de taille
   avant d'ouvrir le tiroir. */
.mjv-dispo__piece {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-block-end: 24px;
}
.mjv-dispo__piece img {
  width: 120px;
  height: auto;
  flex: 0 0 auto;
  object-fit: cover;
}
.mjv-dispo__piece-texte h3 {
  margin: 0 0 10px;
  font-family: var(--heading-font-family);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mjv-dispo__piece-texte p {
  margin: 0 0 4px !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  color: var(--mjv-muted, #292725);
}

/* ── Un lieu ─────────────────────────────────────────────────────────── */
.mjv-dispo__lieu {
  padding-block: 20px;
  border-block-start: 1px solid var(--mjv-line, #eeece6);
}
.mjv-dispo__lieu:last-of-type { border-block-end: 1px solid var(--mjv-line, #eeece6); }

.mjv-dispo__lieu h4 {
  margin: 0 0 8px;
  font-family: var(--heading-font-family);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* L'ÉTAT NE SE LIT PAS À LA COULEUR. La maquette de référence utilise un
   vert ; ce serait une huitième couleur, et la Charte Luxe l'interdit
   (Reflexions/BDP - Charte Luxe.md, section 6). La pastille porte
   l'information par son REMPLISSAGE — pleine, creuse — et le mot la dit en
   toutes lettres à côté. C'est aussi plus lisible pour qui distingue mal
   les couleurs, ce qu'une pastille verte seule ne permet pas. */
.mjv-dispo__etat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}
.mjv-dispo__etat::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.mjv-dispo__etat--oui::before { background: currentColor; }
.mjv-dispo__etat--non { color: var(--mjv-muted, #292725); }
.mjv-dispo__etat--non::before { background: transparent; }
.mjv-dispo__etat--inconnu {
  color: var(--mjv-muted, #292725);
  font-style: italic;
}
.mjv-dispo__etat--inconnu::before { border-style: dotted; background: transparent; }

.mjv-dispo__adresse,
.mjv-dispo__dates {
  margin: 0 0 6px !important;
  font-size: 0.86rem !important;
  line-height: 1.6 !important;
  color: var(--mjv-muted, #292725);
}

/* Les horaires sont une note, pas un tableau : pas de filet par ligne ici,
   contrairement aux puces de fabrication. */
.mjv-dispo__horaires {
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--mjv-muted, #292725);
}
.mjv-dispo__horaires li {
  list-style: none;
  padding: 0 !important;
  border: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Une fermeture exceptionnelle se lit AVANT les horaires dans la tête d'une
   cliente : sans ce contraste elle disparaît, et quelqu'un se déplace pour
   rien. */
.mjv-dispo__fermeture {
  margin: 10px 0 0 !important;
  padding: 8px 12px;
  background: var(--mjv-line, #eeece6);
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
}

.mjv-dispo__toutes { margin-block-start: 1.8rem !important; }
.mjv-dispo__toutes a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── La page « Boutiques et pop-ups » ────────────────────────────────── */

.mjv-lieux {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(3rem, 9vh, 7rem);
}

.mjv-lieux__titre {
  margin: 0 0 0.6rem;
  font-family: var(--heading-font-family);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mjv-lieux__chapeau > p { margin: 0; }
.mjv-lieux__chapeau {
  margin: 0 0 clamp(2.5rem, 6vh, 4.5rem);
  max-width: 54ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--mjv-muted, #292725);
}

.mjv-lieux__groupe { margin-block-end: clamp(2.5rem, 6vh, 4.5rem); }

.mjv-lieux__sous-titre {
  margin: 0 0 1.6rem;
  padding-block-end: 0.8rem;
  border-block-end: 1px solid var(--mjv-line, #eeece6);
  font-family: var(--heading-font-family);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* auto-fit et non un nombre fixe de colonnes : deux boutiques ne doivent
   pas laisser trois trous, et douze pop-ups ne doivent pas déborder. */
.mjv-lieux__grille {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* La photo ouvre la carte. Rapport fixe : les photos arrivent de
   téléphones et d'appareils différents, et sans contrainte la grille
   devient un escalier. object-fit recadre plutôt que déformer. */
.mjv-lieux__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-block-end: 14px;
  background: var(--mjv-line, #eeece6);
}

.mjv-lieux__carte h3 {
  margin: 0 0 8px;
  font-family: var(--heading-font-family);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mjv-lieux__carte p,
.mjv-lieux__carte li {
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.7;
}

.mjv-lieux__carte ul { margin: 10px 0 0; padding: 0; list-style: none; }

.mjv-lieux__dates {
  display: inline-block;
  margin-block-end: 8px;
  padding: 4px 10px;
  background: var(--mjv-line, #eeece6);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mjv-lieux__fermeture {
  margin-block-start: 10px;
  padding: 8px 12px;
  background: var(--mjv-line, #eeece6);
  font-size: 0.8rem;
}

.mjv-lieux__vide,
.mjv-lieux__panne {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--mjv-muted, #292725);
}

/* ══════════════════════════════════════════════════════════════════════════
   17 · FOCUS — UNE MATIÈRE, UNE COUVERTURE, UNE RANGÉE
   Demande de Vincent du 22/10/2026 : mettre en avant un produit ou une
   matière sur l'accueil. Référence montrée : la page nouveautés de
   Jacquemus — couverture plein cadre, légende posée dessus en bas à
   gauche, puis les produits à fleur de largeur.
   Aucune couleur nouvelle : les quatre jetons du §8 suffisent.
   ══════════════════════════════════════════════════════════════════════════ */

.mjv-focus {
  /* La section mange toute la largeur, comme la grille de collection du
     §3b : c'est ce qui fait l'effet. On neutralise la gouttière plutôt que
     de poser une largeur, pour rester juste quel que soit le conteneur que
     Prestige mettra autour demain. */
  --container-gutter: 0px;
  display: block;
  margin-block-end: clamp(2.5rem, 7vh, 6rem);
}

.mjv-focus__lien {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ── La couverture ─────────────────────────────────────────────────────── */

.mjv-focus__couverture {
  position: relative;
  display: grid;
  /* Zéro gouttière : les deux pièces se TOUCHENT. Un filet blanc entre
     elles casserait net l'effet de diptyque. */
  gap: 0;
  grid-template-columns: 1fr;
}

.mjv-focus__couverture--deux { grid-template-columns: 1fr 1fr; }

/* LES DEUX COLONNES TIENNENT AUSSI SUR TÉLÉPHONE.
   J'avais fait l'inverse — empiler sous 700 px, au motif que deux bandes
   étroites laisseraient mal voir une matière. Arbitrage de Vincent le
   22/10 : non. Le diptyque EST le propos ; empilé, ce ne sont plus que
   deux images l'une sous l'autre, et le rapprochement qu'on voulait
   montrer disparaît. Sur un écran de 390 px, chaque pièce fait encore
   195 px de large — en portrait 4/5 cela reste une image, pas une bande. */

/* LE RAPPORT EST PORTÉ PAR LA PIÈCE, PAS PAR LA GRILLE.
   Posé sur le conteneur, il s'appliquerait à la rangée entière : en deux
   colonnes, chaque pièce se retrouverait deux fois plus large que haute,
   soit l'inverse du réglage choisi. */
.mjv-focus__media {
  position: relative;
  /* ⚠️ `width: 100%` N'EST PAS DÉCORATIF — IL DÉCIDE QUI COMMANDE.
     Relevé le 24/10/2026 sur une fenêtre de 1600 : colonnes de 800 px,
     images de 600, soit 200 px de blanc entre les deux pièces et autant à
     droite. Sans largeur définie, `aspect-ratio` résout la boîte à partir de
     la hauteur ; le plafond posé plus bas la rabattait à 750, et la largeur
     suivait à 750 × 4/5 = 600. En fixant la largeur, on inverse la
     dépendance : la largeur vient de la colonne, la hauteur du rapport, le
     plafond ne fait plus que RECADRER — ce que `object-fit: cover` sait
     faire. L'image se resserre donc d'elle-même quand la fenêtre s'aplatit,
     au lieu de rétrécir en laissant du vide. */
  width: 100%;
  aspect-ratio: var(--mjv-focus-ratio, 4 / 5);
  overflow: hidden;
  background: var(--mjv-line, #eeece6);
}

/* « Plein écran » : la couverture occupe la hauteur visible, en-tête
   déduite. En deux colonnes chaque pièce prend la pleine hauteur, elles ne
   se partagent pas la verticale. */
.mjv-focus__couverture[style*="plein"] .mjv-focus__media {
  aspect-ratio: auto;
  height: calc(100svh - var(--header-height, 0px));
}

/* ── LA COUVERTURE LAISSE VOIR LA SUITE ────────────────────────────────── */

/* Relevé le 24/10/2026 sur une fenêtre de 1600 × 900 : la couverture en 4/5
   mesurait 1000 px de haut pour 822 px de place sous l'en-tête. Elle était
   donc plus HAUTE que l'écran — à n'importe quelle position de défilement on
   ne voyait qu'elle, et la rangée de produits qui suit n'existait pas tant
   qu'on ne l'avait pas cherchée.

   Le plafond rend ce début obligatoire. Il est passé par un RÉGLAGE le même
   jour : Vincent l'a ajusté deux fois en une matinée — « un peu plus petit »,
   puis « 70 % de la hauteur de la page ». Une troisième fois se réglera dans
   l'éditeur de thème, sans passer par ici.

   `max-height` et non `height` : le rapport choisi par le merchandiser
   continue de gouverner la forme tant qu'il tient dans le plafond. Sur un
   écran bas et large c'est le plafond qui décide, sur un écran haut c'est le
   rapport — aucun des deux cas n'a besoin d'une règle à part.

   ⚠️ LA LARGEUR DOIT RESTER DÉFINIE (`width: 100%` plus haut), sinon ce
   plafond rétrécit AUSSI la largeur : voir le piège payé sur
   `.mjv-focus__media`. */
@media screen and (min-width: 1000px) {
  .mjv-focus__couverture:not([style*="plein"]) .mjv-focus__media {
    max-height: var(--mjv-focus-hauteur-max, 70svh);
  }
}

.mjv-focus__image,
.mjv-focus__video,
.mjv-focus__media video,
.mjv-focus__gabarit {
  width: 100%;
  height: 100%;
  /* `cover` recadre, il ne déforme pas : les photos arrivent de boîtiers et
     de téléphones différents, et une matière déformée ne se vend pas. */
  object-fit: cover;
  display: block;
}

.mjv-focus__media video-media { display: block; height: 100%; }

/* ── La légende ────────────────────────────────────────────────────────── */

/* En bas à gauche, sur l'image, comme la référence. Le voile sous le texte
   n'est pas une couleur de la charte : c'est du noir transparent, posé
   pour que la légende reste lisible sur une photo claire. Sans lui, « Le
   Laricio » en blanc disparaît sur un fond sable. */
.mjv-focus__legende {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 1;
  padding: 3rem 1.6rem 1.4rem;
  width: 100%;
  max-width: 34rem;
  color: #fff;
  /* Un titre, plus une légende (Vincent, 04/11/2026) : même voix que
     « Les maillots » (.mjv-vliste__titre), un cran en dessous. */
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgb(0 0 0 / 45%), rgb(0 0 0 / 0%));
  pointer-events: none;
}

/* ── La rangée de produits ─────────────────────────────────────────────── */

/* Elle hérite du §3 (gouttière à zéro, nom et prix sous la photo) parce
   qu'elle utilise le même `product-list` que la grille de collection. Il
   reste à annuler la marge négative que Prestige lui donne sur mobile :
   dans un conteneur déjà à fleur de bord, elle déborderait de l'écran. */
.mjv-focus__rangee {
  margin-block-start: 0;
  padding-inline: 0;
}

@media screen and (max-width: 699px) {
  .mjv-focus__rangee:not(.product-list--carousel) { margin-inline: 0; }
}

/* Le div d'enrobage qui porte shopify_attributes ne doit pas casser la
   grille : il devient transparent pour la mise en page. */
.mjv-focus__produit { display: contents; }

/* ══════════════════════════════════════════════════════════════════════════
   18 · LE TAG « NOUVEAUTÉ »
   Demande de Vincent du 22/10/2026, référence Jacquemus : un mot posé en
   haut à gauche de la carte, pas une pastille de couleur.
   Rendu par snippets/product-badges.liquid (repère mjv-nouveaute), piloté
   par les étiquettes du produit.
   ══════════════════════════════════════════════════════════════════════════ */

/* PAS DE PASTILLE. Prestige peint un rectangle plein derrière chaque badge
   (`--custom-badge-background`, noir par défaut) : sur un packshot clair,
   ça fait une gommette collée sur la photo. La référence pose un mot, rien
   d'autre. Et la Charte Luxe interdit d'ajouter une couleur — l'encre de la
   maison suffit. */
.badge--mjv-nouveaute {
  padding: 0;
  background: none;
  color: var(--mjv-ink, #151515);
  font-family: var(--text-font-family);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Les packshots BDP sont sur gris très pâle, mais le catalogue mélange
     aussi des photos portées, parfois sombres en haut à gauche. Une ombre
     portée large et très faible garde le mot lisible sans se voir sur un
     fond clair — un voile rectangulaire, lui, se verrait toujours. */
  text-shadow: 0 0 10px rgb(255 255 255 / 55%);
}

/* L'aplomb du mot sur la colonne de texte du dessous.
   Prestige colle la pile de badges à 0,25 rem du bord ; la ligne « nom du
   produit » du §3c est à 1,1 rem. Sans cet alignement, le tag et le nom
   sont décalés de 13 px et ça se voit. */
.product-card__figure > .badge-list {
  inset-block-start: 1rem;
  inset-inline-start: 1.1rem;
  gap: 0.35rem;
}

@media screen and (max-width: 699px) {
  /* Deux colonnes sur téléphone : la carte fait 195 px, on resserre pour
     que le mot ne vienne pas manger la photo. */
  .product-card__figure > .badge-list {
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
  }

  .badge--mjv-nouveaute {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   17 bis · LE FOCUS SUR TÉLÉPHONE — UN TITRE FIN, PAS DE PRIX
   Demande de Vincent du 22/10/2026 : « pour le module focus spécifiquement
   (pas la grille produit), sur téléphone, j'aurais bien vu juste un titre
   minimaliste, fin, sans prix, avec peu d'espace ».
   ══════════════════════════════════════════════════════════════════════════ */

/* LA PORTÉE EST VOLONTAIREMENT ÉTROITE : `.mjv-focus__rangee`, et sous
   700 px seulement. La grille de collection garde son Bebas et ses prix —
   c'est une page où l'on compare et où l'on achète. Le Focus, lui, raconte
   une matière : le prix y est une interruption, et le nom suffit à savoir
   sur quoi on va taper.

   Ces règles arrivent APRÈS le §3c dans la feuille, à spécificité plus
   forte d'un cran (la classe de la rangée en plus) : elles gagnent sans
   avoir besoin de `!important`. */
@media screen and (max-width: 699px) {
  /* Le prix revient (Vincent, 03/11/2026, après la 2e revue : « aucun
     prix sur l'accueil au téléphone ») — discret, à droite du nom, en
     Futura comme lui. */
  .mjv-focus__rangee .product-card__info sale-price {
    font-family: var(--text-font-family);
    font-weight: 400;
    font-size: 0.74rem;
  }

  /* Le titre en Futura, pas en Bebas : c'est le trait FIN qui est demandé,
     et Bebas est une grotesque condensée grasse — elle ne s'affine pas, on
     en change. Casse d'origine conservée (« Laricio Triangle Vert
     métallique ») : les capitales ajoutent du poids, exactement ce dont on
     veut se débarrasser ici. */
  .mjv-focus__rangee .product-card__info .product-title {
    font-family: var(--text-font-family);
    font-weight: 400;
    font-size: 0.74rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  /* LE TITRE APPARTIENT À SA PHOTO, PAS À CELLE DU DESSOUS.
   *
   * Mesuré le 22/10 : 27 px au-dessus du titre contre 8 en dessous — il
   * semblait donc annoncer la rangée suivante. Les 20 px de trop ne
   * venaient pas du retrait (6,4 px) mais d'un `row-gap: 20px` posé par
   * Prestige sur `product-card`, qui est une grille à deux lignes.
   *
   * On annule ce gap, on garde un retrait court, et on REND l'espace plus
   * bas : c'est l'écart entre les deux qui fait le rattachement, pas sa
   * valeur absolue. Résultat visé : ~5 px au-dessus, ~14 en dessous. */
  .mjv-focus__rangee product-card {
    row-gap: 0;
  }

  .mjv-focus__rangee .product-card__info {
    padding: 0.3rem 0.6rem 0;
  }

  .mjv-focus__rangee {
    --product-list-calculated-row-gap: 0.85rem;
    row-gap: 0.85rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   19. LE PIED DE PAGE : L'ENSEIGNE, ET DES MENUS QUI SE DÉPLIENT
   ══════════════════════════════════════════════════════════════════════════

   Demandé par Vincent le 23/10/2026, références à l'appui : un grand
   « Belles Des Pins » avec le logo en haut du pied, et des menus qui
   s'ouvrent au clic sur leur titre, chevron à droite du mot.

   Deux partis pris qui méritent d'être écrits :

   1. Le nom se mesure en `cqi`, pas en `vw`. Le pied est posé dans un
      `.container` qui PLAFONNE : au-delà de cette largeur, `vw` continue de
      grandir alors que le bloc, lui, ne bouge plus — le nom finirait par
      déborder sur un grand écran. `cqi` se rapporte à la largeur réelle du
      bloc, donc le nom garde exactement la même part de la laize à toutes
      les largeurs. C'est pour cela que `.mjv-enseigne` se déclare conteneur.

   2. Le dépliage emprunte l'élément `accordion-disclosure` de Prestige
      (l'animation de hauteur et l'accessibilité sont déjà écrites) mais PAS
      sa classe `.accordion`, qui porte des filets et un rembourrage de
      1,25 rem taillés pour la FAQ. Ici le titre doit rester sur la ligne
      exacte des titres voisins — « NEWSLETTER », « POUR NOUS ÉCRIRE » — qui
      ne se déplient pas. D'où une poignée à rembourrage nul. */

/* ── L'enseigne ── */
.mjv-enseigne {
  container-type: inline-size;
  display: grid;
  justify-items: center;
  row-gap: 1.4rem;
  text-align: center;
}

/* Le logo en masque : il prend la couleur du texte du schéma. Un PNG noir
   sur fond transparent devient donc blanc sur le pied noir, sans second
   fichier à téléverser ni filtre `invert` à deviner. */
.mjv-enseigne__logo {
  display: block;
  width: var(--mjv-enseigne-logo, 64px);
  aspect-ratio: var(--mjv-enseigne-ratio, 3.12);
  background-color: rgb(var(--text-color));
  -webkit-mask: var(--mjv-enseigne-source) center / contain no-repeat;
  mask: var(--mjv-enseigne-source) center / contain no-repeat;
}

.mjv-enseigne__nom {
  font-family: var(--heading-font-family);
  font-size: var(--mjv-enseigne-corps, 11cqi);
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

/* ── Les menus dépliables ── */
/* Sur téléphone, la même PART de largeur donne un nom beaucoup plus petit :
   la colonne fait 350 px au lieu de 1 344. On remonte donc la part d'un peu
   plus de moitié, sans jamais dépasser 17 cqi — au-delà, le nom touche les
   deux bords. */
@media screen and (max-width: 699px) {
  .mjv-enseigne__nom {
    font-size: min(calc(var(--mjv-enseigne-corps, 11cqi) * 1.55), 17cqi);
  }
}

.mjv-pliage {
  box-sizing: border-box;
  width: 100%;
}

.mjv-pliage > summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.mjv-pliage > summary::-webkit-details-marker {
  display: none;
}

/* `flex` et non `inline-flex` : en ligne, la boîte est alignée sur la
   LIGNE DE BASE de la poignée, ce qui posait le titre 4 px plus bas que
   celui des blocs voisins — mesuré, pas supposé. En bloc, il n'y a plus de
   ligne de base à négocier. */
.mjv-pliage__titre {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.7rem;
  width: fit-content;
  transition: opacity 0.2s;
}

.mjv-pliage > summary:hover .mjv-pliage__titre {
  opacity: 0.6;
}

/* Le rembourrage est posé sur le contenu et non en marge : la marge d'un
   premier enfant se fusionne avec celle du parent, et l'animation de
   hauteur de Prestige mesure alors une hauteur fausse. */
.mjv-pliage__contenu {
  padding-block-start: 1.1rem;
}

/* ── Un mot sur la largeur de la rangée ──
   Le 23/10, le pied comptait six colonnes et la rangée débordait à
   l'ouverture des menus : 1 402 px réclamés pour 1 344. J'avais alors
   plafonné les menus à 11 rem et resserré l'entre-colonnes au-delà de
   1 400 px. « Pour nous écrire » retiré le même jour, il n'en reste que
   cinq : mesuré à 1 440 et 1 800 px, ouverte comme fermée, la rangée tient
   avec les valeurs de Prestige. Les deux réglages sont donc retirés — une
   rustine qui ne sert plus est une dette qu'on paie pour rien.

   Si une sixième colonne revient un jour, c'est là qu'il faudra regarder. */

/* ══════════════════════════════════════════════════════════════════════════
   20. « À PORTER AVEC » — LES PIÈCES DU MÊME COLORIS
   ══════════════════════════════════════════════════════════════════════════

   Vincent, 23/10/2026, deuxième passe : tout sur une ligne, pas un
   carrousel. Cinq coupes du même coloris se comparent d'un regard ; les
   faire défiler une par une annule l'intérêt du bloc.

   La colonne d'infos fait environ 470 px : à cinq, chaque pièce tient dans
   85 px. C'est peu, et c'est assumé — ce qu'on lit à cette taille, c'est la
   COUPE, qui est une information visuelle. Le nom et le prix sont là pour
   confirmer, pas pour être lus en diagonale, d'où un corps très petit. */

.mjv-coordonnes {
  display: grid;
  row-gap: 0.9rem;
}

.mjv-coordonnes__titre {
  margin: 0;
}

.mjv-coordonnes__ligne {
  display: grid;
  grid-template-columns: repeat(var(--mjv-coordonnes-colonnes, 5), minmax(0, 1fr));
  column-gap: 0.5rem;
  row-gap: 1rem;
  align-items: start;
}

/* Les prix ont été retirés le 23/10 à la demande de Vincent : il n'y a donc
   plus rien à aligner sous le nom, et la rangée souple qui servait à cela
   est partie avec eux. */
.mjv-coordonnes__piece {
  display: grid;
  row-gap: 0.35rem;
  text-decoration: none;
  color: inherit;
}

.mjv-coordonnes__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.mjv-coordonnes__nom {
  font-family: var(--heading-font-family);
  font-size: 0.58rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mjv-coordonnes__piece:hover .mjv-coordonnes__image {
  opacity: 0.8;
}

/* Sur téléphone, la ligne ne se replie plus : les cinq pièces tiennent sur
   un rang, à environ 65 px chacune (Vincent, 23/10 : « plus petit les
   images »). Replier sur trois donnait des vignettes de 107 px, plus
   grandes que sur ordinateur, ce qui n'a pas de sens pour un bloc dont le
   rôle est de montrer d'un coup d'œil les coupes disponibles.

   Le nom descend en conséquence, et perd son interlettrage : à ce corps,
   l'espacement coûte une ligne de plus sans rien apporter. */
@media screen and (max-width: 699px) {
  .mjv-coordonnes__ligne {
    column-gap: 0.35rem;
  }

  .mjv-coordonnes__nom {
    font-size: 0.5rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   21. L'OUVERTURE DE COLLECTION
   ══════════════════════════════════════════════════════════════════════════

   Demandé le 24/10/2026. La page d'arrivée du module Focus : un descriptif
   d'un côté, une grande image en portrait de l'autre, la grille ensuite.

   LA SECTION NE VIT PAS DANS UN .container — elle est posée à la racine de
   la section, donc à fleur de page. C'est la condition pour que l'image
   touche le bord de l'écran ; la colonne de texte reprend une gouttière
   pour son propre compte. */

.mjv-ouverture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* La hauteur demandée, en-tête déduite : sur ce gabarit l'en-tête est
     opaque et occupe le haut de la page. Sans la soustraction, l'ouverture
     dépasse d'exactement sa hauteur et rien de la suite ne se voit — le
     défaut qu'on venait de corriger sur la couverture du Focus. */
  min-height: calc(var(--mjv-ouverture-hauteur, 100svh) - var(--header-height, 0px));
  background: rgb(var(--background));
}

/* Le côté se joue sur l'ORDRE, pas sur une seconde grille : les deux
   colonnes gardent leurs styles, elles échangent seulement leur place. */
.mjv-ouverture--droite .mjv-ouverture__colonne-texte { order: 2; }

.mjv-ouverture__colonne-texte {
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 4rem var(--container-gutter, 3rem);
}

.mjv-ouverture__bloc {
  display: grid;
  row-gap: 1.1rem;
  /* La mesure du texte, pas la largeur de la colonne : une ligne de 90
     caractères ne se lit pas, quelle que soit la place disponible. */
  max-width: 34rem;
  width: 100%;
}

.mjv-ouverture__appoint {
  width: 100%;
  height: auto;
  display: block;
  margin-block-end: 1.4rem;
}

.mjv-ouverture__titre {
  font-family: var(--heading-font-family);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.mjv-ouverture__chapeau {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin: 0;
}

.mjv-ouverture__texte {
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgb(var(--text-color) / 0.78);
}

.mjv-ouverture__texte p { margin: 0 0 0.9rem; }
.mjv-ouverture__texte p:last-child { margin-block-end: 0; }

/* Le bouton de la référence : un rectangle au filet, à la largeur du bloc.
   Pas d'aplat — sur une page qui s'ouvre sur un texte, un bouton noir plein
   pèserait plus que le propos. */
.mjv-ouverture__bouton {
  display: block;
  margin-block-start: 0.8rem;
  padding: 1.05rem 1.5rem;
  border: 1px solid rgb(var(--text-color) / 0.45);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: rgb(var(--text-color));
  transition: background-color 0.2s, color 0.2s;
}

.mjv-ouverture__bouton:hover {
  background: rgb(var(--text-color));
  color: rgb(var(--background));
}

/* ⚠️ L'IMAGE EST DÉTACHÉE DU FLUX, SINON C'EST ELLE QUI DÉCIDE.
   Relevé le 24/10 : avec `height: 100%` sur une image placée dans une case
   de grille à hauteur automatique, le pourcentage n'a aucune référence et
   le navigateur retombe sur le rapport de l'image. Un portrait 2/3 posé sur
   800 px de large imposait 1199 px de bande là où on en demandait 822 —
   l'ouverture dépassait l'écran, exactement le défaut qu'on venait de
   corriger ailleurs. En position absolue, la case ne tire plus sa hauteur
   de l'image : elle la tient de la rangée, donc du texte et du `min-height`
   demandé. */
.mjv-ouverture__colonne-image {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.mjv-ouverture__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` recadre, il ne déforme pas. */
  object-fit: cover;
  /* ⚠️ ANCRÉ EN HAUT, PAS CENTRÉ — RELEVÉ LE 24/10/2026.
     La boîte est presque carrée (800 × 900 sur une fenêtre de 1600) et nos
     photos sont des portraits 2/3 : `cover` dessine donc 1199 px de haut
     dans 900, soit 299 px de débordement. Centré, le navigateur en coupe
     150 EN HAUT — c'est-à-dire le front de la mannequin, sur toutes les
     collections. Ancré en haut, le débordement part entièrement en bas :
     on perd le bas des jambes, jamais le visage.

     Le compromis est volontaire et va dans un seul sens : sur un maillot,
     la pièce et le regard sont dans la moitié haute du cadre. Un visage
     décapité se voit du premier coup d'œil, des mollets absents non. */
  object-position: center top;
  display: block;
}

/* L'ancre du bouton « Découvrir » : sans décalage, le défilement s'arrête
   sous l'en-tête fixe et la première rangée est coupée. */
.mjv-ouverture__ancre {
  display: block;
  height: 0;
  scroll-margin-block-start: calc(var(--header-height, 0px) + 1.5rem);
}

/* ── Téléphone : l'image d'abord, le texte dessous ──
   L'ordre inverse de l'écran large est délibéré. Sur une colonne, c'est
   l'image qui doit accueillir ; le texte lu avant elle n'a rien à quoi
   s'accrocher. Et `order` ne suffirait pas : il faut aussi annuler celui
   que pose la variante « à droite ». */
@media screen and (max-width: 999px) {
  .mjv-ouverture { grid-template-columns: 1fr; min-height: 0; }
  .mjv-ouverture--droite .mjv-ouverture__colonne-texte { order: 0; }
  .mjv-ouverture__colonne-image { order: -1; aspect-ratio: 4 / 5; }
  .mjv-ouverture__colonne-texte { padding: 2.6rem var(--container-gutter, 1.5rem) 3.2rem; }
  .mjv-ouverture__appoint { max-width: 18rem; }
}

/* ── LA GRILLE DE CE GABARIT : PLUS PETITE ET CENTRÉE ──────────────────── */

/* La §3 met la grille de collection à fleur de page, photos jointives :
   c'est le parti pris du catalogue. Ici le parti pris est l'inverse — après
   un texte tenu, une grille pleine largeur écrase ce qu'on vient de lire.
   On rend donc à cette page ce que la §3 enlève partout ailleurs, et à elle
   seule : `:has(.mjv-ouverture)` ne matche que ce gabarit. */
@media screen and (min-width: 1000px) {
  body:has(.mjv-ouverture) .container:has(.product-list) {
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: 3rem;
  }

  body:has(.mjv-ouverture) .product-list {
    --product-list-calculated-column-gap: 1.2rem;
    --product-list-default-column-gap: 1.2rem;
    column-gap: 1.2rem !important;
    row-gap: 2.4rem !important;
  }
}

/* Aucune image nulle part — ni réglage, ni collection, ni première pièce :
   le texte prend toute la largeur. Une colonne blanche de 800 px ne se lit
   pas comme un parti pris, elle se lit comme une image qui n'a pas chargé. */
.mjv-ouverture--sans-image { grid-template-columns: 1fr; }
.mjv-ouverture--sans-image .mjv-ouverture__colonne-image { display: none; }
.mjv-ouverture--sans-image .mjv-ouverture__bloc { max-width: 46rem; }

/* ── L'EN-TÊTE PAR-DESSUS L'OUVERTURE ──────────────────────────────────── */

/* Demandé le 24/10 : « que le menu soit transparent comme sur les pages
   produit ». C'est le mécanisme natif de Prestige, déclenché par l'attribut
   `allow-transparent-header` posé dans la section. Trois corrections, les
   mêmes qu'en §5 et pour les mêmes raisons. */

/* 1. LA HAUTEUR NE SE SOUSTRAIT PLUS.
   Hors transparence, l'en-tête occupe le haut de la page et la bande doit
   lui céder sa hauteur. Par-dessus, il ne prend plus de place : garder la
   soustraction laisserait dépasser une bande d'en-tête de la grille en bas
   de la vue, ce que personne n'a demandé ici. */
.mjv-ouverture[allow-transparent-header] {
  min-height: var(--mjv-ouverture-hauteur, 100svh);
}

/* 2. LE TEXTE DE L'EN-TÊTE RESTE EN ENCRE.
   Prestige passe l'en-tête transparent en BLANC : ses cas d'usage sont des
   visuels de campagne sombres. Ici la moitié gauche est crème et la droite
   un packshot sur fond clair — du blanc n'y serait pas lisible, et la
   lisibilité d'un menu n'est pas une question de goût.

   La variable est posée par Prestige sur un sélecteur d'ID
   (#shopify-section-…__header) : une règle de classe ne peut pas gagner, il
   faut viser l'en-tête ET forcer. */
body:has(.shopify-section--mjv-ouverture) .shopify-section--header {
  --header-transparent-header-text-color: 21 21 21 !important;
}

/* 3. LE LOGO NOIR RESTE.
   Les deux logos sont superposés et pilotés par l'OPACITÉ depuis une seule
   variable — le noir vaut `calc(1 - var(…))`, le blanc vaut la variable. La
   remettre à 0 ramène le noir et efface le blanc. Masquer le blanc en
   `display` ferait disparaître les deux : c'est l'erreur payée en §5. */
body:has(.shopify-section--mjv-ouverture) .shopify-section--header,
body:has(.shopify-section--mjv-ouverture) .header {
  --header-show-transparent-logo: 0 !important;
}

/* 4. PAS DE VOILE SOUS L'EN-TÊTE — ESSAYÉ, MESURÉ, RETIRÉ.
   Un dégradé tiré du fond de page avait été posé sur la colonne image le
   24/10 : « FRANÇAIS » tombait sur les cheveux foncés du mannequin et se
   lisait « …AIS » (fond 30/255 contre 21 pour l'encre). Il faisait bien son
   travail — contraste porté à ~5,4:1 — mais Vincent l'a refusé le jour même :
   il se voyait, et la fiche produit n'en a pas.

   La page tient donc la même règle que la fiche produit : l'en-tête en encre
   sur l'image, sans artifice. La lisibilité du menu dépend alors de la PHOTO
   choisie dans « La grande image » — son quart supérieur droit doit rester
   clair et calme. C'est une contrainte de choix d'image, pas un défaut de
   mise en page, et c'est l'arbitrage retenu.

   Ne pas remettre de dégradé ici sans le lui redemander. */

/* ── LES TITRES RESSERRÉS SUR CE GABARIT ──────────────────────────────── */

/* Signalé par Vincent le 24/10 : les titres paraissent trop espacés sur la
   page d'ouverture. Mesure comparée avec la collection normale : les cartes
   sont IDENTIQUES au pixel — 29 px entre l'image et le titre, 3 avant le
   prix, 14 px de corps, 0,42 d'interlettrage. Rien n'avait été changé.

   Ce qui change, c'est la largeur : 274 px ici contre 400 ailleurs, puisque
   la grille de ce gabarit est resserrée et centrée. Le même blanc sur une
   carte 31 % plus étroite pèse bien davantage. C'est donc un réglage à
   refaire pour cette largeur-là, pas un défaut à corriger partout.

   Les 29 px venaient de deux endroits — la gouttière de la carte (20) et le
   rembourrage du bloc d'infos (8,8) ; on les prend tous les deux, sinon on
   déplace le blanc au lieu de l'enlever. L'interligne du titre suit : 23,1 px
   pour un corps de 14, c'est une mesure de paragraphe, pas de légende. */
@media screen and (min-width: 1000px) {
  body:has(.mjv-ouverture) .product-list .product-card { row-gap: 1rem; }

  body:has(.mjv-ouverture) .product-list .product-card__info {
    padding-block-start: 0;
  }

  body:has(.mjv-ouverture) .product-list .product-title {
    line-height: 1.25;
  }
}

/* ── LE FILET CLAIR SOUS LE MENU TRANSPARENT (03/11/2026) ─────────────────
   Signalé par Vincent sur son MacBook : une ligne crème au-dessus de la
   première image de l'accueil. Prestige remonte la page sous le menu
   transparent d'une marge négative ARRONDIE (-110px) alors que le menu
   mesure 110,17 px : il restait 0,17 px de fond de page, qu'un écran Retina
   affiche. On remonte la première section d'un pixel de plus.

   ⚠️ La marge seule ne suffit pas : elle fusionnait avec celle de <main> et
   du menu (la plus négative l'emporte, -110). `flow-root` sur <main>
   empêche cette fusion. */
body:has(.shopify-section:first-child [allow-transparent-header]) #main { display: flow-root; }
body:has(.shopify-section:first-child [allow-transparent-header]) #main > .shopify-section:first-child {
  margin-top: -1px;
}

/* ── LES COUPES DE L'ACCUEIL, À LA MANIÈRE DU FOCUS (03/11/2026) ──────────
   Demande de Vincent : la liste « Les hauts · Les strings · … » se lit comme
   la rangée du Focus — images à fleur, toutes en 3:4 — et le nom à la
   taille des noms de produits du Focus (Bebas 14 px, 0,42 px d'interlettrage). Seulement sur l'accueil
   (body:has(.mjv-focus)). */
body:has(.mjv-focus) .shopify-section--collection-list .content-over-media {
  aspect-ratio: 3 / 4;
  border-radius: 0;
}
body:has(.mjv-focus) .shopify-section--collection-list .content-over-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body:has(.mjv-focus) .shopify-section--collection-list .collection-card__content {
  place-self: end end;
  text-align: right;
  padding: 0 17.6px 16px 0;
}
/* Titre sous l'image (retenu finalement, 03/11) : en encre, à gauche, comme
   le nom d'un produit du Focus. */
body:has(.mjv-focus) .shopify-section--collection-list .collection-list--text-outside .collection-card__content {
  place-self: start;
  text-align: left;
  /* Le titre appartient à l'image, pas au module suivant (Vincent, 03/11) :
     peu d'air au-dessus, beaucoup en dessous. */
  padding: 12px 17.6px 2.75rem;
}
/* Prestige écarte image et texte de 24 px (row-gap de la carte) : on le
   retire, le rembourrage seul règle l'espace. */
body:has(.mjv-focus) .shopify-section--collection-list .collection-list--text-outside .collection-card { row-gap: 0; }
body:has(.mjv-focus) .shopify-section--collection-list .collection-list--text-outside .collection-card__content .h3 {
  color: rgb(21 21 21);
  text-shadow: none;
}
body:has(.mjv-focus) .shopify-section--collection-list .collection-card__content .h3 {
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #faf9f6;
  text-shadow: 0 0 10px rgb(0 0 0 / .35);
  margin: 0;
}
/* Sur téléphone, les coupes défilent sur UNE ligne, deux tuiles et demie
   visibles (comme les Nouveautés), au lieu d'une tuile pleine largeur. */
@media screen and (max-width: 699px) {
  body:has(.mjv-focus) .shopify-section--collection-list .collection-list > .collection-card {
    flex: 0 0 42%;
  }
}

/* ── LE PRIX À DROITE DU NOM, SUR LES CARTES (03/11/2026) ─────────────────
   Demande de Vincent sur les grilles de collection : le prix sur la ligne du
   nom, à droite (avec « € » depuis le 05/11/2026). La
   ligne des tailles passe en dessous, sur toute la largeur. */
.product-card__info:has(price-list) { grid-template-columns: minmax(0, 1fr); }
.product-card__info > .v-stack:has(price-list) { justify-self: stretch; justify-items: stretch; width: 100%; }
.product-card__info > .v-stack > .v-stack:has(> price-list) {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: baseline;
  justify-items: start;
}
.product-card__info > .v-stack > .v-stack:has(> price-list) > .product-title { grid-column: 1; grid-row: 1; }
.product-card__info > .v-stack > .v-stack:has(> price-list) > price-list { grid-column: 2; grid-row: 1; justify-self: end; }
.product-card__info > .v-stack > .v-stack:has(> price-list) > :not(.product-title):not(price-list) { grid-column: 1 / -1; }

/* ── LE NOM PRÈS DE SON IMAGE, SUR LES GRILLES (03/11/2026) ───────────────
   Mesuré : 29 px entre l'image et le nom, 19 px entre le nom et la rangée
   suivante — le nom semblait appartenir à la photo d'en dessous. On serre
   au-dessus (gap de la carte 20 → 0, rembourrage 8,8 → 12) et on ouvre
   en dessous. */
.product-list .product-card { row-gap: 0; }
.product-list .product-card__info { padding-block: 12px 1.1rem; }

/* ── UN SEUL STYLE DE SURTITRE SUR L'ACCUEIL (03/11/2026) ─────────────────
   2e revue : deux surtitres cohabitaient — Bebas gras 12 px (sections
   Prestige) et Futura espacé (nos modules). On garde le Futura espacé,
   celui des modules Aurore. Accueil seulement. */
body:has(.mjv-focus) #main p.h6 {
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── BOUTONS SANS LISERÉ DÉCALÉ (03/11/2026) ──────────────────────────────
   2e revue : « Lire l'article », « Voir les maillots » portaient une bande
   plus sombre à droite — le dégradé de l'effet de survol de Prestige, qui
   dépasse d'un pixel. Fond uni, survol par simple inversion. */
#main .button { background-image: none !important; }
#main .button:not(.button--outline) { background-color: rgb(var(--button-background)); }
#main .button--outline { background-color: transparent; }
@media (pointer: fine) {
  #main .button:not(.button--outline):not([disabled]):hover { background-color: transparent; color: rgb(var(--button-background)); }
  /* Contour : au survol, le fond prend la couleur du filet et le texte celle du bouton plein (04/11 : on remplissait avec la couleur du texte → noir sur noir). */
  #main .button--outline:not([disabled]):hover { background-color: rgb(var(--button-background, var(--text-color))); color: rgb(var(--button-text-color, var(--background))); border-color: rgb(var(--button-background, var(--text-color))); }
}

/* Bouton à contour sur fond encre (« Fabriqués au Portugal », 03/11/2026) :
   le filet par défaut du thème se perdait dans le noir. */
.color-scheme--scheme-3 .button--outline {
  /* Le même bouton que les modules vidéo (.mjv-video-bouton) : filet crème
     à 45 %, petites capitales espacées. */
  border-color: rgb(var(--text-color) / .45);
  padding: 1rem 1.8rem;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Logos de paiement du pied de page en monochrome (audit luxe du
   03/11/2026) : c'étaient les seules couleurs hors charte de la page. On
   les garde — ils rassurent au moment de payer — mais sans leurs couleurs. */
.payment-methods svg { filter: grayscale(1); opacity: .55; }

/* ── Collection « ouverture » : la dernière rangée se centre ───────────── */

/* Demandé par Vincent le 04/11/2026 sur Bandana Vert : neuf pièces sur
   quatre colonnes laissaient la dernière seule, collée à gauche. La grille
   de Prestige ne sait pas centrer une rangée incomplète ; une rangée flex
   le sait. Même largeur de carte qu'en grille (même nombre par rangée et
   même gouttière, lus dans les variables de Prestige), donc rien ne bouge
   tant que les rangées sont pleines.
   Limité au gabarit « ouverture » (la page d'arrivée du Focus) : sur les
   grandes collections filtrées, une rangée centrée en bas de liste se
   lirait comme un trou. */
#main:has(.mjv-ouverture) product-list.product-list:not(.product-list--carousel) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#main:has(.mjv-ouverture) product-list.product-list:not(.product-list--carousel) > * {
  --mjv-par-rangee: var(--product-list-calculated-items-per-row);
  flex: 0 0 calc((100% - (var(--mjv-par-rangee) - 1) * var(--product-list-calculated-column-gap)) / var(--mjv-par-rangee));
  min-width: 0;
}

/* ── Collection « ouverture » : la pyramide 4 · 3 · 2 · 1 ──────────────── */

/* Vincent, 04/11/2026 : sur une petite collection, les rangées décroissent
   et chacune est centrée sous la précédente — 4, puis 3, puis 2, puis 1.
   Une grille de huit demi-colonnes : une carte en occupe deux, et chaque
   rangée part une demi-colonne plus loin que la précédente. La largeur
   d'une carte reste celle de la grille de Prestige — deux demi-colonnes
   plus une gouttière, soit (100 % − 3 gouttières) / 4.
   SEULEMENT quand le compte tombe juste (7 = 4+3, 9 = 4+3+2, 10 = 4+3+2+1)
   et à quatre par rangée (ordinateur, affichage par défaut). Ailleurs, la
   rangée flex centrée ci-dessus prend le relais : une pyramide entamée ne
   se lit plus comme une forme mais comme un oubli. */
@media screen and (min-width: 1000px) {
  #main:has(.mjv-ouverture) product-list.product-list[collection-desktop-layout="medium"]:is(
      :has(> :nth-child(7)):not(:has(> :nth-child(8))),
      :has(> :nth-child(9)):not(:has(> :nth-child(10))),
      :has(> :nth-child(10)):not(:has(> :nth-child(11)))) {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  #main:has(.mjv-ouverture) product-list.product-list[collection-desktop-layout="medium"]:is(
      :has(> :nth-child(7)):not(:has(> :nth-child(8))),
      :has(> :nth-child(9)):not(:has(> :nth-child(10))),
      :has(> :nth-child(10)):not(:has(> :nth-child(11)))) > * {
    grid-column-end: span 2;
  }

  /* Le premier de chaque rangée : une demi-colonne plus loin. Le placement
     automatique passe tout seul à la rangée suivante, la colonne demandée
     étant derrière le curseur. */
  #main:has(.mjv-ouverture) product-list.product-list[collection-desktop-layout="medium"]:is(
      :has(> :nth-child(7)):not(:has(> :nth-child(8))),
      :has(> :nth-child(9)):not(:has(> :nth-child(10))),
      :has(> :nth-child(10)):not(:has(> :nth-child(11)))) > :nth-child(5)  { grid-column-start: 2; }
  #main:has(.mjv-ouverture) product-list.product-list[collection-desktop-layout="medium"]:is(
      :has(> :nth-child(9)):not(:has(> :nth-child(10))),
      :has(> :nth-child(10)):not(:has(> :nth-child(11)))) > :nth-child(8)  { grid-column-start: 3; }
  #main:has(.mjv-ouverture) product-list.product-list[collection-desktop-layout="medium"]:has(> :nth-child(10)):not(:has(> :nth-child(11))) > :nth-child(10) { grid-column-start: 4; }
}

/* ── Frise « notre histoire » : toute la largeur (Vincent, 04/11/2026) ──── */

/* Prestige la tient dans un conteneur moyen (container--md) : au bureau,
   un tiers de l'écran restait vide de chaque côté. Elle prend désormais la
   largeur de la page, gouttières comprises, comme sur téléphone. L'image
   est plafonnée en hauteur : une photo en portrait sur une demi-largeur
   d'écran dépasserait sinon la fenêtre. */
@media screen and (min-width: 700px) {
  .shopify-section--timeline .container--md { --container-max-width: 100vw; }
  .shopify-section--timeline .timeline__item-image-wrapper { max-height: 88svh; }
  .shopify-section--timeline .timeline__item-image-wrapper :is(img, svg) { width: 100%; height: 100%; object-fit: cover; }
  .shopify-section--timeline .timeline__item-content { padding-inline: clamp(2rem, 5vw, 5rem); max-width: 46rem; }
}

/* Dans le tiroir « Guide des tailles », sous le tableau : le lien vers la
   page complète (prise de mesures, conseils par coupe). Posé HORS du corps
   du tiroir, que mjv.js remplace par le tableau de la fiche. 04/11/2026. */
.mjv-volet__lien-guide {
  display: inline-block;
  margin: 1.5rem 0 0;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 1px solid currentColor;
}
.mjv-volet__lien-guide:hover { opacity: .7; }

/* ──────────────────────────────────────────────────────────────────────────
   « CHOISIR UNE TAILLE » (04/11/2026) — aucune taille n'est cochée d'office
   (assets/mjv.js, module 9). Un clic sur le bouton sans taille amène au
   sélecteur et le souligne brièvement, sans couleur d'alerte.
   ────────────────────────────────────────────────────────────────────────── */
@keyframes mjv-taille-demandee { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mjv-taille-demandee legend { text-decoration: underline; text-underline-offset: .3em; }
.mjv-taille-demandee .block-swatch-list, .mjv-taille-demandee [class*="swatch-list"] { animation: mjv-taille-demandee .35s ease 2; }
@media (prefers-reduced-motion: reduce) { .mjv-taille-demandee [class*="swatch-list"] { animation: none; } }

/* TAILLES SUR UNE LIGNE, MOBILE (audit du 04/11/2026) : 6 tailles de 40 px
   + 5 écarts de 30 px dépassaient la colonne de 342 px — XXL passait seule à
   la ligne. Réparties sur toute la largeur, cibles de 44 px (Apple HIG). */
@media screen and (max-width: 699px) {
  .product-info .variant-picker__option-values { flex-wrap: nowrap; justify-content: space-between; gap: .25rem; }
  .product-info .variant-picker__option-values .block-swatch { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* LOUPE DE LA GALERIE, MOBILE (audit du 04/11/2026) : posée en haut à droite,
   elle passait sous l'icône panier de l'en-tête transparent. Descendue en bas
   à droite de la photo. */
@media screen and (max-width: 699px) {
  .product-gallery__zoom-button { inset-block-start: auto; inset-block-end: 1.25rem; }
}

/* FOCUS « INSPIRATION » (04/11/2026, Vincent, référence Jacquemus) : une
   image, puis quatre pièces — sans nom ni prix. L'image et la pièce suffisent ;
   le nom et le prix sont sur la fiche. Le lien de chaque carte reste. */
.mjv-focus__rangee .product-card__info,
.mjv-focus__rangee .product-card__quick-buy,
.mjv-focus__rangee .product-card__badge-list,
.mjv-focus__rangee .badge { display: none !important; }
.mjv-focus__rangee product-card { row-gap: 0; }

/* Focus : deux images sur ordinateur, UNE sur mobile (Vincent, 04/11/2026).
   Sur téléphone, la seconde est masquée et la première prend toute la largeur. */
@media screen and (max-width: 699px) {
  .mjv-focus__couverture--deux { grid-template-columns: 1fr; }
  .mjv-focus__couverture--deux > .mjv-focus__media ~ .mjv-focus__media { display: none; }
}

/* Focus, suite (Vincent, 04/11/2026, référence Jacquemus) : aucun espace —
   ni entre les rangées de pièces, ni sous la section. Sur mobile, l'image
   en bandeau large et les pièces en 3:4, comme l'inspiration. */
.mjv-focus { margin-block-end: 0 !important; }
.mjv-focus__rangee { row-gap: 0 !important; --product-list-calculated-row-gap: 0px; }
@media screen and (max-width: 699px) {
  .mjv-focus__couverture--deux .mjv-focus__media { aspect-ratio: 1 / 1; max-height: none; }  /* carré, comme Jacquemus */
  .mjv-focus__rangee .product-card__figure,
  .mjv-focus__rangee .product-card__media { aspect-ratio: 3 / 4; }
  .mjv-focus__rangee .product-card__media img { height: 100%; object-fit: cover; }
}

/* ── ALERTES STOCK : PAS DE MENTION DE TEST EN LIGNE (05/11/2026) ─────────
   Le bloc de l'application « Alertes Belles Des Pins » écrit en dur « Thème
   de test · inscription réelle, envois actuellement en pause » (extension
   Apps/shopify/stock-alerts). Le thème est publié : la mention disparaît ici
   en attendant une nouvelle version de l'extension. */
.mjv-alert__test { display: none !important; }

/* ── EN-TÊTE BLANC SUR LA VIDÉO D'OUVERTURE, SUR MOBILE (05/11/2026) ──────
   Sur mobile, la colonne image passe en haut : avec une vidéo de coloris
   (souvent sombre), l'en-tête en encre ne se lisait plus. Là seulement, on
   rend à Prestige son comportement natif — texte et logo blancs tant qu'on
   n'a pas défilé. Sur ordinateur, l'en-tête reste sur la colonne crème et
   garde l'encre (§ en-tête par-dessus l'ouverture). */
@media screen and (max-width: 999px) {
  body:has(.mjv-ouverture__video) .shopify-section--header {
    --header-transparent-header-text-color: 255 255 255 !important;
  }
  /* Le logo blanc seulement tant que l'en-tête est transparent : l'état que
     Prestige reconnaît à `.header:not(:hover, .is-solid, :has([open]))`.
     Posé sans cette condition, le logo restait blanc sur l'en-tête crème
     une fois la page défilée — invisible. */
  body:has(.mjv-ouverture__video) .header:not(:hover, .is-solid, :has([open])) {
    --header-show-transparent-logo: 1 !important;
  }
}

/* 05/11/2026 : les tailles portées par les mannequins rejoignent le tiroir
   Guide des tailles, sous le tableau de la fiche (mjv.js, module 3). Sans
   marge, la phrase d'introduction collait au dernier filet du tableau. */
#mjv-volet-guide .mjv-volet__corps table + p { margin-top: 2rem; }