/* ==========================================================================
   Chez Fleurette — « Wow visuel » : galerie polaroid, lightbox, avant/après,
   étapes épinglées (storytelling) et parallaxe douce du héros.
   Chargé UNIQUEMENT sur index.html et experience.html (avec gallery.js).
   Règles du jeu (identiques au reste du site) :
   · chaque visuel est un emplacement .photo/.photo__inner → Margaux le
     remplit elle-même via le mode édition (main.js, drag-drop / clic) ;
   · aucun style qui casse .photo, .photo__inner, .cf-has-photo (main.js) ;
   · tout mouvement est coupé sous prefers-reduced-motion ;
   · le site reste lisible sans JS (les contrôles JS n'existent alors pas).
   ========================================================================== */

/* ══ 1. GALERIE VIVANTE (index) — carrousel scroll-snap de polaroids ══════ */

.gal { position: relative; }

/* La piste : défilement horizontal naturel (doigt / molette), snap au centre.
   Fonctionne telle quelle SANS JS — les flèches ne sont qu'un confort ajouté. */
.gal__track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 30px 12px 36px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) transparent;
  -webkit-overflow-scrolling: touch;
}

/* Une carte « polaroid » : cadre blanc, légende manuscrite, penchée en
   alternance. La photo dedans reste un .photo 100 % standard pour Margaux. */
.gal__card {
  flex: 0 0 min(74vw, 292px);
  margin: 0;
  padding: 12px 12px 6px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  scroll-snap-align: center;
  transform: rotate(-2deg);
}
.gal__card:nth-child(even) { transform: rotate(2deg); }
.gal__photo {
  min-height: 0;
  aspect-ratio: 4 / 4.6;
  padding: 18px;
  border-radius: 10px;
}
.gal__photo .photo__inner { font-size: 1.05rem; }
.gal__photo .photo__inner svg { width: 40px; height: 40px; }
.gal__cap {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--ink);
  text-align: center;
  padding: 8px 4px 6px;
  line-height: 1.2;
}
@media (prefers-reduced-motion: no-preference) {
  .gal__card { transition: transform .25s ease, box-shadow .25s ease; }
  .gal__card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-md); }
}

/* Flèches précédent / suivant — créées par gallery.js (absentes sans JS). */
.gal__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--red-dark);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.gal__btn svg { width: 22px; height: 22px; }
.gal__btn:hover { background: var(--red-soft); }
.gal__btn--prev { left: -8px; }
.gal__btn--next { right: -8px; }
@media (max-width: 720px) { .gal__btn { display: none; } } /* au doigt, on glisse */

/* Une photo posée dans la galerie s'agrandit au clic (lightbox) — jamais en
   mode édition, où le clic sert à remplacer la photo (main.js). */
body:not(.cf-editing) .gal__photo.cf-has-photo { cursor: zoom-in; }

/* ══ 2. LIGHTBOX — <dialog> natif créé par gallery.js ═════════════════════ */

.cfg-lb {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 1080px);
  max-height: 92vh;
  max-height: 92svh; /* iOS : le petit viewport (barre d'adresse déployée) */
  overflow: visible;
  overscroll-behavior: contain;
}
.cfg-lb::backdrop { background: rgba(27, 16, 13, .84); }
/* Tant que la lightbox est ouverte, le fond ne défile pas (classe posée par
   gallery.js à l'ouverture, retirée à la fermeture). */
html.cfg-lb-open, html.cfg-lb-open body { overflow: hidden; }
.cfg-lb__img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  max-height: 84svh;
  margin: 0 auto;
  border-radius: var(--r-md);
  background: #fff;
  padding: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.cfg-lb__close {
  position: absolute;
  /* -6px : dépasse un peu du passe-partout sans jamais sortir de l'écran
     (la marge latérale du dialog n'est que de ~11px sur mobile). */
  top: -6px;
  right: -6px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--red-dark);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.cfg-lb__close:hover { background: var(--red); }

/* ══ 3. AVANT / APRÈS (experience) — comparateur à curseur ════════════════ */

/* Par défaut (sans JS, ou photos pas encore posées) : les deux emplacements
   côte à côte — le message passe déjà très bien ainsi. */
