/* =====================================================================
   Marly Festive Fragrance Finder — Feuille de style
   ---------------------------------------------------------------------
   Références :
     - MARLY-FESTIVE-FF-PROJECT.md, section 6 (design) et 14 (qualité)
     - TECHNICAL_SPEC.md (états .finder-step / .transition-overlay, iframe)
     - FESTIVE-TYPOGRAPHY-GUIDELINES.md (tokens Minion Pro + Lato)

   Sommaire :
     1. Tokens (typo, couleurs, mesures)
     2. Base + conteneur iframe
     3. Classes typographiques
     4. Étapes, fond Ken Burns, overlay de transition
     5. Logo, BACK
     6. Boutons
     7. Home
     8. Questions
     9. Résultat : carrousel et cartes
    10. Paysage (« desktop ») — tout ce qui n'est pas portrait
    11. Paysage de faible hauteur (téléphone couché, iframe basse)
    12. Préférences utilisateur (animations réduites)

   Mobile first : les règles de base valent pour le PORTRAIT (max-aspect-ratio: 1/1,
   même règle que le choix des images et des vidéos). Le paysage est en section 10.
   ===================================================================== */

/* =====================================================================
   1. Tokens
   ===================================================================== */
:root{
  /* ---- Familles (guideline §3) ---- */
  --serif: 'Minion Pro', 'Crimson Pro', Georgia, serif;
  --sans:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Graisses — Lato n'a ni 500 ni 600 : 500 → 400, 600 → 700 ---- */
  --fw-light:300; --fw-regular:400; --fw-medium:400; --fw-semibold:700; --fw-bold:700;

  /* ---- Tailles fluides (guideline §2 / §3) ---- */
  --fs-display: clamp(2.4rem, 6.5vw, 5.5rem);
  --fs-h1:      clamp(2.2rem, 5.5vw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 4vw, 3rem);
  --fs-h3:      clamp(1.375rem, 2.4vw, 1.75rem);
  --fs-h4:      clamp(1.125rem, 1.8vw, 1.375rem);
  --fs-h5:      clamp(1rem, 1.4vw, 1.125rem);
  --fs-h6:      0.8125rem;
  --fs-eyebrow: 0.6875rem;
  --fs-lead:    clamp(1rem, 1.5vw, 1.125rem);
  --fs-body:    1rem;
  --fs-body-s:  0.875rem;
  --fs-caption: 0.75rem;
  --fs-label:   0.6875rem;
  --fs-cta:     0.75rem;
  --fs-quote:   clamp(1.4rem, 3vw, 2.4rem);
  --fs-price:   clamp(1.125rem, 1.6vw, 1.25rem);

  /* Adaptation Finder (guideline §7) : H2 des questions ≈ 1.6rem à 375 px */
  --fs-question: clamp(1.6rem, 4vw, 3rem);

  /* ---- Interlignes ---- */
  --lh-tight:1.05; --lh-title:1.15; --lh-snug:1.3; --lh-body:1.7; --lh-loose:1.9;

  /* ---- Interlettrages ---- */
  --ls-display:0.14em; --ls-h1:0.12em; --ls-h2:0.04em;
  --ls-eyebrow:0.3em; --ls-label:0.24em; --ls-cta:0.16em; --ls-body:0.01em;

  /* ---- Couleurs (doc projet §6) ---- */
  --ink:       #0A0F23;   /* fond / overlay */
  --night:     #08122C;   /* fond des cartes résultat (retour client 15/10) */
  --moonlight: #F3EFE6;   /* texte */
  --star:      #FFFFFF;
  --gold:      #C18641;   /* accents */
  --ink-rgb: 10, 15, 35;
  --moonlight-rgb: 243, 239, 230;
  --gold-rgb: 193, 134, 65;

  /* ---- Mouvement (TECHNICAL_SPEC) ---- */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --overlay-duration: 0.48s;     /* fondu fond ↔ vidéo (+50 %, 16/10) : NE PAS modifier sans ajuster OVERLAY_MS (app.js) */
  --ambient-fade: 0.48s;         /* apparition / disparition brume + neige autour des vidéos (+50 %) */
  --step-duration: 0.5s;         /* fondu d'une étape, joué sous l'overlay opaque */
  --carousel-duration: 0.6s;

  /* ---- Unité de hauteur : dvh si disponible, sinon vh ---- */
  --vh: 1vh;

  /* ---- Mesures générales (portrait) ---- */
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --shadow-text: 0 1px 3px rgba(var(--ink-rgb), 0.55), 0 2px 22px rgba(var(--ink-rgb), 0.6);

  /* Boutons réponses : ~42 % de la largeur en mobile (storyboard), avec plancher lisible */
  --btn-w:   clamp(12.5rem, 42vw, 28rem);
  --btn-h:   clamp(2.75rem, calc(var(--vh) * 4.3), 5.125rem);
  --btn-gap: clamp(0.625rem, calc(var(--vh) * 3.2), 5rem);

  /* Position verticale (storyboard mobile : titre à ~26 %, réponses à ~37 %) */
  --title-top:   clamp(5.75rem, calc(var(--vh) * 25), 31rem);
  --answers-gap: clamp(1rem, calc(var(--vh) * 4.6), 6rem);

  /* Carrousel (portrait) : carte horizontale, voisines visibles sur les côtés */
  --card-w:     min(86vw, 37.5rem);
  --card-h:     clamp(19rem, calc(var(--vh) * 48), 27.25rem);      /* +15 % : air entre texte et CTA */
  --media-w:    calc(var(--card-w) * 0.38);
  --panel-w:    calc(var(--card-w) * 0.62);
  --tile-w:     calc(var(--card-w) * 0.38);
  --tile-ratio: 0.88;                          /* hauteur d'une carte voisine / carte centrale */
  --card-gap:   0.5rem;
  --card-pad-x: clamp(0.75rem, 3.6vw, 1.75rem);
  --card-pad-y: clamp(0.875rem, calc(var(--card-h) * 0.07), 1.75rem);
}

