:root {
    --lg: #F2F2F0;
}

.pageheart {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.pagepoumondroit {
    margin: 0;
    width: 100vw;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Meme largeur que .corps-publi, sinon la barre de lecture cesse d'etre
       alignee sur le texte dont elle mesure la progression. */
    width: min(1150px, 100%);
    height: 6px;
    background: rgba(0, 0, 0, 0.12);
    z-index: 9999;
}

.scroll-progress-bar {
    height: 100%;
    width: 0;
    background: var(--publi-title-color, #0A0A0A);
    transition: width 0.1s linear;
}

.pageheart-pdf {
    background-color: #fff !important;
}

.corps-publi {
    background-color: white;
    /* ══ LARGEUR DE LECTURE : 1150 px, plafond FIXE (decision EP 15/08/2026) ══
       Auparavant `width: 60%` — une proportion de la fenetre, donc une largeur
       qui n'avait aucun rapport avec le confort de lecture : 855 px sur un
       ecran de 1440, mais 1536 px sur un 27 pouces, ou les lignes deviennent
       trop longues pour que l'oeil retrouve le debut de la suivante. V7 tenait
       ce plafond depuis toujours (`#pagemain { max-width: 1099px }` + 20 px de
       marge interne, soit 1139 px hors tout) ; V8 l'avait perdu.
       En dessous de 1150 px, le corps prend toute la place disponible.
       ⚠️ Les blocs PLEINE LARGEUR (tetiere `.tetiere-background`, pied
       `.footer-publi`) restent bord a bord : ils sont en 100vw et positionnes
       hors flux, le plafond ne les atteint pas. C'est l'usage voulu — bandeau
       d'un bord a l'autre, contenu centre. */
    width: 100%;
    max-width: 1150px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: var(--publi-base-color, #000);
}

.corps-publi-pdf {
    width: 100%;
}

.main-publi-hidden {
    display: none;
}

.article-publi-pdf {
    border: none;
    padding: 0;
}

.publication-video-embed {
    width: 100%;
    min-height: 360px;
    border: 0;
}

.mail-tracking-pixel {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.only-print-hidden {
    display: none;
}


.corps-publi .boutonprin {
    background-color: var(--publi-button-color, #000);
    border-color: var(--publi-button-color, #000);
    color: white;
}

.corps-publi .boutonprin a {
    color: white;
}

.header-publi {
    background-color: white;
    position: relative;
    /* Radius charte sur la têtière rendue (spec EP, iso .cdp-tetiere du centre de presse).
       overflow:hidden rogne l'image / le fallback / les cosignataires (et le bleed
       .tetiere-background) aux coins arrondis. */
    border-radius: var(--radius, 8px);
    overflow: hidden;
}

.header-publi-tetiere {
    width: 100%;
    display: block;
    height: auto;
}

.tetiere-background{
    background-color: var(--lg);
    position: absolute;
    /* Le fond suit le contenu, il ne s'etend plus bord a bord (EP 15/08/2026).
       En 100vw, il posait une bande grise d'un bord a l'autre de la fenetre
       DERRIERE une image qui, elle, porte un radius : la tetiere cessait de se
       lire comme une carte, et les deux formes de tetiere — televersee et
       generee — ne se ressemblaient plus sur grand ecran. */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--radius, 8px);
    z-index: -1;
}

.contenu-publication {
    min-height: calc(100% - 82px);
    display: flex;
    flex-direction: column;
    width: 100%
}

.top-publi {
    height: 50px;
    margin: 20px 20px 0px 0px;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
}

.mid-publi {
    display: flex;
    flex-direction: row;
}


.main-publi {
    width: clamp(75%, 100%, 100%);
}

.article-publi {
    border: solid 1px var(--publi-title-color, #E5E2DA);
    border-radius: var(--radius, 8px);
    margin: 0px 20px 20px 20px;
    padding: 20px;
    /* FIX 2026-06-10 : clip les enfants qui débordent via margin négatif (ex: .agenda-evt-list
       a margin:-20px pour aligner son fond crème sur les bords du parent). Sans overflow:hidden,
       les coins arrondis du border sont masqués par le débordement → bords colorés invisibles. */
    overflow: hidden;
}

.conf-presse {
    border: solid 1px #E5E2DA;
    border-radius: var(--radius, 8px);
    margin: 0 0 20px 0;
    padding: 20px;
}

/* Accordéon publication (Prise de vue / Détails / En présence de). Les boutons
   `.publication-acc-tab` portent un `flex:1 1 0` inline mais le conteneur n'avait
   PLUS de `display:flex` (perdu au refacto inline→CSS) → ils s'empilaient/décalaient.
   Desktop = côte à côte (chaque bouton moitié) ; VM = empilés pleine largeur (@media). */
.publication-acc-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
/* Chaque onglet = .cta plein (gabarit unique) + specifics accordéon : moitié-moitié
   côte à côte et libellé à gauche / chevron à droite. */
.publication-acc-tabs .publication-acc-tab {
    flex: 1 1 0;
    justify-content: space-between;
}

/* ===== Modal d'inscription (publication_etape_4) ===== */
.publication-registration-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.publication-registration-modal.is-open {
    display: flex;
}
.publication-registration-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.publication-registration-modal-content {
    position: relative;
    background: #fff;
    border-radius: var(--radius, 8px);
    width: min(760px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 32px 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.publication-registration-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.publication-registration-modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
}
.publication-registration-modal-close svg {
    width: 22px;
    height: 22px;
}
.publication-registration-modal-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
    color: var(--publi-title-color, #0A0A0A);
    text-align: center;
}
body.publication-registration-modal-open {
    overflow: hidden;
}

.description-publi {
    width: 30%;
    min-width: 260px; /* assure des boutons sidebar suffisamment larges (style aligné salle de presse) */
    margin: 0px 0px 20px 0px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Border-radius aligné sur la salle de presse pour la sidebar publication (3px, léger) */
.description-publi .sdp-sidebar-btn {
    border-radius: var(--radius, 8px);
}

/* Logo profil : TOUJOURS carré (largeur = hauteur = largeur boutons) — règle absolue projet */
.description-publi .profile-logo {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.description-publi .profile-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* contain pour préserver le logo sans le déformer ; le carré est donné par le parent */
    display: block;
}

/* À propos : alignement strict sur le bord gauche du logo + boutons (aucun padding/margin gauche) */
.description-publi .sdp-sidebar-about {
    width: 100%;
    box-sizing: border-box;
}

.publication-illustration img,
.publication-video iframe {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

.publication-illustration img {
    height: auto;
}

.publication-video iframe {
    border: 0;
    aspect-ratio: 16 / 9;
    height: auto;
}

.publication-texte,
.publication-texte * {
    font-family: inherit;
    color: var(--publi-base-color, #000);
}

.publication-texte h1,
.publication-texte h2,
.publication-texte h3,
.publication-texte h4,
.publication-texte h5,
.publication-texte h6,
.info-utile h3 {
    color: var(--publi-title-color, #0A0A0A);
}

/* ⭐ L INTERTITRE AVAIT LA COULEUR DES TITRES, MAIS AUCUNE TAILLE (EP, 07/09/2026).
   L echelle de main.css s arrete au Titre 3 (32 / 24 / 20) : le h4 retombait sur
   la valeur par defaut du navigateur, soit exactement le corps du texte. Choisir
   « Intertitre » ne changeait donc rien de visible et le style passait pour mort.
   18 px se place entre le Titre 3 et le paragraphe. Regle PORTEE ICI et non sur le
   h4 global : ailleurs dans l application le h4 sert a des tailles deja fixees, et
   les pages publiques le mettent meme SOUS leur h3 — un 18 px global les casserait. */
.publication-texte h4 {
    font-size: 18px;
    font-weight: 700;
}

/* VM — titres DANS LE CONTENU alignés sur la réduction du titre principal (30→26).
   Titre 1 = 26px (= titre principal VM) ; Titres 2 & 3 réduits de la MÊME proportion
   (×26/32 = 0,8125) depuis les tailles main.css (32/24/20). Desktop inchangé. EP 03/07. */
@media (max-width: 768px) {
    .publication-texte h1 { font-size: 26px; }
    .publication-texte h2 { font-size: 19.5px; }
    .publication-texte h3 { font-size: 16.25px; }
    /* La meme reduction appliquee au 4e niveau le ferait passer SOUS le corps du
       texte : un intertitre plus petit qu un paragraphe n est plus un titre. On
       plafonne au corps, la graisse et la couleur du profil le distinguent. */
    .publication-texte h4 { font-size: 16px; }
}

.publication-cosignataires {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* « Signature » (contacts / cosignataires) DÉTACHÉE : carte sœur de .article-publi
   dans .main-publi (empilée sous le contenu). Marges G/D = 20px → bords alignés sur
   .article-publi ; marge basse charte → pas collée au footer. Radius 8px, padding 20px
   ISO carte de contenu. Cosignataires = texte sans bord → pas d'imbrication. EP 03/07. */
.publi-signature-card {
    border: 1px solid var(--publi-title-color, #E5E2DA);
    border-radius: var(--radius, 8px);
    margin: 0 20px max(12px, var(--block-gap, 16px)) 20px;
    padding: 20px;
    box-sizing: border-box;
}
/* Pas de filet (gris ni couleur) après le label « Votre / Vos contact(s) » — EP 03/07 */
.publi-signature-card .ligne-cosignataires { display: none; }

.footer-publi {
    width: 100vw;
    background-color: var(--ink);
    min-height: 150px;
    color: var(--paper);
    padding: 20px 20%;
}

/* --- Pied de page du profil (image) --- */
.pdp-publi {
    margin-top: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.pdp-publi-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.vos-cosignataires {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
}
/* Note historique : la regle specifique `.vos-cosignataires > div:first-child`
   a ete supprimee 2026-06-09. Le titre est desormais un
   <h3 class="publi-section-label"> qui herite de la classe utilitaire centrale
   .publi-section-label (cf. plus haut dans ce fichier). Une seule source de
   verite pour la couleur des titres de section sur PE4 ouvert. */

.texte-cosignataires {
    flex: 0 0 auto;
}

.ligne-cosignataires {
    border-top: solid 1px var(--publi-title-color, #E5E2DA);
    ;
    height: 0px;
    margin-left: 5px;
    flex: 1 1 auto;
}

.cosignataire {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
}

/* Carte contact VM (maquette 844) — hors VM : wrappers transparents (display:contents)
   + avatar masqué → desktop = texte simple inchangé. Le style « carte » est en @media ≤768. */
.cosignataire-head,
.cosignataire-idbox { display: contents; }
.cosignataire-avatar { display: none; }

.cosignataire-contact {
    font-weight: bold;
}

.cosignataire-organisme,
.cosignataire-contact,
.cosignataire-fonction,
.cosignataire-telephone,
.cosignataire-mobile,
.cosignataire-email {
    text-align: left;
    white-space: nowrap;
}

.cosignataire-fonction {
    max-width: 35ch;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.cosignataire-email a {
    color: var(--publi-base-color, #000);
    text-decoration: none;
}

.cosignataire-email a:hover {
    text-decoration: underline;
}

/* ============================================================================
   CONTACT DESTINATAIRE UNIFIÉ — `.pub-contact` (source de vérité UNIQUE, charte v8).
   Utilisé par le partial _contact_card_public.php pour les 3 rendus destinataire
   (contact profil, cosignataires, contact sidebar). Desktop = texte simple empilé
   (wrappers transparents + avatar masqué → le conteneur porte la carte/le contexte) ;
   VM (≤768) = carte-avatar (plus bas dans le @media). Réplique fidèle de l'ex
   `.cosignataire-*` pour zéro régression desktop.
   ============================================================================ */
.pub-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
}
.pc-head,
.pc-idbox { display: contents; }
.pc-avatar { display: none; }
.pc-name { font-weight: bold; }
.pc-name,
.pc-role,
.pc-org,
.pc-phone,
.pc-mobile,
.pc-mail {
    text-align: left;
    white-space: nowrap;
}
.pc-role {
    max-width: 35ch;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}
.pc-mail a {
    color: var(--publi-base-color, #000);
    text-decoration: none;
}
.pc-mail a:hover { text-decoration: underline; }

/* `.pub-contact` en VM = carte-avatar (maquette 844) : bord + radius, avatar initiales,
   nom/fonction, puis tél/mobile/mail avec icône (mask couleur profil) + filet. AUTO-
   SUFFISANT (indépendant du conteneur) → identique en contenu ET en sidebar. */
@media (max-width: 768px) {
    .pub-contact {
        width: 100%;
        align-items: stretch;
        border: 1px solid var(--publi-title-color, #E5E2DA);
        border-radius: var(--radius, 8px);
        padding: 14px 16px;
        box-sizing: border-box;
    }
    .pub-contact .pc-head { display: flex; align-items: center; gap: 12px; }
    .pub-contact .pc-idbox { display: block; flex: 1 1 auto; min-width: 0; }
    .pub-contact .pc-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        height: 44px;
        border-radius: var(--radius-pill, 999px);
        background: var(--lg, #F2F2F0);
        color: var(--publi-title-color, #0A0A0A);
        font-weight: 800;
        font-size: 16px;
    }
    .pub-contact .pc-name { font-weight: 700; font-size: 15.5px; line-height: 1.2; white-space: normal; }
    .pub-contact .pc-role,
    .pub-contact .pc-org { color: #5C5648; font-size: 13px; margin-top: 1px; white-space: normal; }
    .pub-contact .pc-phone,
    .pub-contact .pc-mobile,
    .pub-contact .pc-mail {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #F0EEE7;
        font-size: 14px;
        color: var(--publi-title-color, #0A0A0A);
        white-space: normal;
    }
    .pub-contact .pc-mail a { color: inherit; text-decoration: none; }
    .pub-contact .pc-phone::before,
    .pub-contact .pc-mobile::before,
    .pub-contact .pc-mail::before {
        content: "";
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        background-color: currentColor;
        -webkit-mask: no-repeat center / contain;
        mask: no-repeat center / contain;
    }
    .pub-contact .pc-phone::before,
    .pub-contact .pc-mobile::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 16.42v3.54a1 1 0 0 1-1.09 1A19.5 19.5 0 0 1 3 3.09 1 1 0 0 1 4 2h3.54a1 1 0 0 1 1 .75c.13.62.3 1.23.51 1.82a1 1 0 0 1-.24 1L7.2 8a15.05 15.05 0 0 0 8.8 8.8l1.42-1.61a1 1 0 0 1 1-.24c.59.21 1.2.38 1.82.51a1 1 0 0 1 .76 1Z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 16.42v3.54a1 1 0 0 1-1.09 1A19.5 19.5 0 0 1 3 3.09 1 1 0 0 1 4 2h3.54a1 1 0 0 1 1 .75c.13.62.3 1.23.51 1.82a1 1 0 0 1-.24 1L7.2 8a15.05 15.05 0 0 0 8.8 8.8l1.42-1.61a1 1 0 0 1 1-.24c.59.21 1.2.38 1.82.51a1 1 0 0 1 .76 1Z'/></svg>");
    }
    .pub-contact .pc-mail::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm17 4.24-7.94 7.15L4 7.23V19h16V7.24ZM4.51 5l7.55 6.78L19.5 5H4.51Z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm17 4.24-7.94 7.15L4 7.23V19h16V7.24ZM4.51 5l7.55 6.78L19.5 5H4.51Z'/></svg>");
    }
}

.afooter {
    text-decoration: none;
    color: white;
}

.afooter:hover {
    text-decoration: underline;
}

.title-publi {
    font-size: 30px;
    color: var(--publi-title-color, inherit);
    font-weight: bold;
}

.conference-block {
    margin: 10px 20px 30px 20px;
    text-align: center;
}

/* Bloc « infos clés » dédié VM (maquette 844) — masqué en desktop, activé ≤768 */
.keyinfo-vm { display: none; }

.conference-block-title {
    color: var(--publi-title-color, #0A0A0A);
    font-size: 28px;
    font-weight: 700;
    margin: 10px 0 18px 0;
}

.conference-block-items {
    display: flex;
    gap: 24px;
    align-items: start;
    justify-content: space-around;
    flex-wrap: wrap;
}

.conference-block-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 170px;
    width: calc(33% - 48px);
}

.conference-block-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.conference-block-icon svg {
    width: 30px;
    height: 30px;
}

/* Icône Remix (lieu : ri-map-2-line / ri-webcam-line) alignée sur la taille des SVG */
.conference-block-icon i {
    font-size: 30px;
    line-height: 1;
}

/* Visioconférence : pas de carte → aplat gris avec l'icône visio centrée
   (occupe la même place que le plan d'accès des événements adresse/GPS). */
.conference-visio-map {
    height: 300px;
    background: #e5e2da;
    border-radius: var(--radius, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #716D61;
}
.conference-visio-map i {
    font-size: 72px;
    line-height: 1;
}

.conference-block-text {
    color: #7a7a7a;
    font-weight: 600;
    white-space: pre-line;
}

.conference-block-main-title {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700;
    color: var(--publi-title-color, #0A0A0A);
}

.conference-block-organizer {
    margin-top: 6px;
    color: #6f6f6f;
    font-weight: 600;
}



.salle-de-presse {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    margin: 10px 20px;
    gap: 20px;
}

/* === Classes utilitaires : titres / labels de section dans la publication ===
   Source de verite UNIQUE pour la TYPOGRAPHIE des titres de section. La COULEUR
   est intentionnellement absente — elle est portee par le container parent
   qui connait son fond (ex. .map-texte sur fond noir herite `color: white`,
   .vos-cosignataires sur fond clair impose --publi-title-color). Eviter de
   forcer color: dans la classe sinon on override le `color: white` des cards
   sombres → texte invisible (regression vecue 2026-06-09).

   .publi-section-label : label sobre, taille hérite du parent
     → cas type : "Votre contact" dans .vos-cosignataires (fond cream)
   .publi-section-title : titre h2, taille 22px
     → cas type : "Plan d'accès" dans .map-texte (fond couleur profil) */
.publi-section-label,
.publi-section-title {
    margin: 0;
    font-weight: 700;
    /* color volontairement OMISE : c'est le container parent qui decide */
}
/* .publi-section-label : taille HERITEE du contexte pour ne pas casser le
   layout (ex. flex row avec un filet) — neutralise la font-size browser-default
   des balises h3/h4 qui imposeraient une taille agrandie. */
.publi-section-label {
    font-size: inherit;
    line-height: inherit;
}
.publi-section-title {
    font-size: 22px;
    line-height: 1.3;
    text-align: left;
}

/* Couleur du titre "Votre contact" / "Vos contacts" : portee par le container
   .vos-cosignataires (fond clair, donc on impose la couleur des titres profil
   pour qu'elle matche le filet sous-jacent). */
.vos-cosignataires .publi-section-label {
    color: var(--publi-title-color, #0A0A0A);
    font-size: 16px;
}
/* Pour .map-texte (.publi-section-title) : pas d'override → herite du
   `color: white` du container .map-texte (cf. plus bas). */

/* === Anti-carre-gris-fantome : masque le wrapper merged s'il est vide ===
   Si aucun bouton (Salle de presse / Demande presse / Kit presse / Retrouvez-nous)
   n'est rendu a l'interieur, le wrapper .sdp-reseaux--merged restait visible
   avec son border 1px → carre gris fantome en bas a droite (regression 2026-06-09).
   Solution structurelle : `:has()` selectionne le wrapper SANS enfant et le masque.
   Compat : Chrome 105+, Safari 15.4+, Firefox 121+ — sur les browsers anterieurs,
   le garde-fou PHP `$__hasMergedBtn` dans publication_etape_4.php reste actif
   en backup (ceinture + bretelles). */
.salle-de-presse--merged:not(:has(*)),
.sdp-reseaux--merged:not(:has(*)) {
    display: none !important;
}

.sdp-reseaux {
    width: 70%;
    border: solid 1px #E5E2DA;
    ;
    padding: 10px;
    gap: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.reseaux-sociaux {
    width: 30%;
    border: solid 1px #E5E2DA;
    ;
    padding: 10px;
    gap: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    color: var(--publi-base-color, #000);
}

.reseaux-sociaux a {
    color: var(--publi-base-color, #000);
    width: 30px;
    height: 30px;
}

.reseaux-sociaux svg {
    width: 30px;
    height: auto;
}

.info-utile {
    /* width auto → remplit .main-publi moins les marges 20px G/D = MÊME largeur que
       .article-publi et .publi-signature-card (bords alignés). EP 03/07. */
    display: flex;
    flex-direction: column;
    margin: 0 20px 60px 20px;
    border: solid 1px var(--publi-title-color, #E5E2DA);
    ;
    padding: 10px;
}

.info-utile-part-0 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* .info-utile-part-1 = <h3 class="publi-section-label"> : weight 700 + couleur via
   .publi-section-label et la règle h3 partagée. On force 16px = MÊME taille que
   « Votre contact » (.vos-cosignataires impose 16px) ; sinon l'avis hérite d'une
   base plus petite → différence de taille. EP 03/07. */
.info-utile-part-1 { font-size: 16px; }

.info-utile-part-2 {
    display: flex;
    gap: 6px;
}

.info-utile-part-3 {
    font-size: 12px;
}

.info-utile-part-2 svg {
    width: 24px;
    height: auto;
}

.publication-rating-star {
    color: var(--publi-title-color, #f3a600);
    flex: 0 0 auto;
}

.bouton-icone {
    display: flex;
    gap: 10px;
    justify-content: center;
    text-decoration: none;
}

.bouton-icone svg {
    width: 24px;
    height: auto;
    color: white;
}

.bouton-icone-desc {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    text-decoration: none;
}

.bouton-icone-desc svg {
    width: 24px;
    height: auto;
    color: white;
}

.bouton-download,.bouton-icone-desc,.bouton-icone-choix,.find-us-on{
    display:flex;
    height:32px;
    padding:1px 11px;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
}

/* Hauteur 32px des boutons SIDEBAR (« Salle de presse / Demande presse » = -desc).
   Les boutons d'ACTION (.bouton-icone-choix) sont désormais gouvernés par .cta
   (gabarit unique, hauteur définie par le padding) → retirés de cette règle. */
.boutonprin.bouton-icone-desc,
.boutonsec.bouton-icone-desc {
    height: 32px;
    box-sizing: border-box;
    line-height: 1;
}

.bouton-download {
    min-width: 250px;
    width: auto;
    flex: 0 0 auto;
    justify-content: space-between;
    border-radius: var(--radius, 8px);
}

.sdp-reseaux-desc {
    width: calc(100% - 20px);
    margin: 20px 10px;
    gap: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.find-us-on {
    width: calc(100% - 20px);
    margin: 10px 0px;
}

.rs-icones-textes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0px;
}

.rs-icone-texte {}

.rs-icone-texte svg {
    width: 24px;
    height: auto;
}

.rs-icone-texte a {
    text-decoration: none;
    color: var(--publi-base-color, #000);
    display: flex;
    gap: 5px;
}

.rs-icone-texte a:hover {
    text-decoration: underline;
    color: var(--publi-base-color, #000);
    cursor: pointer;
}

.conteneur-formulaire-publication {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}

/* Civilité (fixe) + Prénom côte à côte dans la colonne gauche du parent 1fr 1fr.
   Nom est un enfant direct de .conteneur-formulaire-publication (colonne droite). */
.pub-form-identity-row {
    display: flex;
    gap: 12px;
}

/* ⚠️ Selecteur DOUBLE et `flex-basis` explicite : `.formulaire-publication` pose
   une largeur pleine, declaree plus haut mais a specificite egale — elle gagnait
   et la civilite occupait 353 px pendant que le prenom tombait a 26 px. */
.pub-form-identity-row .pub-form-identity-civility {
    /* 105 px : « Monsieur » (58 px, le plus long depuis le retrait de
       « Mademoiselle ») + 44 px de padding et de chevron, plus une marge de 3 px.
       Largeur DICTEE PAR LE CONTENU, jamais choisie a l oeil. */
    flex: 0 0 105px;
    width: 105px;
    min-width: 105px;
}

.pub-form-identity-row input {
    flex: 1;
    min-width: 0;
}

@media (max-width: 600px) {
    .pub-form-identity-civility {
        width: 110px;
    }
}

.publication-registration-panel {
    margin: 20px 0;
}

.publication-registration-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #0A0A0A;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.publication-registration-info-text {
    font-size: 13px;
    color: #5C5648;
    line-height: 1.5;
    margin: 0 0 8px;
    font-style: italic;
}
.publication-registration-mandatory {
    font-size: 12px;
    color: #B5170D;
    margin: 0 0 14px;
    font-weight: 600;
}

.publication-registration-form .conteneur-choix label {
    color:  #000;
}

/* Radios de mode de participation : libellé au-dessus, bouton radio centré dessous */
.conteneur-choix-radios {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 20px;
}
.participation-radio-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    padding: 10px 14px;
    border: 1px solid #E5E2DA;
    border-radius: var(--radius, 8px);
    background: #FFFFFF;
    color: #0A0A0A;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.participation-radio-label:hover {
    border-color: #0A0A0A;
}
.participation-radio-label:has(input[type="radio"]:checked) {
    border-color: #0A0A0A;
    background: #FAF9F5;
}
.participation-radio-label .participation-radio-text {
    line-height: 1.3;
}
.participation-radio-label input[type="radio"] {
    margin: 0;
    accent-color: #0A0A0A;
    width: 16px;
    height: 16px;
}
@media (max-width: 768px) {
    /* VM : choix de participation empilés sur TOUTE la largeur utile (1 par ligne,
       alignés sur les champs). Sélecteur compound (.conteneur-choix.conteneur-choix-radios
       = 0,2,0) pour battre `.conteneur-choix{flex-direction:row}` (0,1,0, plus bas dans
       le fichier) qui sinon remet les 3 en ligne. */
    .conteneur-choix.conteneur-choix-radios {
        gap: 10px;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .conteneur-choix-radios .participation-radio-label {
        min-width: 0;
        width: 100%;
        padding: 12px 14px;
        box-sizing: border-box; /* padding+filet inclus → pas de dépassement de la largeur utile */
    }
}

input.formulaire-publication,
select.formulaire-publication,
textarea.formulaire-publication {
    width: 100%;
    padding: 9px 12px;
    height: 38px;
    background: #fff;
    border: 1px solid #E5E2DA;
    border-radius: var(--radius, 8px);
    color: #0A0A0A;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select.formulaire-publication {
    /* Chevron custom pour les select (harmonisation avec les input) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A0A0A'><path d='M12 14L7.75732 9.75736L9.17154 8.34315L12 11.1716L14.8284 8.34315L16.2426 9.75736L12 14Z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px 18px;
    padding-right: 32px;
}
input.formulaire-publication:focus,
select.formulaire-publication:focus,
textarea.formulaire-publication:focus {
    outline: none;
    border-color: #0A0A0A;
    box-shadow: 0 0 0 1px #0A0A0A inset;
}
input.formulaire-publication::placeholder,
textarea.formulaire-publication::placeholder {
    color: #9C9789;
    opacity: 1;
}

.publication-registration-panel[data-participation-panel="group"] {
    text-align: center;
}
.publication-group-size-label {
    display: block;
    color: #0A0A0A;
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 10px;
    text-align: center;
}
.publication-group-size-suffix {
    color: #0A0A0A;
}

select.publication-group-size-input {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: block;
    text-align: left;
}

.publication-companion-item {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E2DA;
}
.publication-companion-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Boutons valider / décliner empilés et centrés dans le formulaire */
.publication-registration-form .conteneur-choix {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}
.publication-registration-decline-form {
    margin-top: 10px;
}
.publication-registration-decline-form .conteneur-bouton-choix {
    display: flex;
    justify-content: center;
}

/* ============================================================================
   CTA — GABARIT + COULEURS UNIFIÉS (source de vérité UNIQUE).
   Tout bouton d'action de la publication porte `.cta` (plein, couleur profil) ou
   `.cta cta--outline` (action secondaire), + `.cta--block` pour la pleine largeur.
   Défini APRÈS le groupe .bouton-icone-choix (height:32/padding) pour gagner le
   tie-break de spécificité (0,1,0) ; `height:auto` neutralise le 32px hérité.
   Couleurs contextuelles profil, jamais de hex codé en dur. Charte v8 (radius 6).
   ============================================================================ */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 14px 20px;
    /* font-family: inherit → tous les CTA prennent la police du CONTENU (qui a le 700),
       et non Marianne forcée par main.css sur .boutonsec (Marianne n'a que le 500 →
       « Décliner » n'apparaissait pas en bold contrairement aux autres CTA). */
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: var(--radius, 8px);
    border: 1.5px solid transparent;
    background: var(--publi-button-color, var(--publi-title-color));
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.cta:hover { filter: brightness(0.94); }
.cta--outline {
    background: #fff;
    color: var(--publi-button-color, var(--publi-title-color));
    border-color: var(--publi-button-color, var(--publi-title-color));
}
.cta--outline:hover { filter: none; background: var(--lg, #F2F2F0); }
.cta--block { width: 100%; }

/* « Soumettre votre demande d'accréditation » = .cta plein ; seul le min-width desktop
   lui est propre (gabarit + couleur = .cta). */
.accreditation-submit-button { min-width: 320px; }

/* Popup « participation annulée » (déclenchée depuis le mail ou la page) */
.publication-cancel-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.publication-cancel-popup.is-open { display: flex; }
.publication-cancel-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.publication-cancel-popup-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    background: #FFFFFF;
    border: 1px solid #E5E2DA;
    border-radius: var(--radius, 8px);
    padding: 28px 56px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.publication-cancel-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #C8102E;
    background: #FFFFFF;
    color: #C8102E;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.publication-cancel-popup-close:hover,
.publication-cancel-popup-close:focus { background: #FFF1F1; outline: none; }
.publication-cancel-popup-close svg { width: 14px; height: 14px; fill: currentColor; }
.publication-cancel-popup-message {
    color: #C8102E;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.45;
}

/* Bouton désactivé « Vous avez annulé votre participation » (état post-annulation) */
.publication-already-cancelled {
    width: auto;
    min-width: 360px;
    height: auto !important;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 28px !important;
    line-height: 1.2;
    white-space: nowrap;
    font-weight: 700;
    background: #C8102E !important;
    border: 1px solid #C8102E !important;
    color: #FFFFFF !important;
    cursor: default !important;
    opacity: 1 !important;
    box-shadow: none;
}
.publication-already-cancelled:hover { background: #C8102E !important; }

/* Boutons « Valider ma participation » / « Décliner » = .cta (gabarit + couleurs, cf.
   .cta / .cta--outline). Ici SEULEMENT leurs specifics : largeur fixe desktop + place
   de l'icône absolue à droite (padding-right). */
.publication-registration-form .conteneur-choix .boutonprin,
.publication-registration-decline-form .conteneur-bouton-choix .boutonsec {
    width: 260px;
    position: relative;
    padding-right: 44px;
    /* Force le poids du gabarit .cta (700, bold Marianne) : un style global
       .boutonsec/.boutonprin le surchargeait → Décliner plus léger. 0,3,0 gagne. */
    font-weight: 700;
}
.publication-registration-form .conteneur-choix .boutonprin svg,
.publication-registration-decline-form .conteneur-bouton-choix .boutonsec svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
}
.publication-registration-decline-form .conteneur-bouton-choix .boutonsec svg {
    color: inherit;
}

/* Bouton « Ajouter un accompagnateur » — outline noir */
.publication-add-companion-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #FFFFFF;
    color: #0A0A0A;
    border: 1px solid #0A0A0A;
    border-radius: var(--radius, 8px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.publication-add-companion-button:hover:not(:disabled) {
    background: #F3EFE7;
}
.publication-add-companion-button svg {
    width: 16px;
    height: 16px;
}

/* État désactivé pour tous les boutons primaires du formulaire d'inscription */
.publication-registration-form .boutonprin:disabled,
.publication-add-companion-button:disabled {
    background: #E5E2DA;
    color: #9C9789;
    border-color: #E5E2DA;
    cursor: not-allowed;
    opacity: 1;
}
.publication-registration-form .boutonprin:disabled svg,
.publication-add-companion-button:disabled svg {
    color: #9C9789;
}

/* ===== Responsive mobile (modal d'inscription) ===== */
@media (max-width: 768px) {
    .publication-registration-modal {
        padding: 0;
        /* top-align : le contenu commence en haut et défile ; évite que le centrage
           pousse le dernier bouton derrière la barre nav mobile. */
        align-items: flex-start;
    }
    .publication-registration-modal-content {
        border-radius: 0;
        width: 100%;
        max-width: 100%;
        /* Hauteur = viewport VISIBLE réel. Cascade de fallbacks : 100vh (base) →
           100dvh (navigateurs récents) → --app-vvh (JS visualViewport, le plus fiable
           sur iOS Safari, cf. app_viewport_height.js). */
        max-height: 100vh;
        max-height: 100dvh;
        max-height: var(--app-vvh, 100dvh);
        /* Padding bas = barre Safari (~50px, non couverte par dvh sur d'anciennes versions)
           + safe-area (home indicator) → « Décliner » toujours entièrement accessible au
           défilement. Padding haut safe-area → titre/croix dégagent le notch au scroll. */
        padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(56px + env(safe-area-inset-bottom, 0px));
    }
    .publication-registration-modal-title {
        font-size: 16px;
        padding-right: 36px;
        text-align: left;
        margin-bottom: 14px;
    }
    .conteneur-formulaire-publication {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .publication-registration-form .conteneur-choix .boutonprin,
    .publication-registration-decline-form .conteneur-bouton-choix .boutonsec {
        width: 100%;
        justify-content: center;
    }
}

.publication-add-companion-button {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.publication-group-size-warning {
    margin-top: 8px;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
}

.publication-add-companion-button[hidden] {
    display: none !important;
}

.asterisque-publication {
    font-size: 12px;
    font-style: italic;
    color: rgb(185, 185, 185);
}

.bouton-icone-choix {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.bouton-icone-choix svg {
    width: 24px;
    height: auto;
    color: white;
}

.conteneur-choix {
    margin: 20px 0px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-around;
}

.conteneur-map {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
}

.map-texte {
    display: flex;
    flex-direction: column;
    /* Titre "Plan d'accès" centre verticalement, aligne a gauche (text-align par defaut)
       — anciennement justify-content: space-between + div &nbsp; en pied, regression 2026-06-09. */
    justify-content: center;
    width: 180px;
    height: 180px;
    min-height: 0;
    box-sizing: border-box;
    /* Couple fond aplat + police aplat : pilote par le profil emetteur via
       profilcouleuraplat / profilcouleuraplatpolice (exposees par PE4 ouvert).
       Le client garantit le contraste RGAA 4.5:1 en choisissant les 2 couleurs
       en BDD. Fallback : couleur titre + blanc si aplat non configure. */
    background-color: var(--publi-aplat-color, var(--publi-title-color, #000));
    border: solid 1px var(--publi-aplat-color, var(--publi-title-color, #000));
    border-radius: var(--radius, 8px);
    padding: 16px;
    color: var(--publi-aplat-text-color, #FFFFFF);
    flex-shrink: 0;
}

/* Note historique : la regle specifique `.map-texte .map-texte-titre` a ete
   supprimee 2026-06-09. Le titre "Plan d'acces" est desormais un
   <h2 class="publi-section-title"> qui utilise la classe utilitaire centrale
   .publi-section-title (cf. plus haut dans ce fichier). */

.map-texte .map-texte-actions {
    display: flex;
    justify-content: flex-end;
}

.map-texte .map-fullscreen-btn {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.map-texte .map-fullscreen-btn:hover,
.map-texte .map-fullscreen-btn:focus {
    opacity: 0.85;
    outline: none;
}

.map-texte .map-fullscreen-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.map {
    flex: 1 1 auto;
    padding: 0;
    border: solid 1px #E5E2DA;
    border-radius: var(--radius, 8px);
    height: 180px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.publication-map {
    width: 100%;
    height: 100%;
    min-height: 0;
    position: absolute;
    inset: 0;
    background: #f5f3ec;
}

.publication-map-loading,
.publication-map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    color: #6b6b6b;
    font-style: italic;
    font-size: 14px;
}

/* Modale plein écran de la carte */
.publication-map-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.publication-map-modal[hidden] { display: none !important; }
.publication-map-modal-content {
    background: #fff;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    max-height: 85vh;
    border-radius: var(--radius, 8px);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.publication-map-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0A0A0A;
    border: 0;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.publication-map-modal-close:hover,
.publication-map-modal-close:focus { background: #8c0000; outline: none; }
.publication-map-modal-close svg { width: 18px; height: 18px; fill: currentColor; }
#publication-map-large { width: 100%; height: 100%; }
@media (max-width: 768px) {
    .publication-map-modal { padding: 0; }
    .publication-map-modal-content { max-width: none; max-height: none; border-radius: 0; height: 100vh; }
}

.publication-map .leaflet-control-attribution {
    font-size: 10px;
}

.complementaire-download {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 20px;
    background-color: var(--lg);
    border-radius: var(--radius, 8px);
    padding: 8px 12px 8px 20px;
    height: auto;
    min-height: 50px;
    box-sizing: border-box;
}

.complementaire-download-description {
    font-weight: 700;
}

.error {
    border: solid 2px var(--error);
    color: var(--error);
    width: clamp(75%, 100%, 100%);
    margin: 20px;
    padding: 20px;
    height: fit-content;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-error {
    color: var(--error);
    width: 48px;
}

.partager-toggle {
    color: var(--publi-title-color, var(--ink, #0A0A0A));
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.partager-toggle .icone {
    pointer-events: none;
}

.titre-partager {
    display: flex;
    justify-content: space-between;
    margin: 20px;
}

.partager-zone {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.partager-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 220px;
    padding: 14px;
    background: var(--lg);
    border: 1px solid #d7d7d7;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    flex-direction: column;
    z-index: 20;
}

.partager-menu.is-open {
    display: flex;
}

.partager-menu-lien {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius, 8px);
    text-decoration: none;
    color: var(--publi-title-color, var(--ink, #0A0A0A));
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    gap: 10px;
}

.partager-menu-lien:hover,
.partager-menu-lien:focus-visible {
    outline: none;
}

.partager-menu-lien-bouton {
    appearance: none;
}

.partager-menu hr {
    border: 0;
    border-top: 1px solid #E5E2DA;
    width: 100%;
}

.imagepdf {
    width: 100px;
    height: auto;
}

.only-print{
    display:none;
}

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

    .scroll-progress {
        width: 100%;
        left: 0;
        transform: none;
    }

    .salle-de-presse {
        flex-direction: column;
    }

    .sdp-reseaux,
    .reseaux-sociaux {
        width: calc(100% - 20px);
    }
}

@media (max-width: 650px) {
    .bouton-icone {
        width: 100%;
    }

    .sdp-reseaux {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .mid-publi {
        flex-direction: column;
    }

    .description-publi {
        width: calc(100% - 30px);
        padding: 10px;
        margin: 0;
    }

    .complementaire-download {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .conteneur-map {
        flex-wrap: wrap;
    }

    .map-texte {
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        min-height: 0;
        gap: 12px;
    }

    .map-texte .map-texte-actions {
        margin-left: auto;
    }

    .map {
        width: 100%;
        height: 220px;
    }

    .footer-publi {
        padding: 20px;
    }
}

@media print {
    .no-print {
        display: none;
    }

    .only-print {
        display: block !important;
    }

    .article-publi {
        border: none;
        padding: 0;
    }

    .bloc-a-ne-pas-couper {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ⛔ LA TÊTIÈRE NE S'IMPRIME PAS (EP, 11/09/2026 : « appliquons les mêmes contraintes
       que les PDF »). Le PDF dédié ne l'embarque pas — il se contente du logo et du visuel —
       alors que la page l'imprimait encore : un aplat de couleur pleine largeur, 1920 par 540,
       sur la première feuille de chaque tirage. Une seule règle suffit et couvre les quatre
       formes de têtière, l'image du profil, la bande des cosignataires, le bandeau de repli
       et le pixel transparent, puisque toutes vivent dans ce conteneur. L'émetteur reste
       nommé juste en dessous, dans la ligne « Auteur », comme dans le PDF. */
    .header-publi {
        display: none;
    }
}

.legende-block-show {
  width: calc(100% - 20px);
  background-color: var(--lg);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  margin:10px 0px;
}

/* Suppression marge top pour visualisation publication / SDP */
body.page-no-top-margin { margin: 0; padding-top: 6px; }
body.page-no-top-margin .pagepoumondroit { margin: 0 !important; width: 100% !important; }
body.page-no-top-margin .pageheart { width: 100% !important; }
body.page-no-top-margin .pagepoumondroit { padding-top: 6px !important; }

/* ============================================================================
   RADIUS GLOBAL — tous les blocs à filet dans les publications
   Restauration des coins arrondis (charte v8 : 6/8 px) écrasés le 27 mai.
   Règle « aucun filet ne touche un autre » : gap min 12px entre blocs encadrés.
   ============================================================================ */

/* Cartes de contenu — 8 px */
.article-publi,
.conf-presse,
.complementaire-download,
.sdp-reseaux,
.reseaux-sociaux,
.info-utile,
.publication-map,
.conteneur-map,
.legende-block-show {
    border-radius: var(--radius, 8px);
}

/* Boutons et icônes — 6 px */
.bouton-icone,
.bouton-icone-desc,
.bouton-icone-choix,
.bouton-download,
.find-us-on,
.sdp-sidebar-btn,
.publi-pdp .pdp-publi-image,
.event-card,
.legende-block-show {
    border-radius: var(--radius, 8px);
}

/* Illustrations et logos — 6 px */
.illustration-publi img,
.event-illustration img,
.cosignataire img,
.cosig-logo img,
.logo-publi img,
.publi-pdp-image,
.pdp-publi-image,
.header-publi-tetiere {
    border-radius: var(--radius, 8px);
}

/* Cards cosignataires — 6 px + gap */
.cosignataire,
.vos-cosignataires,
.publication-cosignataires > * {
    border-radius: var(--radius, 8px);
}

/* Aucun filet ne touche un autre : margin-bottom min 12 px sur blocs encadrés */
.article-publi,
.conf-presse,
.complementaire-download,
.sdp-reseaux,
.reseaux-sociaux,
.info-utile,
.publication-map,
.conteneur-map {
    margin-bottom: max(12px, var(--block-gap, 16px));
}

/* Logos profil et cosignataires — radius 8px sur le conteneur et l'image */
.profile-logo,
.profile-logo img,
.profil-logo,
.profil-logo img,
.cosig-logo,
.cosig-logo img,
.cosignataire-logo,
.cosignataire-logo img,
.sdp-sidebar-logo,
.sdp-sidebar-logo img {
    border-radius: var(--radius, 8px);
}
.profile-logo,
.profil-logo,
.cosig-logo,
.cosignataire-logo,
.sdp-sidebar-logo {
    overflow: hidden;
}

/* Carte plan d'accès — radius sur la combinaison Plan d'accès + map */
.conteneur-map {
    overflow: hidden;
    border-radius: var(--radius, 8px);
}
.map-texte,
.map {
    border-radius: var(--radius, 8px); /* radius 6px sur chaque carte (Plan d'acces + carto) */
}

/* Radius adouci (6 px cards / 4 px boutons / 6 px logos) — override final */
.article-publi,
.conf-presse,
.complementaire-download,
.sdp-reseaux,
.reseaux-sociaux,
.info-utile,
.publication-map,
.conteneur-map,
.legende-block-show,
.profile-logo,
.profile-logo img,
.profil-logo,
.profil-logo img,
.cosig-logo,
.cosig-logo img,
.cosignataire-logo,
.cosignataire-logo img,
.sdp-sidebar-logo,
.sdp-sidebar-logo img,
.cosignataire,
.vos-cosignataires,
.publication-cosignataires > *,
.illustration-publi img,
.event-illustration img,
.cosignataire img,
.header-publi-tetiere {
    border-radius: var(--radius, 8px);
}
.bouton-icone,
.bouton-icone-desc,
.bouton-icone-choix,
.bouton-download,
.find-us-on,
.sdp-sidebar-btn,
.event-card,
.btn,
.btn-add {
    border-radius: var(--radius, 8px);
}

/* ============================================================================
   Images inserees via TinyMCE — 3 formats normalises (decision EP 2026-06-08)
   ----------------------------------------------------------------------------
   Les classes ci-dessous sont la source de verite cote affichage (PE4 public,
   mail, salle de presse). Elles doivent rester ALIGNEES avec
   javascript/tinymce.js (constante tinymceImageContentStyle) sinon le rendu
   final diverge du preview de l'editeur.
   ============================================================================ */

img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
img.img-normale {
    display: block;
    margin: 12px auto;
    max-width: 100%;
    height: auto;
}
img.img-medium {
    max-width: 50%;
    height: auto;
}
img.img-petite {
    max-width: 33%;
    height: auto;
}
img.img-left {
    float: left;
    margin: 0 16px 8px 0;
}
img.img-right {
    float: right;
    margin: 0 0 8px 16px;
}
/* Clearfix sur les conteneurs de texte rich (sinon les float debordent du parent) */
.contenu .redactionnel::after,
.publication-redactionnel::after,
.publication-content::after {
    content: '';
    display: table;
    clear: both;
}

/* ============================================================================
   PE3 — WYSIWYG canvas autour du redactionnel et des complementaires
   ----------------------------------------------------------------------------
   Sur la page de recap PE3 (body.page-publication_etape_3), on enveloppe les
   blocs de contenu dans un canvas centre (720px) avec padding, fond papier,
   ombre douce — pour que le preview ressemble au rendu final PE4 (WYSIWYG).
   Decision EP 2026-06-09.
   ============================================================================ */
body.page-publication_etape_3 .contenu.redactionnel,
body.page-publication_etape_3 .contenu.complementaire,
body.page-publication_etape_3 .contenu.illustration {
    max-width: 720px;
    margin: 24px auto;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #E5E2DA;
    border-radius: var(--radius, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    font-family: "Marianne", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #0A0A0A;
}

/* === Vue désinscription conférence === */
.conference-unsubscribe-only-view .contenu-publication > * {
    display: none;
}

.conference-unsubscribe-only-view .contenu-publication > .publication-unsubscribe-only {
    display: flex;
    min-height: 86vh;
    align-items: center;
    justify-content: center;
}

.publication-unsubscribe-only-card {
    width: min(100%, 680px);
    padding: 40px 32px;
    border-radius: var(--radius, 8px);
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.publication-unsubscribe-only-message {
    margin-bottom: 20px;
    font-size: 1.125rem;
    line-height: 1.6;
}

.publication-unsubscribe-only-actions {
    display: flex;
    justify-content: center;
}

/* === Agenda / Info-travaux (etape 4) — cartes .agenda-evt-* / .it-*. Extrait du <style>
   inline de publication_etape_4.php le 2026-07-03 (charte : pas de CSS inline dans le PHP).
   Source unique (ancien bloc partiel surcharge par l inline = remplace). === */
    .agenda-evt-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: -20px;
        padding: 24px 20px;
        background: #FAF9F5;
    }

    .agenda-evt {
        background: #fff;
        border: 1px solid #E5E2DA;
        border-radius: var(--radius, 8px);
        padding: 18px 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .agenda-evt:hover {
        border-color: #D7D2C8;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .agenda-evt-head {
        display: flex;
        align-items: stretch;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Calendrier « Ajouter à un agenda » = ligne dédiée en bas de carte, aligné à droite. */
    .agenda-evt-cal-row {
        display: flex;
        justify-content: flex-end;
    }

    .agenda-evt-date-chip {
        flex: 1 1 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        background: var(--publi-button-color, #0A0A0A);
        color: #fff;
        border-radius: var(--radius, 8px);
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
    }

    .agenda-evt-date-chip .agenda-evt-date-value {
        font-weight: 600;
    }

    .agenda-evt-cal-btn {
        margin-left: auto;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #FAF9F5;
        border: 1px solid #E5E2DA;
        border-radius: var(--radius, 8px);
        color: #0A0A0A;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .agenda-evt-cal-btn:hover {
        background: #0A0A0A;
        color: #fff;
        border-color: #0A0A0A;
    }

    .agenda-evt-cal-btn svg {
        width: 22px;
        height: 22px;
    }

    .agenda-evt-title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--publi-title-color, #0A0A0A);
        line-height: 1.35;
    }

    .agenda-evt-summary {
        margin: 0;
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

    .agenda-evt-redac {
        margin: 0;
        font-size: 13px;
        color: var(--publi-base-color, #000);
        line-height: 1.6;
    }

    .agenda-evt-loc {
        margin: 0;
        color: #444;
        font-size: 13px;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .agenda-evt-loc svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .agenda-evt-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .agenda-evt-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: #F2F0E8;
        color: #0A0A0A;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--radius, 8px);
        cursor: pointer;
        position: relative;
        z-index: 2;
        border: 1px solid #E5E2DA;
        font-family: inherit;
        line-height: 1.2;
        -webkit-appearance: none;
        appearance: none;
    }

    .agenda-evt-btn:hover {
        background: #E5E2DA;
    }

    .agenda-evt-btn svg {
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

    .agenda-evt-btn * {
        pointer-events: none;
    }

    button.agenda-evt-btn {
        cursor: pointer !important;
    }

    /* Bouton inscription = couleur du profil pour le différencier des actions secondaires (téléchargement, lien). */
    .agenda-evt-btn--inscription {
        background: var(--publi-button-color, #0A0A0A);
        color: #fff;
        border: 0;
    }

    .agenda-evt-btn--inscription:hover {
        background: var(--publi-button-color, #0A0A0A);
        filter: brightness(1.08);
    }

    /* Indication complémentaire (Gratuit, Tarif, etc.) */
    .agenda-evt-indication {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        background: #F2F0E8;
        color: #5C5648;
        border: 1px solid #E5E2DA;
        border-radius: var(--radius, 8px);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Bloc « Autre contact » à l'intérieur du cartouche événement. */
    .agenda-evt-other-contact {
        margin: 4px 0 0;
        padding: 10px 12px;
        background: #FAF9F5;
        border: 1px solid #E5E2DA;
        border-radius: var(--radius, 8px);
        font-size: 13px;
        color: #0A0A0A;
        line-height: 1.5;
    }

    .agenda-evt-other-contact-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--publi-title-color, #0A0A0A);
    }

    .agenda-evt-other-contact-label svg {
        width: 14px;
        height: 14px;
    }

    .agenda-evt-other-contact-line {
        display: block;
    }

    .agenda-evt-other-contact-name {
        font-weight: 700;
    }

    .agenda-evt-other-contact a {
        color: var(--publi-title-color, #0A0A0A);
        text-decoration: none;
    }

    .agenda-evt-other-contact a:hover {
        text-decoration: underline;
    }

    .it-type-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
        padding: 8px 14px;
        border: 1px solid #E5E2DA;
        border-radius: var(--radius, 8px);
        background: #fff;
        font-size: 14px;
        color: #0A0A0A;
        font-weight: 600;
    }

    .it-type-badge i {
        font-size: 20px;
        line-height: 1;
        color: var(--publi-button-color, #0A0A0A);
    }

    /* === Info travaux : card spécifique. Tout en couleur profil, SEUL le badge icône en couleur du type === */
    .agenda-evt.it-evt {
        border: 2px solid var(--publi-button-color, #0A0A0A);
        border-radius: var(--radius, 8px);
        padding: 28px 22px 22px;
        position: relative;
        background: #fff;
    }

    .it-evt-head-row {
        display: flex;
        align-items: center;
        gap: 14px;
        position: relative;
        margin: 0 0 18px;
    }

    .it-evt-pill {
        flex: 1 1 auto;
        background: var(--publi-button-color, #0A0A0A);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.3;
        padding: 14px 24px;
        border-radius: var(--radius-pill, 999px);
        text-align: center;
    }

    /* SEUL élément avec couleur dédiée au type d'intervention */
    .it-evt-icon-badge {
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--it-color, #5C5648);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .it-evt-icon-badge i {
        font-size: 24px;
        line-height: 1;
        color: #fff;
    }

    .agenda-evt.it-evt .agenda-evt-title {
        color: var(--publi-button-color, #0A0A0A);
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 10px;
    }

    .agenda-evt.it-evt .agenda-evt-loc {
        color: var(--publi-button-color, #0A0A0A);
        font-weight: 600;
    }

    .agenda-evt.it-evt .agenda-evt-loc svg {
        color: var(--publi-button-color, #0A0A0A);
        width: 18px;
        height: 18px;
    }

    /* Rédactionnel agenda = « À propos » : desktop inline ; VM = lien « Détails » → page
       plein écran lecture seule. Hack checkbox (calqué sur .apropos-vm-*), aucun JS.
       Hors VM : contrôles VM masqués, le rédactionnel reste inline dans .agenda-evt-detail. */
    .agenda-evt-detail-toggle,
    .agenda-evt-detail-link,
    .agenda-evt-detail-close,
    .agenda-evt-detail-title { display: none; }

    @media (max-width: 768px) {
        .agenda-evt-detail-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            margin-top: 4px;
            padding: 12px 2px;
            border-top: 1px solid #E5E2DA;
            font-size: 14px;
            font-weight: 700;
            color: var(--publi-title-color, #0A0A0A);
            cursor: pointer;
        }
        .agenda-evt-detail-link-txt { flex: 1 1 auto; line-height: 1.35; }
        .agenda-evt-detail-chev { flex: 0 0 auto; color: #716D61; font-size: 20px; line-height: 1; }

        .agenda-evt-detail {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: #fff;
            margin: 0;
            padding: 12px 0 0;
            display: none;
            flex-direction: column;
        }
        .agenda-evt-detail-toggle:checked ~ .agenda-evt-detail { display: flex; }
        .agenda-evt-detail-close {
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: flex-end;
            margin: 0 14px;
            width: 40px;
            height: 40px;
            border: 1px solid #E5E2DA;
            border-radius: var(--radius-pill, 999px);
            background: #fff;
            font-size: 22px;
            line-height: 1;
            color: #0A0A0A;
            cursor: pointer;
        }
        .agenda-evt-detail-title {
            display: block;
            margin: 8px 22px 12px;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.3;
            color: #0A0A0A;
        }
        .agenda-evt-detail-body {
            flex: 1 1 auto;
            overflow-y: auto;
            padding: 0 22px 28px;
            font-size: 15px;
            line-height: 1.6;
            color: #222;
        }
    }

/* ===== Formulaire d'inscription agenda (publication_etape_4) ===== */
.agenda-inscription-form {
    width: 100%;
    box-sizing: border-box;
}
.agenda-inscription-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px 12px;
}
.agenda-inscription-help {
    margin: 8px 0 0;
    font-size: 11px;
    color: #716D61;
}
.agenda-inscription-help .req { color: #B5170D; font-weight: 700; }
.agenda-inscription-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.agenda-inscription-error {
    color: #B5170D; font-size: 13px; font-weight: 600;
    display: none;
}
.agenda-inscription-error.is-visible { display: inline; }
.agenda-inscription-actions { display: flex; gap: 10px; margin-left: auto; }
.agenda-inscription-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    font-size: 13px; font-weight: 700; font-family: inherit;
    border-radius: var(--radius, 8px); border: 1px solid transparent;
    cursor: pointer; line-height: 1.2;
    transition: filter 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.agenda-inscription-btn--cancel {
    background: transparent; color: #4A453B; border-color: #E5E2DA;
}
.agenda-inscription-btn--cancel:hover { border-color: #0A0A0A; color: #0A0A0A; }
.agenda-inscription-btn--submit {
    background: var(--publi-button-color, #0A0A0A);
    color: #FFFFFF;
}
.agenda-inscription-btn--submit:hover:not(:disabled) { filter: brightness(1.08); }
.agenda-inscription-btn--submit:disabled {
    background: #E5E2DA; color: #FFFFFF;
    cursor: not-allowed;
}
.agenda-evt-inscription-done {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    color: #1E6F3B; font-size: 13px; font-weight: 700;
    background: #E6F4EA;
    border: 1px solid #B7E0C4;
    border-radius: var(--radius, 8px);
}
.agenda-evt-inscription-done svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 640px) {
    .agenda-inscription-grid > * { grid-column: span 12 !important; }
    .agenda-inscription-footer { flex-direction: column; align-items: stretch; }
    .agenda-inscription-actions { width: 100%; }
    .agenda-inscription-actions .agenda-inscription-btn { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   REFONTE VM (≤768) — vue publique destinataire (PE4)
   Maquettes validées EP 02/07. Couleurs CONTEXTUELLES uniquement
   (var(--publi-title-color)/--lg), icônes noires sur gris, aucun vert.
   Les règles ci-dessous ne s'appliquent qu'en VM → desktop inchangé.
   ---------------------------------------------------------------------
   Brique 1 — En-tête : TOUTE la tétière (.header-publi : cosignataires,
   image OU fallback) est masquée en VM — jugée inutile / non adaptée au
   smartphone — et remplacée par une pastille de type + une méta
   auteur/lecture (icônes). Markup méta découpé en spans côté PE4 (.pm-*).
   ===================================================================== */

/* Wrapper titre/méta : transparent hors VM (display:contents = zéro impact
   desktop). En VM il devient le conteneur flex qui porte, dans l'ordre EXACT
   de la maquette : Pastille (type) → Titre → Auteur → Temps de lecture.
   Astuce : .top-publi et .publi-meta passent en display:contents en VM, si bien
   que la pastille (.pm-type) et l'auteur/lecture (.pm-author/.pm-lecture)
   deviennent des items flex DIRECTS, ordonnables individuellement autour du
   titre (.titre-partager). */
.publi-head-group { display: contents; }

@media (max-width: 768px) {
    /* Toute la zone tétière masquée en VM (remplacée par la pastille de type) */
    .header-publi { display: none !important; }

    /* Le wrapper devient la colonne ; on aplatit top-publi + publi-meta pour
       que pastille / auteur / lecture deviennent des items flex directs.
       margin-bottom : respiration avant le bloc de contenu (sinon la dernière
       ligne — temps de lecture — colle au filet de la card qui suit). */
    .publi-head-group { display: flex; flex-direction: column; margin-bottom: 22px; position: relative; }
    .publi-head-group .top-publi,
    .publi-head-group .top-publi .publi-meta { display: contents; }

    /* Icône de partage remontée en haut à droite de l'en-tête (hors du flux du
       titre), la card de partage s'ouvrant depuis ce coin. */
    .publi-head-group .partager-zone { position: absolute; top: 10px; right: 20px; z-index: 5; }

    /* ORDRE MAQUETTE : Pastille → Titre → Auteur → Lecture (marge gauche 20px
       identique au titre, qui a margin:20px). */
    .publi-head-group .titre-partager { order: 2; }
    /* Titre réduit en VM (30px desktop = trop grand sur smartphone) + interligne serré */
    .publi-head-group .title-publi { font-size: 26px; line-height: 1.18; }
    .publi-head-group .pm-author  { order: 3; margin: 2px 20px 0; }
    .publi-head-group .pm-lecture { order: 4; margin: 8px 20px 0; }
    .publi-head-group .pm-sep     { display: none; }

    /* Pastille de type (1re, calée à gauche, couleur titre du profil) */
    .publi-head-group .pm-type {
        order: 1;
        align-self: flex-start;
        margin: 14px 20px 0;
        display: inline-flex;
        align-items: center;
        background: var(--publi-title-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 / temps de lecture : ligne icône + texte (icône gris neutre) */
    .publi-head-group .pm-author,
    .publi-head-group .pm-lecture {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13.5px;
        line-height: 1.35;
        color: #5C5648;
    }
    /* Valeur (émetteur / durée) en gras, comme la maquette (label reste gris normal) */
    .publi-head-group .pm-val { font-weight: 700; color: #0A0A0A; }
    .publi-head-group .pm-author::before,
    .publi-head-group .pm-lecture::before {
        content: "";
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .publi-head-group .pm-author::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A7568'><path d='M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm-9 9a9 9 0 1 1 18 0h-2a7 7 0 1 0-14 0H3Z'/></svg>");
    }
    .publi-head-group .pm-lecture::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A7568'><path d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm1-8h4v2h-6V7h2v5Z'/></svg>");
    }
}

/* =====================================================================
   Brique 2 — Sidebar RM (VM) : logo borné + « À propos » → page lecture
   seule. Maquette validée EP 03/07 (pe4_mobile_sidebar_rm). Les CTA
   (Salle de presse / Demande presse / Kit de presse) restent en boutons
   pleine largeur. Desktop inchangé : lien / × / titre masqués hors VM, et
   le texte À propos reste inline. Hack checkbox = aucun JS.
   ===================================================================== */
/* Hors VM : contrôles VM masqués (desktop = texte À propos inline comme avant) */
.apropos-vm-toggle,
.apropos-vm-link,
.apropos-vm-close,
.apropos-vm-title { display: none; }

@media (max-width: 768px) {
    /* Logo profil masqué en VM (n'apporte rien sur smartphone — EP 03/07) */
    .description-publi .profile-logo { display: none; }

    /* Sidebar pleine largeur utile en VM (la règle ≤600 laissait 30px + padding
       perdus à droite) → les CTA occupent toute la largeur, gouttières égales */
    .description-publi {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 0;
        box-sizing: border-box;
    }
    /* Logo masqué en VM → pas de marge résiduelle avant le 1er CTA : l'écart
       signature → CTA se cale sur la marge-bas charte du bloc signature. */
    .description-publi .sdp-sidebar-actions { margin-top: 0; }

    /* « À propos » = lien (texte noir + chevron), sous les CTA */
    .apropos-vm-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin-top: 8px;
        padding: 14px 4px;
        border-top: 1px solid #E5E2DA;
        font-size: 15px;
        font-weight: 700;
        color: var(--publi-title-color, #0A0A0A);
        cursor: pointer;
    }
    .apropos-vm-link-txt { flex: 1 1 auto; line-height: 1.35; }
    .apropos-vm-chev { flex: 0 0 auto; color: #716D61; font-size: 20px; line-height: 1; }

    /* Le bloc À propos devient la page plein écran (masquée jusqu'au tap sur le lien) */
    .description-publi .sdp-sidebar-about {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #fff;
        margin: 0;
        padding: 12px 0 0;
        display: none;
        flex-direction: column;
    }
    .apropos-vm-toggle:checked ~ .sdp-sidebar-about { display: flex; }
    .apropos-vm-close {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        margin: 0 14px;
        width: 40px;
        height: 40px;
        border: 1px solid #E5E2DA;
        border-radius: var(--radius-pill, 999px);
        background: #fff;
        font-size: 22px;
        line-height: 1;
        color: #0A0A0A;
        cursor: pointer;
    }
    .apropos-vm-title {
        display: block;
        margin: 8px 22px 12px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
        color: #0A0A0A;
    }
    .description-publi .sdp-sidebar-about > div {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 0 22px 28px;
        font-size: 15px;
        line-height: 1.6;
        color: #222;
    }
}

/* =====================================================================
   VM (≤768) — carte contact « signature » façon maquette 844 :
   le bord passe de la carte externe (.publi-signature-card) aux cartes
   contact (.cosignataire) ; avatar initiales + nom/fonction + actions
   tél/mail avec icônes (couleur profil via mask). Desktop inchangé.
   ===================================================================== */
@media (max-width: 768px) {
    /* La carte externe s'efface : bord + padding retirés (les cartes contact
       portent le bord) ; on garde les marges d'alignement/gap. */
    .publi-signature-card { border: 0; padding: 0; }
    .publi-signature-card .publication-cosignataires {
        flex-direction: column;
        gap: 12px;
    }
    .publi-signature-card .cosignataire {
        width: 100%;
        align-items: stretch; /* override base flex-start : la tête/actions s'étirent à
                                 toute la largeur → idbox flex:1 opère, fonction sur 1 ligne */
        border: 1px solid var(--publi-title-color, #E5E2DA);
        border-radius: var(--radius, 8px);
        padding: 14px 16px;
        box-sizing: border-box;
    }

    /* Tête : avatar + (nom / fonction). idbox prend la largeur restante
       (flex:1 + min-width:0) sinon il se cale sur le nom (nowrap) et la
       fonction wrappe inutilement. */
    .publi-signature-card .cosignataire-head { display: flex; align-items: center; gap: 12px; }
    .publi-signature-card .cosignataire-idbox { display: block; flex: 1 1 auto; min-width: 0; }
    .publi-signature-card .cosignataire-avatar {
        display: flex; align-items: center; justify-content: center;
        flex: 0 0 44px; height: 44px; border-radius: var(--radius-pill, 999px);
        background: var(--lg, #F2F2F0);
        color: var(--publi-title-color, #0A0A0A);
        font-weight: 800; font-size: 16px; letter-spacing: .02em;
    }
    .publi-signature-card .cosignataire-contact { font-weight: 700; font-size: 15.5px; line-height: 1.2; }
    .publi-signature-card .cosignataire-fonction { color: #5C5648; font-size: 13px; margin-top: 1px; white-space: normal; }

    /* Actions tél / mail : icône (couleur profil via mask) + texte, filet séparateur */
    .publi-signature-card .cosignataire-telephone,
    .publi-signature-card .cosignataire-mobile,
    .publi-signature-card .cosignataire-email {
        display: flex; align-items: center; gap: 10px;
        margin-top: 10px; padding-top: 10px;
        border-top: 1px solid #F0EEE7;
        font-size: 14px; color: var(--publi-title-color, #0A0A0A);
        white-space: normal;
    }
    .publi-signature-card .cosignataire-email a { color: inherit; text-decoration: none; }
    .publi-signature-card .cosignataire-telephone::before,
    .publi-signature-card .cosignataire-mobile::before,
    .publi-signature-card .cosignataire-email::before {
        content: ""; width: 17px; height: 17px; flex: 0 0 auto;
        background-color: currentColor;
        -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    }
    .publi-signature-card .cosignataire-telephone::before,
    .publi-signature-card .cosignataire-mobile::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 16.42v3.54a1 1 0 0 1-1.09 1A19.5 19.5 0 0 1 3 3.09 1 1 0 0 1 4 2h3.54a1 1 0 0 1 1 .75c.13.62.3 1.23.51 1.82a1 1 0 0 1-.24 1L7.2 8a15.05 15.05 0 0 0 8.8 8.8l1.42-1.61a1 1 0 0 1 1-.24c.59.21 1.2.38 1.82.51a1 1 0 0 1 .76 1Z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 16.42v3.54a1 1 0 0 1-1.09 1A19.5 19.5 0 0 1 3 3.09 1 1 0 0 1 4 2h3.54a1 1 0 0 1 1 .75c.13.62.3 1.23.51 1.82a1 1 0 0 1-.24 1L7.2 8a15.05 15.05 0 0 0 8.8 8.8l1.42-1.61a1 1 0 0 1 1-.24c.59.21 1.2.38 1.82.51a1 1 0 0 1 .76 1Z'/></svg>");
    }
    .publi-signature-card .cosignataire-email::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm17 4.24-7.94 7.15L4 7.23V19h16V7.24ZM4.51 5l7.55 6.78L19.5 5H4.51Z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm17 4.24-7.94 7.15L4 7.23V19h16V7.24ZM4.51 5l7.55 6.78L19.5 5H4.51Z'/></svg>");
    }
}

/* =====================================================================
   VM (≤768) — Invitation presse : « infos clés » (maquette 844).
   Desktop = INCHANGÉ (validé). En VM, on masque les infos conférence
   desktop (heading, items date/heure/lieu, titre répété, organisateur)
   et on affiche le bloc DÉDIÉ mobile `.keyinfo-vm` (rangées labellisées
   Dates(+heure) / Lieu / Organisé par). Pas de bloc-dans-le-bloc : on est
   déjà dans la carte contenu, donc pas de bordure. EP 03/07.
   ===================================================================== */
@media (max-width: 768px) {
    /* Maquette 844 : AUCUNE carte englobante en VM — seuls les mini-blocs
       (keyinfo, signature, contact-cards) portent un filet. On dissout les deux
       cartes wrappers pour supprimer le « bloc dans un bloc » :
         • .article-publi (filet couleur profil) → transparente, MAIS garde son
           padding = l'inset 20px du `.w` de la maquette (les bricks déjà validés
           ne bougent pas horizontalement) ;
         • .conf-presse (filet gris + padding 20) → transparente ET sans padding,
           pour que la keyinfo s'aligne sur les autres blocs (accréditation, plan,
           contacts) au même inset. */
    .article-publi {
        border: none;
        border-radius: 0;
        /* marges latérales retirées → les blocs occupent TOUTE la largeur utile.
           Le padding latéral 20px reste = l'inset unique (comme `.w` de la maquette).
           padding-top retiré : le gap au-dessus du 1er bloc = juste la marge basse du
           header (charte), sans cumul. */
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
    }
    .conf-presse { border: none; border-radius: 0; padding: 0; margin: 0 0 16px; }
    /* .conference-block (conteneur de la keyinfo) : marge latérale 20px de base qui
       s'AJOUTAIT au padding de .article-publi (→ keyinfo inset 40px) ET marge haute
       qui gonflait le padding du 1er bloc. On la neutralise complètement (le gap
       vertical vient de la marge basse du header + marge basse des blocs). */
    .conference-block { margin: 0; }

    /* Message d'accréditation : pleine largeur + centré */
    .conf-presse .message-confirmation { text-align: center; }

    /* CTA « Soumettre votre demande d'accréditation » : DIMENSIONS calées sur le CTA
       « Ouvrir le plan d'accès » (pleine largeur, radius 8, padding 13/16). La COULEUR
       (fond profil) vient de la règle de base `.accreditation-submit-button` (source
       unique) → rien à redéfinir ici. */
    .accreditation-submit-button {
        width: 100%;
        min-width: 0;
        white-space: normal; /* le libellé long peut passer sur 2 lignes */
    }

    /* Accordéon : boutons empilés pleine largeur (type CTA) en VM */
    .publication-acc-tabs { flex-direction: column; }

    /* Masquer la présentation conférence desktop (le keyinfo-vm prend le relais) */
    .conference-block-title,
    .conference-block-items,
    .conference-block-main-title,
    .conference-block-organizer { display: none; }

    .keyinfo-vm {
        display: block;
        margin: 0 0 16px;
        text-align: left;
        /* Vraie carte : filet + radius (maquette 844). En VM .article-publi n'a
           plus de bordure (border:none) → pas de carte-dans-la-carte. */
        border: 1px solid #E5E2DA;
        border-radius: var(--radius, 8px);
        overflow: hidden;
    }
    .keyinfo-vm .kv-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px; /* icône à 16px du bord (maquette) */
    }
    .keyinfo-vm .kv-row + .kv-row { border-top: 1px solid #E5E2DA; }

    .keyinfo-vm .kv-ico {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: var(--radius, 8px);
        background: var(--lg, #F2F2F0);
        color: #0A0A0A;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .keyinfo-vm .kv-ico svg { width: 20px; height: 20px; }
    .keyinfo-vm .kv-ico i { font-size: 20px; line-height: 1; }

    .keyinfo-vm .kv-body { min-width: 0; }
    .keyinfo-vm .kv-k {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #716D61;
    }
    .keyinfo-vm .kv-v {
        margin-top: 3px;
        font-size: 15px;
        line-height: 1.4;
        color: #0A0A0A;
    }
    .keyinfo-vm .kv-hr { color: #5C5648; }
    .keyinfo-vm .kv-note {
        margin-top: 4px;
        font-size: 13px;
        color: #5C5648;
    }
}

/* =====================================================================
   VM (≤768) — Plan d'accès : retirer le visu carte, ne garder que le CTA
   « Ouvrir le plan d'accès » (maquette 844). Le CTA = le bouton « agrandir »
   EXISTANT (seul élément bindé au modal plein écran via querySelector dans
   pub_map_init.js), restylé en bouton outline pleine largeur. Aucun JS ni
   markup touché → un seul déclencheur, pas de mécanisme parallèle.
   Scopé `.conteneur-map` → n'affecte QUE la carte invitation (les cartes
   info_travaux, fullscreen:false, n'ont pas de `.conteneur-map`). EP 03/07.
   ===================================================================== */
@media (max-width: 768px) {
    /* La « têtière » aplat couleur profil « Plan d'accès » (.map-texte) n'a pas de
       sens en VM (barre pleine) → masquée. Le CTA « Ouvrir le plan d'accès »
       porte à lui seul le libellé + l'action. */
    .conteneur-map .map-texte { display: none; }

    /* La boîte carte (.map : border + height 220px) réservait une zone blanche
       vide une fois le canvas masqué → on l'effondre à la hauteur du CTA. */
    /* margin-top charte : décolle le CTA « Ouvrir le plan » du CTA au-dessus (Décliner). */
    .conteneur-map { display: block; margin-top: max(12px, var(--block-gap, 16px)); }
    .conteneur-map .map {
        height: auto;
        min-height: 0;
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    /* Canvas IGN inline masqué (le CTA ouvre la carte en plein écran) */
    .conteneur-map .pub-map { display: none; }

    /* Bouton « agrandir » existant → CTA outline pleine largeur (couleur profil).
       !important pour battre les styles inline du helper (position/taille/bordure). */
    .conteneur-map .pub-map-fullscreen-btn {
        /* Gabarit CTA unifié (identique à .publication-acc-tab) mais OUTLINE (action
           secondaire) : padding 14/20, radius 6, font 14/600, hauteur par le padding. */
        position: static !important;
        width: 100% !important;
        height: auto !important;
        gap: 8px;
        padding: 14px 20px !important;
        border: 1.5px solid var(--publi-title-color, #0A0A0A) !important;
        border-radius: var(--radius, 8px) !important;
        color: var(--publi-title-color, #0A0A0A) !important;
        /* Police du profil forcée : le widget carte IGN impose Arial à ses enfants ;
           on rétablit la police du profil (Marianne Bold), comme les autres CTA. */
        font-family: var(--publi-font, inherit) !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
    }
    .conteneur-map .pub-map-fullscreen-btn svg { width: 18px; height: 18px; }
    .conteneur-map .pub-map-fullscreen-btn::after { content: "Ouvrir le plan d'accès"; }
}

/* === Agenda VM — layout maquette : chip date compact a gauche + corps a droite ===
   (heure/lieu en lignes, S'inscrire CTA pleine largeur ; desktop inchange). RP + RM. */
.agenda-evt-date-compact,
.agenda-evt-line { display: none; }

@media (max-width: 768px) {
    /* Écart en haut du bloc événements : le margin:-20px du .agenda-evt-list le collait
       au bloc titre/auteur/temps de lecture en VM (article-publi padding-top:0). */
    .agenda-evt-list { margin-top: 16px; }

    .agenda-evt { display: block; position: relative; }
    .agenda-evt::after { content: ""; display: block; clear: both; }

    /* Icône « ajouter à l'agenda » en haut à droite (VM) ; place réservée sur le titre. */
    .agenda-evt-cal-row {
        position: absolute;
        top: 14px;
        right: 14px;
        margin: 0;
        z-index: 2;
    }

    /* Chip date compact FLOTTANT à gauche : le titre + l'heure s'écoulent à sa droite ;
       l'adresse, « Détails » et le CTA passent en pleine largeur utile via clear:left. */
    .agenda-evt-head { float: left; width: 56px; margin: 0 14px 6px 0; padding: 0; border: 0; }
    .agenda-evt-head .agenda-evt-indication { display: none; }

    .agenda-evt-date-chip {
        flex-direction: column;
        width: 56px;
        min-width: 0;
        padding: 8px 4px;
        background: var(--lg, #F2F2F0) !important;
        color: #0A0A0A !important;
        border-radius: var(--radius, 8px);
    }
    .agenda-evt-date-value { display: none; }
    .agenda-evt-date-compact {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
    }
    .agenda-evt-date-compact b { font-size: 24px; font-weight: 800; color: #0A0A0A; }
    .agenda-evt-date-compact em { font-size: 11px; font-style: normal; font-weight: 700; text-transform: uppercase; color: #716D61; margin-top: 2px; }
    .agenda-evt-date-compact i { font-size: 10px; font-style: normal; color: #716D61; }

    .agenda-evt-title { margin: 0; padding-right: 46px; }
    .agenda-evt-line {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 6px 0 0;
        font-size: 13px;
        color: #5C5648;
    }
    .agenda-evt-line svg { width: 15px; height: 15px; color: #0A0A0A; flex: 0 0 auto; margin-top: 1px; }
    .agenda-evt-line span { min-width: 0; }

    /* Adresse (.agenda-evt-loc), « Détails », CTA : pleine largeur utile (sous le chip flottant). */
    .agenda-evt-loc,
    .agenda-evt-summary,
    .agenda-evt-detail-link,
    .agenda-evt-detail,
    .agenda-evt-other-contact,
    .agenda-evt-suite,
    .agenda-evt-actions { clear: left; }

    .agenda-evt-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
    .agenda-evt-actions .agenda-evt-btn { width: 100%; justify-content: center; }
    .agenda-evt-btn--inscription { padding: 13px 18px; border-radius: var(--radius, 8px); font-size: 14px; }
}

/* === Consultation VM : le rédactionnel se replie en lien « À propos » → page plein écran
   (calqué sur .apropos-vm-*, hack checkbox). Desktop = rédactionnel inline inchangé.
   + bouton « Valider mes réponses » en CTA pleine largeur. === */
.consult-redac-toggle,
.consult-redac-link,
.consult-redac-close { display: none; }

@media (max-width: 768px) {
    .consult-redac-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 0 0 14px;
        padding: 14px 4px;
        border-top: 1px solid #E5E2DA;
        border-bottom: 1px solid #E5E2DA;
        font-size: 15px;
        font-weight: 700;
        color: var(--publi-title-color, #0A0A0A);
        cursor: pointer;
    }
    .consult-redac-link-txt { flex: 1 1 auto; line-height: 1.35; }
    .consult-redac-chev { flex: 0 0 auto; color: #716D61; font-size: 20px; line-height: 1; }

    .consult-redac-panel {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #fff;
        margin: 0;
        padding: 56px 22px 28px;
        display: none;
        overflow-y: auto;
    }
    .consult-redac-toggle:checked ~ .consult-redac-panel { display: block; }
    .consult-redac-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        right: 14px;
        width: 40px;
        height: 40px;
        border: 1px solid #E5E2DA;
        border-radius: var(--radius-pill, 999px);
        background: #fff;
        font-size: 22px;
        line-height: 1;
        color: #0A0A0A;
        cursor: pointer;
    }

    /* Bouton « Valider mes réponses » = CTA pleine largeur utile, texte centré. */
    .consultation-page-actions { flex-direction: column; align-items: stretch; }
    .consultation-submit { width: 100%; justify-content: center; text-align: center; }
}

/* ============================================================================
   PIED DE PAGE FIXE — version VM (≤768) sur toutes les publications
   Le footer .site-footer (liens S'inscrire journaliste / Se désinscrire / RGPD)
   reste épinglé en bas du viewport et visible pendant le défilement.
   Barre compacte + réserve d'espace en bas du contenu (rien n'est masqué).
   Scope body.page-no-top-margin = vue destinataire (PE4 + viewer SDP), jamais
   le back-office ni les pages ouvertes annexes. Spécificité (0,2,2) : gagne sur
   la base .site-footer quel que soit l'ordre de chargement des feuilles.
   ============================================================================ */
@media (max-width: 768px) {
    body.page-no-top-margin .site-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28);
    }
    body.page-no-top-margin .site-footer .site-footer-menu {
        justify-content: center;
        gap: 4px 10px !important;
        font-size: 12px;
    }
    /* Le contenu défile au-dessus du pied fixe : réserve = hauteur max de la barre. */
    body.page-no-top-margin { padding-bottom: 104px; }
}

/* ============================================================================
   INFO TRAVAUX — contenu multimédia PAR ITEM (illustration OU vidéo)
   Rendu destinataire d'une card intervention : figure image ou iframe vidéo
   + légende/copyright. La vidéo est déjà responsive (pub_embed_video_html).
   ============================================================================ */
.it-evt-media { margin: 14px 0 0; }
.it-evt-media img { display: block; width: 100%; height: auto; border-radius: var(--radius, 8px); }
.it-evt-media figcaption { margin-top: 6px; font-size: 12px; color: #666; line-height: 1.4; }
.it-evt-media figcaption .it-evt-media-copyright { color: #999; }

/* Communique de presse avec conference : le bloc conference ENTIER (dates, lieu,
   organisateur, mention et inscription) se lit APRES le texte — contrairement a
   l invitation presse, ou l evenement est le sujet. Regle EP 19/08/2026.
   L ordre CSS evite de decouper le gabarit : le bloc reste d un seul tenant. */
.article-publi.conf-apres-texte {
  display: flex;
  flex-direction: column;
}

.article-publi.conf-apres-texte > .bloc-a-ne-pas-couper:has(.conf-presse) {
  order: 2;
}

.article-publi.conf-apres-texte > .bloc-a-ne-pas-couper.publi-signature-card {
  order: 3;
}