/* ==========================================================================
   Page layout — grilles responsives réutilisables
   Breakpoints : 1440 / 1024 / 768 / 480 (mobile-first via max-width overrides)
   ========================================================================== */

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 880px) {
  .split-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* Les colonnes ne s'élargissent jamais au contenu : sans ça, un <select> dont la plus longue option fait
   ~560 px (formulaire de contact) agrandissait la colonne au-delà de l'écran sur mobile. */
.split-grid > *, .grid-2 > * { min-width: 0; }
.field select, .field input, .field textarea { max-width: 100%; }
.split-grid.reverse > *:first-child { order: 2; }
@media (max-width: 880px) {
  .split-grid.reverse > *:first-child { order: 0; }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* on garde 2 colonnes sur mobile (grille produits) : gap resserré */
  .grid-4 { gap: var(--space-2); }
}

/* Barre d'outils de la boutique (tri) */
.shop-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.shop-sort { margin: 0; min-width: 240px; }
@media (max-width: 560px) {
  .shop-sort { min-width: 0; width: 100%; }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.panier-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 880px) {
  .panier-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .panier-grid aside { position: static !important; }
}

/* Pill filter bar wraps naturally via .pill-tabs (components.css) */

/* Combo utility : priorité sur .mask-reveal quand on veut un cadre en arche
   (les deux classes définissent border-radius, celle-ci doit gagner) */
.mask-reveal.arch-frame {
  border-radius: 50% 50% 14px 14px;
}

/* ==========================================================================
   Carrousel de catégories (accueil) — défilement horizontal, cartes larges
   prévues pour de vraies photos de familles de produits.
   ========================================================================== */

.cat-carousel-wrap {
  position: relative;
  padding-inline: 52px;
}
@media (max-width: 640px) {
  .cat-carousel-wrap { padding-inline: 0; }
}

.cat-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* overflow-x:auto force implicitement overflow-y:auto, ce qui rognait le
     haut des cartes (coins arrondis) lors du survol (translateY) : on ajoute
     de la marge en haut/bas pour laisser respirer cet effet. */
  padding-block: 14px var(--space-1);
}
.cat-carousel::-webkit-scrollbar { display: none; }

.cat-section-tinted {
  background: linear-gradient(180deg, var(--color-cacao-deep) 0%, var(--color-bordeaux-deep) 100%);
  color: var(--color-cream-soft);
  padding-block: var(--space-4);
}
@media (max-width: 640px) {
  .cat-section-tinted { padding-block: var(--space-3); }
}
.cat-section-tinted .eyebrow { color: var(--color-gold-light); }
.cat-section-tinted .eyebrow::before { background: var(--color-gold); }
.cat-section-tinted h2 { color: var(--color-cream-white); }
.cat-section-tinted .cat-card-label { color: var(--color-cream-soft); }

.cat-card {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 240px);
  scroll-snap-align: start;
  display: block;
  transition: transform var(--dur-base) var(--ease-spring);
}
.cat-card:hover { transform: translateY(-4px); }

.cat-card-visual {
  aspect-ratio: 3.5/4;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.cat-card:hover .cat-card-visual { box-shadow: var(--shadow-md); }

.cat-card-img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.cat-card-visual > svg {
  transition: transform var(--dur-slow) var(--ease-spring);
}
.cat-card:hover .cat-card-img,
.cat-card:hover .cat-card-visual > svg {
  transform: scale(1.07);
}

.cat-card-label {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-align: center;
  color: var(--color-text);
}

.carousel-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  z-index: 2;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-out);
}
.carousel-arrow:hover { background: var(--color-primary); color: var(--color-cream-white); }
.carousel-arrow[hidden] { display: none; }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow-prev { left: 0; }
.carousel-arrow-next { right: 0; }

