/* ============================================================================
   PAGES — La Gourmand'ice · feuille COMMUNE aux pages internes (DRIP)
   ----------------------------------------------------------------------------
   S'appuie sur tokens.css → base.css → theme.css → drip.css (chargés AVANT).
   drip.css porte déjà le HEADER, le FOOTER, le MENU MOBILE, le CURSEUR boule,
   les REVEALS et le FESTON glissant → on NE les redéfinit pas ici.

   Cette feuille ajoute UNIQUEMENT les composants propres aux pages internes :
   en-tête de page (page-hero), grille de parfums + fiches ingrédient,
   formulaires (commande gâteau, contact), boutiques détaillées, timeline
   d'histoire, gabarit légal long-form. 100 % tokenisé, aucune couleur en dur.
   ============================================================================ */

/* ====================== EN-TÊTE DE PAGE (page-hero) ======================= *
   Toutes les pages internes ouvrent sur le MÊME bloc : eyebrow + grand titre
   + chapô, sur la crème, avec un feston crème qui dégouline sur la section
   suivante (même vocabulaire que la home). Pas de pin/scrollytelling ici. */
.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  text-align: center;
  overflow: hidden;
}
.page-hero--sunken { background: var(--surface-sunken); }
.page-hero__inner { max-width: 56ch; margin-inline: auto; }

/* ---- En-tête de page EN DEMI-CADRE (texte + vraie photo d'ambiance) -------- *
   La page « démarre » tout de suite : à gauche le titre + chapô (alignés à
   gauche), à droite une photo gourmande gradée POP. Mobile : photo au-dessus du
   texte, centré. Resserre l'intro (padding réduit) → la grille/le formulaire
   remonte vers la ligne de flottaison. */
.page-hero--split { text-align: left; padding-block: clamp(2.25rem, 1.5rem + 4vw, 4rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-hero--split .page-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 4vw, 4rem);
}
.page-hero--split .page-hero__inner { max-width: none; margin-inline: 0; }
.page-hero--split .crumb,
.page-hero--split .page-hero__eyebrow { justify-content: flex-start; }
.page-hero--split .page-hero__lead { margin-inline: 0; }
.page-hero__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--surface-sunken);
}
.page-hero__photo picture, .page-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
  .page-hero--split { text-align: center; }
  .page-hero--split .page-hero__grid { grid-template-columns: 1fr; gap: clamp(1.25rem, 1rem + 2vw, 2rem); }
  .page-hero--split .page-hero__photo { order: -1; max-width: 480px; margin-inline: auto; aspect-ratio: 16 / 10; }
  .page-hero--split .crumb,
  .page-hero--split .page-hero__eyebrow { justify-content: center; }
  .page-hero--split .page-hero__lead { margin-inline: auto; }
}
.page-hero__eyebrow { display: inline-flex; margin-bottom: var(--space-4); }
.page-hero__title {
  font-size: var(--text-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.page-hero__lead {
  margin: var(--space-6) auto 0;
  max-width: 52ch;
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
/* Fil d'ariane discret, mono, centré sous le titre */
.crumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dimmed);
}
.crumb a { color: var(--accent-text); }
.crumb a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.crumb__sep { opacity: 0.6; }

/* ====================== ONGLETS DE SAISON (parfums) ======================= *
   Filtre par saison : segmented control en pilule, accessible (aria-pressed).
   MOBILE-FIRST : stack vertical pleine largeur, tous strictement de même taille
   (zéro quinconce). ≥620px : rangée centrée qui wrappe proprement. */
.season-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin-bottom: var(--space-10, var(--space-12));
}
.season-tab {
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-default);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}
.season-tab:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent-text); }
.season-tab[aria-pressed="true"] {
  color: var(--text-on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
@media (min-width: 620px) {
  .season-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }
  .season-tab { padding: 0.55rem 1.2rem; }
}

/* ====================== GRILLE DE PARFUMS ================================= *
   Cartes parfum à hauteur ÉGALE (grid-auto-rows:1fr), la boule SVG en haut,
   nom + origine + note sensorielle, bouton « fiche » qui ouvre le détail.
   Chaque carte est un bouton accessible (ouvre la fiche au clic). */
.flavors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}
/* État vide gracieux : filet de sécurité si un filtre ne renvoie aucune carte. */
.flavors-empty {
  margin-top: var(--space-6);
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  text-align: center;
  background: var(--surface-raised);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.flavors-empty__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.flavors-empty__text { color: var(--text-muted); }
.flavor-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
}
.flavor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-tint);
}
.flavor-card__art {
  width: 84px;
  height: 70px;
  margin-bottom: var(--space-4);
}
.flavor-card__art svg { width: 84px; height: 70px; }
.flavor-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.08;
  color: var(--text-strong);
}
.flavor-card__origin {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dimmed);
}
.flavor-card__note {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  flex: 1;
}
.flavor-card__more {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--accent-text);
}
.flavor-card__more svg { transition: transform var(--dur-fast) var(--ease-spring); }
.flavor-card:hover .flavor-card__more svg { transform: translateX(3px); }
/* Pastille saison en coin haut-droit de la carte */
.flavor-card { position: relative; }
.flavor-card__season {
  position: absolute;
  top: clamp(0.9rem, 0.6rem + 1vw, 1.25rem);
  right: clamp(0.9rem, 0.6rem + 1vw, 1.25rem);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
}
/* parfum masqué par le filtre saison */
.flavor-card[hidden] { display: none; }

