/*
 * Page « Espace média (presse) » — styles.
 *
 * Repris de la maquette « media-presse », chargés UNIQUEMENT sur le gabarit
 * template-media.php (voir inc/enqueue.php). Tout est scopé sous « .media-page » : plusieurs
 * classes (.wrap, .hl, .filter-zone, .filter-bar, .f-select-wrap, .sfield, .sec-eyebrow,
 * .cat-tag, .a-date, .articles-grid, .article-featured, .load-more-bar, .js-rise) sont
 * partagées avec la page « Actualités » et ne doivent fuir ni vers elle, ni vers l'en-tête, ni
 * vers le pied de page. Les polices « Anton » et « Open Sans » sont fournies globalement par
 * style.css (@font-face + enqueue) → non redéclarées ici.
 *
 * Écarts assumés par rapport à la maquette (rendu identique, feuille sans code mort) :
 *   • la maquette scopait ses styles sous « .contact-page » (sa feuille avait été copiée depuis
 *     la page Contact) : le gabarit pose « .media-page », qui porte le même habillage ;
 *   • la PREMIÈRE section en flux reçoit le retrait haut qui dégage l'en-tête fixe du site. La
 *     maquette s'affichait sans en-tête : son bandeau partait du haut de la page et se
 *     retrouverait caché derrière la barre de navigation, qui est opaque (voir « Dégagement de
 *     l'en-tête » plus bas) ;
 *   • la BARRE DE FILTRES collante se cale SOUS l'en-tête fixe (« top » = hauteur de l'en-tête),
 *     là où la maquette la collait à 0 : sans en-tête, elle y disparaîtrait derrière la barre de
 *     navigation. Elle reste sous l'en-tête dans l'ordre de peinture (z-index 30 contre 1000) ;
 *   • les COULEURS posées par CLASSE (« .cat-nat-b », « .cat-int-b », « .cat-camp-b » pour le
 *     filet supérieur d'une carte) sont remplacées par la variable « --med-card-color », servie
 *     en style en ligne. La couleur vient du TYPE de l'actualité (champ ACF « couleur » du
 *     terme, comme partout sur le site) : la feuille ne connaît donc pas la liste des types, et
 *     un type ajouté au back-office arrive avec sa couleur sans toucher au CSS ;
 *   • les styles EN LIGNE de la maquette qui changent le rendu sont portés par la FEUILLE, pour
 *     survivre à la réécriture des textes au back-office : les tailles relevées à 14 px sur le
 *     sur-titre et le rôle de la carte de contact, ainsi que sur la pastille et la date du dernier
 *     communiqué ; la pastille du dernier communiqué réduite à son seul libellé, sans fond (le
 *     gabarit ne lui pose donc pas la couleur du type, contrairement aux cartes de la grille) ; et
 *     le pied de carte aligné à droite, où il n'a qu'un seul élément. NE SONT PAS reprises, sur
 *     les trois LIGNES de la carte de contact, la largeur « width: 331px » — une mesure d'outil de
 *     maquettage, que la maquette annule elle-même dès 1040 px (« width: auto !important ») et qui
 *     tronquerait une adresse plus longue — ni le 14 px qui l'accompagnait : les deux allaient de
 *     pair, et sans la largeur en dur l'adresse de courriel casserait sur deux lignes. Ces trois
 *     lignes gardent donc le 13,5 px de la FEUILLE de la maquette (voir « .pc-line » plus bas) ;
 *   • la DATE est ajoutée en haut des cartes de la grille, à droite du sur-titre. La maquette ne
 *     la posait pas, mais elle stylait « .a-date » et laissait « .pcard-top » en
 *     « space-between » — la place était prévue. Un communiqué de presse sans date se date mal,
 *     et la page se filtre par année ;
 *   • les cadres d'image de la maquette sont de vraies balises <img> : sans image de couverture,
 *     le gabarit sert l'image de repli du thème (comme la page « Actualités ») ; le conteneur
 *     garde son ratio et son fond de secours ;
 *   • LIENS : style.css pose « a { display: block } » pour tout le site, et le scope de la page
 *     remet « text-decoration: none » et « color: inherit ». Chaque lien reçoit donc ici un
 *     « display » explicite, et le libellé d'un bouton plein garde sa couleur au survol (aucun
 *     « a:hover » global ne doit pouvoir le repeindre) ;
 *   • ne sont pas reprises de la feuille de la maquette : le @font-face d'Anton (global), le
 *     box-sizing global (scopé ici), les puces de filtre « .chip » / « .filter-chips » et le
 *     compteur « .results-count » (restes de la page Actualités, jamais posés par le balisage
 *     de cette page, qui filtre par menus déroulants), et la bande d'inscription à l'infolettre
 *     « .nl-band » / « .nl-form » (stylée mais absente du balisage de la maquette : aucun
 *     contenu à afficher, donc aucune section à intégrer) ;
 *   • la TRANSITION de filtrage de la maquette (« .filtering », un fondu de 180 ms avant
 *     masquage) n'est pas reprise : le filtrage est instantané. La maquette la pilotait avec un
 *     minuteur par carte, qui se désynchronise dès qu'on enchaîne deux filtres ; ses deux règles
 *     ont donc été retirées plutôt que laissées mortes dans la feuille ;
 *   • sans JavaScript, les blocs « .js-rise » sont visibles d'office (@media scripting: none) ;
 *     l'apparition est aussi neutralisée en « mouvement réduit ». Aucun contenu ne peut rester
 *     invisible, et la liste complète s'affiche (le « Charger plus » est masqué).
 */

