/* ============================================================
   Revalta by Altus Conseil — design-system/sections/media.css
   ------------------------------------------------------------
   Section media — embarque une vidéo (présentation produit,
   témoignage, mécanisme expliqué) dans une page web, au ton
   « Architecture du calme » du reste du système.

   Lecture en click-to-play (PAS d'autoplay) : un poster est
   affiché au chargement, surmonté d'un bouton play custom.
   Au clic, la vidéo se substitue et démarre avec les controls
   natifs + son. Logique pilotée par media.js.

   Class names — CONTRAT FIGÉ (consommé par Claude.ai) :
     .revalta-section-media
       .revalta-section-media-content
         .revalta-section-media-eyebrow        (OPTIONNEL)
         .revalta-section-media-title          (OPTIONNEL)
         .revalta-section-media-player         (le <video> + bouton play)
           .revalta-section-media-video
           .revalta-section-media-play
             .revalta-section-media-play-circle
               .revalta-section-media-play-triangle (<svg>)
         .revalta-section-media-caption        (OPTIONNEL)

   Variantes de fond — quatre combinaisons, comme le hero :
     A      .revalta-section-media                              papier plat
     B      .revalta-section-media[data-revalta-broll]            papier + image
     C-flat .revalta-section-media.revalta-section-inverse        marine plat
     C      .revalta-section-media.revalta-section-inverse[data-revalta-broll]
                                                              encre + image

   Requiert : colors_and_type.css (tokens --revalta-*).
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */

.revalta-section-media {
  position: relative;
  background: var(--revalta-bg);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  isolation: isolate;

  /* Bande papier par défaut (identité, 28/09/2026) : air commandé par le
     padding, jamais par une min-height forcée. */
  padding: clamp(72px, 8vw, 120px) var(--revalta-web-pad-x);
}

/* Première section de la page : compensation globale du header fixe
   (body.revalta main > :first-child, colors_and_type.css). Rien ici. */

/* ─── En-tête centré (optionnel) — identité ───────────────────
   .revalta-section-media-head > eyebrow · titre (-title ou -title-xl) · -lede */
.revalta-section-media-head {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.revalta-section-media-head .revalta-section-media-eyebrow::after { display: none; }
.revalta-section-media-title-xl {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 84px);
  font-weight: var(--revalta-w-title);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--revalta-fg1);
  max-width: none;
  text-wrap: balance;
}
.revalta-section-media-lede {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--revalta-fg2);
  max-width: 60ch;
  text-align: center;
  text-wrap: pretty;
}
.revalta-section-media.revalta-section-inverse .revalta-section-media-title-xl { color: var(--revalta-fg1-inverse); }
.revalta-section-media.revalta-section-inverse .revalta-section-media-lede     { color: var(--revalta-fg2-inverse); }

/* Container interne — borne la mesure et centre le contenu. */
.revalta-section-media-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* ─── Eyebrow ─────────────────────────────────────────────── */

.revalta-section-media-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* Bleu encre — accent typographique unique de l'en-tête. Identique
     sur fond clair et sombre (le bleu encre tient les deux). */
  color: var(--revalta-accent);
}

/* Hairline 1px bleu encre sous l'eyebrow — courte, centrée. Cohérent
   avec le filet introduit sur sections-reference.html. */
.revalta-section-media-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--revalta-accent);
}

/* ─── Titre ───────────────────────────────────────────────── */

.revalta-section-media-title {
  margin: 0;
  /* Échelle « titre de section » alignée sur faq / comparison. */
  font-size: clamp(32px, 4vw, 56px);
  font-weight: var(--revalta-w-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--revalta-fg1);
  max-width: 22ch;
  text-wrap: balance;
}

/* ─── Player (vidéo + poster + bouton play) ───────────────── */

.revalta-section-media-player {
  position: relative;
  /* +24px de respiration au-delà du gap de 24 → ~48px sous le titre. */
  margin-top: 24px;
  width: 100%;
  max-width: var(--revalta-max);
  /* Ratio 16:9 strict — la hauteur découle de la largeur. */
  aspect-ratio: 16 / 9;
  /* Grand cadre : 28 px (identité). */
  border-radius: var(--revalta-r-panel);
  /* Letterbox éventuel en marine. */
  background: var(--revalta-bg-inverse);
  overflow: hidden;
  isolation: isolate;
}
.revalta-section-media-head + .revalta-section-media-player { margin-top: 0; }

.revalta-section-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--revalta-bg-inverse);
  border-radius: 0;
}

/* ─── Bouton play custom ──────────────────────────────────── */

/* Le bouton couvre toute la vidéo : un clic n'importe où (sur le
   cercle OU directement sur la vidéo) lance la lecture. Une fois
   lancée, il s'efface et libère les controls natifs en dessous. */
.revalta-section-media-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  /* Voile sombre sur le poster (identité) — le bouton couvre tout le lecteur. */
  background: var(--revalta-veil-inverse);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: var(--revalta-fg1);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms var(--revalta-ease);
}