/* ====================== FICHE INGRÉDIENT (modale) ========================= *
   Ouverte au clic sur une carte parfum. Overlay + panneau centré, photo réelle
   de la glace + origine de l'ingrédient. Fermable (croix / Échap / clic dehors).
   Sans JS : invisible (les fiches restent accessibles via le bloc « origines »
   en bas de page, toujours visible). */
.flavor-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  place-items: center;
  padding: var(--gutter);
}
.flavor-dialog.is-open { display: grid; }
.flavor-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface-invert) 64%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.flavor-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100svh - 2 * var(--gutter));
  overflow: auto;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out-expo),
              opacity var(--dur-base) var(--ease-out-expo);
}
.flavor-dialog.is-open .flavor-dialog__panel { transform: none; opacity: 1; }
.flavor-dialog__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  /* Scène POP rose : aplats acidulés crème → rose, jamais de photo de goût. */
  background:
    radial-gradient(120% 90% at 50% 12%,
      color-mix(in srgb, var(--brand-magenta) 24%, var(--surface-raised)) 0%,
      color-mix(in srgb, var(--brand-corail) 28%, var(--surface-page)) 52%,
      var(--surface-page) 100%);
}
/* halos pop derrière la boule (pois géants, décor) */
.flavor-dialog__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 78%, color-mix(in srgb, var(--brand-vanille) 60%, transparent) 0 8%, transparent 9%),
    radial-gradient(circle at 84% 24%, color-mix(in srgb, var(--accent) 36%, transparent) 0 6%, transparent 7%),
    radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--brand-corail) 55%, transparent) 0 5%, transparent 6%);
  pointer-events: none;
}
.flavor-dialog__scoop {
  position: relative;
  z-index: 1;
  width: clamp(178px, 52%, 248px);
  filter: drop-shadow(0 16px 24px color-mix(in srgb, var(--text-strong) 24%, transparent));
}
.flavor-dialog__scoop svg { width: 100%; height: auto; display: block; }
/* La boule « pop » à l'ouverture de la fiche (rebond), coupée en reduced-motion. */
.flavor-dialog.is-open .flavor-dialog__scoop {
  animation: gx-scoop-pop var(--dur-slow) var(--ease-spring) both;
}
@keyframes gx-scoop-pop {
  0%   { transform: scale(0.4) translateY(18px) rotate(-10deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
}
.flavor-dialog__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.flavor-dialog__close:hover { transform: scale(1.08); }
.flavor-dialog__body { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.flavor-dialog__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.flavor-dialog__title { font-size: var(--text-h2); margin-top: var(--space-2); }
.flavor-dialog__text { margin-top: var(--space-4); color: var(--text-default); line-height: var(--leading-body); }
.flavor-dialog__origin {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
}
.flavor-dialog__origin svg { flex: none; color: var(--accent-text); }
.flavor-dialog__origin b { color: var(--text-strong); }

/* ====================== BANDE « ORIGINES » (zig-zag éditorial) ============ *
   Sur parfums.html : 3 ingrédients nobles racontés en alternance photo/texte.
   Fallback accessible aux fiches (visible sans JS). Hauteurs gérées par grille. */
.origins { background: var(--surface-sunken); }
.origin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.origin-row + .origin-row { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.origin-row:nth-child(even) .origin-row__media { order: 2; }
.origin-row__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--surface-raised);
}
.origin-row__media img { width: 100%; height: 100%; object-fit: cover; }
.origin-row__name { font-size: var(--text-h2); }
.origin-row__from {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.origin-row__text { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-lead); line-height: var(--leading-snug); max-width: 46ch; }

/* ====================== GÂTEAUX : MISE EN AVANT + FORMULAIRE ============== */
.cake-feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.cake-feature__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.cake-feature__media figure { margin: 0; }
/* Galerie magazine : 1 grand visuel à gauche (2 rangées) + 2 visuels empilés. */
.cake-feature__media--mag {
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto auto;
}
.cake-feature__media--mag .cake-feature__cell { min-width: 0; display: flex; flex-direction: column; }
.cake-feature__media--mag .cake-feature__cell--tall { grid-row: 1 / span 2; }
.cake-feature__media--mag .cake-feature__cell--tall .cake-feature__photo { flex: 1; aspect-ratio: 3 / 5; }
.cake-feature__media--mag .cake-feature__cell .cake-feature__photo { aspect-ratio: 4 / 3; min-width: 0; }
@media (max-width: 620px) {
  .cake-feature__media--mag { grid-template-columns: 1fr 1fr; }
  .cake-feature__media--mag .cake-feature__cell--tall { grid-row: auto; grid-column: 1 / -1; }
  .cake-feature__media--mag .cake-feature__cell--tall .cake-feature__photo { aspect-ratio: 16 / 10; }
}
.cake-feature__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--surface-raised);
  aspect-ratio: 4 / 5;
}
.cake-feature__photo--tall { aspect-ratio: 3 / 5; }
.cake-feature__media figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dimmed);
  text-align: center;
}

