/* =============================================================================
   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 : la vidéo scrollée reste active, même effet épinglé que sur desktop.
   Le texte passe en pleine largeur, donc on recadre sur le robot et on renforce
   le voile bas pour garder une lecture nette. */
@media (max-width: 860px) {
  .hero-cine__media video,
  .hero-cine__media img { object-position: 70% 28%; }

  /* Voile vertical : papier dense en bas (sous le texte), clair en haut (tête du
     robot + lustre visibles). Remplace le voile diagonal pensé pour le desktop. */
  .hero-cine__media::after {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--paper) 95%, transparent) 0%,
      color-mix(in srgb, var(--paper) 80%, transparent) 32%,
      color-mix(in srgb, var(--paper) 22%, transparent) 60%,
      transparent 82%);
  }

  /* Resserre le bloc de contenu pour qu'il tienne dans 100svh sans rognage. */
  .hero-cine__inner { padding-block: clamp(4.25rem, 13vh, 6rem) clamp(2.75rem, 7vh, 4rem); }
  .hero-cine__act2 .display-lg { font-size: clamp(1.9rem, 7.4vw, 2.6rem); }

  /* L'indice « faites défiler » chevaucherait le texte plein largeur : le déroulé
     de la vidéo et le fondu du contenu suffisent à signaler le scroll. */
  .hero-cine__scrollcue { display: none; }
}

/* Reduced-motion : pas d'épinglage, pas de vidéo, poster statique. */
@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; }
}

/* Image de secours : affichée uniquement en reduced-motion (la <video> y est
   masquée). Ailleurs (desktop ET mobile), l'attribut poster de la <video> assure
   le rendu avant le chargement, donc pas besoin de la doubler. */
.hero-cine__fallback { display: none; }
@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; }
}

/* ---------------------------------------------------------------------------
   GALERIE VIDÉO « RÉSEAUX SOCIAUX », rail de Reels, lecture au survol
   Composant réutilisable : partials/_video_gallery.html.twig
   --vg-bg : couleur de fond de la section (pour les fondus de bord). À régler
   sur les sections sombres : style="--vg-bg:#14181F".
--------------------------------------------------------------------------- */
.vg-section { --vg-bg: var(--paper); overflow: clip; }
.vg-section--dark { color: #fff; }
.vg-section--dark .kicker { color: var(--accent); }
.vg-section--dark .lead { color: #C7CCD6; }

.vg-rail-wrap { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }

/* Fondus de bord : signalent que le rail continue hors-champ. */
.vg-rail-wrap::before,
.vg-rail-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.5rem, 6vw, 5rem);
  z-index: 2;
  pointer-events: none;
}
.vg-rail-wrap::before { left: 0; background: linear-gradient(to right, var(--vg-bg), transparent); }
.vg-rail-wrap::after { right: 0; background: linear-gradient(to left, var(--vg-bg), transparent); }

.vg-rail {
  display: flex;
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: .5rem 1.25rem;      /* place pour l'ombre + l'anneau au survol */
  padding-inline: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vg-rail::-webkit-scrollbar { display: none; }

.vg-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 44vw, 248px);
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0E1116;
  scroll-snap-align: start;
  cursor: pointer;
  border: 0;
  padding: 0;
  text-align: left;
  color: #fff;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.vg-card:hover,
.vg-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-pop); outline: none; }
.vg-card:focus-visible { box-shadow: var(--shadow-pop), 0 0 0 3px var(--accent); }

.vg-card video,
.vg-card__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vg-card__poster { z-index: 1; }
.vg-card video { z-index: 0; background: #0E1116; }
/* Pendant la lecture, la vidéo passe au-dessus du poster. */
.vg-card.is-playing video { z-index: 2; }
/* Léger zoom du média au survol, comme les cartes secteur. */
.vg-card video,
.vg-card__poster { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.vg-card:hover video,
.vg-card:hover .vg-card__poster { transform: scale(1.04); }

/* Voile de lisibilité (haut : tag, bas : titre). */
.vg-card__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to top, rgb(8 10 14 / .82) 0%, rgb(8 10 14 / .12) 38%, transparent 60%),
    linear-gradient(to bottom, rgb(8 10 14 / .55) 0%, transparent 30%);
  pointer-events: none;
}

.vg-card__tag {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .7em;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / .14);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .2);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vg-card__title {
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .85rem;
  z-index: 4;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgb(0 0 0 / .4);
}

/* Pastille « lecture » au centre, masquée pendant la lecture. */
.vg-card__play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.vg-card__play span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgb(255 255 255 / .16);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .35);
}
.vg-card__play svg { width: 20px; height: 20px; margin-left: 3px; fill: #fff; }
.vg-card.is-playing .vg-card__play { opacity: 0; }
.vg-card.is-playing .vg-card__veil { opacity: .65; }

/* Flèches de défilement (desktop avec survol uniquement). */
.vg-arrow {
  position: absolute;
  top: calc(50% - 1rem);
  z-index: 3;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}
.vg-arrow:hover { transform: scale(1.08); background: var(--paper-deep); }
.vg-arrow svg { width: 20px; height: 20px; }
.vg-arrow--prev { left: -8px; }
.vg-arrow--next { right: -8px; }
@media (hover: hover) and (pointer: fine) {
  .vg-arrow { display: grid; }
}

.vg-hint {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vg-section--dark .vg-hint { color: #7B8290; }

@media (prefers-reduced-motion: reduce) {
  .vg-card,
  .vg-card video,
  .vg-card__poster { transition: none; }
  .vg-card:hover video,
  .vg-card:hover .vg-card__poster { transform: none; }
}