/* --- Structure copiée de publication_etape_4 (publications_visualisation.css) --- */
:root {
  --sdp-lg: #f2f2f0;
}

.pageheart {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  background-color: var(--paper);
}

.pagepoumondroit {
  margin: 0;
  width: 100vw;
  background-color: transparent;
}

body.page-no-top-margin .pagepoumondroit {
  margin: 0 !important;
  width: 100% !important;
  padding-top: 6px !important;
}

body.page-no-top-margin .pageheart {
  width: 100% !important;
}

/* Conteneur principal de la salle de presse - équivalent .corps-publi */
.sdp-wrapper {
  /* ══ MEME LARGEUR DE LECTURE QUE LES PUBLICATIONS : 1150 px (EP 15/08/2026) ══
     Auparavant `width: 60%` — une proportion de la fenetre, sans rapport avec
     le confort de lecture, et surtout SANS PLANCHER : la colonne de contenu
     n'en recevait que les trois quarts, soit 387 px sur un ecran de 1440. C'est
     ce qui reduisait les cartes d'evenement a 172 px (cf. les @container en fin
     de fichier). Le plafond fixe donne une salle de presse identique d'un ecran
     a l'autre, et alignee sur la publication vers laquelle elle renvoie.
     En dessous de 1150 px, elle prend toute la place disponible. */
  width: 100%;
  max-width: 1150px;
  margin-inline: auto;
  background-color: var(--paper);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  box-sizing: border-box;
}

/* Tétière : coins arrondis charte (spec EP, iso PE4 .header-publi). overflow:hidden
   rogne l'image / le fallback / le bleed ::before aux coins arrondis (bannière contenue). */