.revalta-section-media-play:focus-visible {
  outline: 2px solid var(--revalta-light);
  outline-offset: -8px;
}

/* Pilule blanche « Lancer la vidéo » (identité). Le libellé est posé en
   ::after pour ne pas changer le contrat de markup (svg seul dans la pilule). */
.revalta-section-media-play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  height: auto;
  padding: 16px 28px 16px 22px;
  border: 0;
  border-radius: var(--revalta-r-pill);
  background: var(--revalta-light);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-size: 15px;
  font-weight: var(--revalta-w-medium);
  line-height: 1.2;
  white-space: nowrap;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: transform 200ms var(--revalta-ease);
}
.revalta-section-media-play-circle::after { content: 'Lancer la vidéo'; }

/* Hover / focus — scale 1.04. */
.revalta-section-media-play:hover .revalta-section-media-play-circle,
.revalta-section-media-play:focus-visible .revalta-section-media-play-circle {
  transform: scale(1.04);
}

/* Triangle play — 18 px, couleur du texte. */
.revalta-section-media-play-triangle {
  width: 18px;
  height: 18px;
  margin: 0;
  display: block;
  flex: none;
}
.revalta-section-media-play-triangle polygon {
  fill: currentColor;
}

/* État « en lecture » — le bouton s'efface (opacity + pointer-events).
   media.js pose data-revalta-media-state="playing" sur le player. */
.revalta-section-media-player[data-revalta-media-state="playing"] .revalta-section-media-play {
  opacity: 0;
  pointer-events: none;
}

/* ─── Caption ─────────────────────────────────────────────── */

.revalta-section-media-caption {
  margin: 0;
  max-width: 60ch;
  font-size: 13px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--revalta-fg2);
  text-wrap: pretty;
}
/* Légende DANS le lecteur (identité) : en bas à gauche, en papier, masquée en lecture. */
.revalta-section-media-player .revalta-section-media-caption {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 3;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--revalta-fg1-inverse);
  pointer-events: none;
  transition: opacity 200ms var(--revalta-ease);
}
.revalta-section-media-player[data-revalta-media-state="playing"] .revalta-section-media-caption {
  opacity: 0;
}

/* ────────────────────────────────────────────────────────────
   Variante inverse — fond marine (C-flat et C)
   ──────────────────────────────────────────────────────────── */
.revalta-section-media.revalta-section-inverse {
  background: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
}
.revalta-section-media.revalta-section-inverse .revalta-section-media-title   { color: var(--revalta-fg1-inverse); }
.revalta-section-media.revalta-section-inverse .revalta-section-media-caption  { color: var(--revalta-fg2-inverse); }

/* En variante claire, le cercle du bouton passe en papier
   (fg1-inverse) pour rester lisible sur un poster clair. */
.revalta-section-media.revalta-section-inverse .revalta-section-media-play {
  color: var(--revalta-fg1-inverse);
}
.revalta-section-media.revalta-section-inverse .revalta-section-media-play-circle {
  background: color-mix(in srgb, var(--revalta-bg-inverse) 28%, transparent);
}
.revalta-section-media.revalta-section-inverse .revalta-section-media-play:focus-visible {
  outline-color: var(--revalta-fg1-inverse);
}

/* ────────────────────────────────────────────────────────────
   Variante broll — fond image, voile B ou C, noise
   (rare pour cette section, mais possible pour un effet cinéma)
   ──────────────────────────────────────────────────────────── */
.revalta-section-media[data-revalta-broll] {
  background-image: var(--revalta-broll);
  background-size: cover;
  background-position: center;
}
.revalta-section-media[data-revalta-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--revalta-veil);
  z-index: 0;
}
.revalta-section-media.revalta-section-inverse[data-revalta-broll]::before {
  background: var(--revalta-veil-inverse);
}
.revalta-section-media[data-revalta-broll]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* ─── Animation d'entrée — fade discret au load ──────────── */
@media (prefers-reduced-motion: no-preference) {
  .revalta-section-media-eyebrow,
  .revalta-section-media-title,
  .revalta-section-media-player,
  .revalta-section-media-caption {
    opacity: 0;
    animation: revalta-media-fade-in 600ms var(--revalta-ease) both;
  }
  .revalta-section-media-eyebrow { animation-delay: 0ms; }
  .revalta-section-media-title   { animation-delay: 80ms; }
  .revalta-section-media-player  { animation-delay: 160ms; }
  .revalta-section-media-caption { animation-delay: 240ms; }
}
@keyframes revalta-media-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .revalta-section-media {
    padding-block: clamp(80px, 14vh, 140px);
    padding-inline: 22px;
  }
  .revalta-section-media-player { margin-top: 16px; }
  .revalta-section-media-play-circle { padding: 13px 22px 13px 18px; font-size: 14px; }
}
@media (max-width: 900px) {
  .revalta-section-media-player { border-radius: 20px; }
  .revalta-section-media-player .revalta-section-media-caption { display: none; }
}