/* Bloc « comment commander » : 3 étapes numérotées, hauteur égale */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  margin-top: var(--space-12);
}
.step {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--accent-text);
}
.step__title { font-size: var(--text-h5); margin-top: var(--space-3); }
.step__text { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-snug); flex: 1; }

/* ====================== FORMULAIRES (commande + contact) ================== *
   Champs sobres tokenisés, focus AA, validation visuelle (pas d'envoi réel).
   Grille 2 colonnes desktop, 1 colonne mobile. Le panneau de confirmation
   remplace visuellement le formulaire après « validation ». */
.form-card {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-6);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field__label .req { color: var(--accent-text); }
.field__control {
  min-height: 48px;
  padding: 0.75rem 0.95rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-strong);
  background: var(--surface-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-expo);
  width: 100%;
}
textarea.field__control { min-height: 120px; resize: vertical; line-height: var(--leading-snug); }
.field__control::placeholder { color: var(--text-dimmed); }
.field__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
select.field__control { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5347' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.6rem;
}
/* Champ en erreur (validation visuelle) */
.field__error { font-size: var(--text-small); color: var(--accent-text); display: none; }
.field.is-invalid .field__control { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field.is-invalid .field__error { display: block; }
.form-foot { margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); justify-content: space-between; }
.form-note { font-size: var(--text-small); color: var(--text-muted); max-width: 40ch; }

/* Panneau de confirmation (après validation visuelle) */
.form-success {
  display: none;
  text-align: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
}
.form-success.is-shown { display: block; }
.form-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.form-success__title { font-size: var(--text-h2); }
.form-success__text { margin: var(--space-4) auto 0; max-width: 44ch; color: var(--text-muted); font-size: var(--text-lead); line-height: var(--leading-snug); }
.form-success__recap {
  margin: var(--space-8) auto 0;
  max-width: 30rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  padding: var(--space-6);
}
.form-success__recap dt { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dimmed); }
.form-success__recap dd { margin: 0 0 var(--space-3); color: var(--text-strong); font-weight: 600; }
.form-success__recap dd:last-child { margin-bottom: 0; }

