/* Mise en page des pages internes (collection, produit, journal, CGV).
   Les couleurs, polices et composants viennent de systeme.css ; ce fichier
   ne fait que poser les gabarits. */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}

/* L'en-tête est collant : sans ce décalage, les dix-sept ancres des sommaires
   font atterrir leur titre exactement dessous, invisible. Mesuré à 75 px en
   desktop et 99 px en mobile, d'où la marge prise à 120. */
html { scroll-padding-top: 120px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.mb-page { min-height: 100vh; display: flex; flex-direction: column; }
.mb-corps { flex: 1; }

.mb-large { width: min(1180px, 100% - clamp(32px, 8vw, 96px)); margin-inline: auto; }
.mb-etroit { width: min(720px, 100% - clamp(32px, 8vw, 96px)); margin-inline: auto; }

/* ── En-tête ──────────────────────────────────────────────────── */

.mb-header {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: clamp(16px, 4vw, 40px);
  padding: 14px clamp(20px, 5vw, 72px);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.mb-logo img { display: block; border-radius: 50%; box-shadow: var(--shadow-sm); }
.mb-nav { display: flex; gap: clamp(12px, 2.4vw, 26px); flex: 1; flex-wrap: wrap; }
.mb-nav a {
  color: var(--color-accent-800); text-decoration: none;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.mb-nav a:hover, .mb-nav a[aria-current] {
  border-bottom-color: var(--color-accent-700); color: var(--color-accent-900);
}
.mb-panier-btn { flex-shrink: 0; }
@media (max-width: 620px) {
  .mb-nav { order: 3; width: 100%; justify-content: space-between; gap: 8px; }
  .mb-nav a { font-size: 11.5px; letter-spacing: .05em; }
}

/* ── Bandeau de titre ─────────────────────────────────────────── */

.mb-chapeau { padding: clamp(40px, 7vw, 76px) 0 clamp(26px, 4vw, 42px); }
.mb-kicker {
  display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 14px;
}
.mb-titre {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 6.2vw, 60px); line-height: 1.08; letter-spacing: -.015em;
  margin: 0 0 16px;
}
.mb-chapo { max-width: 62ch; font-size: 16px; line-height: 1.68; color: var(--color-accent-900); opacity: .82; }

/* ── Le bandeau ────────────────────────────────────────────────────
   Une seule inversion par page : crème sur vert profond, pleine largeur,
   au moment où le lecteur a compris et peut agir. C'est le seul endroit où
   la page change de couleur, et c'est ce qui lui donne son rythme — répété
   à chaque section, l'effet s'annulerait.

   Le bloc est frère des conteneurs centrés, jamais enfant : un plein-bord
   obtenu par marges négatives se paie toujours en gouttières bancales. */

.mb-bandeau {
  background: var(--color-accent-800);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none' stroke='%23f1eedd' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' opacity='0.10'%3E%3Cg transform='translate(108 122) rotate(-14) scale(2.3)'%3E%3Cpath transform='rotate(-78)' d='M0 0 Q -5 -11.7 0 -26 Q 5 -11.7 0 0'/%3E%3Cpath transform='rotate(-40)' d='M0 0 Q -5 -15.3 0 -34 Q 5 -15.3 0 0'/%3E%3Cpath d='M0 0 Q -5 -18.9 0 -42 Q 5 -18.9 0 0'/%3E%3Cpath transform='rotate(40)' d='M0 0 Q -5 -15.3 0 -34 Q 5 -15.3 0 0'/%3E%3Cpath transform='rotate(78)' d='M0 0 Q -5 -11.7 0 -26 Q 5 -11.7 0 0'/%3E%3Cpath d='M0 0 L0 15'/%3E%3C/g%3E%3Cg transform='translate(330 300) rotate(24) scale(1.7)'%3E%3Cpath transform='rotate(-78)' d='M0 0 Q -5 -11.7 0 -26 Q 5 -11.7 0 0'/%3E%3Cpath transform='rotate(-40)' d='M0 0 Q -5 -15.3 0 -34 Q 5 -15.3 0 0'/%3E%3Cpath d='M0 0 Q -5 -18.9 0 -42 Q 5 -18.9 0 0'/%3E%3Cpath transform='rotate(40)' d='M0 0 Q -5 -15.3 0 -34 Q 5 -15.3 0 0'/%3E%3Cpath transform='rotate(78)' d='M0 0 Q -5 -11.7 0 -26 Q 5 -11.7 0 0'/%3E%3Cpath d='M0 0 L0 15'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 420px;
  color: #f1eedd;
  padding: clamp(52px, 8vw, 92px) 0;
  margin-top: clamp(30px, 5vw, 60px);
}

.mb-bandeau-corps { width: min(760px, 100% - clamp(32px, 8vw, 96px)); margin-inline: auto; text-align: center; }

.mb-bandeau .mb-kicker { color: var(--color-accent-300); }

.mb-bandeau h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.14; letter-spacing: -.01em;
  margin: 12px 0 0; color: #f6f3e4;
}

.mb-bandeau p {
  max-width: 52ch; margin: 16px auto 0;
  font-size: 16px; line-height: 1.7; color: rgba(241, 238, 221, .8);
}

.mb-bandeau-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(24px, 3.4vw, 34px);
}

