/* =========================================================
   /actualites – Bloc "Dernières vidéos" (PROPRE)
   HTML actuel :
   #block-... .view-content > .views-row
     .views-field-field-video-thumbnail .field-content > img
   Objectifs :
   - Mobile : 1 colonne (100%)
   - Tablette : 2 colonnes
   - Desktop : 4 colonnes
   - Thumbnail : pleine largeur + ratio 16/9 + cover
   ========================================================= */

#block-tarapro-views-block-dernieres-videos-bloc-block-1 .view-content{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

/* MOBILE : 1 par ligne */
#block-tarapro-views-block-dernieres-videos-bloc-block-1 .view-content > .views-row{
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
}

/* TABLETTE : 2 par ligne */
@media (min-width: 768px){
  #block-tarapro-views-block-dernieres-videos-bloc-block-1 .view-content > .views-row{
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* DESKTOP : 4 par ligne */
@media (min-width: 1200px){
  #block-tarapro-views-block-dernieres-videos-bloc-block-1 .view-content > .views-row{
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
  }
}

/* --- THUMB FULL WIDTH (le champ image) --- */
#block-tarapro-views-block-dernieres-videos-bloc-block-1
.views-field-field-video-thumbnail .field-content{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #f3f4f6;
}

/* image = cover */
#block-tarapro-views-block-dernieres-videos-bloc-block-1
.views-field-field-video-thumbnail .field-content img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* petits espacements texte */
#block-tarapro-views-block-dernieres-videos-bloc-block-1 .views-field-title{
  margin-top: 10px;
}

#block-tarapro-views-block-dernieres-videos-bloc-block-1 .views-field-title a{
  text-decoration: none;
  display:block;
}

#block-tarapro-views-block-dernieres-videos-bloc-block-1 .views-field-created{
  margin-top: 6px;
  opacity: .85;
}
/* =========================================================
   /actualites – HERO : forcer l’affichage des boutons
   (au cas où le thème écrase les styles des <a>)
   ========================================================= */

.path-actualites .apb-actualites-hero .apb-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0 6px;
}

/* base bouton (FORCÉ) */
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 16px !important;
  border-radius:12px !important;

  font-weight:800;
  text-decoration:none !important;

  border:1px solid transparent;
  cursor:pointer;

  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}

/* primaire */
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.primary{
  background: var(--brand, #0ea5a6) !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(14,165,166,.28) !important;
}

.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.primary:hover{
  transform:translateY(-1px);
}

/* ghost */
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.ghost{
  background:#fff !important;
  color: var(--ink, #111827) !important;
  border-color:#e5e7eb !important;
}

.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.ghost:hover{
  background:#f9fafb !important;
  transform:translateY(-1px);
}
/* =========================================================
   /actualites – HERO : styles APB boutons (manquants)
   Mets ce bloc TOUT EN BAS de ton CSS
   ========================================================= */

.path-actualites .apb-actualites-hero{
  --brand:#0ea5a6;
  --ink:#111827;
}

/* conteneur CTA */
.path-actualites .apb-actualites-hero .apb-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0 6px;
}

/* base bouton */
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 16px !important;
  border-radius:12px !important;

  font-weight:800 !important;
  text-decoration:none !important;

  border:1px solid transparent !important;
  cursor:pointer;

  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}

/* primary */
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.primary{
  background:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(14,165,166,.28) !important;
}
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.primary:hover{
  transform:translateY(-1px);
}

/* ghost */
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.ghost{
  background:#fff !important;
  color:var(--ink) !important;
  border-color:#e5e7eb !important;
}
.path-actualites .apb-actualites-hero .apb-cta a.apb-btn.ghost:hover{
  background:#f9fafb !important;
  transform:translateY(-1px);
}
/* =========================================================
   FIX BÉTON – Boutons du hero /actualites
   (ne dépend pas de .path-actualites, forte spécificité)
   ========================================================= */

.apb-actualites-hero .apb-cta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin:18px 0 6px !important;
}

.apb-actualites-hero .apb-cta > a.apb-btn{
  /* comportement bouton */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding:12px 16px !important;
  border-radius:12px !important;

  font-weight:800 !important;
  line-height:1.1 !important;

  text-decoration:none !important;
  border:1px solid transparent !important;

  cursor:pointer !important;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease !important;
}

/* PRIMARY */
.apb-actualites-hero .apb-cta > a.apb-btn.primary{
  background:#0ea5a6 !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(14,165,166,.28) !important;
}
.apb-actualites-hero .apb-cta > a.apb-btn.primary:hover{
  transform:translateY(-1px) !important;
}