/* ============================================================================
 * Cadre de page (reprend le reset local de la maquette)
 * ========================================================================= */

.media-page,
.media-page *,
.media-page *::before,
.media-page *::after {
  box-sizing: border-box;
}
.media-page {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.media-page h1,
.media-page h2,
.media-page h3,
.media-page h4 {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
}
.media-page p {
  margin: 0;
}
.media-page a {
  text-decoration: none;
  color: inherit;
}
.media-page a:hover {
  color: #055da8;
}
.media-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.media-page button,
.media-page input,
.media-page select {
  font-family: inherit;
}
.media-page .wrap {
  margin: 0;
  padding: 0 var(--med-gutter);
}
.media-page a:focus-visible,
.media-page button:focus-visible,
.media-page select:focus-visible {
  outline: 3px solid #e9511c;
  outline-offset: 3px;
  border-radius: 5px;
}
.media-page ::selection {
  background: #bddfec;
  color: #1d1a55;
}

/* ============================================================================
 * Dégagement de l'en-tête
 *
 * L'en-tête du thème est en position:fixed et opaque : sans retrait, il recouvrirait le haut de
 * la première section. Le retrait est porté par la première section EN FLUX, quelle qu'elle
 * soit : le bandeau d'ordinaire, la barre de filtres si le bandeau est entièrement vidé au
 * back-office.
 *
 * L'en-tête n'a pas une hauteur unique : la bande d'alerte qui le surmonte s'affiche ou non
 * selon un interrupteur du back-office (« alert_show »). Les deux états sont traités, au lieu
 * de réserver toujours la hauteur maximale : sinon un ruban blanc s'intercalerait entre la
 * barre de navigation et le bandeau dès que la bande d'alerte est masquée.
 *
 * Hauteurs mesurées, en pixels :
 *
 *                    sans la bande   avec la bande
 *   ≥ 1280 px             104             146
 *   ≤ 1279 px              59             101
 *
 * Le bandeau a son propre retrait haut (74 px dans la maquette) : les deux s'ajoutent, la
 * variable « --med-head » portant la seule part de l'en-tête. C'est aussi elle qui donne son
 * « top » à la barre de filtres collante — les deux valeurs ne peuvent donc pas se désaccorder.
 * ========================================================================= */

.media-page {
  --med-head: 104px;
  --med-gutter: 26px;
}
body:has(.alert-section) .media-page {
  --med-head: 146px;
}
.media-page > :first-child {
  padding-top: var(--med-head);
}
/* Si le bandeau est entièrement vidé au back-office, la première section en flux devient la barre
   de filtres — qui est COLLANTE. Un retrait interne la ferait mesurer 174 px au lieu de 70 et
   s'additionnerait à son « top ». Elle reçoit donc une marge EXTERNE, qui dégage l'en-tête sans
   la gonfler. */
.media-page > .filter-zone:first-child {
  padding-top: 0;
  margin-top: var(--med-head);
}

/* ============================================================================
 * Bandeau (hero) — pastille, titre, chapeau, et carte de contact presse
 * ========================================================================= */

.media-page .press-hero {
  background: linear-gradient(180deg, #ffffff 0%, #ebf3fb 100%);
  padding-bottom: 58px;
  overflow: hidden;
}
/* Le retrait haut de la maquette s'ajoute à celui de l'en-tête (voir plus haut). */
.media-page .press-hero > .wrap {
  padding-top: 74px;
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 58px;
  align-items: center;
}
/* Bandeau sans carte de contact (champs vidés) : le texte prend toute la largeur. */
.media-page .press-hero > .wrap.press-hero--solo {
  grid-template-columns: 1fr;
}
.media-page .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: #e9511c;
  margin-bottom: 22px;
}
.media-page .hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #e9511c;
}
.media-page .press-hero h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.9;
  color: #055da8;
  letter-spacing: -0.01em;
}
.media-page .press-hero h1 .hl {
  color: #1d1a55;
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 58%;
  background-position: 0 64%;
}
.media-page .press-hero .lead {
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a6a;
  max-width: 540px;
  margin-top: 24px;
}