@supports (height: 1dvh){
  :root{ --vh: 1dvh; }
}

/* Mobile (portrait) : chapô plus compact, logo agrandi de 15 %. */
@media (max-aspect-ratio: 1/1){
  :root{ --lh-loose: 1.2; }
  html .finder-logo{ font-size: calc(clamp(0.95rem, 0.6rem + 1.1vw, 1.9rem) * 1.15); }
}

/* =====================================================================
   2. Base + conteneur iframe
   ===================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  background: var(--ink);
  color: var(--moonlight);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;                 /* pas de scroll horizontal ni de rebond dans l'iframe */
}

[hidden]{ display: none !important; }

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La hauteur suit l'iframe ; min-height sert quand la page est ouverte seule. */
.finder{
  position: relative;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

/* Focus clavier toujours visible */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Les titres ne reçoivent le focus que par script (annonce de l'étape) */
.finder-title:focus-visible{ outline: none; }

/* =====================================================================
   3. Classes typographiques (guideline §4, celles utilisées par le Finder)
   ===================================================================== */
.t-h2     { font-family:var(--serif); font-weight:var(--fw-regular); font-size:var(--fs-h2); line-height:var(--lh-title); letter-spacing:var(--ls-h2); }
.t-h3     { font-family:var(--serif); font-weight:var(--fw-regular); font-size:var(--fs-h3); line-height:1.2; }
.t-h4     { font-family:var(--serif); font-weight:var(--fw-regular); font-size:var(--fs-h4); line-height:var(--lh-snug); }
.t-lead   { font-family:var(--sans);  font-weight:var(--fw-regular); font-size:var(--fs-lead); line-height:var(--lh-loose); }
.t-body   { font-family:var(--sans);  font-weight:var(--fw-regular); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); }
.t-body-s { font-family:var(--sans);  font-weight:var(--fw-regular); font-size:var(--fs-body-s); line-height:1.8; }
.t-caption{ font-family:var(--sans);  font-weight:var(--fw-regular); font-size:var(--fs-caption); line-height:1.6; }
.t-label  { font-family:var(--sans);  font-weight:var(--fw-medium);  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; }
.t-cta    { font-family:var(--sans);  font-weight:var(--fw-medium);  font-size:var(--fs-cta); letter-spacing:var(--ls-cta); text-transform:uppercase; }

/* Titres de question : niveau H2, casse phrase (pas de capitales), min ~1.6rem */
.t-question{ font-family:var(--serif); font-weight:var(--fw-regular); font-size:var(--fs-question); line-height:var(--lh-title); letter-spacing:var(--ls-h2); }

/* =====================================================================
   4. Étapes, fond Ken Burns, overlay de transition (TECHNICAL_SPEC)
   ===================================================================== */

/* Les 6 étapes sont superposées ; une seule porte .is-active. */
.finder-step{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--step-duration) var(--ease-smooth), visibility var(--step-duration);
}
.finder-step.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Coupe la transition lors d'un swap sous overlay si nécessaire (fix flash) */
.finder-step.no-transition{ transition: none !important; }