.ba {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
}
.ba__pane { position: relative; }
.ba__photo { min-height: 320px; height: 100%; }
.ba__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .8rem;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  pointer-events: none;
}
.ba__pane--apres .ba__tag { left: auto; right: 14px; background: var(--green-dark); color: #fff; }
@media (max-width: 720px) { .ba { grid-template-columns: 1fr; } } /* repli en colonne */

/* Mode « comparateur » (.ba--live, posé par gallery.js quand LES DEUX photos
   sont en place) : superposition + clip-path piloté par --cut (0 → 100 %).
   Jamais actif pendant l'édition : Margaux doit pouvoir viser chaque photo. */
body:not(.cf-editing) .ba--live { grid-template-columns: 1fr; }
body:not(.cf-editing) .ba--live .ba__pane { grid-area: 1 / 1; }
body:not(.cf-editing) .ba--live .ba__photo { min-height: min(66vh, 480px); }
body:not(.cf-editing) .ba--live .ba__pane--apres {
  clip-path: inset(0 0 0 var(--cut, 50%));
}
body:not(.cf-editing) .ba--live .ba__pane--apres .ba__tag { top: auto; bottom: 14px; }

/* Format choisi par Margaux (data-cf-ratio, cf. style.css) : ici la hauteur du
   comparateur est imposée, et elle l'emporterait sur le format. On la convertit
   en largeur bornée — mêmes proportions exactes, hauteur toujours contenue dans
   l'écran, et les deux volets restent superposables au pixel près (gallery.js
   n'active le comparateur que si les deux photos ont le MÊME format). */
body:not(.cf-editing) .ba--live .ba__photo[data-cf-ratio] {
  min-height: 0;
  height: auto;
  max-width: calc(min(66vh, 480px) * var(--cf-arw, 4) / var(--cf-arh, 3));
  margin-inline: auto;
}
/* Le bloc lui-même se resserre sur la photo (attribut recopié par gallery.js
   quand les deux volets partagent le même format) : sans ça, les étiquettes
   « avant » / « après », posées sur les bords du BLOC, se retrouveraient à
   flotter loin de l'image dès qu'on choisit un format haut. */
body:not(.cf-editing) .ba--live[data-cf-ratio] {
  max-width: calc(min(66vh, 480px) * var(--cf-arw, 4) / var(--cf-arh, 3));
}

/* Le curseur : un vrai <input type=range> invisible qui couvre tout le bloc
   (accessible au clavier), doublé d'une poignée visible aux couleurs charte. */
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  /* Le doigt qui traverse le bloc en faisant défiler la page ne doit pas
     déplacer la coupe : seuls les gestes horizontaux pilotent le curseur. */
  touch-action: pan-y;
}
.ba__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cut, 50%);
  z-index: 2;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(58, 39, 36, .25);
  pointer-events: none;
}
.ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--red-dark);
  color: #fff;
  border: 3px solid #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.ba__knob svg { width: 24px; height: 24px; }
/* Focus clavier sur le range : on éclaire la poignée (le range est invisible) */
.ba__range:focus-visible ~ .ba__bar .ba__knob { outline: 3px solid var(--blue); outline-offset: 2px; }
/* Curseur et poignée n'existent que si le comparateur est actif, hors édition */
.ba__range, .ba__bar { display: none; }
body:not(.cf-editing) .ba--live .ba__range,
body:not(.cf-editing) .ba--live .ba__bar { display: block; }

/* ══ 4. STORYTELLING ÉPINGLÉ (experience) — le déroulé de la session ══════ */

/* Base (sans JS, mobile, ou reduced-motion) : petite grille de photos puis la
   liste verticale classique des étapes. Tout est visible, rien ne bouge. */
.story__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.story__photo { min-height: 200px; padding: 20px; }
.story__photo .photo__inner { font-size: 1rem; }
.story__photo .photo__inner svg { width: 38px; height: 38px; }
.story__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.story__step {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
}
.story__step h3 { font-size: 1.5rem; margin-bottom: .3em; }
.story__step p { margin: 0; color: var(--ink-soft); }
.story__num {
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--red-dark);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.story__step:nth-child(2) .story__num { background: var(--green-dark); }
.story__step:nth-child(3) .story__num { background: var(--blue); }
.story__step:nth-child(4) .story__num { background: var(--pink); color: var(--ink); }
@media (max-width: 520px) { .story__media { grid-template-columns: 1fr; } .story__photo { min-height: 160px; } }

/* Version « épinglée » (.story--live, posée par gallery.js uniquement si
   grand écran possible et mouvement accepté) : le visuel reste collé pendant
   que les étapes défilent ; la photo active suit data-active (1 à 4). */