/* Carte de contact presse */
.media-page .press-contact {
  background: #1d1a55;
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.media-page .pc-head {
  padding: 20px 26px;
  border-bottom: 1px solid #33306a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.media-page .pc-head .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00af9c;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(0, 175, 156, 0.55);
  animation: medPcPulse 2s infinite;
}
@keyframes medPcPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 175, 156, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(0, 175, 156, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 175, 156, 0);
  }
}
.media-page .pc-head .pc-eyebrow {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #bddfec;
}
.media-page .pc-body {
  padding: 22px 26px;
}
.media-page .pc-name {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  margin-bottom: 6px;
}
.media-page .pc-role {
  font-size: 14px;
  color: #c4cde3;
  line-height: 1.45;
  margin-bottom: 18px;
}
/* Sans nom ni rôle, le bloc n'a plus rien à séparer des lignes de contact. */
.media-page .pc-body > .pc-lines:first-child {
  margin-top: 0;
}
.media-page .pc-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.media-page .pc-line {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 13,5 px est la valeur de la FEUILLE de la maquette. Les deux styles en ligne qui la
     surchargeaient (« font-size: 14px » et « width: 331px ») forment une paire : à 14 px
     l'adresse de courriel demande 11 px de plus que la carte n'en offre, et la largeur en dur
     les lui donnait en débordant du cadre. Les deux sont donc écartés ensemble — mesuré : 32 px
     de haut par ligne et 336,5 px de carte, comme la maquette. */
  font-size: 13.5px;
  color: #eaf0fb;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.media-page .pc-line:hover {
  color: #fff;
}
.media-page .pc-line > span:last-child {
  min-width: 0;
}
.media-page .pc-line .ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}
.media-page .pc-line:hover .ic {
  background: #e9511c;
}
.media-page .pc-line .ic svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-page .pc-cta {
  display: block;
  margin: 20px 26px 24px;
  text-align: center;
  background: #e9511c;
  color: #fff;
  border-radius: 6px;
  padding: 13px 18px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.03em;
  transition: background-color 0.3s ease;
}
.media-page .pc-cta:hover {
  background: #d1440f;
  color: #fff;
}

/* ============================================================================
 * Barre de filtres (collante sous l'en-tête)
 * ========================================================================= */

.media-page .filter-zone {
  background: #fff;
  border-top: 1px solid #e1e8f3;
  border-bottom: 1px solid #e1e8f3;
  position: sticky;
  top: var(--med-head);
  z-index: 30;
}
.media-page .filter-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  padding: 14px var(--med-gutter);
  flex-wrap: wrap;
}
.media-page .filter-left,
.media-page .filter-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.media-page .f-select-wrap {
  position: relative;
}
.media-page .f-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 40px 10px 18px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  font-weight: 400;
  color: #055da8;
  border: 1px solid #055da8;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  outline: none;
  height: 40px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.media-page .f-select-wrap select:hover {
  border-color: #055da8;
  background: #eef6fb;
}
.media-page .f-select-wrap select:focus {
  border-color: #055da8;
  box-shadow: 0 0 0 3px rgba(5, 93, 168, 0.15);
}
/* Le « outline: none » ci-dessus a la même spécificité que la règle de focus du cadre de page, et
   la suit dans le fichier : sans cette règle, les deux menus perdaient tout indicateur de focus au
   clavier. Le liseré de focus est reposé ici, après la neutralisation. */