/* ====================== BOUTIQUES (détail) =============================== */
.shop-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.shop-detail + .shop-detail { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.shop-detail:nth-child(even) .shop-detail__visual { order: 2; }
/* Colonne visuelle = photo d'ambiance EMPILÉE sur la carte Google Maps. */
.shop-detail__visual { display: grid; grid-template-rows: auto auto; gap: var(--space-4); align-content: stretch; }
.shop-detail__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  background: var(--surface-sunken);
}
.shop-detail__photo picture, .shop-detail__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow, .7s) var(--ease-out-expo); }
.shop-detail__photo:hover img { transform: scale(1.05); }
.shop-detail__map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 240px;
  background: var(--surface-sunken);
}
.shop-detail__map iframe { width: 100%; height: 100%; border: 0; display: block; position: absolute; inset: 0; }
.shop-detail__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.shop-detail__name { font-size: var(--text-h2); }
.shop-detail__rating {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.shop-detail__rating .stars { color: var(--brand-magenta); font-size: 1.05rem; }
.shop-detail__rows { margin-top: var(--space-6); }
.shop-detail__row { display: flex; gap: 0.7rem; padding: var(--space-3) 0; border-top: 1px solid var(--border); color: var(--text-default); }
.shop-detail__row:first-child { border-top: 0; }
.shop-detail__row svg { flex: none; color: var(--accent-text); margin-top: 2px; }
.shop-detail__row b { color: var(--text-strong); }
.shop-detail__note { font-size: var(--text-small); color: var(--text-dimmed); }
.shop-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

/* Tableau d'horaires propre */
.hours { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.hours th, .hours td { text-align: left; padding: 0.3rem 0; }
.hours th { font-weight: 600; color: var(--text-strong); }
.hours td { color: var(--text-muted); }

/* ====================== HISTOIRE (à propos) ============================== */
.story-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.story-intro__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: var(--surface-sunken);
}
.story-intro__media img { width: 100%; height: 100%; object-fit: cover; }
/* Légende de la photo médailles, posée en bas sur un scrim (AA garanti). */
.story-intro__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 0.8rem + 1.5vw, 1.6rem);
  background: linear-gradient(180deg, transparent, rgba(42,27,20,.82));
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.story-intro__text p { color: var(--text-muted); font-size: var(--text-lead); line-height: var(--leading-snug); }
.story-intro__text p + p { margin-top: var(--space-4); }

/* Les valeurs / savoir-faire en 3 cartes (hauteur égale) */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}
.value {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.value__art { width: 60px; height: 50px; margin-bottom: var(--space-4); }
.value__art svg { width: 60px; height: 50px; }
.value__title { font-size: var(--text-h5); }
.value__text { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-snug); flex: 1; }

/* Timeline d'histoire sur la bande sombre (réutilise .timeline de drip.css,
   ici en version « page » centrée). On garde la même mécanique. */
.journey { background: var(--surface-invert); color: var(--text-on-invert); }
.journey .sk-head__title, .journey .sk-head .sk-head__lead { color: var(--text-on-invert); }
.journey__lead { color: var(--text-on-invert-muted); }

/* ====================== LÉGAL (long-form) =============================== */
.legal-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 6rem;
  align-self: start;
}
.legal-toc h2 {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-4);
}
.legal-toc a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--text-small);
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  padding-left: var(--space-4);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.legal-toc a:hover { color: var(--accent-text); border-color: var(--accent); }
.legal-body { max-width: 68ch; }
.legal-section + .legal-section { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.legal-section h2 { font-size: var(--text-h3); scroll-margin-top: 6rem; }
.legal-section h3 { font-size: var(--text-h5); margin-top: var(--space-6); }
.legal-section p, .legal-section li { color: var(--text-default); line-height: var(--leading-body); }
.legal-section p + p { margin-top: var(--space-4); }
.legal-section ul { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.legal-section li { padding-left: var(--space-6); position: relative; }
.legal-section li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); opacity: 0.7;
}
.legal-section a { color: var(--accent-text); text-decoration: underline; text-underline-offset: var(--underline-offset); }
.legal-section dl { margin-top: var(--space-4); }
.legal-section dt { font-weight: 600; color: var(--text-strong); margin-top: var(--space-3); }
.legal-section dd { margin: 0; color: var(--text-muted); }
.legal-meta {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  color: var(--text-dimmed);
}

