/* Animations et sections de l'accueil.
   Tout mouvement est désactivé si le visiteur demande de réduire les animations (voir base.css),
   et les effets liés au défilement ne s'appliquent que si le navigateur les gère. */

/* ---------- Transition entre pages : l'image d'un produit glisse de la carte à la fiche ---------- */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 0.5s; }
::view-transition-group(*.image-produit) {
  animation-duration: 0.75s;
  animation-timing-function: var(--courbe);
}

/* ---------- Apparition au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.9s var(--courbe), transform 0.9s var(--courbe);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js [data-reveal].est-visible {
    opacity: 1;
    transform: none;
  }

  /* Les images se dévoilent de bas en haut.
     Le masque est posé sur les enfants : un élément entièrement masqué par clip-path
     ne serait jamais « vu » par l'observateur de défilement, donc jamais révélé. */
  .js [data-reveal="image"] {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal="image"] > * {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.3s var(--courbe);
    transition-delay: calc(var(--i, 0) * 120ms);
  }

  .js [data-reveal="image"].est-visible > * { clip-path: inset(0); }

  /* Texte qui s'allume mot après mot */
  .js .mot {
    opacity: 0.16;
    transition: opacity 0.7s var(--courbe);
    transition-delay: calc(var(--i, 0) * 38ms);
  }

  .js .est-visible .mot { opacity: 1; }
}

.panier-compteur.bump { animation: pulse 0.45s var(--courbe); }

@keyframes pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ---------- Bannière vidéo ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--couleur-principale-fonce);
  color: #fff;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 53, 59, 0.55) 0, rgba(10, 53, 59, 0) 28%),
    linear-gradient(to top, rgba(10, 53, 59, 0.82) 0, rgba(10, 53, 59, 0.3) 45%, rgba(10, 53, 59, 0.1) 100%);
}

.hero__contenu {
  position: relative;
  padding-bottom: clamp(5.5rem, 14vh, 9rem);
}

.hero .surtitre { color: var(--couleur-or-clair); text-shadow: 0 1px 10px rgba(10, 53, 59, 0.7); }

.hero__titre {
  margin: 0 0 var(--espace-l);
  font-size: clamp(3.4rem, min(14vw, 22vh), 10rem); /* limité par la hauteur : lisible aussi en paysage */
  line-height: 0.92;
  letter-spacing: 0.01em;
}

/* Chaque ligne est un masque : le texte monte de derrière */
.hero__titre .titre-ligne { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero__titre .titre-ligne > span { display: block; }
.hero__titre em { font-style: italic; color: var(--couleur-or-clair); }

.hero__texte { max-width: 30rem; margin-bottom: var(--espace-l); font-size: 1.15rem; text-shadow: 0 1px 14px rgba(10, 53, 59, 0.5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--espace-m); }

.hero__defiler {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
}

.hero__defiler:hover { color: #fff; }

.hero__defiler::after {
  content: "";
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
  transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__titre .titre-ligne > span {
    transform: translateY(112%);
    animation: monter-ligne 1.4s var(--courbe) 0.25s forwards;
  }

  .hero__titre .titre-ligne:nth-child(2) > span { animation-delay: 0.42s; }

  .hero__contenu > :not(.hero__titre) {
    opacity: 0;
    animation: fondu-haut 1.1s var(--courbe) 0.9s forwards;
  }

  .hero__contenu > .hero__texte { animation-delay: 1.05s; }
  .hero__contenu > .hero__actions { animation-delay: 1.2s; }

  .hero__defiler::after { animation: defiler 2.4s var(--courbe-douce) infinite; }
}

@keyframes monter-ligne { to { transform: none; } }

@keyframes fondu-haut {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: none; }
}

@keyframes defiler {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Écrans bas (téléphone en paysage) : la bannière doit tenir dans l'écran, sans passer sous l'en-tête */
@media (max-height: 32rem) {
  .hero__contenu { padding-top: 5rem; padding-bottom: 3.25rem; }
  .hero .surtitre { margin-bottom: 0.25rem; }
  .hero__titre { margin-bottom: var(--espace-s); }
  .hero__texte,
  .hero__defiler { display: none; }
}
/* Bouton Pause / Lecture des vidéos (ajouté par medias.js) */
.media-pause {
  position: absolute;
  right: var(--gouttiere);
  bottom: 1.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: rgba(10, 53, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s;
}

.media-pause:hover { background: rgba(10, 53, 59, 0.75); }

.media-pause__icone {
  display: inline-block;
  width: 0.55rem;
  height: 0.7rem;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.media-pause[aria-pressed="true"] .media-pause__icone {
  width: 0;
  height: 0;
  border-left: 0.6rem solid currentColor;
  border-right: 0;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
}

/* ---------- Manifeste ---------- */
.manifeste { text-align: center; }

.manifeste__texte {
  max-width: 62rem;
  margin: 0 auto;
  font-family: var(--police-titre);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.18;
}

.manifeste__texte em { color: var(--couleur-principale); }

/* ---------- Chapitres plein écran (vidéo en fond) ---------- */
.chapitre {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh; /* la vidéo remplit tout l'écran, sans bande vide au-dessus ou en dessous */
  overflow: hidden;
  background: var(--couleur-principale-fonce);
  color: #fff;
}

.chapitre__video {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
}

.chapitre__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 53, 59, 0.85) 0, rgba(10, 53, 59, 0.35) 50%, rgba(10, 53, 59, 0.2) 100%);
}

.chapitre__contenu {
  position: relative;
  max-width: 38rem;
  padding-block: clamp(4rem, 10vw, 7rem);
}

.chapitre .surtitre { color: var(--couleur-or-clair); }
.chapitre h2 { color: #fff; font-size: clamp(2.8rem, 8vw, 5.8rem); }
.chapitre p { color: #e9e2d3; }
.chapitre a { color: #fff; }

/* ---------- Écran partagé : texte d'un côté, vidéo pleine hauteur de l'autre, jusqu'au bord de l'écran ---------- */
.duo-plein {
  display: grid;
  background: var(--couleur-fond);
}

.duo-plein__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--couleur-fond-doux);
}

.duo-plein__video {
  position: absolute;
  inset: -5% 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
}

.duo-plein__texte {
  display: grid;
  align-content: center;
  padding: var(--espace-xl) var(--gouttiere);
}

.duo-plein__texte h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.duo-plein__texte p { max-width: 30rem; color: var(--couleur-texte-doux); }

/* ---------- Collections ---------- */
.section--douce { background: var(--couleur-fond-doux); }

.section__titre { text-align: center; margin-bottom: clamp(2rem, 5vw, 4rem); }

.tuiles {
  display: grid;
  gap: var(--espace-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tuile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--couleur-principale-fonce);
}

.tuile a { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }

.tuile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--courbe);
}