.mb-bandeau-actions a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 30px; border-radius: 999px; text-decoration: none;
  font-size: 15px; letter-spacing: .01em;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.mb-bandeau-actions .principal { background: #f1eedd; color: var(--color-accent-800); border: 1px solid #f1eedd; }
.mb-bandeau-actions .principal:hover { background: var(--color-accent-300); border-color: var(--color-accent-300); transform: translateY(-2px); }
.mb-bandeau-actions .second { color: rgba(241, 238, 221, .86); border: 1px solid rgba(241, 238, 221, .34); }
.mb-bandeau-actions .second:hover { color: #f6f3e4; border-color: rgba(241, 238, 221, .72); }

/* La ligne qui suit un titre porte la couleur d'accent : c'est elle qui
   coupe les murs de texte, sans rien réécrire. Vaut dans les pages de
   contenu comme dans les cartes du journal, où les paragraphes
   s'enchaînaient sur plus de cent mots d'un seul ton. */
.mb-texte h2 + p,
.mb-article h2 + p { font-size: 16.5px; line-height: 1.7; color: var(--color-accent-700); opacity: 1; }

/* ── Apparition au défilement ──────────────────────────────────────
   Un seul geste, décalé par rang. Rien ne bouge pour qui a demandé
   moins d'animations, et rien ne reste caché si le script ne tourne pas. */
[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--rang, 0) * 90ms);
}
[data-reveal].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].vu { opacity: 1; transform: none; transition: none; }
}

/* ── Filtres de collection ────────────────────────────────────── */

.mb-filtres {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-bottom: 26px; border-bottom: 1px solid var(--color-divider);
}
.mb-filtre {
  font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
  padding: 9px 20px; border-radius: 999px;
  border: 1px solid var(--color-divider); background: transparent;
  color: var(--color-accent-800); transition: background .18s ease, color .18s ease;
}
.mb-filtre:hover { background: var(--color-accent-200); }
.mb-filtre[aria-current="true"] {
  background: var(--color-accent-600); border-color: var(--color-accent-600); color: #f6f3e4;
}
.mb-compte { margin-left: auto; font-size: 13px; opacity: .7; }

/* ── Grille produits ──────────────────────────────────────────── */

/* 330px plutôt que 248 : à 248 la grille tenait quatre colonnes sur un écran
   de 1440 et les visuels tombaient à 231×173, trop petits pour juger d'une
   fleur. À 330 on passe à trois colonnes et l'image gagne la moitié de sa
   largeur. La grille reste en auto-fill : les très grands écrans reprennent
   une quatrième colonne d'eux-mêmes. */
.mb-grille {
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  padding: clamp(30px, 4vw, 46px) 0 clamp(50px, 7vw, 90px);
}
/* La vignette se soulève au survol et son visuel avance légèrement : deux
   valeurs sur la même durée, assez pour signaler qu'elle est cliquable sans
   faire sautiller la grille. Le survol n'existe pas au doigt — rien de ce
   qui compte ne dépend de lui. */
.mb-fiche {
  display: flex; flex-direction: column; padding: 14px;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}
.mb-fiche .plate { overflow: hidden; }
.mb-fiche .plate img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }

