/* =============================================================================
   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; }
}