/* ═══════════════════════════════════════════════════════════
   Les douceurs de Sihem
   Palette et typographie de la charte, mouvement piloté au scroll.

   Toutes les animations liées au scroll passent par une variable
   --p (0 → 1) posée par le JS sur la section concernée. Le CSS ne
   fait que traduire cette progression en transform / opacity.
   Aucune ombre portée, aucun dégradé, aucun carrousel automatique.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ivoire:        #FAF6EF;
  --blanc:         #FFFFFF;
  --sable:         #E8DCCB;
  --chocolat:      #5C2E15;
  --chocolat-clair:#8B5E3C;
  --encre:         #2A211B;

  /* Bodoni Moda : didone à fort contraste, la typo des maisons de
     pâtisserie. Ses déliés s'affinent aux grandes tailles, c'est
     ce qui lui donne son allure. Jost, géométrique, prend le relais
     en petit corps très espacé. Deux polices, deux graisses. */
  --serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --mesure: 76rem;
  --gouttiere: 1.75rem;
  --annonce: 2.375rem;
  --entete: 8.125rem;

  --t-doux: 600ms;
  --t-lent: 900ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

  --p: 0;
}

/* ── Base ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--entete);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--sable); color: var(--encre); }

:focus-visible { outline: 1px solid var(--chocolat); outline-offset: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--chocolat); color: var(--ivoire);
  padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--mesure);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ── Typographie ───────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 1.6rem + 6.4vw, 8rem); }
h2 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 4rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chocolat-clair);
  margin: 0 0 1.5rem;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  max-width: 32em;
}

.prose { max-width: 36em; }

/* ── Liens et bouton ───────────────────────────────────── */

a { color: inherit; }

.link, .prose a, .infos a {
  color: var(--chocolat);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sable);
  transition: text-decoration-color var(--t-doux) var(--courbe);
}
.link:hover, .prose a:hover, .infos a:hover { text-decoration-color: var(--chocolat); }

.btn {
  display: inline-block;
  background: var(--chocolat);
  color: var(--ivoire);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 1.0625rem 2.25rem;
  border: 1px solid var(--chocolat);
  text-decoration: none;
  transition: background var(--t-doux) var(--courbe),
              color var(--t-doux) var(--courbe);
}
.btn:hover { background: transparent; color: var(--chocolat); }

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ivoire) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid var(--sable);
}

/* Bandeau d'annonce : le seul aplat sombre du site. */
.annonce {
  margin: 0;
  height: var(--annonce);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--encre);
  color: var(--ivoire);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding-inline: var(--gouttiere);
}
.annonce:empty { display: none; }

.progression {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
}
.progression span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--chocolat);
  transform: scaleX(var(--lu, 0));
  transform-origin: 0 50%;
}

/* Logo à gauche, navigation centrée, téléphone à droite : les
   deux colonnes latérales ont la même largeur pour que le menu
   tombe exactement au centre optique. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: calc(var(--entete) - var(--annonce));
}

.btn-fin {
  justify-self: end;
  border: 1px solid var(--sable);
  padding: 0.8125rem 1.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--chocolat);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--t-doux) var(--courbe),
              background var(--t-doux) var(--courbe);
}
.btn-fin:hover {
  border-color: var(--chocolat);
  background: color-mix(in srgb, var(--sable) 26%, transparent);
}

/* Le script calligraphié n'existe que dans le logo.
   Le JPEG est sur fond blanc : `multiply` l'intègre à l'ivoire
   sans passer par un détourage. */
.logo { text-decoration: none; display: block; line-height: 0; }
.logo img { height: 3.25rem; width: auto; mix-blend-mode: multiply; }

.nav { display: flex; gap: 2.5rem; justify-self: center; }

.nav a {
  position: relative;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  padding-block: 0.25rem;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--chocolat);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 450ms var(--courbe);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--sable);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
  padding: 0.25rem 0;
  cursor: pointer;
}

/* ── Apparitions ───────────────────────────────────────── */

