/* ============================================================
   Composant vidéo "Vu à la télé" — Cool by BRH
   Carte portrait 9:16, lecture au clic (aucun octet vidéo avant clic),
   poster + badge reportage. Autonome : s'accroche sur [data-coolvideo].
   Aucune dépendance Tailwind / Material Symbols (SVG inline).
   ============================================================ */
.coolvid{width:100%;max-width:360px;margin-inline:auto}
.coolvid-frame{
  position:relative;
  aspect-ratio:9/16;
  width:100%;
  border-radius:22px;
  overflow:hidden;
  background:#0b140d;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 48px -14px rgba(6,63,9,.5), 0 4px 14px rgba(0,0,0,.14);
  -webkit-tap-highlight-color:transparent;
}
.coolvid-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* voile dégradé haut/bas pour lisibilité badge + légende */
.coolvid-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 60%,rgba(0,0,0,.48) 100%);
  transition:opacity .3s;
}
.coolvid.playing .coolvid-frame{cursor:default}
.coolvid.playing .coolvid-frame::after{opacity:0}

/* badge reportage (haut gauche) */
.coolvid-badge{
  position:absolute;top:12px;left:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:#e11d2a;color:#fff;
  font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.32);
}
.coolvid-badge .dot{
  width:7px;height:7px;border-radius:50%;background:#fff;
  animation:coolvid-blink 1.6s steps(1) infinite;
}
@keyframes coolvid-blink{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* légende source (bas) */
.coolvid-src{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:3;
  color:#fff;pointer-events:none;
  font:600 12.5px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-shadow:0 1px 4px rgba(0,0,0,.65);
  display:flex;align-items:center;gap:6px;
}

/* bouton lecture (centré) */
.coolvid-play{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border:0;background:transparent;cursor:pointer;padding:0;
}
.coolvid-play > span{
  position:relative;
  width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.38);
  transition:transform .18s ease, background .18s ease;
}
.coolvid-play:hover > span,.coolvid-play:focus-visible > span{transform:scale(1.08);background:#fff}
.coolvid-play:focus-visible{outline:none}
.coolvid-play:focus-visible > span{box-shadow:0 0 0 4px rgba(47,143,44,.55),0 8px 26px rgba(0,0,0,.38)}
.coolvid-play svg{width:30px;height:30px;margin-left:4px;fill:#0e6012}
.coolvid-play > span::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  animation:coolvid-pulse 2.2s ease-out infinite;
}
@keyframes coolvid-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.6);opacity:0}}

/* la vidéo injectée au clic remplit le cadre */
.coolvid-video{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:contain;
  background:#000;display:block;
}

@media (prefers-reduced-motion:reduce){
  .coolvid-play > span::before{animation:none}
  .coolvid-badge .dot{animation:none}
}