.finder-step__bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

/* Cible du Ken Burns : le WRAPPER, jamais l'<img>. */
.finder-step__image-wrap{
  position: absolute;
  inset: 0;
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
}
.finder-step__image-wrap picture{ display: contents; }
.finder-step__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

/* Voile de lisibilité : haut (logo) et bas (BACK), plus un léger voile global. */
.finder-step__bg::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--ambient-fade) var(--ease-smooth);
  background:
    linear-gradient(to bottom,
      rgba(var(--ink-rgb), 0.55) 0%,
      rgba(var(--ink-rgb), 0.12) 20%,
      rgba(var(--ink-rgb), 0.10) 58%,
      rgba(var(--ink-rgb), 0.42) 100%);
}

/* ---- Ambiance : brume nuageuse + neige ----
   Au-dessus du fond et de son voile, sous les textes ; jamais touchée par le
   Ken Burns (sœur du wrapper). Les animations ne tournent que sur l'étape active.
   Brume : 2 textures transparentes raccordables (assets/images/fx/). Chaque calque
   fait 2 largeurs d'écran avec une tuile par écran : translateX(-50 %) boucle
   sans couture, et seul le compositeur travaille (pas de repaint). */
.finder-ambient{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--ambient-fade) var(--ease-smooth);
}
/* Pendant une transition vidéo : brume, neige ET voile de lisibilité s'effacent, puis
   reviennent avec le texte (app.js, setAmbient). Le voile n'existe pas dans les vidéos :
   le retirer pendant les raccords évite un saut de luminosité fond ↔ vidéo. */
.finder.fx-out .finder-ambient,
.finder.fx-out .finder-step__bg::after{ opacity: 0; }
.finder-ambient__fog{
  position: absolute;
  left: 0;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  will-change: transform;
  animation: ff-fog-drift linear infinite;
}
/* Plan lointain : grand voile lent sur toute la hauteur */
.finder-ambient__fog--far{
  top: 0;
  height: 100%;
  background-image: url('../images/fx/fog-2.webp');
  opacity: 0.055;
  animation-duration: 128s;
}
/* Plan proche : volutes plus marquées dans la moitié basse, plus rapides */
.finder-ambient__fog--near{
  bottom: -8%;
  height: 62%;
  background-image: url('../images/fx/fog-1.webp');
  opacity: 0.075;
  animation-name: ff-fog-drift, ff-fog-breathe;
  animation-duration: 72s, 14s;
  animation-timing-function: linear, ease-in-out;
  animation-direction: normal, alternate;
}
@keyframes ff-fog-drift{
  from{ transform: translate3d(-50%, 0, 0); }
  to  { transform: translate3d(0, 0, 0); }
}
@keyframes ff-fog-breathe{
  from{ opacity: 0.055; }
  to  { opacity: 0.095; }
}
.finder-step:not(.is-active) .finder-ambient__fog{ animation-play-state: paused; }

/* Neige : un seul <canvas> (app.js) placé dans l'étape active */
.finder-ambient__snow{
  position: absolute;
  inset: 0;
}
.finder-snow{
  display: block;
  width: 100%;
  height: 100%;
}

.finder-step__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--gutter);
  overflow-x: hidden;
  overflow-y: auto;               /* filet de sécurité sur très petite hauteur */
  overscroll-behavior: contain;
  scrollbar-width: none;
  text-align: center;
}
.finder-step__content::-webkit-scrollbar{ display: none; }

/* Overlay noir : porte l'unique <video>. Fond « ink » → noir plein si la vidéo manque. */
.transition-overlay{
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--overlay-duration) var(--ease-smooth), visibility var(--overlay-duration);
  pointer-events: none;
  background-color: var(--ink);
}
/* Coupe franche (app.js, VIDEO_DIRECT_CUT) : bascule sans fondu */
.transition-overlay.is-instant{ transition: none !important; }
.transition-overlay.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;           /* bloque les clics pendant la transition */
}
.transition-overlay__video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  background: var(--ink);
}
.transition-overlay__video::-webkit-media-controls{ display: none !important; }

/* Intro (vidéo 01 avant la home) : le contenu de la home reste caché sous
   l'overlay noir jusqu'à la fin de la vidéo ; app.js retire .is-intro.
   Filet de sécurité : si le script ne se charge pas, tout apparaît après 15 s. */