@media (hover: hover) {
  .mb-fiche:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .mb-fiche:hover .plate img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .mb-fiche, .mb-fiche .plate img { transition: none; }
  .mb-fiche:hover { transform: none; }
  .mb-fiche:hover .plate img { transform: none; }
}
.mb-fiche .plate { position: relative; margin-bottom: 14px; }
/* 5:4 et non 4:3 : c'est le cadre le plus haut que les visuels supportent
   sans laisser réapparaître le titre incrusté en tête de l'image source. */
.mb-fiche .plate img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.mb-fiche .tag { position: absolute; top: 10px; left: 10px; }
.mb-fiche-nom { margin: 0 0 4px; font-size: 19px; }
.mb-fiche-nom a { text-decoration: none; color: inherit; }
.mb-fiche-nom a:hover { color: var(--color-accent-600); }
.mb-prix-ligne {
  display: flex; align-items: baseline; gap: 8px;
  margin: 12px 0 14px; padding-top: 12px; border-top: 1px solid var(--color-divider);
}
.mb-prix { font-size: 19px; font-weight: 600; }
.mb-prix-note { font-size: 12px; opacity: .68; }
.mb-fiche .btn { margin-top: auto; }

/* ── Fiche produit ────────────────────────────────────────────── */

.mb-produit {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  padding: clamp(26px, 4vw, 44px) 0 clamp(50px, 7vw, 88px);
  align-items: start;
}
@media (max-width: 860px) { .mb-produit { grid-template-columns: 1fr; } }
.mb-galerie { display: grid; gap: 12px; }
.mb-galerie .plate img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.mb-vignettes { display: flex; gap: 10px; }
.mb-vignettes button {
  padding: 0; border: 0; background: none; cursor: pointer; flex: 0 0 84px;
}
.mb-vignettes img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.mb-vignettes [aria-current="true"] img { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }

.mb-achat-titre {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; margin: 10px 0 8px;
}
.mb-achat-sous { font-size: 15px; opacity: .78; margin: 0 0 20px; }
.mb-desc { font-size: 15.5px; line-height: 1.72; margin: 0 0 24px; }

.mb-formats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.mb-format {
  font: inherit; cursor: pointer; text-align: left; min-width: 104px;
  padding: 11px 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider); background: var(--color-surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.mb-format:hover { border-color: var(--color-accent-400); }
.mb-format[aria-pressed="true"] {
  border-color: var(--color-accent-600); box-shadow: inset 0 0 0 1px var(--color-accent-600);
}
.mb-format b { display: block; font-size: 15px; }
.mb-format span { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }

.mb-achat-prix { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 18px; }
.mb-achat-prix strong { font-size: 30px; font-weight: 600; }
.mb-achat-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.mb-achat-actions .btn { flex: 1 1 190px; }

/* Le rappel de l'offre, sous le prix. Vert plein quand elle s'applique au
   format choisi, simple filet sinon : la différence doit se voir d'un coup
   d'œil, sans avoir à lire. */
.mb-offre {
  display: flex; align-items: baseline; gap: 10px;
  margin: 14px 0 0; padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 14px; line-height: 1.55;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.mb-offre[data-actif="true"] {
  background: var(--color-accent-800); color: rgba(241, 238, 221, .88);
  border: 1px solid var(--color-accent-800);
}
.mb-offre[data-actif="true"] strong { color: #f6f3e4; }
.mb-offre[data-actif="false"] {
  background: transparent; color: var(--color-accent-700);
  border: 1px dashed color-mix(in srgb, var(--color-accent-500) 45%, transparent);
}
.mb-offre-tag {
  flex: none; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.mb-offre[data-actif="true"] .mb-offre-tag { background: var(--color-accent-400); color: var(--color-accent-900); }
.mb-offre[data-actif="false"] .mb-offre-tag { background: var(--color-accent-200); color: var(--color-accent-700); }
.mb-offre sup { line-height: 0; font-size: .72em; }
@media (prefers-reduced-motion: reduce) { .mb-offre { transition: none; } }

.mb-argus {display: grid; gap: 2px; margin: 0 0 22px; padding: 0; list-style: none; }
.mb-argus li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; padding: 7px 0; opacity: .85; }
.mb-argus svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-accent-600); }

.mb-details { border-top: 1px solid var(--color-divider); }
.mb-details details { border-bottom: 1px solid var(--color-divider); }
.mb-details summary {
  cursor: pointer; padding: 15px 0; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-accent-800); list-style: none;
}
.mb-details summary::-webkit-details-marker { display: none; }
.mb-details summary::after { content: "+"; float: right; font-size: 17px; }
.mb-details details[open] summary::after { content: "−"; }
.mb-details p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; opacity: .86; }