.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* laisse passer les jambages sans les rogner */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.mot > span {
  display: inline-block;
  transform: translateY(102%);
  transition: transform 1000ms var(--courbe);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.mots.vu .mot > span { transform: none; }

.monte {
  opacity: 0;
  transform: translateY(1.5rem);
}
.js .monte {
  transition: opacity var(--t-lent) var(--courbe),
              transform var(--t-lent) var(--courbe);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.monte.vu { opacity: 1; transform: none; }

/* ══ Scène 3D d'ouverture ══════════════════════════════════
   Le croissant est une photo studio sur fond blanc, SANS canal
   alpha. Son fond disparaît sur le blanc de la scène, mais elle
   reste une image rectangulaire opaque : elle masque tout ce qui
   passe derrière sa BOÎTE, pas seulement derrière sa silhouette.

   Conséquence : aucun texte ne doit être placé derrière elle.
   Tous les calques de texte sont en avant (translateZ positif),
   et l'échelle du croissant vient de `width`, pas de translateZ —
   ce dernier ne sert qu'au voyage en profondeur.

   (Avec un vrai PNG détouré, on pourrait repasser le titre
   derrière la silhouette. Voir assets/img/APERCU.md.)
   ══════════════════════════════════════════════════════════ */

.scene {
  position: relative;
  z-index: 0;
  height: 340vh;
  background: var(--blanc);
}

.scene-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--blanc);
}

.scene-stage {
  position: relative;
  height: 100%;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 46%;
  transform-style: preserve-3d;
  --mx: 0;
  --my: 0;
}

/* Les calques de texte : chacun à sa profondeur. */
.scene-eyebrow,
.scene-titre,
.scene-bas {
  position: absolute;
  left: 50%;
  width: min(100%, calc(var(--mesure) + 2 * var(--gouttiere)));
  padding-inline: var(--gouttiere);
  margin: 0;
}

/* translateZ à 0 sur les calques de texte : un Z positif les
   éloigne du point de fuite et les déplace physiquement — c'est
   ce qui faisait passer cette ligne sous l'en-tête. Le relief du
   titre vient d'un Z faible et de la souris, pas d'un grand Z. */
.scene-eyebrow {
  top: calc(var(--entete) + 2.5rem);
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chocolat-clair);
  opacity: calc(1 - var(--p) * 2.2);
}

/* Le titre est haut, le croissant bas : ils ne se chevauchent
   qu'à la marge, et le titre est toujours par-dessus. */
.scene-titre {
  top: 24%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 0.98;
  /* un cran sous le h1 courant : la perspective l'agrandit déjà */
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 6.25rem);
}

.scene-titre span { display: block; }

/* Les deux lignes n'ont pas la même profondeur : la seconde est
   plus proche, donc légèrement plus grande. C'est ce décalage,
   accentué par la souris, qui donne le relief au titre. */
.scene-l1 {
  transform: translateZ(0) translateY(calc(var(--p) * -0.5rem))
             rotateY(calc(var(--mx) * 1.4deg));
}

.scene-l2 {
  transform: translateZ(60px) translateY(calc(var(--p) * 0.5rem))
             rotateY(calc(var(--mx) * 2.4deg));
}

.scene-bas {
  bottom: clamp(4.5rem, 3rem + 5vw, 7rem);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  /* n'apparaît qu'une fois le croissant vraiment reculé */
  opacity: calc((var(--p) - 0.82) * 5.5);
  pointer-events: none;
}
/* Le bouton ne devient cliquable qu'une fois réellement visible. */
.scene-bas.pret { pointer-events: auto; }

.scene-bas .lead { flex: 1 1 22rem; margin: 0; }

.scene-action { display: flex; flex-direction: column; gap: 1.125rem; }

/* Le croissant : énorme et proche au départ, il recule en
   tournant. La rotation dans le plan (rotateZ) porte l'essentiel
   du mouvement — une photo trop tournée sur Y trahirait qu'elle
   est plate. */
.croissant {
  position: absolute;
  left: 50%;
  top: 72%;
  /* l'échelle de départ vient d'ici, pas de la profondeur */
  width: min(90vw, 66rem);
  height: auto;
  margin: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  /* La photo n'a pas de canal alpha et porte une ombre douce :
     en `multiply` sur le blanc de la scène, le bord du rectangle
     et l'ombre se fondent au lieu de dessiner un carré. */
  mix-blend-mode: multiply;
}

.croissant-maitre {
  transform:
    translate(-50%, -50%)
    /* Toujours en arrière des calques de texte (Z ≥ 0). Il recule
       et rétrécit ; il descend légèrement au lieu de monter, pour
       ne jamais venir croiser le titre. Trajectoire vérifiée
       image par image contre les zones de texte. */
    translateZ(calc(-10px - 890px * var(--p)))
    translateY(calc(4vh - var(--p) * 18vh))
    scale(calc(1 - 0.32 * var(--p)))
    rotateZ(calc(-13deg + 30deg * var(--p)))
    rotateX(calc(8deg - 13deg * var(--p) + var(--my) * -4deg))
    rotateY(calc(-10deg + 19deg * var(--p) + var(--mx) * 6deg));
}

