@media only screen and (min-width: 993px) {
  .container {
    width: 80%;
  }
}

/* ===== Onglets ===== */
.tabs .tab a:hover, 
.tabs .tab a.active { 
  background: transparent; 
  color: #0079b2 !important; 
}
.tabs .tab a { 
  color: #69bcd7; 
  font-size: 16px; 
}
.tabs .indicator { 
  background-color: inherit; 
  background-image: linear-gradient(90deg, rgba(0,121,178,.9), #e9e6e6, rgba(240,18,53,.95)); 
}

/* ===== Typo & couleurs ===== */
body {
  font-family: "Roboto Slab", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  color: #1d1d1f;
}
.actualites h3 {
  font-family: "Merriweather", serif;
  font-weight: 800;
  letter-spacing: .2px;
  color: #0f172a;
  text-align: center;
  margin: 10px 0 40px;
}
.card-title {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-size: 14px !important;
  line-height: 1.45;
  color: #0079b2;
  margin: 0;
}

/* ===== Titre sans fond bleu ===== */
.headline {
  background: none;
  padding-bottom: 0;
  color: #0079b2;
  text-decoration: none;
  transition: color .2s ease;
}
.headline:hover {
  color: #005e8e;
}

/* ===== Grille masonry 2 colonnes ===== */
.cards {
  column-count: 2;
  column-gap: 30px;
  position: relative;
  background: #fff;
  padding-top: 2px;
}
.cards::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #e6e6e6;
  transform: translateX(-.5px);
  pointer-events: none;
}

/* ===== Carte : texte à gauche, média à droite ===== */
.cardActu {
  position: relative; /* pour le badge */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding: 12px 0 18px;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cardActu:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* ===== Zone texte ===== */
.sub-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  text-align: left;
  padding-right: 6px;
  color: #333;
  margin-top: 20px;
}
.sub-card-content span {
  color: #333;
  font-size: 14px;
  font-weight: 300;
}

/* ===== Média : même taille + responsive ===== */
.card-image {
  position: relative;
  flex: 0 0 clamp(220px, 36%, 340px);
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 14px;
}
.card-image > img, 
.card-image > video, 
.card-image > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
.card-video { 
  width: 100%; 
  height: 100%; 
}

/* ===== Image ===== */
.img-actualite { 
  width: 100%; 
  height: auto; 
}

/* ===== Réseaux sociaux ===== */
div.icone {
  background: #0079b2 !important;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
}
.fa {
  color: #fff;
  font-size: 28px;
  transition: transform .2s ease;
}
.fa:hover { transform: scale(1.1); }

/* ===== YouTube container ===== */
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.video-container::before { 
  content: ""; 
  display: block; 
  padding-bottom: 56.25%; 
}
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ===== Divers ===== */
svg { display: inline-block; vertical-align: middle; }
.overflow-hidden { overflow: hidden; }
.actualites { margin-bottom: 50px; margin-top: 60px; }

/* ===== Modale (optionnelle) ===== */
.modalmp4 { 
  display: none; 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,.8); 
  justify-content: center; 
  align-items: center; 
  z-index: 1000; 
}
.modalmp4 video { max-width: 90%; max-height: 80%; }
.modalPIF-close { position: absolute; top: 20px; right: 20px; font-size: 24px; color: #fff; cursor: pointer; }
video { height: 100%; }

/* ===== BADGES (placés sur la carte, pas le média) ===== */
.cardActu[data-badge]::before {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  backdrop-filter: saturate(140%) blur(2px);
  text-transform: uppercase;
  pointer-events: none;
  outline: 1px solid rgba(255,255,255,.55);
}

/* Variantes colorées */
.cardActu[data-badge="PDF"]::before {
  content: "📄 PDF";
  background: #ef4444;
}
.cardActu[data-badge="VIDÉO"]::before,
.cardActu[data-badge="VIDEO"]::before {
  content: "▶︎ VIDÉO";
  background: #7c3aed;
}
.cardActu[data-badge="YOUTUBE"]::before {
  content: "▶︎ YouTube";
  background: #c4302b;
}

/* On désactive l'ancien badge sur les médias */
.card-image[data-badge]::before { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .cards { column-count: 1; }
  .cards::before { display: none; }
  .cardActu { flex-direction: column; align-items: stretch; }
  .card-image { flex-basis: 100%; width: 100%; aspect-ratio: 16/9; }
}

/* ===== Accessibilité ===== */
@media (prefers-reduced-motion: reduce) {
  .cardActu { transition: none; }
}