: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%);
    width: 60%;
    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;
    width: 60%;
    margin: 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;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    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);
}

/* 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; }
}

.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: #7a7568;
}
.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;
}

.pub-form-identity-civility {
    width: 140px;
    flex-shrink: 0;
}

.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;
    }
}

.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: #7A7568; 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: #7A7568;
}
.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: #7A7568; 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: #7A7568;
    }
    .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: #7A7568; margin-top: 2px; }
    .agenda-evt-date-compact i { font-size: 10px; font-style: normal; color: #7A7568; }

    .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: #7A7568; 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; }