/* ==========================================================================
   video.css — Gabarit des cadres vidéo Topas — v1.1 — 2026-08-19 15:20
   --------------------------------------------------------------------------
   Portée : COSMÉTIQUE UNIQUEMENT (largeur, centrage, mise en étage).
   Le fonctionnel — ratio 16:9, calage de la <video> — reste dans le
   <style id="granulo-video-overlay"> injecté par postprocess _60_video.
   Conséquence voulue : si ce fichier n'est pas publié, la vidéo reste
   correcte, seule la mise en page n'est pas appliquée.

   v1.1 (19/08/2026) :
     • accueil (body#p1) : la vidéo prend un étage à elle seule, centrée
       sur l'axe de la page et élargie (le bloc parent est
       « right-justified », d'où le décalage résiduel en demi-colonne) ;
     • icône play retirée du style inline (elle réutilisait l'image de
       fallback 640×360 écrasée en 80×80, d'où le carré sombre au centre).
       Une version propre, en data-URI, est fournie ci-dessous, désactivée.

   Réglages : les deux variables --gs-video-* ci-dessous.

   Fichier : topas_public_reserve/assets/css/video.css
   Lien injecté par _60_video (assets/css/video.css).
   Encodage : UTF-8 sans BOM.
   ========================================================================== */

:root {
  --gs-video-max:  520px;       /* cadre en demi-colonne */
  --gs-video-wide: 880px;       /* cadre sur un étage dédié */
}

/* --- Vidéo en demi-colonne (company/index, pages applications) ----------- */
/* Resserrée et centrée dans sa colonne. Les vidéos hors colonne —
   company/company-video.html — gardent la pleine largeur. */
.col-xl-6 .frame-type-textmedia figure.video,
.col-lg-6 .frame-type-textmedia figure.video {
  max-width: var(--gs-video-max);
  margin-left: auto;
  margin-right: auto;
}

/* --- Accueil : un étage pour la vidéo seule ------------------------------ */
/* La ligne texte + vidéo est dépliée : chaque colonne passe à 12/12, la
   vidéo se retrouve sous le texte et se centre sur l'axe de la page.
   :has() est supporté par tous les navigateurs courants depuis 2023 ; s'il
   manque, la règle est ignorée et on retombe sur la demi-colonne ci-dessus. */
body#p1 .row:has(figure.video) {
  flex-wrap: wrap;
}
body#p1 .row:has(figure.video) > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
body#p1 .row:has(figure.video) figure.video {
  max-width: var(--gs-video-wide);
  margin-left: auto;
  margin-right: auto;
}

/* --- Icône play centrale (DÉSACTIVÉE) ----------------------------------- */
/* Le player affiche déjà sa barre de contrôles avec un bouton de lecture,
   et les posters portent le visuel Topas : une pastille de plus surcharge
   l'image. Pour la rétablir, décommenter le bloc — cercle jaune charte
   #FFED00 en data-URI, sans fichier externe ni chemin relatif à calculer.
   NB : ::after uniquement, JAMAIS ::before, qui porte le ratio Bootstrap. */
/*
.embed.embed-responsive::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFED00
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='9,7 9,17 17,12' fill='%231a2a3a'/%3E%3C/svg%3E")
    center / 46% no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
  z-index: 2;
  opacity: .92;
}
.embed.embed-responsive:hover::after { opacity: 1; }
.embed.embed-responsive:has(video:playing)::after { opacity: 0; }
*/