/* Carrousel « Dans la même gamme » (fiche produit) */
.related-carousel-wrap { position: relative; }
.related-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 6px var(--space-1);
}
.related-carousel::-webkit-scrollbar { display: none; }
.related-carousel .product-card {
  flex: 0 0 clamp(160px, 44vw, 210px);
  scroll-snap-align: start;
}
.related-carousel-wrap .carousel-arrow-prev { left: -18px; }
.related-carousel-wrap .carousel-arrow-next { right: -18px; }
@media (max-width: 900px) {
  .related-carousel-wrap .carousel-arrow-prev { left: 2px; }
  .related-carousel-wrap .carousel-arrow-next { right: 2px; }
}

/* ==========================================================================
   Visuels signature de hero (un par page, voir index/boutique/contact/
   notre-histoire/partenariats) — pas de gabarit unique copié-collé.
   ========================================================================== */

/* --- Boutique : hero photo --- */
.boutique-hero {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-cacao-deep);
  isolation: isolate;
  padding-bottom: calc(var(--fam-h) + 6px); /* le bandeau de familles chevauche le bas */
}
/* Desktop : hauteur proportionnelle à la largeur (bornée) pour que le cadrage
   de la photo reste stable quand on élargit la fenêtre (pas d'effet « zoom »).
   `width:100%` garde le hero pleine largeur même quand `max-height` borne la
   hauteur (sinon `aspect-ratio` réduit la largeur → bande blanche à droite).
   Le hero ne dépasse jamais la hauteur visible sous le header : la barre de
   familles reste visible dès l'arrivée sur la page (rognage par le bas). */
@media (min-width: 641px) {
  .boutique-hero {
    aspect-ratio: 15 / 8;
    min-height: 420px;
    max-height: calc(100vh - var(--header-h) - 16px);
    max-height: calc(100svh - var(--header-h) - 16px);
  }
}
.boutique-hero picture,
.boutique-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cadrage : bord haut juste au niveau des têtes des moulages */
  object-position: 55% 30%;
  z-index: -2;
}
.boutique-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(28, 14, 10, 0.92) 0%,
    rgba(28, 14, 10, 0.72) 32%,
    rgba(28, 14, 10, 0.15) 62%,
    rgba(28, 14, 10, 0) 100%
  );
}
.boutique-hero__content {
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
  position: relative;
  z-index: 2;
}
/* Mascotte : petit clin d'œil dans le coin bas-gauche du hero, recadrée par
   le bord (le hero est en overflow:hidden). Décorative -> aria-hidden. */
.boutique-hero .hero-mascot {
  position: absolute;
  top: auto; right: auto;
  left: clamp(-28px, -1vw, 6px);
  bottom: -6px;                 /* pieds recadrés par le bas / le bandeau familles */
  width: auto;
  height: clamp(150px, 28vh, 260px);
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}
@media (max-width: 900px) {
  .boutique-hero .hero-mascot { display: none; }
}
.boutique-hero__content h1 { max-width: 14ch; }
.boutique-hero__content .lead { max-width: 34ch; }
@media (max-width: 640px) {
  .boutique-hero { min-height: 480px; }
  .boutique-hero::before {
    background: linear-gradient(
      176deg,
      rgba(28, 14, 10, 0.94) 0%,
      rgba(28, 14, 10, 0.7) 38%,
      rgba(28, 14, 10, 0.22) 66%,
      rgba(28, 14, 10, 0.5) 100%
    );
  }
  .boutique-hero img { object-position: 58% 24%; }
}

/* --- Boutique : bandeau de familles — verre dépoli, sticky sous le header.
   Sur le hero il chevauche le bas de la photo ; au scroll il se fige en haut
   comme un sous-header (même effet que .site-header) et le contenu de la page
   défile dessous. Replié = 1 rangée centrée ; au survol / focus clavier il
   se déplie vers le bas pour montrer toutes les familles. --- */
:root {
  --fam-gap: 13px;   /* espace haut = entre-rangées = bas, plié comme déplié */
  /* bandeau replié : bordure haute (1) + gap haut + 1 rangée (34) + gap bas.
     La 2e rangée démarre pile à cette limite → clippée, invisible. */
  --fam-h: calc(1px + 2 * var(--fam-gap) + 34px);
}

