@charset "UTF-8";/* custom.css — Responsive video wrapper (corrigé pour éviter écrasement vertical)
   - Max-width par défaut : 85%
   - Ratio forcé via variable : --video-aspect-ratio (ex. 16/9, 4/3, 21/9)
   - Fallback : padding-bottom (16:9) pour navigateurs sans aspect-ratio
   - Neutralise contraintes de hauteur héritées si elles existent
*/

/* --- Réglages globaux (modifier ici si besoin) --- */
:root{
  --video-max-width-px: 1200px;    /* largeur max en px */
  --video-max-width: 85%;          /* largeur max relative */
  --video-aspect-ratio: 16/9;      /* <-- change ici pour forcer un autre ratio (ex. 4/3) */
}

/* Neutraliser styles de figure qui peuvent brider la vidéo */
figure[data-wf-figure], figure {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Wrapper responsive (fallback 16:9) */
.video-responsive {
  position: relative;
  width: 100%;
  max-width: min(var(--video-max-width-px), var(--video-max-width));
  margin: 0 auto;
  padding-bottom: 56.25%; /* fallback 16:9 */
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Inner container : utilisé pour le fallback (position absolute) */
.video-responsive .video-inner {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Médias remplissent le wrapper en fallback */
.video-responsive iframe,
.video-responsive video,
.video-responsive embed,
.video-responsive object {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
  box-sizing: border-box;
  object-fit: contain; /* contain évite le recadrage */
}

/* HTML5 video : préférer height:auto quand possible */
.video-responsive video {
  height: auto;
  max-height: 100%;
  display: block;
}

/* --- Si le navigateur supporte aspect-ratio : utiliser la variable et NE PAS positionner absolument --- */
@supports (aspect-ratio: 1/1) {
  .video-responsive {
    padding-bottom: 0; /* on laisse aspect-ratio gérer la hauteur */
    height: auto;
  }

  /* video-inner devient relatif pour laisser le média définir sa hauteur */
  .video-responsive .video-inner {
    position: relative;
    height: auto;
    padding-top: 0;
  }

  .video-responsive iframe,
  .video-responsive video,
  .video-responsive embed,
  .video-responsive object {
    position: relative;
    width: 100%;
    height: auto;
    /* appliquer le ratio global via variable */
    aspect-ratio: var(--video-aspect-ratio);
    object-fit: contain;
  }
}

/* Classes utilitaires (si tu veux forcer un autre ratio ponctuellement) */
.video-4x3 { aspect-ratio: 4 / 3 !important; }
.video-21x9 { aspect-ratio: 21 / 9 !important; }

/* Forcer l'écrasement uniquement si nécessaire */
.video-responsive.force-override iframe,
.video-responsive.force-override video {
  width: 100% !important;
  height: 100% !important;
}

/* Option pour forcer pleine largeur au-delà de la colonne */
.video-responsive.force-fullwidth {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Fallback pour iframes non wrapées */
iframe[src*="youtube.com/embed"],
iframe[src*="youtube-nocookie.com/embed"],
iframe[src*="player.vimeo.com"] {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* --- Neutraliser contraintes de hauteur héritées (précaution) ---
   Si ton template impose un max-height sur des conteneurs parents, cela peut écraser.
   Cette règle tente de neutraliser les max-height hérités pour les wrappers vidéos.
   Si tu préfères ne pas toucher aux règles héritées, supprime ce bloc.
*/
.video-responsive, .video-responsive * {
  max-height: none !important;
}

/* Transcription visible et espacée */
.video-responsive .transcript,
.video-responsive .transcript details {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Images responsives (posters et autres images) */
figure img, img.responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Focus visible pour accessibilité */
.video-responsive iframe:focus,
.video-responsive video:focus {
  outline: 3px solid #2a9df4;
  outline-offset: 2px;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  :root { --video-max-width: 98%; --video-max-width-px: 1000px; }
  .video-responsive { padding-bottom: 56.25%; max-width: 100%; }
  .video-responsive .transcript { font-size: 0.95rem; }
}

/* Debug (désactiver en production) */
/* .video-responsive { outline: 1px dashed rgba(0,0,0,0.05); } */


/* Fix anti-écrasement pour wrappers vidéos — coller en fin de custom.css */
.video-responsive, .video-responsive * {
  max-height: none !important;
  min-height: 0 !important;
}

/* Si un parent impose display:flex et align-items, éviter l'écrasement */
.video-responsive {
  display: block !important;
  align-self: stretch !important;
}

/* Forcer aspect-ratio si supporté, fallback conservé */
@supports (aspect-ratio: 1/1) {
  .video-responsive iframe,
  .video-responsive video,
  .video-responsive embed,
  .video-responsive object {
    aspect-ratio: var(--video-aspect-ratio, 16/9) !important;
    height: auto !important;
    width: 100% !important;
  }
}

/* Si un parent a une hauteur fixe, remonter la priorité pour le wrapper */
.video-responsive {
  max-height: none !important;
  height: auto !important;
}


/* === Fix anti-écrasement vidéos — coller en fin de custom.css ===
   - Neutralise max-height/height hérités sur les wrappers vidéos
   - Force aspect-ratio via variable --video-aspect-ratio si supporté
   - Gère parents en display:flex et autres contraintes courantes
   - Usage : coller tel quel, puis hard refresh
*/

:root{
  --video-aspect-ratio: 16/9; /* change si tu veux un autre ratio global */
}

/* S'assurer que le wrapper est un bloc et peut s'étendre */
.video-responsive {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  align-self: stretch !important; /* neutralise flex parents */
}

/* Neutraliser contraintes héritées sur parents proches (ciblé, non destructeur) */
.video-responsive, .video-responsive * {
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Si un parent est en flex et impose align-items, forcer l'étirement */
.video-responsive {
  /* si un parent est display:flex, ceci aide à éviter l'écrasement */
  align-self: stretch !important;
}

/* Forcer aspect-ratio quand supporté et éviter position:absolute qui écrase */
@supports (aspect-ratio: 1/1) {
  .video-responsive {
    padding-bottom: 0 !important;
  }
  .video-responsive .video-inner {
    position: relative !important;
    height: auto !important;
  }
  .video-responsive iframe,
  .video-responsive video,
  .video-responsive embed,
  .video-responsive object {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--video-aspect-ratio) !important;
    object-fit: contain !important;
    max-height: none !important;
  }
}

/* Fallback pour navigateurs sans aspect-ratio : conserver padding-bottom mais neutraliser hauteur héritée */
@supports not (aspect-ratio: 1/1) {
  .video-responsive {
    padding-bottom: 56.25% !important; /* fallback 16:9 */
    height: 0 !important;
  }
  .video-responsive .video-inner {
    position: absolute !important;
    inset: 0 !important;
  }
  .video-responsive iframe,
  .video-responsive video,
  .video-responsive embed,
  .video-responsive object {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* Neutraliser règles trop spécifiques du template (ciblage léger) */
.content .video-responsive,
.article .video-responsive,
.main .video-responsive,
.post .video-responsive {
  max-height: none !important;
  height: auto !important;
}

/* Transcription et légende : s'assurer qu'elles restent visibles */
.video-responsive figcaption,
.video-responsive .transcript {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  :root { --video-aspect-ratio: 16/9; }
  .video-responsive { max-width: 100% !important; }
  .video-responsive iframe,
  .video-responsive video { aspect-ratio: var(--video-aspect-ratio) !important; }
}


/* Cible le module RS Social via Module Class Suffix "rs-compact" */
.moduletable.rs-compact,
.moduletable.rs-compact .rs-social,
.rs-compact,
.rs-compact .rs-social {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 66px !important; /* 44px * 1.5 = 66px (hauteur cible ajustée) */
  overflow: hidden !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Icônes : taille et espacement augmentés de 1.5x */
.moduletable.rs-compact a,
.moduletable.rs-compact .rs-icon,
.rs-compact a,
.rs-compact .rs-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;       /* 32px * 1.5 = 48px */
  height: 48px !important;      /* 32px * 1.5 = 48px */
  min-width: 48px !important;   /* 32px * 1.5 = 48px */
  padding: 0 !important;
  margin: 0 6px !important;     /* 4px * 1.5 = 6px */
  font-size: 24px !important;   /* 16px * 1.5 = 24px */
}

/* Images éventuelles */
.moduletable.rs-compact img,
.rs-compact img {
  max-height: 48px !important;  /* 32px * 1.5 = 48px */
  width: auto !important;
  display: block !important;
}

/* Masquer labels texte */
.moduletable.rs-compact .rs-label,
.moduletable.rs-compact .rs-text,
.rs-compact .rs-label,
.rs-compact .rs-text {
  display: none !important;
}

/* Si le module est rendu en <ul><li> */
.moduletable.rs-compact ul,
.rs-compact ul {
  display: flex !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: center !important;
}

/* Ajustement pour header fixe */
.sticky-top .moduletable.rs-compact,
.sticky-top .rs-compact {
  max-height: 66px !important; /* cohérence avec la hauteur agrandie */
}

/* Responsive (taille mobile agrandie 1.5x) */
@media (max-width:767px) {
  .moduletable.rs-compact .rs-icon,
  .rs-compact .rs-icon,
  .moduletable.rs-compact img,
  .rs-compact img {
    width: 42px !important;        /* 28px * 1.5 = 42px */
    height: 42px !important;       /* 28px * 1.5 = 42px */
    max-height: 42px !important;   /* 28px * 1.5 = 42px */
    font-size: 21px !important;    /* 14px * 1.5 = 21px */
    margin: 0 5px !important;      /* 3px * 1.5 = 4.5 -> arrondi à 5px */
  }
  .moduletable.rs-compact,
  .rs-compact { max-height: 60px !important; } /* 40px * 1.5 = 60px */
}