.media-page .f-select-wrap select:focus-visible {
  outline: 3px solid #e9511c;
  outline-offset: 3px;
}
.media-page .f-select-wrap .f-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #055da8;
  pointer-events: none;
}
.media-page .sfield {
  position: relative;
}
.media-page .sfield input {
  border: 1px solid #cfd9e8;
  border-radius: 50px;
  padding: 9px 16px 9px 38px;
  font-size: 14px;
  background: #fff;
  outline: none;
  width: 270px;
  max-width: 100%;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.media-page .sfield input:focus {
  border-color: #055da8;
  box-shadow: 0 0 0 3px rgba(5, 93, 168, 0.15);
}
.media-page .sfield input:focus-visible {
  outline: 3px solid #e9511c;
  outline-offset: 3px;
}
.media-page .sfield::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url('../svgs/header/magnifying-glass.svg') center/contain no-repeat;
  opacity: 0.55;
}

/* ============================================================================
 * Liste des communiqués — intertitres, pastilles, dates
 * ========================================================================= */

.media-page .press-main {
  padding: 52px var(--med-gutter) 20px;
}
.media-page .sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #1d1a55;
  margin-bottom: 22px;
}
.media-page .sec-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e1e8f3;
}
.media-page .sec-eyebrow .dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #e9511c;
  flex-shrink: 0;
}
.media-page .cat-tag {
  display: inline-flex;
  align-items: center;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 4px;
  color: #fff;
  background: #1d1a55;
}
.media-page .a-date {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #8a90ad;
}

/* ============================================================================
 * Dernier communiqué — bloc éditorial en deux colonnes
 * ========================================================================= */

.media-page .article-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 56px;
  cursor: pointer;
  background: #1d1a55;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Sans image de couverture ni repli servi, le texte occupe toute la largeur. */
.media-page .article-featured--solo {
  grid-template-columns: 1fr;
}
.media-page .article-featured:hover {
  transform: translateY(-6px);
}
.media-page .feat-body {
  position: relative;
  z-index: 2;
  padding: 52px 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.media-page .feat-body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #e9511c;
}
.media-page .feat-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Pastille réduite à son libellé : son fond serait invisible sur le bandeau bleu nuit. */
.media-page .article-featured .cat-tag {
  padding: 2px 0;
  font-size: 14px;
}
.media-page .feat-body .a-date {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}
.media-page .feat-kicker {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #bddfec;
  margin: 22px 0 12px;
}
.media-page .feat-body h2 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.04;
  color: #fff;
  margin-bottom: 16px;
}
.media-page .feat-body h2 a {
  display: block;
  color: inherit;
}
.media-page .feat-body h2 a:hover {
  color: #bddfec;
}
.media-page .feat-excerpt {
  font-size: 16px;
  color: #c4cde3;
  line-height: 1.65;
  max-width: 560px;
}
.media-page .feat-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  background: #e9511c;
  color: #fff;
  border-radius: 6px;
  padding: 13px 24px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.03em;
  transition: background-color 0.3s ease;
}
.media-page .article-featured:hover .feat-cta {
  background: #d1440f;
}
.media-page .feat-cta img {
  width: 16px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}
.media-page .article-featured:hover .feat-cta img {
  transform: translateX(4px);
}
.media-page .feat-img {
  position: relative;
  overflow: hidden;
  background: #12305a;
  min-height: 420px;
}
.media-page .feat-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.media-page .article-featured:hover .feat-img img {
  transform: scale(1.05);
}

/* ============================================================================
 * Grille des communiqués
 * ========================================================================= */