.finder.is-intro #step1 [data-fade]{
  opacity: 0;
  animation: ff-intro-safety-in 0.6s ease 15s forwards;
}
.finder.is-intro .transition-overlay{
  animation: ff-intro-safety-out 0.32s ease 15s forwards;
}
@keyframes ff-intro-safety-in{ to{ opacity: 1; } }
@keyframes ff-intro-safety-out{ to{ opacity: 0; visibility: hidden; } }

/* =====================================================================
   5. Logo, BACK
   ===================================================================== */
.finder-logo{
  position: absolute;
  z-index: 10;
  top: clamp(1rem, calc(var(--vh) * 3.7), 4.25rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  color: var(--star);
  font-family: var(--serif);
  font-size: clamp(0.95rem, 0.6rem + 1.1vw, 1.9rem);
  line-height: 1;
  white-space: nowrap;
  text-shadow: var(--shadow-text);
  pointer-events: none;
  user-select: none;
}
.finder-logo__name{ letter-spacing: 0.13em; margin-right: -0.13em; }
.finder-logo__de{ text-transform: none; }
.finder-logo__city{ font-size: 0.72em; letter-spacing: 0.16em; margin-right: -0.16em; }

.finder-back{
  position: absolute;
  z-index: 12;
  left: calc(var(--gutter) - 0.75rem);
  bottom: clamp(0.5rem, calc(var(--vh) * 2.6), 2rem);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.75rem;
  border: 0;
  background: none;
  color: var(--star);
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: var(--shadow-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-smooth), visibility 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.finder-back.is-visible{
  opacity: 0.6;
  visibility: visible;
}
.finder-back.is-visible:focus-visible{ opacity: 1; }
@media (hover: hover){
  .finder-back.is-visible:hover{ opacity: 1; }
}

/* =====================================================================
   6. Boutons
   ===================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth),
              border-color 0.25s var(--ease-smooth);
}

/* Réponses + START : fond sombre translucide, texte blanc. */
.btn--choice{
  width: var(--btn-w);
  max-width: 100%;
  min-height: var(--btn-h);
  padding: 0.5rem 1rem;
  background-color: rgba(var(--ink-rgb), 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--star);
}
/* Libellés de réponse : Lato 400, casse normale, interlettrage 0.04em */
.btn--answer{
  font-family: var(--sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.25;
  letter-spacing: 0.04em;
}
/* Survol et réponse choisie : fond blanc, texte sombre. */
.btn--choice.is-selected,
.btn--choice[aria-pressed="true"],
.btn--choice:active{
  background-color: var(--star);
  color: var(--ink);
}
@media (hover: hover){
  .btn--choice:hover{
    background-color: var(--star);
    color: var(--ink);
  }
}

/* Discover : contour clair, remplissage au survol (pas de soulignement). */
.btn--outline{
  min-height: 2.5rem;
  padding: 0.55rem 1.6rem;
  border: 1px solid rgba(var(--moonlight-rgb), 0.75);
  background: transparent;
  color: var(--star);
}
.btn--outline:active{
  background-color: var(--star);
  border-color: var(--star);
  color: var(--ink);
}
@media (hover: hover){
  .btn--outline:hover{
    background-color: var(--star);
    border-color: var(--star);
    color: var(--ink);
  }
}

/* =====================================================================
   7. Home
   ===================================================================== */
.finder-step--home .finder-step__bg::after{
  background:
    linear-gradient(to bottom,
      rgba(var(--ink-rgb), 0.5) 0%,
      rgba(var(--ink-rgb), 0.05) 22%,
      rgba(var(--ink-rgb), 0.05) 50%,
      rgba(var(--ink-rgb), 0.6) 100%);
}
.finder-copy--home{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;                                    /* bloc ancré en bas (storyboard) */
  padding-bottom: clamp(2rem, calc(var(--vh) * 8.1), 9.75rem);
}
.finder-title{
  margin: 0;
  color: var(--star);
  text-shadow: var(--shadow-text);
  text-wrap: balance;
}
.finder-lead{
  max-width: 46rem;
  margin: 1.2rem 0 0;                                  /* Titre → Chapô : 1.2rem */
  color: var(--moonlight);
  letter-spacing: var(--ls-body);
  text-shadow: var(--shadow-text);
  text-wrap: pretty;
}
.finder-copy--home .btn--cta{
  margin-top: 2rem;                                    /* Chapô → CTA : 2rem */
}

/* =====================================================================
   8. Questions
   ===================================================================== */
.finder-copy--question{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--title-top);
  padding-bottom: 3.5rem;                              /* réserve pour BACK */
}
.finder-title--question{
  max-width: min(100%, 22em);
}
/* Zone de réponses : hauteur fixe de 5 boutons, pour que 3 réponses (Q1)
   restent centrées au même endroit que 5 (storyboard). */
.finder-answers{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  width: 100%;
  min-height: calc(var(--btn-h) * 5 + var(--btn-gap) * 4);
  margin-top: var(--answers-gap);
}

/* =====================================================================
   9. Résultat : carrousel et cartes
   ===================================================================== */
.finder-step--result .finder-step__bg::after{
  background: rgba(var(--ink-rgb), 0.25);
}
.finder-step--result .finder-step__content{
  padding: 0;                                          /* carrousel pleine largeur */
}
.finder-result{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding-top: clamp(5rem, calc(var(--vh) * 13.3), 16rem);
  padding-bottom: 3.75rem;                             /* réserve pour BACK */
}
.finder-title--result{
  max-width: min(100%, 24em);
  padding: 0 var(--gutter);
}
.finder-result__subtitle{
  margin: 0.5rem 0 0;
  padding: 0 var(--gutter);
  color: var(--moonlight);
  text-shadow: var(--shadow-text);
}

/* ---- Carrousel ----
   --i    : index de la carte centrale (posé par app.js)
   --drag : déplacement en cours pendant un swipe (px)
   La piste est centrée sur la carte active : son bord gauche se trouve à
   i × (largeur d'une voisine + écart), on recule encore d'une demi-carte. */
.carousel{
  --i: 0;
  --drag: 0px;
  position: relative;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  padding: 1rem 0;
}
.carousel__viewport{
  position: relative;
  width: 100%;
  height: var(--card-h);
  overflow: hidden;
  touch-action: pan-y;                                 /* le swipe horizontal est géré en JS */
  -webkit-user-select: none;
  user-select: none;
}
.carousel__track{
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate3d(
    calc((var(--i) * (var(--tile-w) + var(--card-gap)) + var(--card-w) / 2) * -1 + var(--drag)), 0, 0);
  transition: transform var(--carousel-duration) var(--ease-smooth);
  will-change: transform;
}
.carousel.is-dragging .carousel__track,
.carousel.no-transition .carousel__track,
.carousel.no-transition .card,
.carousel.no-transition .card *{
  transition: none !important;
}

/* ---- Carte ----
   Voisine : vignette packshot seule (panneau replié), légèrement plus basse.
   Centrale : packshot à gauche + panneau bleu nuit à droite. */
.card{
  --fit: 1;                                            /* réduit par app.js si le texte déborde */
  flex: none;
  display: flex;
  height: calc(var(--card-h) * var(--tile-ratio));
  overflow: hidden;
  background: var(--night);
  cursor: pointer;
  opacity: 0.92;
  transition: height var(--carousel-duration) var(--ease-smooth),
              opacity var(--carousel-duration) var(--ease-smooth),
              box-shadow var(--carousel-duration) var(--ease-smooth);
}
.card.is-active{
  height: var(--card-h);
  opacity: 1;
  cursor: default;
  box-shadow: 0 1.25rem 3.5rem rgba(var(--ink-rgb), 0.55);
}
.card__media{
  flex: none;
  width: var(--tile-w);
  height: 100%;
  background: var(--night);
  transition: width var(--carousel-duration) var(--ease-smooth);
}
.card.is-active .card__media{ width: var(--media-w); }
.card__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;                                 /* packshot entier : ni coupé, ni déformé */
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}
.card__panel{
  flex: none;
  width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  transition: width var(--carousel-duration) var(--ease-smooth);
}
.card.is-active .card__panel{ width: var(--panel-w); }

/* Le contenu garde une largeur et une hauteur FIXES (celles de la carte centrale) :
   il ne se recompose pas pendant l'animation, et reste mesurable par app.js. */
.card__panel-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--panel-w);
  height: var(--card-h);
  padding: var(--card-pad-y) var(--card-pad-x);
  text-align: left;
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}
.card.is-active .card__panel-inner{
  opacity: 1;
  transition-delay: 0.22s;
}
/* Rien ne se comprime : un contenu trop haut déborde, ce que app.js détecte (--fit). */
.card__panel-inner > *{ flex-shrink: 0; max-width: 100%; }
/* Dernier recours si le texte ne tient toujours pas : la phrase d'intro est masquée. */
.card--compact .card__intro{ display: none; }
/* … et le descriptif d'un coffret se resserre. */
.card--compact .card__description{ line-height: 1.4; }
.card--compact .card__pyramid--description{ margin-top: 0.5rem; }
.card--compact .card__pyramid{ margin-bottom: 0.625rem; }