/* GHOST */
.apb-actualites-hero .apb-cta > a.apb-btn.ghost{
  background:#fff !important;
  color:#111827 !important;
  border-color:#e5e7eb !important;
}
.apb-actualites-hero .apb-cta > a.apb-btn.ghost:hover{
  background:#f9fafb !important;
  transform:translateY(-1px) !important;
}



/* =========================================================
   /mes-videos – Layout FINAL
   1 col mobile / 2 tablette / 4 desktop
   ========================================================= */

.path-mes-videos .view-mes-videos .view-content{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

/* Base : mobile = 1 colonne */
.path-mes-videos .view-mes-videos .views-row{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Tablette : 2 colonnes */
@media (min-width: 768px){
  .path-mes-videos .view-mes-videos .views-row{
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}

/* Desktop : 4 colonnes */
@media (min-width: 1200px){
  .path-mes-videos .view-mes-videos .views-row{
    flex: 0 0 calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
  }
}

/* Sécurité : la carte prend toute la colonne */
.path-mes-videos .apb-video-card{
  width: 100% !important;
  max-width: 100% !important;
}

/* Thumbnail plein cadre */
.path-mes-videos .apb-video-thumb{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #f3f4f6;
}

/* Tous les wrappers Drupal */
.path-mes-videos .apb-video-thumb .field,
.path-mes-videos .apb-video-thumb .field__item,
.path-mes-videos .apb-video-thumb .field-item,
.path-mes-videos .apb-video-thumb .field-content{
  width: 100%;
  height: 100%;
}

/* Image = cover */
.path-mes-videos .apb-video-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* =========================================================
   /mes-videos – FIX GRID Views (views-col)
   Objectif : 1 col mobile / 2 tablette / 4 desktop
   IMPORTANT : à coller tout en bas du CSS
   ========================================================= */

/* On s'assure que la vue n'est pas en flex par erreur */
.path-mes-videos .view-content{
  display:block !important;
}

/* Colonnes du "Views Grid" */
.path-mes-videos .views-view-grid.horizontal .views-col{
  box-sizing:border-box;
  float:left !important;
  margin:0 !important;
  padding:0 12px;          /* gouttière */
  width:25% !important;    /* desktop par défaut */
}

/* Chaque ligne du grid */
.path-mes-videos .views-view-grid.horizontal .views-row{
  clear:both;
  margin:0 -12px 24px;     /* compense le padding des colonnes + espace vertical */
}

/* TABLETTE : 2 colonnes */
@media (max-width: 1199px){
  .path-mes-videos .views-view-grid.horizontal .views-col{
    width:50% !important;
  }
}

/* MOBILE : 1 colonne */
@media (max-width: 767px){
  .path-mes-videos .views-view-grid.horizontal .views-col{
    float:none !important;
    width:100% !important;
    padding:0;
  }

  .path-mes-videos .views-view-grid.horizontal .views-row{
    margin:0 0 18px;
  }
}

/* Vignette : plein cadre (si tu veux garder le rendu “cover”) */
.path-mes-videos a.apb-video-thumb{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:14px;
  background:#f3f4f6;
}

.path-mes-videos a.apb-video-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}
/* =========================================================
   FIX – /mes-videos (vue Mes vidéos)
   Problème : la vue sort en "Views Grid" (.views-view-grid .views-col)
              et certains overrides la forcent en 1 colonne sur PC.
   Objectif : 1 col mobile / 2 col tablette / 4 col desktop
   IMPORTANT : colle ce bloc TOUT EN BAS de ton CSS (apb.css)
   ========================================================= */

.path-mes-videos .views-view-grid.horizontal{
  margin: 0 !important;
}

/* On neutralise le "grid" Views (floats) et on passe en FLEX */
.path-mes-videos .views-view-grid.horizontal .views-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin: 0 !important;
}

.path-mes-videos .views-view-grid.horizontal .views-col{
  float: none !important;
  display: block !important;
  width: auto !important;        /* écrase width inline */
  margin: 0 !important;
  min-width: 0 !important;
  flex: 0 0 100% !important;     /* mobile = 1 colonne */
  max-width: 100% !important;
}

/* Tablette : 2 colonnes */
@media (min-width: 768px){
  .path-mes-videos .views-view-grid.horizontal .views-col{
    flex-basis: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}

/* Desktop : 4 colonnes */
@media (min-width: 1200px){
  .path-mes-videos .views-view-grid.horizontal .views-col{
    flex-basis: calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
  }
}

/* Sécurité : la carte remplit bien sa colonne */
.path-mes-videos .views-view-grid.horizontal .views-col article.apb-video-card,
.path-mes-videos .views-view-grid.horizontal .views-col .apb-video-card{
  width: 100% !important;
  max-width: 100% !important;
}

/* Thumbnails : plein cadre, ratio propre */
.path-mes-videos .apb-video-thumb{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #f3f4f6;
}

.path-mes-videos .apb-video-thumb img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

/* =========================================================
   /mes-videos — Vue "fields" (views-row direct, pas de views-col)
   HTML constaté:
     .view-content > .views-row
       .views-field-field-video-thumbnail .field-content > img
   Objectif:
     - Mobile: 1 colonne
     - Tablette: 2 colonnes
     - Desktop: 4 colonnes
     - Vignette: pleine largeur, ratio 16/9, cover
   Ne touche pas /actualites.
   ========================================================= */

/* Cible la page + la vue (selon les classes dispo) */
.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .view-content{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:24px !important;
}

/* 1 carte = 1 "views-row" */
.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .view-content > .views-row{
  box-sizing:border-box !important;
  flex:0 0 100% !important;     /* mobile */
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:12px !important;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Tablette: 2 colonnes */
@media (min-width: 768px){
  .path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .view-content > .views-row{
    flex-basis:calc(50% - 12px) !important;
    max-width:calc(50% - 12px) !important;
  }
}

/* Desktop: 4 colonnes */
@media (min-width: 1200px){
  .path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .view-content > .views-row{
    flex-basis:calc(25% - 18px) !important;
    max-width:calc(25% - 18px) !important;
  }
}

/* ===== Vignette plein cadre ===== */

/* La "fenêtre" image (span.field-content) */
.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos)
.views-field-field-video-thumbnail .field-content{
  display:block !important;
  width:100% !important;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:14px;
  background:#f3f4f6;
}

/* Image remplit la fenêtre */
.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos)
.views-field-field-video-thumbnail .field-content img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
}