.hero-note {
  font-size: 0.875rem;
  color: var(--chocolat-clair);
  margin: 0;
}
.hero-note:empty { display: none; }

/* En bas à gauche : le croissant est un croissant, ses coins
   restent blancs, le repère y est toujours lisible. */
.indice-scroll {
  position: absolute;
  left: var(--gouttiere);
  bottom: 1.75rem;
  z-index: 2;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chocolat-clair);
  opacity: calc(1 - var(--p) * 4);
  animation: respire 3.6s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.375rem); }
}

/* ── Ouverture : le cadre s'ouvre en plein écran ───────── */

.ouverture { height: 260vh; }

.ouverture-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ouverture-cadre {
  position: relative;
  overflow: hidden;
  width: calc(44% + 56% * var(--p));
  height: calc(56svh + 44svh * var(--p));
  max-width: 100vw;
}

.ouverture-media {
  width: 100%;
  height: 100%;
  transform: scale(calc(1.28 - 0.28 * var(--p)));
  transform-origin: center;
}

.ouverture-legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  color: var(--ivoire);
  opacity: calc((var(--p) - 0.55) * 2.6);
}
.ouverture-legende p { margin: 0; }
.ouverture-legende p:first-child {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: 1;
}
.ouverture-legende p:last-child {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* ── Photos ────────────────────────────────────────────── */
/* Aplat sable tant que la vraie photo n'est pas déposée.
   Le JS ne pose l'image qu'une fois le fichier chargé :
   aucune photo de stock ne peut apparaître. */

.photo {
  position: relative;
  background-color: var(--sable);
  background-size: cover;
  background-position: center;
}

.ouverture-attente {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chocolat-clair);
  white-space: nowrap;
}
.photo.chargee .ouverture-attente { display: none; }

/* ── Sections courantes ────────────────────────────────── */

.section { padding-block: clamp(5rem, 3rem + 8vw, 10rem); }

.section-alt {
  background: var(--blanc);
  border-block: 1px solid var(--sable);
}

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.section-head h2 { margin-bottom: 1.75rem; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 1rem + 6vw, 6rem);
  align-items: start;
}

/* ── Les pièces : séquence épinglée ────────────────────── */

.pieces {
  background: var(--encre);
  color: var(--ivoire);
}

.pieces-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--entete) + 1.25rem) var(--gouttiere) 2rem;
  overflow: hidden;
}

.pieces-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
}
.pieces-tete .eyebrow { color: var(--sable); margin: 0; }

.pieces-compteur {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--sable);
  font-variant-numeric: tabular-nums;
}
.pieces-compteur .barre { margin-inline: 0.375rem; opacity: 0.5; }

.pieces-scene { position: relative; }

.piece {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  opacity: var(--o, 0);
  pointer-events: none;
}
.piece.active { pointer-events: auto; }

.piece-visuel {
  position: relative;
  height: min(58svh, 34rem);
  background-color: var(--chocolat);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transform: scale(var(--s, 1));
  transform-origin: center;
  will-change: transform;
}

.piece-visuel .ouverture-attente { color: var(--sable); }

.piece-texte { transform: translateY(var(--y, 0)); }

.piece-nom {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.piece-prix {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1;
  color: var(--sable);
  margin: 0 0 1.5rem;
  font-variant-numeric: tabular-nums;
}

.piece-ligne {
  max-width: 26em;
  color: color-mix(in srgb, var(--sable) 78%, transparent);
  margin: 0 0 2rem;
}

.piece-numero {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chocolat-clair);
  margin: 0 0 1.5rem;
}

.pieces-pied { display: flex; align-items: center; }

.pieces-jauge {
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--sable) 30%, transparent);
}
.pieces-jauge span {
  display: block;
  height: 100%;
  background: var(--sable);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}

/* ── Bande horizontale ─────────────────────────────────── */

.bande {
  height: 300vh;
  background: var(--ivoire);
  border-bottom: 1px solid var(--sable);
}

.bande-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  overflow: hidden;
}

.bande-titre {
  margin: 0;
  padding-inline: var(--gouttiere);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  line-height: 1.1;
}