/* Typographie de la carte : proportionnelle à la hauteur de carte, avec planchers
   lisibles (nom ~1.1rem, notes ~0.8rem en mobile), × --fit si le contenu déborde. */
.card__name{
  margin: 0;
  color: var(--star);
  font-family: var(--serif);
  font-weight: var(--fw-regular);
  font-size: calc(clamp(1.1rem, var(--card-h) * 0.064, 2.4rem) * var(--fit));
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.card__pyramid{
  width: 100%;
  margin-top: calc(clamp(0.5rem, var(--card-h) * 0.06, 3rem) * var(--fit));
}
.card__intro{
  margin: 0 0 calc(clamp(0.3rem, var(--card-h) * 0.022, 0.9rem) * var(--fit));
  color: var(--moonlight);
  font-family: var(--serif);
  font-weight: var(--fw-regular);
  font-size: calc(clamp(0.9rem, var(--card-h) * 0.04, 1.5rem) * var(--fit));
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.card__notes{
  display: flex;
  flex-direction: column;
  gap: calc(clamp(0.35rem, var(--card-h) * 0.045, 1.9rem) * var(--fit));
  margin: 0;
}
.card__note{ margin: 0; }
/* Descriptif d'un coffret multi-parfums (à la place de la pyramide) */
.card__description{
  margin: 0;
  color: var(--moonlight);
  font-family: var(--sans);
  font-weight: var(--fw-regular);
  font-size: calc(clamp(0.8rem, var(--card-h) * 0.032, 1.125rem) * var(--fit));
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  text-wrap: pretty;
}
.card__note-label{
  margin: 0;
  color: var(--gold);                                  /* #C18641 */
  font-family: var(--serif);                           /* Minion Pro (retour client 15/10) */
  font-weight: var(--fw-regular);
  font-size: calc(clamp(0.9rem, var(--card-h) * 0.04, 1.4rem) * var(--fit));   /* un cran au-dessus du texte des notes */
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card__note-value{
  margin: 0;
  color: var(--moonlight);
  font-family: var(--sans);
  font-weight: var(--fw-regular);
  font-size: calc(clamp(0.8rem, var(--card-h) * 0.034, 1.25rem) * var(--fit));
  line-height: 1.45;
  letter-spacing: var(--ls-body);
}
/* Texte de la carte centrale sélectionnable et copiable (le reste du carrousel
   reste non sélectionnable pour ne pas gêner le swipe). */
.card.is-active .card__panel-inner{
  -webkit-user-select: text;
  user-select: text;
  cursor: auto;
}

/* Discover : à l'emplacement des contenances / prix du storyboard (supprimés).
   Sans URL (Excel pas encore rempli), il s'affiche à l'identique (survol compris)
   mais ne mène nulle part. */
/* Le bloc texte garde toujours un espace sous lui : le CTA ne colle jamais aux notes. */
.card__pyramid{ margin-bottom: calc(clamp(1rem, var(--card-h) * 0.06, 2.25rem) * var(--fit)); }
/* Discover + Shop your gift : côte à côte si la place le permet, sinon l'un sous l'autre. */
.card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.75rem;
  width: 100%;
  margin-top: auto;                                    /* desktop : ancrés en bas de la carte */
}
.card__cta{
  flex: none;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}
.card__cta[aria-disabled="true"]{ cursor: default; }
.card .btn--outline{
  min-height: calc(clamp(2.25rem, var(--card-h) * 0.075, 2.875rem));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Survol du CTA de fin : remplissage blanc (règle .btn--outline) + reflet lumineux
   qui balaie le bouton et halo doré discret. */
.card__cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.35s var(--ease-smooth), color 0.35s var(--ease-smooth),
              border-color 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
.card__cta::before{
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(var(--gold-rgb), 0.35), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.card__cta:focus-visible{
  outline: 1px solid var(--star);
  outline-offset: 3px;
}
.card__cta:active,
.card__cta:focus-visible{
  background-color: var(--star);
  border-color: var(--star);
  color: var(--ink);
  box-shadow: 0 0 1.5rem rgba(var(--gold-rgb), 0.35);
}
@media (hover: hover){
  .card__cta:hover{
    background-color: var(--star);
    border-color: var(--star);
    color: var(--ink);
    box-shadow: 0 0 1.5rem rgba(var(--gold-rgb), 0.35);
  }
  .card__cta:hover::before{
    animation: ff-cta-shine 0.9s var(--ease-smooth) forwards;
  }
}
@keyframes ff-cta-shine{
  0%  { left: -60%; opacity: 1; }
  100%{ left: 120%; opacity: 1; }
}

/* Paysage / desktop : les deux boutons restent sur UNE ligne, à parts égales
   (libellé sur deux lignes si besoin) — la hauteur de carte y est fixe. */
@media not all and (max-aspect-ratio: 1/1){
  .card__actions{ flex-wrap: nowrap; }
  .card .card__cta{
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    line-height: 1.3;
  }
}

/* ---- Mobile (portrait) : la carte centrale prend la hauteur de son contenu ----
   Marges intérieures identiques en haut et en bas (--card-pad-y), aucune hauteur
   fixe : rien n'est réduit ni coupé. Hauteur minimale = celle des cartes voisines,
   contenu alors centré verticalement. Boutons pleine largeur, l'un sous l'autre. */
@media (max-aspect-ratio: 1/1){
  .carousel__viewport{ height: auto; }
  .carousel__track{
    position: relative;
    top: auto;
    height: auto;
    min-height: calc(var(--card-h) * var(--tile-ratio));
  }
  .card.is-active{ height: auto; }
  .card__media{
    position: relative;
    height: auto;
    align-self: stretch;
  }
  .card__image{
    position: absolute;
    inset: 0;
  }
  .card__panel{ height: auto; }
  .card__panel-inner{
    height: auto;
    min-height: calc(var(--card-h) * var(--tile-ratio));
    justify-content: center;
  }
  .card__actions{
    flex-direction: column;
    margin-top: 0;
  }
  .card .card__cta{
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ---- Chevrons ---- */
.carousel__nav{
  position: absolute;
  z-index: 3;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 3.5rem;
  margin-top: -1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--star);
  cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(var(--ink-rgb), 0.8));
  transition: opacity 0.25s var(--ease-smooth), visibility 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.carousel__nav svg{ width: 0.75rem; height: 1.5rem; }
.carousel__nav--prev{ left: clamp(0rem, 1.2vw, 1.25rem); }
.carousel__nav--next{ right: clamp(0rem, 1.2vw, 1.25rem); }
/* Flèche masquée quand on ne peut pas aller plus loin dans ce sens */
.carousel__nav[disabled]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Une seule carte : ni chevrons ni sous-titre */
.carousel.is-single .carousel__nav{ display: none; }

/* ---- Message neutre (aucun résultat / erreur) ---- */
.finder-message{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
  padding: 0 var(--gutter);
}
.finder-message__text{
  max-width: 34rem;
  margin: 0 0 2rem;
  color: var(--moonlight);
  text-shadow: var(--shadow-text);
}

/* =====================================================================
   10. Paysage (« desktop ») — même règle que les images : tout sauf portrait
   Références : storyboard/ (1920 × 1080)
   ===================================================================== */
@media not all and (max-aspect-ratio: 1/1){
  :root{
    --gutter: clamp(1.5rem, 4vw, 4rem);

    /* Boutons : 320 × 56 px à 1080 px de haut, pas de 94 px */
    --btn-w:   clamp(15rem, 16.7vw, 20rem);
    --btn-h:   clamp(2.75rem, calc(var(--vh) * 5.2), 3.5rem);
    --btn-gap: clamp(0.625rem, calc(var(--vh) * 3.5), 2.375rem);

    /* Titre à ~27 % de la hauteur, réponses à ~41.5 % */
    --title-top:   clamp(5.5rem, calc(var(--vh) * 24.4), 20rem);
    --answers-gap: clamp(1rem, calc(var(--vh) * 11.6), 9rem);

    /* Carte : 950 × 598 px à 1920 × 1080 (packshot 392 + panneau 558), voisines 411 × 530 */
    --card-h:     min(calc(var(--vh) * 55.4), 31.2vw);
    --card-w:     calc(var(--card-h) * 1.588);
    --media-w:    calc(var(--card-h) * 0.655);
    --panel-w:    calc(var(--card-h) * 0.933);
    --tile-w:     calc(var(--card-h) * 0.687);
    --tile-ratio: 0.886;
    --card-gap:   clamp(0.5rem, 1vw, 1.25rem);
    --card-pad-x: clamp(1rem, calc(var(--card-h) * 0.118), 4.5rem);
    --card-pad-y: clamp(0.875rem, calc(var(--card-h) * 0.09), 3.5rem);
  }

  .finder-logo{ top: clamp(0.875rem, calc(var(--vh) * 5.7), 4rem); }

  /* Les questions tiennent sur une ligne dès que la largeur le permet (storyboard) */
  .finder-title--question{ max-width: min(100%, 32em); }

  .finder-copy--home{
    padding-bottom: clamp(2rem, calc(var(--vh) * 11.3), 8rem);
  }

  .finder-result{
    padding-top: clamp(4.5rem, calc(var(--vh) * 15.4), 11rem);
    padding-bottom: clamp(2.5rem, calc(var(--vh) * 5), 4rem);
  }
  .finder-result__subtitle{ margin-top: 0.35rem; }

  .carousel__nav{ width: 3.5rem; height: 4.5rem; margin-top: -2.25rem; }
  .carousel__nav svg{ width: 1.125rem; height: 2.25rem; }
}

/* =====================================================================
   11. Paysage de faible hauteur (téléphone couché, iframe basse)
   Le contenu est compacté pour tenir sans défilement.
   ===================================================================== */
@media not all and (max-aspect-ratio: 1/1){
  @media (max-height: 34rem){
    :root{
      --fs-question: clamp(1.25rem, calc(var(--vh) * 6.4), 1.75rem);
      --title-top: clamp(3.25rem, calc(var(--vh) * 19), 5.5rem);
      --answers-gap: clamp(0.75rem, calc(var(--vh) * 5), 1.5rem);
      --btn-w: clamp(9rem, 22vw, 13.5rem);
      --btn-h: 2.75rem;
      --btn-gap: 0.625rem;
      --card-h: clamp(11.5rem, calc(var(--vh) * 100 - 8.25rem), 24rem);
    }
    .finder-logo{ top: 0.75rem; font-size: 0.875rem; }

    /* Réponses sur 3 colonnes : 5 réponses = 2 rangées */
    .finder-answers{
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      max-width: calc(var(--btn-w) * 3 + var(--btn-gap) * 2);
      min-height: 0;
    }

    .finder-copy--home{ padding-bottom: clamp(1rem, calc(var(--vh) * 7), 2.5rem); }
    .finder-copy--home .t-h2{ font-size: var(--fs-question); }
    .finder-lead{ margin-top: 0.5rem; line-height: 1.6; }
    .finder-copy--home .btn--cta{ margin-top: 1rem; }

    .finder-result{ padding-top: 2.75rem; padding-bottom: 0.5rem; }
    .finder-result__subtitle{ display: none; }
    .carousel{ padding: 0.5rem 0; }
    .finder-back{ bottom: 0.125rem; }
  }
}

/* Portrait de faible hauteur (petits téléphones, ex. 320 × 568) : le titre remonte
   et les boutons se resserrent pour que 5 réponses tiennent au-dessus de BACK. */
@media (max-aspect-ratio: 1/1) and (max-height: 40rem){
  :root{
    --title-top: clamp(4.5rem, calc(var(--vh) * 15), 6rem);
    --answers-gap: 1rem;
    --btn-gap: 0.5rem;
  }
  .finder-copy--question{ padding-bottom: 3rem; }
  .finder-result{ padding-top: clamp(4.25rem, calc(var(--vh) * 11), 5rem); }
}

/* =====================================================================
   12. Préférences utilisateur
   prefers-reduced-motion : pas de Ken Burns ni de vidéo (géré dans app.js),
   et transitions CSS réduites au strict minimum.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  :root{ --carousel-duration: 0.01s; }
  .card__panel-inner,
  .card.is-active .card__panel-inner{ transition-duration: 0.01s; transition-delay: 0s; }
  .btn, .finder-back, .carousel__nav{ transition-duration: 0.01s; }
  /* Brume figée (la neige est retirée par app.js), pas de reflet sur le CTA */
  .finder-ambient__fog{ animation: none; transform: translate3d(-25%, 0, 0); }
  .card__cta:hover::before{ animation: none; }
}