/* Titres / date (petit style) */
.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .views-field-title{
  margin-top:10px;
  font-weight:900;
}

.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .views-field-title a{
  text-decoration:none;
  color:inherit;
  display:block;
  line-height:1.2;
}

.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .views-field-created{
  margin-top:6px;
  opacity:.85;
  font-weight:700;
  font-size:.9rem;
}

/* IMPORTANT: si un ancien CSS force .views-row { width:100% } on écrase */
.path-mes-videos :is(.view-id-mes_videos, .view-mes-videos) .views-row{
  width:auto !important;
}

/* =========================================================
   FIX FINAL – /mes-videos UNIQUEMENT
   Annule les display:block globaux
   ========================================================= */

.path-mes-videos .view-content{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:24px !important;
}

/* 1 carte */
.path-mes-videos .view-content > .views-row{
  box-sizing:border-box;
  flex:0 0 100% !important;
  max-width:100% !important;
}

/* Tablette */
@media (min-width:768px){
  .path-mes-videos .view-content > .views-row{
    flex-basis:calc(50% - 12px) !important;
    max-width:calc(50% - 12px) !important;
  }
}

/* Desktop */
@media (min-width:1200px){
  .path-mes-videos .view-content > .views-row{
    flex-basis:calc(25% - 18px) !important;
    max-width:calc(25% - 18px) !important;
  }
}
/* =========================================================
   /mes-videos – Forcer les cartes à occuper 100% de leur colonne
   (Vue en FIELDS : .views-row contient des <span>)
   ========================================================= */

/* Chaque item prend toute la largeur de sa colonne */
.path-mes-videos .view-content > .views-row{
  width: 100%;
}

/* Les champs Views sont des <span> : on les passe en block */
.path-mes-videos .view-content > .views-row > .views-field{
  display: block !important;
  width: 100% !important;
}

/* Fenêtre vignette : plein cadre + ratio */
.path-mes-videos .views-field-field-video-thumbnail .field-content{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #f3f4f6;
}

/* Image : remplit la fenêtre */
.path-mes-videos .views-field-field-video-thumbnail .field-content img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Un peu d’air et éviter que titre/date se collent */
.path-mes-videos .views-field-title{
  margin-top: 10px;
}
.path-mes-videos .views-field-created{
  margin-top: 6px;
  opacity: .85;
}