/* ── Journal ──────────────────────────────────────────────────── */

.mb-articles {
  display: grid; gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: clamp(20px, 3vw, 34px) 0 clamp(50px, 7vw, 90px);
}
.mb-article { padding: clamp(20px, 2.6vw, 30px); }
.mb-article h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: 1.2; margin: 12px 0 10px;
}
.mb-article p { font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; opacity: .86; }
.mb-article .tag { margin-bottom: 4px; }

/* ── Pages de texte (CGV) ─────────────────────────────────────── */

.mb-texte { padding: clamp(10px, 2vw, 26px) 0 clamp(50px, 7vw, 90px); }
.mb-texte h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(23px, 3vw, 30px); line-height: 1.2;
  margin: clamp(34px, 5vw, 52px) 0 14px; padding-top: 20px;
  border-top: 1px solid var(--color-divider);
}
.mb-texte h3 { font-size: 16px; margin: 24px 0 8px; }
.mb-texte p, .mb-texte li { font-size: 15px; line-height: 1.75; opacity: .88; }
.mb-texte p { margin: 0 0 14px; }
.mb-texte ul { margin: 0 0 16px; padding-left: 20px; }
.mb-texte li { margin-bottom: 7px; }
.mb-texte dl { margin: 0 0 16px; }
.mb-texte dt { font-weight: 600; font-size: 14px; margin-top: 12px; }
.mb-texte dd { margin: 3px 0 0; font-size: 15px; line-height: 1.7; opacity: .88; }
.mb-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mb-sommaire a {
  font-size: 12.5px; text-decoration: none; padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--color-divider); color: var(--color-accent-800);
}
.mb-sommaire a:hover { background: var(--color-accent-200); }
.mb-atrouer {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  background: var(--color-accent-200); border: 1px dashed var(--color-accent-600);
  font-size: 13.5px; letter-spacing: .02em;
}

/* ── Pied de page ─────────────────────────────────────────────── */

.mb-footer {
  border-top: 1px solid var(--color-divider);
  padding: clamp(38px, 5vw, 62px) clamp(20px, 5vw, 72px) 30px;
  background: color-mix(in srgb, var(--color-accent-900) 7%, transparent);
}
.mb-footer-grille {
  display: grid; gap: clamp(24px, 3vw, 44px);
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr));
  width: min(1180px, 100%); margin-inline: auto;
}
@media (max-width: 820px) { .mb-footer-grille { grid-template-columns: 1fr 1fr; } }
.mb-footer-logo { display: block; border-radius: 50%; margin-bottom: 14px; }
.mb-mentions { font-size: 12px; line-height: 1.65; opacity: .72; margin: 0; max-width: 46ch; }
.mb-footer-titre {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0 0 12px;
}
.mb-footer-grille a {
  display: block; font-size: 13.5px; margin-bottom: 9px;
  color: var(--color-accent-900); text-decoration: none; opacity: .85;
}
.mb-footer-grille a:hover { opacity: 1; text-decoration: underline; }
.mb-copy {
  width: min(1180px, 100%); margin: clamp(28px, 4vw, 46px) auto 0;
  padding-top: 18px; border-top: 1px solid var(--color-divider);
  font-size: 12px; opacity: .6;
}

/* ── Divers ───────────────────────────────────────────────────── */

.mb-vide { padding: 60px 0 90px; text-align: center; }
.mb-vide p { font-size: 16px; margin-bottom: 20px; opacity: .8; }
.mb-fil { padding-top: 22px; font-size: 12.5px; opacity: .7; }
.mb-fil a { color: var(--color-accent-800); text-decoration: none; }
.mb-fil a:hover { text-decoration: underline; }