.media-page .articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 12px;
}
.media-page .press-card {
  position: relative;
  border: 1px solid #e1e8f3;
  border-top: 4px solid var(--med-card-color, #055da8);
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease;
}
.media-page .press-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  background: #e9511c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 3;
}
.media-page .press-card:hover {
  transform: translateY(-6px);
}
.media-page .press-card:hover::before {
  transform: scaleX(1);
}
.media-page .pcard-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef3f8;
}
.media-page .pcard-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.media-page .press-card:hover .pcard-img img {
  transform: scale(1.05);
}
.media-page .pcard-img .cat-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.media-page .pcard-inner {
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* La date reste à droite même seule (sur-titre vidé au back-office) : « space-between » la
   renverrait à gauche. Même parti que « .pcard-foot » plus bas. */
.media-page .pcard-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.media-page .pcard-kicker {
  margin-right: auto;
}
.media-page .pcard-kicker {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #b6bdcf;
}
.media-page .press-card h3 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1.12;
  color: #1d1a55;
  margin-bottom: 12px;
}
.media-page .press-card h3 a {
  display: block;
  color: inherit;
}
.media-page .press-card h3 a:hover {
  color: #055da8;
}
.media-page .pcard-excerpt {
  font-size: 14px;
  color: #4a4a6a;
  line-height: 1.6;
  margin-bottom: 20px;
}
/* Un seul élément dans le pied de carte : il s'aligne à droite (la maquette le posait en
   style en ligne sur chaque carte). */
.media-page .pcard-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eef2f8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.media-page .pcard-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #055da8;
  transition: color 0.25s ease;
}
.media-page .pcard-read img {
  width: 16px;
  transition: transform 0.3s ease;
}
.media-page .press-card:hover .pcard-read {
  color: #e9511c;
}
.media-page .press-card:hover .pcard-read img {
  transform: translateX(4px);
}
/* Cartes du 2e lot (masquées jusqu'au « Charger plus »), et tout ce qu'un filtre écarte : une
   carte, le dernier communiqué, ou l'intertitre d'une section devenue vide. */
.media-page .press-card.batch2,
.media-page .press-card.is-hidden,
.media-page .article-featured.is-hidden,
.media-page .sec-eyebrow.is-hidden {
  display: none;
}
/* La barre de progression suit la grille : vidée par un filtre, elle n'a plus rien à compter. */
.media-page .load-more-bar.is-hidden {
  display: none;
}

/* Aucun résultat (filtres trop restrictifs) — la maquette ne prévoyait pas ce cas. */
.media-page .press-empty {
  padding: 34px 0 10px;
  font-size: 16px;
  color: #4a4a6a;
}

/* ============================================================================
 * Charger plus
 * ========================================================================= */