.shop-familles {
  position: sticky;
  top: var(--header-h-scrolled);
  z-index: 90;                        /* sous .site-header (100), au-dessus du contenu */
  height: var(--fam-h);
  margin-top: calc(-1 * var(--fam-h)); /* remonte le bandeau sur le bas du hero */
}
.shop-familles__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-height: var(--fam-h);           /* replié : une seule rangée */
  overflow: hidden;
  background: rgba(28, 14, 10, 0.55);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.shop-familles__panel:hover,
.shop-familles__panel:focus-within {
  max-height: 190px;                  /* déplié : toutes les familles */
  background: rgba(28, 14, 10, 0.74);
}
/* « grip » discret : replié, pile au milieu de l'espace entre le bas des
   familles (1px bordure + --fam-gap + 34px) et le bas du bandeau (--fam-h). */
.shop-familles__panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc((var(--fam-h) - 1px - var(--fam-gap) - 34px) / 2 - 1.5px);
  width: 36px;
  height: 3px;
  margin-left: -18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  z-index: 3;
  transition: opacity 0.25s ease;
}
.shop-familles__panel:hover::after,
.shop-familles__panel:focus-within::after { opacity: 0; }
.shop-familles .container {
  padding-block: 0;
}
.shop-familles .pill-tabs {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* déplié : haut = entre-rangées = bas ; replié : le grand row-gap rejette
     la 2e rangée hors du bandeau (pas de liseré, pas de fondu) */
  gap: var(--fam-gap) 0.5rem;
  padding-top: var(--fam-gap);
  padding-bottom: var(--fam-gap);
}
.shop-familles .pill-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 34px;                   /* pastilles compactes, hauteur fixe */
  line-height: 1;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--color-cream-soft);
}
.shop-familles .pill-tabs button:hover {
  border-color: var(--color-cream-white);
  color: var(--color-cream-white);
}
.shop-familles .pill-tabs button.is-active {
  background: var(--color-cream-white);
  border-color: var(--color-cream-white);
  color: var(--color-cacao-deep);
}

/* cible du « clic famille → défile aux produits » : se place sous le header
   + le bandeau figé (assez bas pour que le bandeau soit déjà figé à l'arrivée) */
#results-count { scroll-margin-top: calc(var(--header-h) + var(--fam-h) + 12px); }

@media (max-width: 640px) {
  /* pas de survol tactile : bandeau slim, familles en défilement horizontal */
  .shop-familles__panel {
    background: rgba(28, 14, 10, 0.66);
  }
  .shop-familles__panel:hover,
  .shop-familles__panel:focus-within { max-height: var(--fam-h); }
  .shop-familles__panel::after { display: none; }
  .shop-familles .pill-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    padding-top: 0;                    /* pas de grip sur mobile : rangée recentrée */
    padding-bottom: 0;
    min-height: var(--fam-h);
  }
  .shop-familles .pill-tabs::-webkit-scrollbar { display: none; }
  .shop-familles .pill-tabs button {
    padding: 0.45rem 0.85rem;
    font-size: var(--fs-xs);
    min-height: 36px;
  }
}

/* --- Boutique : mosaïque de catégories --- */
.mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 84px;
  gap: var(--space-2);
}
.mosaic-grid > a:first-child { grid-row: span 2; }
.mosaic-grid > a:last-child { grid-column: span 2; }
.mosaic-tile {
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--color-cream-white);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-align: center;
  padding: var(--space-2);
  transition: transform var(--dur-base) var(--ease-spring);
}
.mosaic-tile:hover { transform: translateY(-4px) scale(1.02); }
.mosaic-tile svg { width: 34px; height: 34px; }

/* --- Notre Histoire : quatre générations (grille de médaillons) --- */
.generations-stair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  width: min(420px, 100%);
  margin-inline: auto;
}

.gen-medallion { position: relative; margin: 0; }