.bande-piste {
  display: flex;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  padding-inline: var(--gouttiere);
  transform: translate3d(calc(var(--shift, 0px) * -1), 0, 0);
  will-change: transform;
}

.bande-item {
  flex: 0 0 auto;
  width: clamp(13rem, 22vw, 21rem);
}

.bande-visuel {
  height: clamp(15rem, 30vh, 22rem);
  background-color: var(--sable);
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
}

.bande-nom {
  margin: 0;
  font-size: 0.9375rem;
}
.bande-note {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--chocolat-clair);
}

/* ── La carte ──────────────────────────────────────────── */

.carte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
}

.carte-groupe h3 {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--sable);
}

.carte-liste { list-style: none; margin: 0; padding: 0; }

.carte-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.9375rem;
  border-bottom: 1px solid var(--sable);
}
.carte-item:last-child { border-bottom: none; }

.carte-nom { flex: 0 1 auto; }

.carte-detail {
  display: block;
  font-size: 0.875rem;
  color: var(--chocolat-clair);
  line-height: 1.5;
  margin-top: 0.125rem;
}

.carte-filet {
  flex: 1 1 auto;
  height: 1px;
  background: var(--sable);
  transform: translateY(-0.2em) scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--courbe);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.carte-groupe.vu .carte-filet { transform: translateY(-0.2em) scaleX(1); }

.carte-prix {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--chocolat);
}
/* Prix pas encore arrêté : lisible, mais en retrait. Le sable seul
   sur fond blanc était invisible. */
.carte-prix[data-vide] {
  color: var(--chocolat-clair);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.carte-note {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-size: 0.875rem;
  color: var(--chocolat-clair);
  max-width: 34em;
}
.carte-note:empty { display: none; }

/* ── Parallaxe ─────────────────────────────────────────── */

.parallaxe {
  margin: 0;
  height: clamp(24rem, 62svh, 42rem);
  overflow: hidden;
}

.parallaxe-media {
  height: 128%;
  transform: translate3d(0, calc(var(--p) * -22%), 0);
  will-change: transform;
}

/* ── Informations ──────────────────────────────────────── */

.infos dl { margin: 0; }

.info-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  padding-block: 1.375rem;
  border-bottom: 1px solid var(--sable);
}
.info-row:first-child { padding-top: 0; }
.info-row:last-child { border-bottom: none; }

.info-row dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chocolat-clair);
  padding-top: 0.3125rem;
}
.info-row dd { margin: 0; }

.jours { display: block; color: var(--chocolat-clair); }
.jours:empty { display: none; }

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

.site-footer {
  border-top: 1px solid var(--sable);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

.footer-name { margin: 0; line-height: 0; }
.footer-logo { height: 4.25rem; width: auto; mix-blend-mode: multiply; }

.footer-nav { display: flex; gap: 2rem; }

.footer-nav a {
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sable);
  transition: text-decoration-color var(--t-doux) var(--courbe);
}
.footer-nav a:hover { text-decoration-color: var(--chocolat); }

.footer-legal {
  font-size: 0.8125rem;
  color: var(--chocolat-clair);
  margin: 0;
  flex-basis: 100%;
}

/* ── Page mentions légales ─────────────────────────────── */

.page-titre {
  padding-top: calc(var(--entete) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.legal { max-width: 42rem; }

.legal h2 {
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  margin-top: 3.5rem;
  margin-bottom: 1rem;
}
.legal h2:first-of-type { margin-top: 0; }

.legal dl { margin: 0 0 1.25rem; }
.legal dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chocolat-clair);
  margin-top: 1.25rem;
}
.legal dd { margin: 0.25rem 0 0; }

.a-completer {
  color: var(--chocolat-clair);
  border-bottom: 1px dashed var(--sable);
}

/* ── Adaptations ───────────────────────────────────────── */

@media (max-width: 60rem) {
  .grid-2 { grid-template-columns: 1fr; }
  .carte { grid-template-columns: 1fr; }

  .piece {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.75rem;
  }
  .piece-visuel { height: min(38svh, 20rem); }
  .piece-ligne { margin-bottom: 0; }
}

/* La navigation centrée a besoin de place : le téléphone part
   en premier, le menu se replie ensuite. */
@media (max-width: 62rem) {
  .btn-fin { display: none; }
  .header-inner { grid-template-columns: auto 1fr; }
  .nav { justify-self: end; gap: 1.75rem; }
}

