/* Page Actualités du CDI (extension CDI ULB Navigation 2.8.1, Easy On Web, 17/10/2026).
   Annonce à la une, puis liste datée avec vignette quand l'annonce a une image, années en pastilles.
   Le preset du module Texte de Divi impose listes, liens et justification : portée doublée (.cdi-actu.cdi-actu).
   Couleurs de la refonte : rouge #c4001a, encre #1c1718, gris #5f5557, roses #fdf3f4 / #fae6e8 / #f1cdd1. */

/* ---------- Bande : phrase d'introduction, champ, années ---------- */
.cdi-actu-chapo.cdi-actu-chapo { max-width: 60ch; margin: 14px 0 24px !important; padding: 0 !important; font-size: 18px !important; line-height: 1.55 !important; color: #5f5557 !important; text-align: left !important; }
.cdi-bande .cdi-recherche--champ { max-width: 640px; }
.cdi-actu-annees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cdi-actu-annees a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid #f1cdd1; border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 500; line-height: 1; color: #1c1718 !important; text-decoration: none !important;
  transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cdi-actu-annees a:hover { border-color: #c4001a; color: #c4001a !important; }
.cdi-actu-annees a[aria-current="page"] { border-color: #c4001a; background: #c4001a; color: #fff !important; }

/* ---------- À la une ---------- */
.cdi-actu.cdi-actu { text-align: left; }
.cdi-actu .cdi-actu__une { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: center; margin: 0 0 clamp(56px, 7vw, 96px); }
.cdi-actu .cdi-actu__une--texte { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.cdi-actu .cdi-actu__une-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: clamp(20px, 3vw, 40px); background: #fae6e8; border-radius: 6px; overflow: hidden; box-sizing: border-box; }
.cdi-actu .cdi-actu__une-image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2px; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.cdi-actu .cdi-actu__une:hover .cdi-actu__une-image img { transform: scale(1.02); }
.cdi-actu.cdi-actu .cdi-actu__une-date { margin: 0 0 10px !important; padding: 0 !important; font-size: 13px !important; letter-spacing: 0.06em; text-transform: uppercase; color: #5f5557 !important; }
.cdi-actu.cdi-actu .cdi-actu__une-titre { margin: 0 0 16px !important; padding: 0 !important; font-family: "Roboto", Helvetica, Arial, sans-serif !important; font-weight: 700 !important; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem) !important; line-height: 1.2 !important; letter-spacing: -0.01em; color: #1c1718 !important; text-wrap: balance; }
.cdi-actu.cdi-actu .cdi-actu__une-extrait { margin: 0 0 20px !important; padding: 0 !important; font-size: 17px !important; line-height: 1.6 !important; color: #5f5557 !important; text-align: left !important; }

/* ---------- Titres, liens ---------- */
/* le preset du module Texte donne aux liens sa propre graisse : le lien d'un titre prend celle du titre */
.cdi-actu.cdi-actu h2 a { font: inherit !important; color: inherit !important; text-decoration: none !important; }
.cdi-actu.cdi-actu h2 a:hover, .cdi-actu.cdi-actu .cdi-actu__ligne:hover .cdi-actu__titre a { color: #c4001a !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cdi-actu.cdi-actu .cdi-actu__lire { margin: 0 !important; padding: 0 !important; }
.cdi-actu.cdi-actu .cdi-actu__lire a { font-size: 15px; font-weight: 500; color: #c4001a !important; text-decoration: underline !important; text-decoration-color: #f1cdd1 !important; text-underline-offset: 4px; }
.cdi-actu.cdi-actu .cdi-actu__lire a span { display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.cdi-actu.cdi-actu .cdi-actu__une:hover .cdi-actu__lire a span { transform: translateX(4px); }

/* ---------- Liste ---------- */
.cdi-actu.cdi-actu .cdi-actu__surtitre { margin: 0 0 12px !important; }
.cdi-actu.cdi-actu ol.cdi-actu__liste { margin: 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid #f1cdd1; }
.cdi-actu.cdi-actu ol.cdi-actu__liste > li { margin: 0 !important; list-style: none !important; }
.cdi-actu.cdi-actu ol.cdi-actu__liste > li::before, .cdi-actu.cdi-actu ol.cdi-actu__liste > li::marker { content: none !important; display: none !important; }
.cdi-actu.cdi-actu ol.cdi-actu__liste > li.cdi-actu__ligne { position: relative; display: grid !important; grid-template-columns: 112px minmax(0, 1fr); gap: 32px; align-items: start; padding: 28px 0 !important; border-bottom: 1px solid #f1cdd1; }
.cdi-actu.cdi-actu ol.cdi-actu__liste > li.cdi-actu__ligne--image { grid-template-columns: 112px minmax(0, 1fr) 168px; }
.cdi-actu .cdi-actu__date { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; font-size: 13px; letter-spacing: 0.06em; color: #5f5557; }
.cdi-actu .cdi-actu__date span { font-size: 17px; font-weight: 700; letter-spacing: 0; color: #c4001a; }
.cdi-actu.cdi-actu .cdi-actu__titre { margin: 0 0 8px !important; padding: 0 !important; font-family: "Roboto", Helvetica, Arial, sans-serif !important; font-weight: 600 !important; font-size: 19px !important; line-height: 1.35 !important; color: #1c1718 !important; text-wrap: pretty; }
.cdi-actu.cdi-actu .cdi-actu__extrait { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: #5f5557 !important; text-align: left !important; }
.cdi-actu .cdi-actu__vignette { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 8px; background: #fae6e8; border-radius: 6px; overflow: hidden; box-sizing: border-box; }
.cdi-actu .cdi-actu__vignette img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }
/* la ligne entière se clique par son titre, sans doubler le lien pour le clavier */
.cdi-actu .cdi-actu__titre a::after { content: ""; position: absolute; inset: 0; }
.cdi-actu .cdi-actu__ligne:focus-within { outline: 2px solid #c4001a; outline-offset: 4px; }
.cdi-actu .cdi-actu__titre a:focus-visible { outline: none; }
.cdi-actu.cdi-actu .cdi-actu__vide { font-size: 17px !important; color: #5f5557 !important; }

/* ---------- Pages ---------- */
.cdi-actu .cdi-actu__pages { margin-top: 48px; }
.cdi-actu.cdi-actu .cdi-actu__pages ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cdi-actu.cdi-actu .cdi-actu__pages li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cdi-actu.cdi-actu .cdi-actu__pages li::before { content: none !important; display: none !important; }
.cdi-actu .cdi-actu__pages li > .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 4px; font-size: 15px; font-weight: 500; color: #1c1718 !important; text-decoration: none !important; box-sizing: border-box; }
.cdi-actu .cdi-actu__pages a.page-numbers:hover { background: #fdf3f4; color: #c4001a !important; }
.cdi-actu .cdi-actu__pages li > .page-numbers.current { background: #1c1718; color: #fff !important; }
.cdi-actu .cdi-actu__pages li > .page-numbers.dots { min-width: 24px; padding: 0; color: #5f5557 !important; }
.cdi-actu .cdi-actu__pages .prev, .cdi-actu .cdi-actu__pages .next { border: 1px solid #f1cdd1; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 980px) {
  .cdi-actu .cdi-actu__une { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cdi-actu.cdi-actu ol.cdi-actu__liste > li.cdi-actu__ligne--image { grid-template-columns: 112px minmax(0, 1fr) 120px; }
}
@media (max-width: 767px) {
  /* années sur une ligne qui défile au doigt, plutôt que quatre lignes de pastilles */
  .cdi-actu-annees { flex-wrap: nowrap; overflow-x: auto; margin-right: -5vw; padding-right: 5vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cdi-actu-annees::-webkit-scrollbar { display: none; }
  .cdi-actu-annees a { flex: none; }
  .cdi-actu.cdi-actu ol.cdi-actu__liste > li.cdi-actu__ligne { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 !important; }
  /* sur téléphone, le titre prend toute la largeur : la vignette lui laissait cinq à sept lignes */
  .cdi-actu.cdi-actu ol.cdi-actu__liste > li.cdi-actu__ligne--image { grid-template-columns: minmax(0, 1fr); }
  .cdi-actu .cdi-actu__vignette { display: none !important; }
  .cdi-actu .cdi-actu__date { flex-direction: row; align-items: baseline; gap: 6px; }
  .cdi-actu .cdi-actu__date span { font-size: 15px; }
  .cdi-actu.cdi-actu .cdi-actu__titre { font-size: 17px !important; }
  /* WordPress donne aussi la classe page-numbers à la liste : seuls les numéros se cachent */
  .cdi-actu .cdi-actu__pages li:has(> .page-numbers:not(.prev):not(.next):not(.current)) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cdi-actu *, .cdi-actu-annees a { transition: none !important; }
}