/* Allergènes : grille de pastilles hauteur égale */
.allergens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.allergen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  color: var(--text-default);
}
.allergen__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-corail); flex: none; }

/* ====================== CONTACT : 2 colonnes ============================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.contact-aside { display: grid; gap: var(--space-6); }
.contact-aside .shop {
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact-aside .shop__name { font-size: var(--text-h4); display: flex; align-items: center; gap: 0.5rem; }
.contact-aside .shop__row { display: flex; gap: 0.6rem; padding: var(--space-2) 0; color: var(--text-default); }
.contact-aside .shop__row svg { flex: none; color: var(--accent-text); margin-top: 2px; }
.contact-aside .shop__row b { color: var(--text-strong); }

/* Cartes Google Maps (2 boutiques) sous le formulaire de contact. */
.contact-maps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  margin-top: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}
.contact-maps__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.contact-maps__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.contact-maps__cap {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .contact-maps { grid-template-columns: 1fr; }
}

/* ====================== RESPONSIVE ====================================== */
@media (max-width: 920px) {
  .cake-feature,
  .origin-row,
  .shop-detail,
  .story-intro,
  .contact-layout,
  .legal-layout { grid-template-columns: 1fr; }
  .origin-row:nth-child(even) .origin-row__media,
  .shop-detail:nth-child(even) .shop-detail__visual { order: 0; }
  .steps,
  .values { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc a { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--space-3); }
}