@media (max-width: 44rem) {
  :root { --gouttiere: 1.375rem; --annonce: 2rem; --entete: 6.5rem; }

  .annonce { font-size: 0.625rem; letter-spacing: 0.14em; }

  .header-inner { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; justify-self: end; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ivoire);
    border-bottom: 1px solid var(--sable);
    padding: 0.5rem var(--gouttiere) 1.5rem;
  }
  .nav.ouvert { display: flex; }
  .nav a { padding-block: 0.875rem; border-bottom: 1px solid var(--sable); }
  .nav a:last-child { border-bottom: none; }

  .header-inner { position: relative; }

  .logo img { height: 2.5rem; }
  .footer-logo { height: 3.5rem; }

  .scene-bas { flex-direction: column; align-items: stretch; }
  .btn { display: block; text-align: center; }

  .scene { height: 300vh; }
  .scene-stage { perspective: 900px; }
  .croissant { width: 104vw; top: 74%; }
  .croissant-maitre {
    transform:
      translate(-50%, -50%)
      translateZ(calc(20px - 480px * var(--p)))
      translateY(calc(2vh - var(--p) * 11vh))
      rotateZ(calc(-11deg + 25deg * var(--p)))
      rotateX(calc(6deg - 10deg * var(--p)))
      rotateY(calc(-7deg + 14deg * var(--p)));
  }
  .scene-titre { top: 26%; }
  .scene-l1 { transform: translateZ(50px) translateY(calc(var(--p) * -0.5rem)); }
  .scene-l2 { transform: translateZ(90px) translateY(calc(var(--p) * 0.5rem)); }

  .ouverture-cadre { width: calc(78% + 22% * var(--p)); }

  .info-row { grid-template-columns: 1fr; gap: 0.375rem; }
  .info-row dt { padding-top: 0; }

  .footer-nav { flex-direction: column; gap: 0.625rem; }
}

/* ── Mouvement réduit : tout redevient statique ────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.statique .monte { opacity: 1; transform: none; }
.statique .mot > span { transform: none; }
.statique .carte-filet { transform: translateY(-0.2em) scaleX(1); }
.statique .indice-scroll { display: none; }

/* La scène 3D redevient une ouverture fixe : le croissant garde
   sa place, mais plus rien ne bouge. */
.statique .scene { height: auto; }
.statique .scene-sticky {
  position: static;
  height: auto;
  padding-block: calc(var(--entete) + 3rem) 4rem;
}
.statique .scene-stage { perspective: none; height: auto; }
.statique .scene-eyebrow,
.statique .scene-titre,
.statique .scene-bas,
.statique .croissant {
  position: static;
  transform: none;
  opacity: 1;
}
.statique .scene-titre { margin-block: 2rem; }
.statique .scene-l1,
.statique .scene-l2 { transform: none; }
.statique .croissant-maitre {
  width: min(70vw, 30rem);
  margin: 2rem auto;
}

.statique .scene-bas { pointer-events: auto; }

.statique .ouverture { height: auto; }
.statique .ouverture-sticky { position: static; height: auto; }
.statique .ouverture-cadre { width: 100%; height: clamp(20rem, 60svh, 40rem); }
.statique .ouverture-media { transform: none; }
.statique .ouverture-legende { opacity: 1; }

.statique .pieces-sticky {
  position: static;
  height: auto;
  display: block;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.statique .pieces-scene {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 3rem;
  margin-block: 3rem;
}
.statique .piece {
  position: static;
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.statique .piece-visuel { height: 16rem; transform: none; margin-bottom: 1.5rem; }
.statique .piece-texte { transform: none; }
.statique .piece-nom { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.statique .pieces-compteur, .statique .pieces-pied { display: none; }

.statique .bande { height: auto; }
.statique .bande-sticky {
  position: static;
  height: auto;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.statique .bande-piste {
  transform: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.statique .bande-item { scroll-snap-align: start; }

.statique .parallaxe-media { transform: none; height: 100%; }

/* ── Impression ────────────────────────────────────────── */

@media print {
  .site-header, .nav-toggle, .indice-scroll,
  .ouverture, .bande, .parallaxe { display: none; }
  .scene { height: auto; }
  .scene-sticky { position: static; height: auto; }
  .scene-eyebrow, .scene-titre, .scene-bas, .croissant {
    position: static; transform: none; opacity: 1;
  }
  .croissant-maitre { width: 12rem; }
  body { background: #fff; color: #000; }
  .monte, .mot > span { opacity: 1; transform: none; }
  .pieces { background: #fff; color: #000; }
}