.media-page .load-more-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 44px 0 8px;
  border-top: 1px solid #eef2f8;
}
.media-page .progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.media-page .progress-txt {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #8a90ad;
}
.media-page .progress-bar {
  width: 260px;
  height: 4px;
  border-radius: 4px;
  background: #e6ecf5;
  overflow: hidden;
}
.media-page .progress-bar span {
  display: block;
  height: 100%;
  background: #e9511c;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.media-page .load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 11px 16px 11px 22px;
  border-radius: 50px;
  background: #055da8;
  border: 1px solid #055da8;
  color: #fff;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
.media-page .load-more-btn .ico {
  width: 34px;
  height: 34px;
  border-radius: 100%;
  background: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.3s ease;
  color: #055da8;
  font-size: 16px;
}
.media-page .load-more-btn .ico img {
  width: 15px;
  height: auto;
  rotate: 90deg;
}
.media-page .load-more-btn:hover {
  background: #fff;
  color: #055da8;
}
.media-page .load-more-btn:hover .ico {
  background: #055da8;
  transform: translateY(3px);
}
.media-page .load-more-btn:hover .ico img {
  filter: brightness(0) invert(1);
}
.media-page .load-more-btn.done {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================================
 * Apparition au défilement
 * ========================================================================= */

.media-page .js-rise {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.media-page .js-rise.in {
  opacity: 1;
  transform: none;
}

/* ============================================================================
 * Responsive (reprend les paliers de la maquette)
 * ========================================================================= */

@media (max-width: 1279px) {
  .media-page {
    --med-head: 59px;
    --med-gutter: 10px;
  }
  body:has(.alert-section) .media-page {
    --med-head: 101px;
  }
}

@media (max-width: 1040px) {
  .media-page .press-hero > .wrap {
    grid-template-columns: 1fr 320px;
    gap: 34px;
  }
  .media-page .pc-line {
    align-items: flex-start;
  }
  .media-page .articles-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .media-page .press-hero > .wrap,
  .media-page .press-hero > .wrap.press-hero--solo {
    grid-template-columns: 1fr;
  }
  .media-page .press-hero {
    padding-bottom: 42px;
  }
  .media-page .press-hero > .wrap {
    padding-top: 52px;
  }
  .media-page .filter-right {
    margin-left: 0;
    width: 100%;
  }
  .media-page .sfield {
    flex: 1;
  }
  .media-page .sfield input {
    width: 100%;
  }
  .media-page .f-select-wrap select,
  .media-page .sfield input {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  /* La maquette resserre les gouttières de la liste à 10 px sur ce palier (les cartes y occupent
     toute la largeur), là où le bandeau et la barre de filtres restent à 20 px. */
  .media-page .press-main {
    padding: 40px var(--med-gutter) 12px;
  }
  .media-page .press-contact {
    max-width: 100%;
  }
  .media-page .articles-grid {
    grid-template-columns: 1fr;
  }
  .media-page .article-featured,
  .media-page .article-featured--solo {
    grid-template-columns: 1fr;
  }
  .media-page .feat-img {
    min-height: 260px;
    order: -1;
  }
  .media-page .feat-body {
    padding: 30px 22px;
  }
  /* La maquette rend la barre de filtres NON collante sur mobile : elle mangerait
     une part trop grande de l'écran. */
  .media-page .filter-zone {
    position: static;
  }
}

/* ============================================================================
 * Mouvement réduit, et absence de JavaScript
 *
 * CES DEUX BLOCS SONT EN FIN DE FEUILLE, ET DOIVENT Y RESTER : ils neutralisent des
 * déclarations posées plus haut avec la MÊME spécificité (« .media-page .js-rise »,
 * « .media-page .press-card.batch2 ») — à spécificité égale, c'est l'ordre du fichier qui
 * tranche.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .media-page .js-rise,
  .media-page .js-rise.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .media-page .press-card,
  .media-page .article-featured {
    transition: none;
  }
  .media-page .pc-head .dot {
    animation: none;
  }
}

@media (scripting: none) {
  .media-page .js-rise,
  .media-page .js-rise.in {
    opacity: 1;
    transform: none;
  }
  /* Sans script, ni « Charger plus » ni filtres ne fonctionnent : toutes les cartes
     s'affichent, et la barre de progression disparaît. */
  .media-page .press-card.batch2 {
    display: flex;
  }
  .media-page .load-more-bar {
    display: none;
  }
}

@media (min-width: 1700px) {
  .media-page h1,
  .media-page h2,
  .media-page h3,
  .media-page h4 {
    font-size: 1.1112vw;
  }
  .media-page a:focus-visible,
  .media-page button:focus-visible,
  .media-page select:focus-visible {
    outline: 0.2083vw solid #e9511c;
    outline-offset: 0.2083vw;
    border-radius: 0.3472vw;
  }
  .media-page {
    --med-head: 7.2227vw;
    --med-gutter: 1.8057vw;
  }
  body:has(.alert-section) .media-page {
    --med-head: 10.1395vw;
  }
  .media-page .press-hero {
    padding-bottom: 4.028vw;
  }
  .media-page .press-hero > .wrap {
    padding-top: 5.1392vw;
    grid-template-columns: 1fr 25.8349vw;
    gap: 4.028vw;
  }
  .media-page .hero-eyebrow {
    gap: 0.8334vw;
    font-size: 0.9723vw;
    margin-bottom: 1.5279vw;
  }
  .media-page .hero-eyebrow::before {
    width: 1.9446vw;
    height: 0.1389vw;
  }
  .media-page .press-hero h1 {
    font-size: clamp(3.3335vw, 7vw, 6.3893vw);
  }
  .media-page .press-hero .lead {
    font-size: 1.2501vw;
    max-width: 37.5023vw;
    margin-top: 1.6668vw;
  }
  .media-page .press-contact {
    border-radius: 0.9723vw;
  }
  .media-page .pc-head {
    padding: 1.389vw 1.8057vw;
    border-bottom: 0.0694vw solid #33306a;
    gap: 0.6945vw;
  }
  .media-page .pc-head .dot {
    width: 0.625vw;
    height: 0.625vw;
  }
  .media-page .pc-head .pc-eyebrow {
    font-size: 0.9723vw;
  }
  .media-page .pc-body {
    padding: 1.5279vw 1.8057vw;
  }
  .media-page .pc-name {
    font-size: 1.5279vw;
    margin-bottom: 0.4167vw;
  }
  .media-page .pc-role {
    font-size: 0.9723vw;
    margin-bottom: 1.2501vw;
  }
  .media-page .pc-lines {
    gap: 0.8334vw;
  }
  .media-page .pc-line {
    gap: 0.8334vw;
    font-size: 0.9376vw;
  }
  .media-page .pc-line .ic {
    width: 2.2224vw;
    height: 2.2224vw;
    border-radius: 0.5556vw;
  }
  .media-page .pc-line .ic svg {
    width: 1.0417vw;
    height: 1.0417vw;
  }
  .media-page .pc-cta {
    margin: 1.389vw 1.8057vw 1.6668vw;
    border-radius: 0.4167vw;
    padding: 0.9028vw 1.2501vw;
    font-size: 0.9723vw;
  }
  .media-page .filter-zone {
    border-top: 0.0694vw solid #e1e8f3;
    border-bottom: 0.0694vw solid #e1e8f3;
  }
  .media-page .filter-bar {
    gap: 1.2501vw;
    padding: 0.9723vw var(--med-gutter);
  }
  .media-page .filter-left,
  .media-page .filter-right {
    gap: 0.6945vw;
  }
  .media-page .f-select-wrap select {
    padding: 0.6945vw 2.7779vw 0.6945vw 1.2501vw;
    font-size: 0.9028vw;
    border: 0.0694vw solid #055da8;
    border-radius: 3.4724vw;
    height: 2.7779vw;
  }
  .media-page .f-select-wrap select:focus {
    box-shadow: 0 0 0 0.2083vw rgba(5, 93, 168, 0.15);
  }
  .media-page .f-select-wrap select:focus-visible {
    outline: 0.2083vw solid #e9511c;
    outline-offset: 0.2083vw;
  }
  .media-page .f-select-wrap .f-arrow {
    right: 0.9723vw;
    font-size: 0.7639vw;
  }
  .media-page .sfield input {
    border: 0.0694vw solid #cfd9e8;
    border-radius: 3.4724vw;
    padding: 0.625vw 1.1112vw 0.625vw 2.639vw;
    font-size: 0.9723vw;
    width: 18.7511vw;
  }
  .media-page .sfield input:focus {
    box-shadow: 0 0 0 0.2083vw rgba(5, 93, 168, 0.15);
  }
  .media-page .sfield input:focus-visible {
    outline: 0.2083vw solid #e9511c;
    outline-offset: 0.2083vw;
  }
  .media-page .sfield::before {
    left: 0.9723vw;
    width: 0.9723vw;
    height: 0.9723vw;
  }
  .media-page .press-main {
    padding: 3.6113vw var(--med-gutter) 1.389vw;
  }
  .media-page .sec-eyebrow {
    gap: 1.1112vw;
    font-size: 1.1112vw;
    margin-bottom: 1.5279vw;
  }
  .media-page .sec-eyebrow::after {
    height: 0.0694vw;
  }
  .media-page .sec-eyebrow .dot {
    width: 0.6945vw;
    height: 0.6945vw;
  }
  .media-page .cat-tag {
    font-size: 0.8334vw;
    padding: 0.3472vw 0.8334vw;
    border-radius: 0.2778vw;
  }
  .media-page .a-date {
    font-size: 0.9723vw;
  }
  .media-page .article-featured {
    border-radius: 0.9723vw;
    margin-bottom: 3.8891vw;
  }
  .media-page .article-featured:hover {
    transform: translateY(-0.4167vw);
  }
  .media-page .feat-body {
    padding: 3.6113vw 3.7502vw;
  }
  .media-page .feat-body::before {
    width: 0.3472vw;
  }
  .media-page .feat-top {
    gap: 0.9723vw;
  }
  .media-page .article-featured .cat-tag {
    padding: 0.1389vw 0;
    font-size: 0.9723vw;
  }
  .media-page .feat-body .a-date {
    font-size: 0.9723vw;
  }
  .media-page .feat-kicker {
    font-size: 0.9723vw;
    margin: 1.5279vw 0 0.8334vw;
  }
  .media-page .feat-body h2 {
    font-size: clamp(1.8057vw, 2.7vw, 2.7779vw);
    margin-bottom: 1.1112vw;
  }
  .media-page .feat-excerpt {
    font-size: 1.1112vw;
    max-width: 38.8912vw;
  }
  .media-page .feat-cta {
    gap: 0.8334vw;
    margin-top: 1.9446vw;
    border-radius: 0.4167vw;
    padding: 0.9028vw 1.6668vw;
    font-size: 1.0417vw;
  }
  .media-page .feat-cta img {
    width: 1.1112vw;
  }
  .media-page .article-featured:hover .feat-cta img {
    transform: translateX(0.2778vw);
  }
  .media-page .feat-img {
    min-height: 29.1684vw;
  }
  .media-page .articles-grid {
    gap: 1.6668vw;
    margin-bottom: 0.8334vw;
  }
  .media-page .press-card {
    border: 0.0694vw solid #e1e8f3;
    border-top: 0.2778vw solid var(--med-card-color, #055da8);
    border-radius: 0.6945vw;
  }
  .media-page .press-card::before {
    top: -0.2778vw;
    height: 0.2778vw;
  }
  .media-page .press-card:hover {
    transform: translateY(-0.4167vw);
  }
  .media-page .pcard-img .cat-tag {
    top: 0.8334vw;
    left: 0.8334vw;
  }
  .media-page .pcard-inner {
    padding: 1.6668vw 1.8057vw 1.5279vw;
  }
  .media-page .pcard-top {
    gap: 0.8334vw;
    margin-bottom: 0.9723vw;
  }
  .media-page .pcard-kicker {
    font-size: 0.9723vw;
  }
  .media-page .press-card h3 {
    font-size: 1.3195vw;
    margin-bottom: 0.8334vw;
  }
  .media-page .pcard-excerpt {
    font-size: 0.9723vw;
    margin-bottom: 1.389vw;
  }
  .media-page .pcard-foot {
    padding-top: 1.1112vw;
    border-top: 0.0694vw solid #eef2f8;
    gap: 0.8334vw;
  }
  .media-page .pcard-read {
    gap: 0.6945vw;
    font-size: 0.9723vw;
  }
  .media-page .pcard-read img {
    width: 1.1112vw;
  }
  .media-page .press-card:hover .pcard-read img {
    transform: translateX(0.2778vw);
  }
  .media-page .press-empty {
    padding: 2.3613vw 0 0.6945vw;
    font-size: 1.1112vw;
  }
  .media-page .load-more-bar {
    gap: 1.5279vw;
    padding: 3.0557vw 0 0.5556vw;
    border-top: 0.0694vw solid #eef2f8;
  }
  .media-page .progress-wrap {
    gap: 0.8334vw;
  }
  .media-page .progress-txt {
    font-size: 0.9028vw;
  }
  .media-page .progress-bar {
    width: 18.0566vw;
    height: 0.2778vw;
    border-radius: 0.2778vw;
  }
  .media-page .progress-bar span {
    border-radius: 0.2778vw;
  }
  .media-page .load-more-btn {
    gap: 1.1112vw;
    padding: 0.7639vw 1.1112vw 0.7639vw 1.5279vw;
    border-radius: 3.4724vw;
    border: 0.0694vw solid #055da8;
    font-size: 1.0417vw;
  }
  .media-page .load-more-btn .ico {
    width: 2.3613vw;
    height: 2.3613vw;
    font-size: 1.1112vw;
  }
  .media-page .load-more-btn .ico img {
    width: 1.0417vw;
  }
  .media-page .load-more-btn:hover .ico {
    transform: translateY(0.2083vw);
  }
  .media-page .js-rise {
    transform: translateY(2.0835vw);
  }
}