/* =====================================================================
   Braillard — Widget Vidéo (braillard-video)
   Preview (poster + overlay vert + titre + bouton) -> modale plein écran.
   Pensé pour une page de contenu 2 colonnes (la colonne pose déjà le retrait).
   ===================================================================== */

.br-video { position: relative; }

/* ---- Preview ---- */
.br-video__trigger {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: center; position: relative; color: inherit; font: inherit;
  white-space: normal;   /* un reset global met nowrap sur les <button> → titres longs tronqués */
}
/* La preview verte démarre une colonne à droite du retrait de contenu (col 6),
   le titre (dans .br-video__body) reste calé à col 5 et déborde donc à sa gauche. */
.br-video__preview {
  display: block; position: relative; width: auto;
  margin-left: clamp(48px, 8vw, 138px);
  /* le vert file jusqu'au bord DROIT du viewport (Figma : 743→1728, pas de
     marge droite) : on annule le padding-right du module du modèle. */
  margin-right: calc(-1 * clamp(20px, 4vw, 56px));
  aspect-ratio: 16 / 9; min-height: 260px;
  background: #eef0ea center / cover no-repeat;
}
/* DUOTONE (issue #12) : 3 calques pilotés par --br-video-op.
   1. multiply : teinte les hautes lumières vers la couleur (blanc → vert),
      + backdrop-filter qui DÉSATURE le poster dessous (les couleurs de la
      photo ne polluent plus la teinte ; sans support = dégradation gracieuse).
   2. screen : remonte les OMBRES vers la couleur (noir → vert sombre) —
      c'est lui qui évite l'effet « rideau » écrasé du multiply seul.
   3. solid (plus bas) : aplat total quand le réglage dépasse 82 %. */
.br-video__overlay {
  position: absolute; inset: 0; background: var(--br-video-ov, #678562);
  opacity: var(--br-video-op, .82);   /* réglable dans le widget (« Opacité de l'overlay ») */
  mix-blend-mode: multiply;
  -webkit-backdrop-filter: grayscale(clamp(0, calc(var(--br-video-op, .82) * 1.25), 1));
  backdrop-filter: grayscale(clamp(0, calc(var(--br-video-op, .82) * 1.25), 1));
}
.br-video__overlay-screen {
  position: absolute; inset: 0; background: var(--br-video-ov, #678562);
  mix-blend-mode: screen;
  opacity: clamp(0, calc(var(--br-video-op, .82) * 0.32), 0.4); /* ≈26 % au réglage par défaut */
  pointer-events: none;
}
/* Le multiply TEINTE mais ne couvre jamais (à 100 % la photo resterait
   visible) : ce second calque PLEIN monte de 82 → 100 % pour finir en
   aplat de couleur à 100 %. En dessous de 82 %, il est invisible
   (rendu maquette inchangé). */
.br-video__overlay-solid {
  position: absolute; inset: 0; background: var(--br-video-ov, #678562);
  opacity: clamp(0, calc((var(--br-video-op, .82) - .82) / .18), 1);
  pointer-events: none;
}
.br-video__body {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: clamp(18px, 2vw, 32px);
  padding: 24px 0; text-align: left;
}
.br-video__title {
  font-family: var(--br-font-body); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; color: #111;
  max-width: min(560px, 92%);
}
.br-video__title em { font-family: var(--br-font-display); font-style: italic; font-weight: 300; }
.br-video__title p { margin: 0; }

.br-video__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-left: calc(clamp(48px, 8vw, 138px) + 32px);   /* bord gauche du vert (col 6) + 32px à l'intérieur (Figma : bouton 775 = image 743 + 32) */
  background: #000; color: #fff; padding: 14px 26px;
  font-family: var(--br-font-body); font-size: 16px; line-height: 1;
  transition: background .25s ease;
}
.br-video__trigger:hover .br-video__cta { background: #1a1a1a; }
.br-video__play { color: var(--br-video-ov, #678562); flex: none; }

/* ---- Modale ---- */
.br-video__modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.br-video__modal[hidden] { display: none; }
.br-video__modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.94); }
.br-video__modal-inner {
  position: relative; width: min(1120px, 92vw); max-height: 92vh;
  display: flex; flex-direction: column; color: #fff;
}
.br-video__modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 4px 2px 16px;
}
.br-video__logo { font-family: var(--br-font-display); font-weight: 400; font-size: 24px; }
.br-video__modal-title { font-family: var(--br-font-body); font-size: clamp(14px, 1.2vw, 18px); margin-left: auto; opacity: .9; }
.br-video__modal-title em { font-family: var(--br-font-display); font-style: italic; }
.br-video__modal-title p { margin: 0; display: inline; }
.br-video__close {
  background: none; border: 0; color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; padding: 0 4px; flex: none;
}
.br-video__player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.br-video__player iframe,
.br-video__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

body.br-video-open { overflow: hidden; }

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .br-video__preview { aspect-ratio: 4 / 3; min-height: 200px; margin-left: 0; margin-right: calc(-1 * clamp(20px, 4vw, 56px)); }
  .br-video__body { gap: 18px; }
  .br-video__cta { margin-left: 0; }
  .br-video__modal-inner { width: 94vw; }
}