.sdp-tetiere {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  background-color: var(--paper);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.sdp-tetiere::before {
  content: "";
  position: absolute;
  background-color: var(--sdp-lg);
  width: 100vw;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.sdp-tetiere-img {
  width: 100%;
  display: block;
  height: auto;
}

.sdp-tetiere-nom {
  margin: 16px 20px;
  font-size: 24px;
  font-weight: 600;
  color: var(--sdp-color, inherit);
}

.grayborder {
  padding: 20px;
}

.sdp-description {
  margin: 0;
  padding-left: 20px;
  box-sizing: border-box;
}

/* Logo / image dans la sidebar - calqué sur .profile-logo de référence */
.sdp-description-img {
  margin-bottom: 16px;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.sdp-description-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.sdp-description-texte {
  font-size: 14px;
  line-height: 1.5;
}

.onglet-info {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 0 20px;
  gap: 20px;
  box-sizing: border-box;
}

@media (max-width: 1000px) {
  .sdp-wrapper {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .onglet-info {
    grid-template-columns: 1fr;
    display: flex;
    /* VM : contenu (onglets) d'abord, puis la sidebar éditeur (3 CTA → Contact →
       « Suivez-nous ») EN BAS de page. (demande EP 05/07) */
    flex-direction: column;
  }

  .sdp-description {
    padding-left: 0;
  }
}

@media (max-width: 425px) {
  .cache {
    display: none;
  }
}

.sdp-description {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.sdp-description-img,
.sdp-sidebar-actions {
  width: 100%;
}

/* Global theming for interactive elements inside the press room */

.sdp-wrapper a:active {
  color: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
}

.sdp-wrapper[data-sdp-color] .sdp-social-icon {
  color: var(--sdp-color, #c8102e);
}

/* ── SDP Sidebar Actions ── */

.sdp-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

/* Boutons calqués sur .boutonprin.bouton-icone-desc de référence (height 32px) */
.sdp-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sdp-color, #c8102e);
  color: #fff;
  height: 32px;
  padding: 1px 11px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius, 8px);
  transition: background 0.2s;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
}

.sdp-sidebar-btn svg {
  width: 18px;
  height: 18px;
}

.sdp-sidebar-btn:hover {
  background: var(--sdp-color-hover, #a00d24);
}

.sdp-sidebar-btn:active {
  background: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
}

.sdp-sidebar-btn svg {
  flex-shrink: 0;
}

.sdp-sidebar-btn-label {
  cursor: default;
}

.sdp-sidebar-contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.sdp-sidebar-contact {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

.sdp-contact-name {
  font-weight: 700;
}

.sdp-contact-info {
  color: #555;
}

.sdp-contact-info a {
  color: var(--sdp-color, #c8102e);
  text-decoration: underline;
}

.sdp-contact-info a:hover {
  color: var(--sdp-color-hover, #a00d24);
  background: color-mix(in srgb, var(--sdp-color, #c8102e), #fff 88%);
  border-radius: var(--radius, 8px);
}

.sdp-contact-info a:active {
  color: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
}

h1 {
  color: var(--sdp-color);
}

/* ── SDP Event Cards ── */

.sdp-rss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0 0 8px;
  color: var(--sdp-color);
}

.sdp-rss-link {
  display: inline-flex;
  align-items: center;
  color: var(--sdp-color, #c8102e);
  text-decoration: none;
  transition: opacity 0.15s;
}

.sdp-rss-link:hover,
.sdp-rss-link:focus-visible {
  opacity: 0.75;
  outline: none;
}

.sdp-rss-link .icone {
  width: 22px;
  height: 22px;
}

.onglet-info {
  padding-top: 20px;
}

.sdp-event-card {
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: none;
  outline: 1px solid var(--sdp-color, #c8102e);
  outline-offset: -1px;
  background: #fff;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease;
  border-radius: var(--radius, 8px);
}
.sdp-event-card:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.sdp-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  padding: 22px 24px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
  color: #fff;
  background-color: var(--sdp-color, #c8102e);
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.sdp-event-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid #fff;
  border-radius: var(--radius, 8px);
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.sdp-event-day {
  display: block;
  width: 100%;
}

.sdp-event-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 52px 16px 24px;
  position: relative;
}

.sdp-event-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: #333;
  padding-left: 12px;
  border-left: 3px solid var(--sdp-color, #4caf50);
  line-height: 1.35;
}

.sdp-event-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin: 0;
  padding-left: 15px;
}
.sdp-event-redac {
  font-size: 13px;
  line-height: 1.5;
  color: #555;
  margin: 0;
  padding-left: 15px;
}

.sdp-event-loc {
  margin: auto 0 0;
  padding-left: 0;
  font-size: 13px;
  color: #444;
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 0;
  align-items: flex-start;
}
.sdp-event-loc svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--sdp-color, #c8102e);
  margin-top: 2px;
  justify-self: start;
}

.sdp-event-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sdp-color, #c8102e);
  border-radius: 50%;
  transition: background 0.15s;
  z-index: 2;
}
.sdp-event-arrow svg {
  width: 28px;
  height: 28px;
}
.sdp-event-arrow:hover {
  background: rgba(0, 0, 0, 0.05);
}
.sdp-event-arrow:focus-visible {
  outline: 2px solid var(--sdp-color, #c8102e);
  outline-offset: 2px;
}

/* Barre d'actions au bas de la carte */
.sdp-event-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px 16px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}
.sdp-event-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #faf9f5;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  color: var(--sdp-color, #c8102e);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.sdp-event-action-btn:hover {
  background: var(--sdp-color, #c8102e);
  color: #fff;
  border-color: var(--sdp-color, #c8102e);
}
.sdp-event-action-btn[disabled] {
  background: #f4f4f4;
  color: #bbb;
  border-color: #ececec;
  cursor: not-allowed;
}
.sdp-event-action-btn[disabled]:hover {
  background: #f4f4f4;
  color: #bbb;
  border-color: #ececec;
}
.sdp-event-action-btn svg {
  width: 22px;
  height: 22px;
}
.sdp-event-calendar {
  margin-left: auto;
  position: relative;
}
.sdp-event-calendar-actions {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 10;
  min-width: 180px;
}
.sdp-event-calendar:hover .sdp-event-calendar-actions,
.sdp-event-calendar:focus-within .sdp-event-calendar-actions {
  display: flex;
}
.sdp-event-calendar-link {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
  border-radius: var(--radius, 8px);
  transition: background 0.15s;
  white-space: nowrap;
}
.sdp-event-calendar-link:hover {
  background: #f3efe7;
}
/* bridge invisible pour empêcher la dropdown de se fermer en traversant l'espace */
.sdp-event-calendar-actions::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

/* ===== Popin évènement ===== */
.sdp-event-popin {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sdp-event-popin[hidden] {
  display: none;
}
.sdp-event-popin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.sdp-event-popin-window {
  position: relative;
  background: #fff;
  border-radius: var(--radius, 8px);
  width: min(640px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.sdp-event-popin-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 1;
}
.sdp-event-popin-close:hover {
  background: rgba(0, 0, 0, 0.06);
}
.sdp-event-popin-close svg {
  width: 22px;
  height: 22px;
}
.sdp-event-popin-body {
  padding: 28px 32px 32px;
}
.sdp-event-popin-body .sdp-popin-date {
  display: inline-block;
  padding: 10px 18px;
  background: var(--sdp-color, #c8102e);
  color: #fff;
  border-radius: var(--radius, 8px);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}
.sdp-event-popin-body .sdp-popin-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
  line-height: 1.3;
}
.sdp-event-popin-body .sdp-popin-desc {
  font-size: 15px;
  color: #444;
  line-height: 1.55;
  margin: 0 0 14px;
}
.sdp-event-popin-body .sdp-popin-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #444;
  margin: 0 0 18px;
}
.sdp-event-popin-body .sdp-popin-loc svg {
  width: 16px;
  height: 16px;
  color: var(--sdp-color, #c8102e);
  flex-shrink: 0;
}
.sdp-event-popin-body .sdp-popin-redac,
.sdp-event-popin-body .sdp-popin-suite {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 14px 0 0;
}
.sdp-event-popin-body .sdp-popin-redac + .sdp-popin-suite {
  border-top: 1px solid #eee;
  padding-top: 14px;
}
body.sdp-event-popin-open {
  overflow: hidden;
}

.sdp-carousel-events {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: end;
  gap: 12px;
  width: 100%;
  margin: 20px 0 10px;
}

.events-carousel-wrapper {
  min-height: 440px;
  overflow: visible;
  overflow-x: clip;
}

.event-carousel-slide {
  display: flex;
}

.event-carousel-slide .sdp-event-card {
  width: 100%;
}

.evenements a,
.ddp a {
  display: flex;
  justify-content: center;
  color: var(--sdp-color, #c8102e);
  font-weight: 600;
}

.evenements a:active,
.ddp a:active {
  color: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
}

/* ── SDP Communiqués / Invitations Presse ── */

.sdp-communiques {
  margin-top: 32px;
  padding: 0;
}

.sdp-communiques-titre {
  font-size: 22px;
  font-weight: 700;
  color: var(--sdp-color, #c8102e);
  margin: 0 0 20px;
  padding: 0;
}

.sdp-communiques-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sdp-communique-card {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: start;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid #e0e0e0;
}

.sdp-communique-card:last-child {
  border-bottom: 1px solid #e0e0e0;
}

@media (max-width: 570px) {
  .sdp-communique-card {
    grid-template-columns: 1fr;
  }
}

.sdp-communique-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sdp-color, #c8102e);
  color: #fff;
  padding: 10px 8px;
  text-align: center;
  min-width: 80px;
  border-radius: var(--radius, 8px);
}

.sdp-communique-jour {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.sdp-communique-mois {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 2px;
}

.sdp-communique-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-top: 4px;
}

.sdp-communique-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.sdp-communique-title-link {
  color: gray;
  text-decoration: none;
}

.sdp-communique-title-link:hover {
  text-decoration: underline;
}

.sdp-communique-themes {
  font-size: 13px;
  color: #555;
  margin: 2px 0 0;
}

.sdp-communique-themes strong {
  color: #333;
}

.sdp-communique-emetteur {
  font-size: 13px;
  color: #555;
  margin: 2px 0 0;
}

.sdp-communique-emetteur strong {
  color: #333;
}

.sdp-communique-download {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

.sdp-communique-pdf {
  display: flex;
  align-items: center;
  color: var(--sdp-color, #c8102e);
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  transition: color 0.2s;
  border: 1px solid var(--sdp-color, #c8102e);
  padding: 10px;
  border-radius: var(--radius, 8px);
}

.sdp-communique-pdf:hover {
  color: var(--sdp-color-hover, #a00d24);
  border-color: var(--sdp-color-hover, #a00d24);
  background: color-mix(in srgb, var(--sdp-color, #c8102e), #fff 92%);
}

.sdp-communique-pdf:active {
  color: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
  border-color: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
}

.sdp-communique-pdf svg {
  flex-shrink: 0;
}
/* Chip de type : masqué en desktop (carte inchangée), affiché en VM. */
.sdp-communique-type { display: none; }
/* Wrapper date+chip : transparent en desktop (display:contents → la date reprend
   sa place de cellule de grille, chip masqué) ; flex row en VM (date À CÔTÉ du chip). */
.sdp-communique-meta { display: contents; }
/* Onglets salle de presse (vue publique) : filet de l'onglet actif en GRIS neutre,
   pas le rouge de l'app (#b5170d = .ongletselection global v8.css, filet côté
   utilisateur). Scopé .sdp2 → n'affecte pas les onglets internes de l'app. */
.sdp2.ongletselection { border-bottom-color: #716D61; }
/* Pagination communiqués — pattern charte .cdp-pagination (centre de presse) ;
   « Page X sur Y » à gauche + flèches/numéros à droite. Page active = couleur client. */
.sdp-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.sdp-pagination-info {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #716D61);
}
.sdp-pagination-info strong {
  color: var(--ink, #0A0A0A);
  font-weight: 700;
}
.sdp-pagination-list {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sdp-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius, 8px);
  color: var(--ink, #0A0A0A);
  text-decoration: none;
  font-size: 13px;
  background: transparent;
}
.sdp-pagination-btn:hover {
  background: var(--cream, #FAF9F5);
}
.sdp-pagination-btn.is-current {
  background: var(--sdp-color, #0A0A0A);
  color: #fff;
  border-color: var(--sdp-color, #0A0A0A);
  font-weight: 700;
}
.sdp-pagination-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.sdp-pagination-ellipsis {
  padding: 0 6px;
  color: var(--muted, #716D61);
  font-size: 13px;
}
/* ── VM (≤768) — carte communiqué compacte (maquette EP 05/07) ──
   Bloc date bleu → pastille compacte (couleur client) ; chip de type ; titre en
   avant (foncé) ; thèmes masqués si vides ; émetteur masqué SAUF salle de presse
   fusionnée (.sdp-communique-card--merged, déjà affiché en haut) ; PDF pleine
   largeur + icône. Desktop (>768) inchangé. */
@media (max-width: 768px) {
  .sdp-communique-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 0;
  }
  .sdp-communique-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sdp-communique-date {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    width: fit-content;
    min-width: 0;
    padding: 5px 13px;
    border-radius: var(--radius-pill, 999px);
  }
  .sdp-communique-jour { font-size: 14px; font-weight: 700; line-height: 1.1; }
  .sdp-communique-mois { font-size: 13px; font-weight: 400; margin-top: 0; }
  .sdp-communique-type {
    display: inline-flex;
    padding: 3px 11px;
    border: 1px solid var(--sdp-color, #c8102e);
    color: var(--sdp-color, #c8102e);
    border-radius: var(--radius-pill, 999px);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .sdp-communique-title { font-size: 16px; }
  .sdp-communique-title-link { color: var(--ink, #0A0A0A); }
  .sdp-communique-themes--empty { display: none; }
  .sdp-communique-card:not(.sdp-communique-card--merged) .sdp-communique-emetteur { display: none; }
  .sdp-communique-download { width: 100%; padding-top: 4px; }
  .sdp-communique-pdf {
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius, 8px);
    white-space: normal;
  }
  .sdp-communique-pdf::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 10h5l-6 6-6-6h5V3h2v7ZM4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 10h5l-6 6-6-6h5V3h2v7ZM4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7Z'/></svg>");
  }
}

/* ── SDP Dossiers de Presse ── */

.sdp-dossiers-list {
  width: 100%;
}

.sdp-carousel-dossiers {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: end;
  gap: 12px;
  width: 100%;
  margin: 20px 0 10px;
}

.sdp-dossier-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 10px;
  height: 100%;
}

.sdp-dossier-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius, 8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sdp-dossier-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sdp-dossier-cover-fallback {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--sdp-color, #c8102e), #fff 85%),
    color-mix(in srgb, var(--sdp-color, #c8102e), #fff 92%)
  );
  color: var(--sdp-color, #c8102e);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.sdp-dossier-title {
  font-size: 14px;
  margin: 4px 0 0;
  line-height: 1.4;
}

.sdp-dossier-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sdp-color, #c8102e);
  transition: color 0.2s;
  margin-top: auto;
}

.sdp-dossier-download:hover {
  color: var(--sdp-color-hover, #a00d24);
}

.sdp-dossier-download svg {
  width: 28px;
  height: 28px;
}

.sdp-dossier-download.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.no-dossiers-message {
  margin: 8px 0;
  color: #666;
}

/* Empty state pour la liste des derniers communiques / invitations presse */
.sdp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  margin: 8px 0;
  border: 1px dashed #e5e2da;
  background: var(--cream, #faf9f5);
  color: #716D61;
  text-align: center;
  border-radius: var(--radius, 8px);
}

.sdp-empty-state-icon {
  width: 32px;
  height: 32px;
  color: var(--sdp-color, #c8102e);
  opacity: 0.7;
  margin-bottom: 4px;
}

.sdp-empty-state-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #141413;
}

.sdp-empty-state-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #716D61;
}

/* Pagination des communiques (embed iframe) */
.sdp-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e5e2da;
}
.sdp-pagination-btn,
.sdp-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  background: #fff;
  color: #141413;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.sdp-pagination-btn:hover {
  background: #f2f0e8;
  border-color: #0a0a0a;
}
.sdp-pagination-btn.is-current {
  background: var(--sdp-color, #0a0a0a);
  border-color: var(--sdp-color, #0a0a0a);
  color: #fff;
  font-weight: 700;
  pointer-events: none;
}
.sdp-pagination-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.sdp-pagination-ellipsis {
  border: 0;
  background: transparent;
  color: #716D61;
}

/* ── SDP Sidebar Social ── */

.sdp-sidebar-social {
  margin-top: 10px;
}

.sdp-sidebar-social-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sdp-color, #c8102e);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  height: 32px;
  padding: 1px 11px;
  border-radius: var(--radius, 8px);
  box-sizing: border-box;
  gap: 10px;
}

.sdp-sidebar-social-header svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sdp-sidebar-social-icons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  background: #fff;
  border-top: none;
}

.sdp-social-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.sdp-social-icon:hover {
  color: var(--sdp-color, #c8102e);
}

.sdp-social-icon:active {
  color: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
}

.sdp-social-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sdp.propos .copy {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sdp-color, #c8102e);
  border-radius: var(--radius, 8px);
  background: #fff;
  color: var(--sdp-color, #c8102e);
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.sdp.propos .copy:hover {
  background: color-mix(in srgb, var(--sdp-color, #c8102e), #fff 90%);
  color: var(--sdp-color-hover, #a00d24);
  border-color: var(--sdp-color-hover, #a00d24);
}

.sdp.propos .copy:focus-visible {
  outline: 2px solid var(--sdp-color, #c8102e);
  outline-offset: 2px;
}

.sdp.propos .copy svg {
  width: 18px;
  height: 18px;
}

.sdp.propos .copy.is-copied {
  background: var(--sdp-color, #c8102e);
  color: #fff;
  transform: scale(0.96);
}

.sdp-chercher {
  display: flex;
  justify-content: space-between;
}

#campagnes-filters {
  padding: 25px 20px;
}

.filter-row {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}

.filter-row-selects {
  margin-top: 25px;
}

.filter-row-buttons {
  margin-top: 25px;
  justify-content: flex-end;
  gap: 15px;
}

.filter-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-col-grow {
  flex: 1;
  min-width: 200px;
}

.filter-col-select {
  flex: 1;
  min-width: 180px;
}

.filter-label {
  font-size: 14px;
  color: #333;
}

.filter-input-full {
  width: 100%;
  box-sizing: border-box;
}

.bg-red {
  border: solid 1px #991632;
  color: #991632;
}

.filter-btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  border: 1px solid #c62828;
  color: #c62828;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.filter-btn-reset:hover {
  background: rgba(198, 40, 40, 0.05);
}

.filter-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  border: none;
  background: #111;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-btn-submit:hover {
  background: #333;
}

.j-m-a {
  display: flex;
  align-items: flex-end;
}

.date-container {
  display: flex;
  gap: 10px;
}

.date-group {
  display: flex;
  flex-direction: column;
  width: 60px;
}

.date-group.annee {
  width: 80px;
}

.date-group label {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 4px;
}

.date-group input {
  width: 100%;
  box-sizing: border-box;
}

.calendar {
  cursor: pointer;
}

/* Pack date charte (Composants/datetime_field) : aucun attribut interne n'est
   surcharge — le composant rend exactement comme en invitation presse. Ici on
   agit uniquement sur la mise en page : chaque pack prend la moitie de la ligne
   (le premier ancre a gauche, le second a droite) et les champs se repartissent. */
.filter-row .filter-col:has(.dt-pack) {
  flex: 1 1 0;
  min-width: 0;
}

/* Elargissement du pack date dans le panneau de filtres : label ET champ sont
   elargis de la meme valeur (62->90, annee 76->110), sinon la rangee de labels
   se desaligne du cadre. Le second bloc est ancre a droite pour equilibrer la ligne. */
.filter-row .dt-label,
.filter-row .dt-field {
  width: 90px;
}

.filter-row .dt-label--year,
.filter-row .dt-field--year {
  width: 110px;
}

.filter-row .filter-col:has(.dt-stack):last-child .dt-stack {
  margin-left: auto; /* bord droit cale sur celui des champs du dessous */
}



/* --- End campagnes filter panel --- */

.secondrow {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 15px;
}

.firstdate,
.lastdate,
.publicationtype,
.profil,
.themes,
.motcle {
  margin-right: 10px;
}

.firstrow {
  margin-bottom: 15px;
}

.publicationtype select,
.profil select,
.firstdate input,
.lastdate input,
.themes select,
.motcle input {
  width: 100%;
}

.motcle {
  display: flex;
}

.refresh {
  color: #fff;
  background-color: black;
  border-radius: 50%;
}

.trions {
  height: 33px;
  padding: 0 10px;
}

.hidden {
  display: none;
}

#toggleSearchFilters {
  cursor: pointer;
  color: var(--sdp-color, #c8102e);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.bdc2,
.liste2 {
  color: black;
  text-decoration: none;
}

/* Carousel videos SDP: 3 cards desktop / 2 tablet / 1 mobile */
.sdp-videos-list {
  width: 100%;
}

.sdp-carousel-videos {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: end;
  gap: 12px;
  width: 100%;
  margin: 20px 0 10px;
}

.carousel-wrapper {
  width: 100%;
  overflow: hidden;
  min-height: 240px;
}

.carousel-track {
  display: flex;
  gap: 16px;
  transform: translateX(0);
  transition: transform 0.35s ease;
  will-change: transform;
}

.carousel-slide {
  display: block;
  box-sizing: border-box;
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
}

@media (min-width: 1024px) {
  .carousel-wrapper[data-total-slides="1"] .carousel-slide {
    flex-basis: 100%;
  }

  .carousel-wrapper[data-total-slides="2"] .carousel-slide {
    flex-basis: calc((100% - 16px) / 2);
  }
}

.events-carousel-wrapper .carousel-slide {
  align-items: stretch;
  box-sizing: border-box;
  padding: 2px 6px;
}

/* Événements : 2 cartes visibles par vue (override du 3/vue par défaut) */
@media (min-width: 1024px) {
  .events-carousel-wrapper .carousel-slide {
    flex: 0 0 calc((100% - 20px) / 2);
  }
  .events-carousel-wrapper[data-total-slides="1"] .carousel-slide {
    flex-basis: 100%;
  }
}
@media (max-width: 1023px) {
  .events-carousel-wrapper .carousel-slide {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
@media (max-width: 767px) {
  .events-carousel-wrapper .carousel-slide {
    flex-basis: 100%;
  }
}
.events-carousel-track {
  gap: 20px;
}

.video-embed {
  width: 100%;
  background: #f1f1f1;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.video-embed iframe,
.video-embed video,
.video-embed img {
  display: block;
  width: 100%;
  height: 170px;
  border: 0;
  object-fit: cover;
}

.video-titre {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: #222;
}

.carousel-btn {
  border: none;
  background: transparent;
  color: var(--sdp-color, #c8102e);
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  color: var(--sdp-color-hover, #a00d24);
}

.carousel-btn:active {
  color: var(--sdp-color-active, var(--sdp-color-hover, #8b0b1e));
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.no-videos-message {
  margin: 8px 0;
  color: #666;
}

@media (max-width: 1023px) {
  .carousel-slide {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 767px) {
  .sdp-carousel-dossiers,
  .sdp-carousel-videos {
    grid-template-columns: 28px 1fr 28px;
    gap: 8px;
  }

  .carousel-track {
    gap: 10px;
  }

  .carousel-slide {
    flex-basis: 100%;
  }

  .video-embed iframe,
  .video-embed video,
  .video-embed img {
    height: 200px;
  }

  .carousel-btn {
    font-size: 34px;
  }
}

.end {
  display: flex;
  justify-content: end;
}

.grand-icone {
  width: 190px;
}

/* =====================================================================
   VM (≤768) — sidebar éditeur : composant PARTAGÉ salle de presse + vue
   publication (PE4). Maquette validée EP 03/07 (pe4_mobile_sidebar_rm).
   - CTA (Salle de presse / Demande presse / Kit de presse) : passage en
     CONTOUR (fond blanc, bordure + texte couleur profil) au lieu du plein.
   - « Suivez-nous » : n'est plus un bouton, simple en-tête (icône + texte).
   Desktop inchangé (règles hors VM intactes). Couleur contextuelle --sdp-color.
   ===================================================================== */
@media (max-width: 768px) {
  .sdp-sidebar-btn {
    background: #fff;
    color: var(--sdp-color, #c8102e);
    border: 1px solid var(--sdp-color, #c8102e) !important; /* !important : bat le style="border:0" inline du <button> Demande presse */
    height: auto;
    min-height: 46px;
    padding: 12px 16px;
    border-radius: var(--radius, 8px);
    margin-bottom: 10px;
  }
  .sdp-sidebar-btn:hover,
  .sdp-sidebar-btn:active {
    background: var(--sdp-color, #c8102e);
    color: #fff;
  }
  .sdp-sidebar-btn svg { width: 20px; height: 20px; }

  /* « Votre contact / Vos contacts » n'est PAS un bouton : c'est le label de la carte
     contact en dessous → dé-tuilé (pas de filet, pas de min-height, pas d'icône), rendu
     en petit label capitales comme la maquette. */
  .sdp-sidebar-btn-label {
    border: none !important;
    min-height: 0;
    background: transparent;
    padding: 4px 0 2px;
    margin-bottom: 2px;
    justify-content: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted2, #716D61);
  }
  .sdp-sidebar-btn-label:hover,
  .sdp-sidebar-btn-label:active { background: transparent; color: var(--muted2, #716D61); }
  .sdp-sidebar-btn-label svg { display: none; }

  /* « Suivez-nous sur : » — plus de bouton plein : en-tête simple, couleur profil + bold */
  .sdp-sidebar-social-header {
    background: transparent;
    color: var(--sdp-color, #c8102e);
    height: auto;
    padding: 14px 0 4px;
    border-radius: 0;
    border-top: 1px solid #E5E2DA;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 700;
  }
  .sdp-sidebar-social-header svg {
    order: -1; /* icône AVANT le texte « Suivez-nous » (le markup a l'icône après) */
    width: 20px;
    height: 20px;
    fill: var(--sdp-color, #c8102e);
  }

  /* Réseaux (RS) : label + icône (fill=currentColor) en couleur profil */
  .sdp-social-icon { color: var(--sdp-color, #c8102e); }
}

/* =====================================================================
   VM (≤768) — en-tête salle de presse : têtière/logo masqués, remplacés par
   un chip « Salle de presse » + l'Intitulé de l'expéditeur (profilsendername)
   affiché comme AUTEUR. Réplique fidèle du pattern publication VM
   (.pm-type / .pm-author, cf. publications_visualisation.css), couleur
   contextuelle client --sdp-color. Desktop inchangé : .sdp-vm-head masqué,
   têtière visible.
   ===================================================================== */
.sdp-vm-head { display: none; }
/* Carte contact SDP = composant unifié .pub-contact (ISO publication VM). On mappe la
   variable de teinte du composant sur la couleur client de la salle de presse, pour que
   bordure/avatar/icônes reprennent --sdp-color au lieu du profil de publication. */
.sdp-sidebar-contacts .pub-contact { --publi-title-color: var(--sdp-color, #0A0A0A); }
@media (max-width: 768px) {
  .sdp-tetiere { display: none; }
  .sdp-vm-head {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    margin-bottom: 18px;
  }
  /* Chip type (pastille) — ISO .pm-type, couleur client --sdp-color */
  .sdp-vm-chip {
    align-self: flex-start;
    margin: 14px 0 0;
    display: inline-flex;
    align-items: center;
    background: var(--sdp-color, #0A0A0A);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: var(--radius-pill, 999px);
  }
  /* Auteur = Intitulé de l'expéditeur : texte simple (pas d'icône, pas de label « Auteur : ») */
  .sdp-vm-author {
    align-self: flex-start;
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--sdp-color, #0A0A0A);
  }
  /* Logo / illustration éditeur : masqué en VM (comme la têtière) */
  .sdp-description-img { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARROUSELS — LE NOMBRE DE TUILES SUIT LA COLONNE, PAS LA FENÊTRE
   ══════════════════════════════════════════════════════════════════════════

   ⚠️ LE DÉFAUT CORRIGÉ ICI. Les règles ci-dessus décident du nombre de tuiles
   par vue avec des `@media`, qui mesurent la FENÊTRE. Or la salle de presse
   vit dans `.sdp-wrapper { width: 60% }`, dont la colonne de contenu ne reçoit
   qu'une fraction : mesuré le 15/08/2026, une fenêtre de 1440 px donne une
   colonne de 387 px. La fenêtre disait « large, mets 2 évènements et 3
   documents » ; la colonne, elle, n'offrait que 172 px par carte d'évènement
   et 118 px par document. D'où des dates qui se brisaient sur trois lignes,
   des titres tronqués et du texte débordant du cadre.

   Les `@container` ci-dessous mesurent la COLONNE RÉELLE. Ils sont placés en
   fin de fichier : à spécificité égale, la dernière règle l'emporte, donc ils
   corrigent les `@media` sans qu'il faille les réécrire — et la salle de
   presse reste juste quelle que soit la largeur qu'on lui donne, y compris
   embarquée dans le site d'un client (`sdp_embed.php`), où la fenêtre ne dit
   RIEN de la place disponible.

   Seuils : une carte d'évènement porte une date longue (« Le jeudi 9 juillet
   2026 à 12h ») et un titre — il lui faut ~300 px pour tenir sur une ligne.
   Une tuile de document ou de vidéo se contente de ~150 px. */

.carousel-wrapper {
  container-type: inline-size;
}

/* Documents et vidéos : 3 par vue, puis 2, puis 1. */
@container (max-width: 560px) {
  .carousel-slide { flex-basis: calc(50% - 8px); }
}
@container (max-width: 360px) {
  .carousel-slide { flex-basis: 100%; }
}

/* Évènements : 2 par vue seulement si chacune garde ~300 px. */
@container (max-width: 640px) {
  .events-carousel-wrapper .carousel-slide { flex: 0 0 100%; }
}

/* ⚠️ Un mot insécable ne doit JAMAIS déborder du cadre. Constaté le 15/08 :
   un nom technique collé dans une description (« publication_items ») sortait
   de la carte et passait sous la bordure. `anywhere` coupe en dernier recours,
   sans empêcher les césures normales entre mots. */
.sdp-event-title,
.sdp-event-desc,
.sdp-event-redac,
.sdp-event-loc {
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════════════
   DOSSIER DE PRESSE — LE PDF SE LIT DANS LA PAGE
   ══════════════════════════════════════════════════════════════════════════

   ⭐ Demande EP du 14/09/2026 : le destinataire ne devait plus avoir a cliquer
   pour voir le dossier. Le cadre est donc pose dans la page, au-dessus des
   boutons, et le bouton de telechargement reste pour qui veut le fichier.

   ⛔ CACHE PAR DEFAUT, ET C'EST LE SCRIPT QUI L'OUVRE. `publication_etape_4_public.js`
   ajoute `est-actif` et pose le `src` seulement sur un poste a pointeur fin et
   large. Sans lui, rien ne s'affiche et rien ne se telecharge : un navigateur
   mobile rend mal un PDF integre, et un rectangle vide sur le telephone d'un
   journaliste serait pire que le bouton. La decision n'est pas ici, en `@media`,
   parce qu'une feuille de style ne peut pas EMPECHER le chargement du fichier :
   un cadre en `display:none` telecharge quand meme ses 2,4 Mo. */

.dossier-presse-lecteur {
  display: none;
}

.dossier-presse-lecteur.est-actif {
  display: block;
  margin: 18px 20px;
}

.dossier-presse-lecteur-cadre {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  border: 1px solid #e5e2da;
  border-radius: 6px;
  background-color: #fff;
}