.gen-photo {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 8px solid var(--color-bordeaux);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.gen-medallion:hover .gen-photo {
  transform: scale(1.06) translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 0 6px rgba(175, 24, 29, 0.15);
  border-color: var(--color-bordeaux-dark);
}
.gen-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-photo-img--fondateur { object-position: 58% 25%; transform: scale(1.55); transform-origin: 60% 30%; }
.gen-photo-empty {
  border: 2px dashed var(--color-gold);
  background: var(--color-cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gen-photo-empty svg { width: 32px; height: 32px; color: var(--color-gold-dark); opacity: 0.7; }

@media (max-width: 480px) {
  .generations-stair { width: min(280px, 100%); }
}

/* Un seul médaillon (fondateur) tant que les autres portraits manquent :
   centré, un peu plus grand. Revient à la grille 2 colonnes dès qu'il y en a plusieurs. */
.generations-stair:has(.gen-medallion:only-child) { grid-template-columns: 1fr; width: min(300px, 100%); }

.gen-caption {
  margin-top: 0.55rem;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--color-text-soft);
}
.gen-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 1px;
}

/* --- Notre Histoire : devise reprise de l'ancien site --- */
.devise-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  color: var(--color-cream-white);
  background: var(--color-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.devise-band span { color: var(--color-gold-light); font-size: 0.8em; }

/* --- Notre Histoire : ruban chronologique --- */
.ribbon-timeline {
  position: relative;
  padding-block: var(--space-3) var(--space-2);
}
.ribbon-rail {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ribbon-rail-bg { fill: none; stroke: var(--color-gold-light); stroke-width: 3; opacity: 0.6; }
.ribbon-rail-draw { fill: none; stroke: var(--color-bordeaux); stroke-width: 3; stroke-linecap: round; }

.ribbon-row {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
  padding-block: var(--space-5);
}
.ribbon-row:first-child { padding-top: var(--space-2); }

/* Variant "grand format" : la photo prend plus de place que le texte en
   face (ex. panorama d'atelier, photo de groupe). Ajouter class="wide-photo"
   sur .ribbon-row ; le tracé du ruban gonfle davantage autour d'elle
   (voir buildRibbonPath dans js/main.js). */
.ribbon-row.wide-photo:has(.ribbon-photo:first-child) { grid-template-columns: 1.3fr 64px 0.9fr; }
.ribbon-row.wide-photo:has(.ribbon-photo:last-child) { grid-template-columns: 0.9fr 64px 1.3fr; }
.ribbon-row.wide-photo .ribbon-photo { aspect-ratio: 16/11; }
@media (max-width: 880px) {
  .ribbon-row.wide-photo { grid-template-columns: 40px 1fr; }
}

.ribbon-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-cream-white);
  border: 3px solid var(--color-gold);
  margin-inline: auto;
  align-self: center;
  position: relative;
  z-index: 2;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.ribbon-dot.is-active {
  background: var(--color-bordeaux);
  border-color: var(--color-bordeaux);
  transform: scale(1.35);
  box-shadow: 0 0 0 7px rgba(175, 24, 29, 0.15);
}

.ribbon-copy .eyebrow { margin-bottom: var(--space-1); }
/* Un mot long ("agrandissements") ne doit jamais élargir la colonne au-delà de l'écran */
.ribbon-copy { min-width: 0; }
.ribbon-copy h2 { overflow-wrap: break-word; }

.ribbon-photo {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-gold);
  background: var(--color-cream-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-3);
  color: var(--color-text-soft);
  overflow: hidden;
}
.ribbon-photo svg { width: 36px; height: 36px; color: var(--color-gold-dark); opacity: 0.8; }
.ribbon-photo strong { font-size: var(--fs-sm); color: var(--color-text); }
.ribbon-photo span { font-size: var(--fs-xs); opacity: 0.7; }

/* Photo réelle : format compact, cadre net (pas le liseré pointillé du
   placeholder), poussée vers l'extérieur pour dégager le fil central. */
.ribbon-photo:has(img) {
  aspect-ratio: 5 / 4;
  width: min(270px, 100%);
  border: 0;
  padding: 4px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.ribbon-photo:has(img) img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 4px);
}
.ribbon-row > .ribbon-photo:first-child:has(img) { justify-self: start; }
.ribbon-row > .ribbon-photo:last-child:has(img)  { justify-self: end; }
@media (max-width: 880px) {
  .ribbon-photo:has(img) { width: min(240px, 100%); justify-self: start; }
}