.tuile a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 53, 59, 0.78) 0, rgba(10, 53, 59, 0) 58%);
}

.tuile:hover img,
.tuile:focus-within img { transform: scale(1.07); }

.tuile__texte {
  position: absolute;
  left: var(--espace-l);
  right: var(--espace-l);
  bottom: var(--espace-l);
  z-index: 1;
  display: grid;
  gap: 0.25rem;
}

.tuile__numero {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--couleur-or-clair);
}

.tuile__titre { font-family: var(--police-titre); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; line-height: 1; }
.tuile__sous { font-size: 0.9rem; color: #e9e2d3; }

/* ---------- Appel à l'action ---------- */
.cta {
  padding-block: var(--espace-xl);
  background: var(--couleur-principale-fonce);
  color: #f6f2ea;
  text-align: center;
}

.cta .surtitre { color: var(--couleur-or-clair); }
.cta h2 { color: #fff; }
.cta p { max-width: 32rem; margin-inline: auto; margin-bottom: var(--espace-l); color: #d6cfbf; }

/* ---------- Fiche produit : ajout au panier ---------- */
.vol-image {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(10, 53, 59, 0.3);
}

.bouton.est-ajoute { background: var(--couleur-principale-fonce); }

/* ---------- Effets liés au défilement (navigateurs compatibles) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .chapitre__video,
    .duo-plein__video {
      animation: parallaxe linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    .hero__video {
      animation: parallaxe-hero linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    .hero__contenu {
      animation: sortie-hero linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 65vh;
    }
  }
}

@keyframes parallaxe {
  from { transform: translateY(-4%) scale(1.06); }
  to { transform: translateY(4%) scale(1.06); }
}

@keyframes parallaxe-hero {
  to { transform: translateY(8%) scale(1.08); }
}

@keyframes sortie-hero {
  to { opacity: 0; transform: translateY(-2.5rem); }
}

/* ---------- Grands écrans ---------- */
@media (min-width: 48rem) {
  .tuiles { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }

  .duo-plein {
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
    min-height: 80svh;
  }

  /* Texte à gauche (aligné sur le reste du contenu), vidéo à droite jusqu'au bord de l'écran */
  .duo-plein__media { order: 2; aspect-ratio: auto; }

  .duo-plein__texte {
    order: 1;
    padding-left: max(var(--gouttiere), calc((100vw - var(--largeur-max)) / 2 + var(--gouttiere)));
    padding-right: clamp(2rem, 6vw, 6rem);
  }
}