/* =============================================================================
   DRIMBOT — Composants média (photos & vidéo générées)
   Chargé globalement après app.css. Aucun token redéfini ici.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   HERO CINÉMATIQUE — vidéo pilotée par le scroll (accueil)
--------------------------------------------------------------------------- */
.hero-cine {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: end;
  border-bottom: 1px solid var(--line);
}

.hero-cine__media,
.hero-cine__media video,
.hero-cine__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 38%;
}
.hero-cine__media { z-index: 0; }
.hero-cine__media::after {
  /* Voile de lisibilité : papier dense à gauche, transparent à droite,
     plus un léger assombrissement bas pour ancrer les puces. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg,
      color-mix(in srgb, var(--paper) 96%, transparent) 0%,
      color-mix(in srgb, var(--paper) 82%, transparent) 30%,
      color-mix(in srgb, var(--paper) 30%, transparent) 55%,
      transparent 78%),
    linear-gradient(to top,
      color-mix(in srgb, var(--paper) 88%, transparent) 0%,
      transparent 28%);
}

.hero-cine__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(5rem, 12vh, 8.5rem) clamp(3.5rem, 9vh, 6rem);
}
.hero-cine__content { max-width: 620px; }

/* Chorégraphie liée au défilement : --scroll-progress est posée par le
   contrôleur scrollvideo (0 → 1 pendant l'épinglage). */
.hero-cine__content {
  opacity: calc(1.06 - var(--scroll-progress, 0) * 1.5);
  translate: 0 calc(var(--scroll-progress, 0) * -42px);
}
.hero-cine__act2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: 1.5rem;
  pointer-events: none;
  opacity: calc((var(--scroll-progress, 0) - 0.62) * 3.4);
  translate: 0 calc((1 - min(1, calc(var(--scroll-progress, 0) * 1.18))) * 36px);
}
.hero-cine__act2 .display-lg { max-width: 17em; margin-inline: auto; text-wrap: balance; }

.hero-cine__scrollcue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: calc(1 - var(--scroll-progress, 0) * 2.6);
}
.hero-cine__scrollcue i {
  width: 1px;
  height: 34px;
  background: var(--ink-3);
  overflow: hidden;
  position: relative;
}
.hero-cine__scrollcue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: cue-drop 1.8s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes cue-drop {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

/* Mobile & reduced-motion : pas d'épinglage, pas de vidéo — affiche le poster. */
@media (max-width: 860px) {
  .hero-cine { height: auto; min-height: 86svh; }
  .hero-cine__media video { display: none; }
  .hero-cine__act2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine { height: auto; min-height: 86svh; }
  .hero-cine__media video { display: none; }
  .hero-cine__act2 { display: none; }
  .hero-cine__content { opacity: 1; translate: none; }
  .hero-cine__scrollcue { display: none; }
  .hero-cine__scrollcue i::after { animation: none; }
}

/* Quand le navigateur n'affiche pas la vidéo (mobile), le poster prend le relais
   via l'attribut poster ; on garde aussi une image <img> de secours en arrière. */
.hero-cine__fallback { display: none; }
@media (max-width: 860px) {
  .hero-cine__fallback { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine__fallback { display: block; }
}

/* ---------------------------------------------------------------------------
   FIGURES ÉDITORIALES
--------------------------------------------------------------------------- */
.figure-media {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--paper-deep);
}
.figure-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure-media figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.figure-media figcaption .pulse-dot { flex: none; }

/* Bande média pleine largeur sous les heros de pages intérieures */
.media-band { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.media-band .figure-media { aspect-ratio: 21 / 9; }
@media (max-width: 760px) {
  .media-band .figure-media { aspect-ratio: 4 / 3; }
}

/* Révélation éditoriale : rideau + zoom doux (animé via GSAP, data-media-reveal) */
[data-media-reveal] { will-change: clip-path; }
[data-media-reveal] img { will-change: transform; }

/* ---------------------------------------------------------------------------
   CARTES SECTEUR AVEC VISUEL (accueil)
--------------------------------------------------------------------------- */
.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--media .card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.card--media .card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.card--media:hover .card-media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .card--media .card-media img,
  .card--media:hover .card-media img { transition: none; transform: none; }
}
.card--media .card-body { padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

/* ---------------------------------------------------------------------------
   GALERIE ROBOT (page /le-robot)
--------------------------------------------------------------------------- */
.rb-gallery {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto auto;
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.rb-gallery .figure-media:first-child { grid-row: 1 / 3; min-height: 100%; }
.rb-gallery .figure-media:nth-child(2),
.rb-gallery .figure-media:nth-child(3) { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .rb-gallery { grid-template-columns: 1fr; grid-template-rows: none; }
  .rb-gallery .figure-media:first-child { grid-row: auto; aspect-ratio: 4 / 5; }
}