@media (max-width: 880px) {
  .ribbon-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-4);
  }
  .ribbon-row > .ribbon-photo { grid-column: 2; grid-row: 1; margin-bottom: var(--space-1); }
  .ribbon-row > .ribbon-copy { grid-column: 2; grid-row: 2; }
  .ribbon-row > .ribbon-dot { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 6px; }
  .ribbon-rail { left: 0; transform: none; width: 40px; } /* centre du fil = centre des points (colonne de 40 px) */
}

/* Rangées sans photo (en attendant les archives) : le texte reste sur son côté
   du ruban, l'autre côté est laissé vide. Dès qu'un .ribbon-photo est ajouté
   dans la rangée, la mise en page redevient celle à trois colonnes. */
.ribbon-row:not(:has(.ribbon-photo)) { padding-block: var(--space-4); }
/* Placement explicite (bureau seulement : sur mobile la grille est à 2 colonnes, voir plus bas) */
@media (min-width: 881px) {
  .ribbon-row:not(:has(.ribbon-photo)) > .ribbon-dot { grid-column: 2; grid-row: 1; }
  .ribbon-row:not(:has(.ribbon-photo)) > .ribbon-copy:first-child { grid-column: 1; grid-row: 1; }
  .ribbon-row:not(:has(.ribbon-photo)) > .ribbon-dot + .ribbon-copy { grid-column: 3; grid-row: 1; }
}
@media (max-width: 880px) {
  .ribbon-row:not(:has(.ribbon-photo)) { padding-block: var(--space-3); }
  .ribbon-row:not(:has(.ribbon-photo)) > .ribbon-dot { grid-column: 1; grid-row: 1; }
  .ribbon-row:not(:has(.ribbon-photo)) > .ribbon-copy { grid-column: 2; grid-row: 1; }
}

/* --- Contact : mascotte qui sort de derrière la carte interactive --- */
.mascot-peek {
  position: absolute;
  top: -158px;
  right: 14px;
  width: 132px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 640px) {
  .mascot-peek { width: 100px; top: -120px; right: 8px; }
}
/* Colonnes empilées (mobile) : la mascotte dépasse au-dessus de la carte et recouvrait le texte du formulaire
   placé juste avant → on réserve sa place au-dessus du bloc qui la porte. */
@media (max-width: 880px) {
  div:has(> .mascot-peek) { margin-top: 158px; }
}
@media (max-width: 640px) {
  div:has(> .mascot-peek) { margin-top: 120px; }
}

/* --- Partenariats : grille des publics --- */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.audience-tile {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.audience-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.audience-tile .icon-badge {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(175, 24, 29, 0.1);
  color: var(--color-bordeaux);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.2rem;
}
.audience-tile .icon-badge svg { width: 24px; height: 24px; }
.audience-tile h3 { color: var(--color-bordeaux-deep); }
.audience-tile p { font-size: var(--fs-xs); color: var(--color-text-soft); }

/* Utility: hide on mobile / desktop */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
  .hide-desktop { display: none !important; }
}

/* ==========================================================================
   Bandeau "boutique bientôt disponible" (boutique.html, en attendant l'ouverture)
   ========================================================================== */

.soon-banner-frame {
  background: var(--color-bg);
  padding: 1cm;
}
/* La nav familles remonte normalement sur le bas du hero (margin-top négatif) ;
   quand le bandeau s'intercale, on annule cette remontée pour qu'elle ne
   morde pas sur le cadre du bandeau. */