@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .form-foot { flex-direction: column-reverse; align-items: stretch; }
  .form-foot .sk-btn { width: 100%; }
  .cake-feature__media { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .cake-feature__media,
  .cake-feature__media--mag { grid-template-columns: 1fr; }
  .cake-feature__media--mag .cake-feature__cell--tall { grid-column: auto; }
  .flavors-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   MOTION — pages internes vivantes & premium (FIX 3)
   ----------------------------------------------------------------------------
   Objectif : aucune page interne statique. Reveals chorégraphiés (directions
   variées), médias en clip-reveal, cartes qui glissent/se retournent, marquee
   de boules, micro-interactions au survol, CTA à remplissage.
   RÈGLE : on n'anime QUE transform / opacity / clip-path (compositor, cheap).
   Tout est coupé proprement en prefers-reduced-motion (bloc final) et reste
   100 % visible sans JS (.no-js neutralise tout état masqué).
   ============================================================================ */

/* ---- Variantes directionnelles du reveal (chorégraphie) ------------------ *
   On surcharge le translate de base (.sk-reveal = translateY(22px)) selon une
   classe modificatrice posée sur le même élément. .is-in remet à zéro. */
.sk-reveal--left   { transform: translateX(-34px); }
.sk-reveal--right  { transform: translateX(34px); }
.sk-reveal--scale  { transform: scale(0.92); transform-origin: center bottom; }
.sk-reveal--up-lg  { transform: translateY(40px); }
.sk-reveal--left.is-in,
.sk-reveal--right.is-in,
.sk-reveal--scale.is-in,
.sk-reveal--up-lg.is-in { transform: none; }
.no-js .sk-reveal--left,
.no-js .sk-reveal--right,
.no-js .sk-reveal--scale,
.no-js .sk-reveal--up-lg { transform: none; }

/* Sous 768px : le translateX horizontal déborde à droite hors viewport tant
   que le bloc n'est pas révélé (scroll horizontal parasite). On bascule la
   glisse en VERTICAL. Placé APRÈS la base pour gagner la cascade (sinon écrasé). */
@media (max-width: 768px) {
  .sk-reveal--left,
  .sk-reveal--right { transform: translateY(22px); }
  .sk-reveal--left.is-in,
  .sk-reveal--right.is-in { transform: none; }
}

/* ---- Clip-reveal pour les médias (le visuel se dévoile par le bas) -------- *
   Posé sur un wrapper .gx-clip ; révélé via .is-in (observer commun). */
.gx-clip {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-reveal, .8s) var(--ease-out-expo),
              -webkit-clip-path var(--dur-reveal, .8s) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path;
}
.gx-clip.is-in { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
.no-js .gx-clip { -webkit-clip-path: none; clip-path: none; }
/* léger zoom de l'image SOUS le clip → effet « la photo respire en arrivant » */
.gx-clip img { transition: transform 1.1s var(--ease-out-expo); transform: scale(1.08); }
.gx-clip.is-in img { transform: scale(1); }
.no-js .gx-clip img { transform: none; }

/* ---- Carte qui se retourne au reveal (flip 3D doux) ---------------------- *
   .gx-flip : arrive avec une rotation rentrante sur l'axe X. */
.gx-flip {
  opacity: 0;
  transform: perspective(900px) rotateX(12deg) translateY(28px);
  transform-origin: center top;
  transition: opacity var(--dur-reveal, .8s) var(--ease-out-expo),
              transform var(--dur-reveal, .8s) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.gx-flip.is-in { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); }
.no-js .gx-flip { opacity: 1; transform: none; }

/* ---- MICRO-INTERACTIONS AU SURVOL --------------------------------------- */

/* Cartes parfum : la boule rebondit + tourne légèrement, l'ombre s'accentue. */
.flavor-card__art svg,
.chip__art svg { transition: transform var(--dur-base) var(--ease-out-back, var(--ease-spring)); transform-origin: 50% 80%; }
.flavor-card:hover .flavor-card__art svg,
.flavor-card:focus-visible .flavor-card__art svg { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.chip:hover .chip__art svg { transform: translateY(-3px) rotate(-7deg) scale(1.08); }

/* Étapes « comment commander » : lift + accent du numéro au survol. */
.step {
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-tint); }
.step__num { display: inline-block; transition: transform var(--dur-base) var(--ease-out-back, var(--ease-spring)); transform-origin: left center; }
.step:hover .step__num { transform: scale(1.18) rotate(-3deg); }

/* Cartes « valeurs » (histoire) : lift + la boule rebondit. */
.value {
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
}
.value:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-tint); }
.value__art svg { transition: transform var(--dur-base) var(--ease-out-back, var(--ease-spring)); transform-origin: 50% 80%; }
.value:hover .value__art svg { transform: translateY(-4px) rotate(-6deg) scale(1.06); }

/* Lignes de timeline : l'année glisse + se teinte au survol. */
.timeline__row { transition: transform var(--dur-base) var(--ease-out-expo); }
.timeline__row:hover { transform: translateX(4px); }

/* Médias éditoriaux (origines, gâteaux, boutiques) : zoom doux au survol. */
.origin-row__media img,
.cake-feature__photo img,
.shop-detail__map { transition: transform var(--dur-slow, .7s) var(--ease-out-expo); }
.origin-row__media:hover img,
.cake-feature__photo:hover img { transform: scale(1.05); }

/* Fiches boutique : carte qui se soulève. */
.shop-detail__card { transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); }
.shop-detail__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Onglet TOC légal : glisse à droite au survol. */
.legal-toc a { transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo); }
.legal-toc a:hover { transform: translateX(4px); }

/* ---- CTA SPÉCIAL : remplissage qui glisse au survol --------------------- *
   Le bouton primaire reçoit une nappe d'accent foncé qui balaie de gauche à
   droite (transform: scaleX, origin left) → effet « ça se remplit ». Le ghost
   reçoit la même nappe en accent (texte qui passe en couleur sur-accent).
   On garde le translateY(-2px) hérité de .sk-btn. transform/opacity only. */