@media (min-width: 821px) {
  .story__wrap.story--live {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .story__wrap.story--live .story__media {
    position: sticky;
    top: 92px;
    grid-template-columns: 1fr;
    margin: 0;
  }
  .story__wrap.story--live .story__photo {
    grid-area: 1 / 1;
    min-height: min(66vh, 480px);
    opacity: 0;
    transition: opacity .45s ease;
  }
  .story__wrap.story--live[data-active="1"] .story__photo:nth-child(1),
  .story__wrap.story--live[data-active="2"] .story__photo:nth-child(2),
  .story__wrap.story--live[data-active="3"] .story__photo:nth-child(3),
  .story__wrap.story--live[data-active="4"] .story__photo:nth-child(4) { opacity: 1; }
  .story__wrap.story--live .story__steps { gap: 0; }
  .story__wrap.story--live .story__step {
    min-height: 52vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 24px 8px;
    opacity: .35;
    transition: opacity .3s ease;
  }
  .story__wrap.story--live .story__step.is-active { opacity: 1; }
}
/* Même chose pour le déroulé épinglé : la hauteur imposée au visuel collant
   devient une largeur bornée dès qu'un format est choisi (cf. le comparateur
   ci-dessus). Les 4 photos étant superposées, le bloc prend la hauteur de la
   plus haute — chacune garde ses proportions, aucune n'est déformée. */
@media (min-width: 821px) {
  .story__wrap.story--live .story__photo[data-cf-ratio] {
    min-height: 0;
    max-width: calc(min(66vh, 480px) * var(--cf-arw, 4) / var(--cf-arh, 3));
    margin-inline: auto;
  }
}

/* En mode édition, on désépingle : Margaux voit et vise les 4 photos. */
body.cf-editing .story__wrap.story--live { display: block; }
body.cf-editing .story__wrap.story--live .story__media {
  position: static;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 30px;
}
body.cf-editing .story__wrap.story--live .story__photo { grid-area: auto; opacity: 1; min-height: 200px; }
body.cf-editing .story__wrap.story--live .story__photo[data-cf-ratio] { min-height: 0; }
body.cf-editing .story__wrap.story--live .story__step { opacity: 1; min-height: 0; }

/* ══ 5. PARALLAXE DOUCE DU HÉROS (index) — pur CSS, scroll-driven ═════════
   Les pétales et la mascotte dérivent de quelques pixels pendant qu'on quitte
   le héros. On anime la propriété `translate` (indépendante de `transform`) :
   elle se COMPOSE avec les flottements mn-float / cf-balance de style.css sans
   les écraser. Ignoré par les navigateurs sans animation-timeline, et coupé
   si l'utilisateur refuse le mouvement. */
@keyframes cfg-derive-haut { to { translate: 0 -44px; } }
@keyframes cfg-derive-bas  { to { translate: 0 30px; } }
@keyframes cfg-derive-mascotte { to { translate: 0 20px; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .petal--1 {
      animation-name: mn-float, cfg-derive-haut;
      animation-duration: 8s, 1s;
      animation-timing-function: ease-in-out, linear;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, both;
      animation-timeline: auto, scroll();
      animation-range: normal, 0 90vh;
    }
    .hero .petal--2 {
      animation-name: mn-float, cfg-derive-bas;
      animation-duration: 6.5s, 1s;
      animation-delay: -2s, 0s;
      animation-timing-function: ease-in-out, linear;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, both;
      animation-timeline: auto, scroll();
      animation-range: normal, 0 90vh;
    }
    .mascotte-live {
      animation-name: cf-balance, cfg-derive-mascotte;
      animation-duration: 6.1s, 1s;
      animation-timing-function: ease-in-out, linear;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, both;
      animation-timeline: auto, scroll();
      animation-range: normal, 0 90vh;
    }
  }
}

/* ══ Mouvement coupé : tout redevient sage ════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gal__track { scroll-behavior: auto; }
  .gal__card, .story__wrap.story--live .story__photo, .story__wrap.story--live .story__step { transition: none; }
}

/* La consigne « Faites glisser le curseur » n'a de sens que si le comparateur
   à curseur est actif (les deux photos posées, même format) : sinon on donnait
   une instruction pour un curseur qui n'existe pas. */
.ba-hint { display: none; }
section:has(.ba--live) .ba-hint { display: inline; }