.soon-banner-frame + .shop-familles {
  margin-top: 0;
}
.soon-banner {
  background: var(--gradient-dark-panel);
  color: var(--color-cream-soft);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}
.soon-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}
.soon-banner__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(198, 161, 91, 0.18);
  color: var(--color-gold-light);
  display: flex; align-items: center; justify-content: center;
}
.soon-banner__icon svg { width: 28px; height: 28px; }
.soon-banner h2 { color: var(--color-cream-white); font-size: var(--fs-lg); margin-bottom: 0.3rem; }
.soon-banner p { color: var(--color-cream-soft); font-size: var(--fs-sm); max-width: 56ch; }
.soon-banner__cta { flex-shrink: 0; margin-left: auto; }
@media (max-width: 720px) {
  .soon-banner__inner { flex-direction: column; text-align: center; padding: var(--space-3); }
  .soon-banner__cta { margin-left: 0; }
}
@media (max-width: 480px) {
  .soon-banner-frame { padding: 0.5cm; }
}

/* ==========================================================================
   Catalogue Noël (catalogue.html) — grille + visionneuse plein écran
   ========================================================================== */

.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 720px) {
  .catalogue-grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

.catalogue-page {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 963 / 709;
  background: var(--color-cream-soft);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.catalogue-page:hover,
.catalogue-page:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.catalogue-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalogue-page__num {
  position: absolute;
  left: var(--space-2); bottom: var(--space-2);
  background: rgba(46, 27, 18, 0.72);
  color: var(--color-cream-white);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}
.catalogue-page__zoom {
  position: absolute;
  right: var(--space-2); top: var(--space-2);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 252, 246, 0.9);
  color: var(--color-cacao);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.catalogue-page:hover .catalogue-page__zoom,
.catalogue-page:focus-visible .catalogue-page__zoom { opacity: 1; transform: scale(1); }
.catalogue-page__zoom svg { width: 18px; height: 18px; }

.catalogue-viewer-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 12, 8, 0.9);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.catalogue-viewer-overlay.is-open { opacity: 1; pointer-events: auto; }

.catalogue-viewer {
  position: fixed; inset: 0;
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.catalogue-viewer.is-open { opacity: 1; pointer-events: auto; }

.catalogue-viewer__frame {
  position: relative;
  max-width: min(1800px, 96vw);
  max-height: 94vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalogue-viewer__clip {
  position: relative;
  max-width: 100%;
  max-height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.catalogue-viewer__clip img {
  /* Pas de max-width/max-height/width:auto ici : ça plafonnerait la taille
     réelle appliquée en JS (voir applyZoom) quel que soit le zoom demandé.
     La taille "contain" initiale est mesurée une fois par measureNatural()
     (qui pose temporairement ces contraintes en inline) puis le cadre est
     verrouillé à cette taille ; l'image est ensuite positionnée en absolu
     avec des width/height en pixels réels, pour forcer le navigateur à
     redécoder la source à la vraie taille affichée à chaque niveau de zoom
     plutôt que d'agrandir une texture mise en cache à la taille initiale. */
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  image-rendering: high-quality;
}
.catalogue-viewer__clip img.is-zoomed { cursor: grab; }
.catalogue-viewer__clip img:active { cursor: grabbing; }

.catalogue-viewer__close {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-cream-white);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.catalogue-viewer__close:hover { background: rgba(255, 255, 255, 0.22); }
.catalogue-viewer__close svg { width: 20px; height: 20px; }

.catalogue-viewer__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-cream-white);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.catalogue-viewer__nav:hover { background: rgba(255, 255, 255, 0.22); }
.catalogue-viewer__nav svg { width: 22px; height: 22px; }
.catalogue-viewer__nav--prev { left: calc(-1 * var(--space-6)); }
.catalogue-viewer__nav--next { right: calc(-1 * var(--space-6)); }
@media (max-width: 960px) {
  .catalogue-viewer__nav--prev { left: var(--space-1); }
  .catalogue-viewer__nav--next { right: var(--space-1); }
}