.sk-btn { position: relative; overflow: hidden; isolation: isolate; }
.sk-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.sk-btn--primary::after { background: var(--accent-strong); }
.sk-btn--primary:hover::after,
.sk-btn--primary:focus-visible::after { transform: scaleX(1); }
.sk-btn--ghost::after { background: var(--accent); }
.sk-btn--ghost:hover { color: var(--text-on-accent); border-color: var(--accent); }
.sk-btn--ghost:hover::after,
.sk-btn--ghost:focus-visible::after { transform: scaleX(1); }
/* sur la bande sombre (cta-band), le ghost se remplit en crème lisible */
.cta-band .sk-btn--ghost:hover { color: var(--surface-corail); }
.cta-band .sk-btn--ghost::after { background: var(--text-strong); }

/* ---- MARQUEE de boules (« wow » transversal pages internes) -------------- *
   Bande sombre, défilement infini de boules de parfum + intitulés d'origine.
   Réutilise l'infra .sk-marquee de base.css. Boules vectorisées (jamais de
   rond plat). Pause au survol (hérité de base.css). Coupé en reduced-motion. */
.flavor-marquee { background: var(--surface-invert); color: var(--text-on-invert); padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.flavor-marquee .sk-marquee { --marquee-duration: 24s; }   /* POP : ruban plus vif */
.flavor-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-inline: clamp(1.4rem, 1rem + 2vw, 2.8rem);
  white-space: nowrap;
}
.flavor-marquee__art { width: 54px; height: 45px; flex: none; }
.flavor-marquee__art svg { width: 54px; height: 45px; display: block; }
.flavor-marquee__name { font-family: var(--font-display); font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.9rem); color: var(--text-on-invert); }
.flavor-marquee__sep { color: var(--accent); font-size: 1.4rem; opacity: 0.8; }

/* ============================================================================
   ⛔ prefers-reduced-motion — coupe TOUT mouvement, contenu intact
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .sk-reveal--left, .sk-reveal--right, .sk-reveal--scale, .sk-reveal--up-lg { transform: none !important; }
  .gx-clip { -webkit-clip-path: none !important; clip-path: none !important; }
  .gx-clip img { transform: none !important; }
  .gx-flip { opacity: 1 !important; transform: none !important; }
  .flavor-card:hover .flavor-card__art svg,
  .chip:hover .chip__art svg,
  .step:hover .step__num,
  .value:hover .value__art svg,
  .origin-row__media:hover img,
  .cake-feature__photo:hover img { transform: none !important; }
  .step:hover, .value:hover, .shop-detail__card:hover, .legal-toc a:hover, .timeline__row:hover { transform: none !important; }
  .sk-btn::after { display: none !important; }
  .flavor-dialog.is-open .flavor-dialog__scoop { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ============================================================================
   HUMEUR POP (A) — pages internes : rebonds plus francs, onglets vifs
   ----------------------------------------------------------------------------
   transform/opacity only · coupé en reduced-motion (bloc ci-dessous).
   ============================================================================ */

/* Boules de carte parfum : rebond POP plus marqué. */
.flavor-card:hover .flavor-card__art svg,
.flavor-card:focus-visible .flavor-card__art svg { transform: translateY(-6px) rotate(-9deg) scale(1.12); }
.value:hover .value__art svg { transform: translateY(-6px) rotate(-9deg) scale(1.12); }

/* Onglets de saison : petit pop au survol (énergie acidulée). L'état actif est
   signalé par la couleur seule — pas de scale persistant, qui élargirait l'onglet
   actif et casserait l'égalité de taille du stack mobile (zéro quinconce). */
.season-tab:hover { transform: translateY(-3px) scale(1.04); }

/* CTA primaire POP (cohérent avec la home). */
.flavor-card,
.step,
.value { transition: transform var(--dur-base) var(--ease-spring),
                     box-shadow var(--dur-base) var(--ease-out-expo),
                     border-color var(--dur-base) var(--ease-out-expo); }
.flavor-card:hover { transform: translateY(-6px) scale(1.01); }

@media (prefers-reduced-motion: reduce) {
  .flavor-card:hover .flavor-card__art svg,
  .value:hover .value__art svg,
  .season-tab:hover,
  .flavor-card:hover { transform: none !important; }
}