/* =============================================================
   e-Agora V8 — Design system
   Charger APRÈS main.css
   ============================================================= */

/* --- Reset (identique maquette) --- */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--cream, #FAF9F5);
  color: var(--ink, #0A0A0A);
  overflow-x: hidden;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.app-main {
  min-width: 0;
  overflow-x: hidden;
}

/* --- Topbar (identique maquette : flux normal, pas de fixed) --- */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line, #E5E2DA);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}
/* Masque l'ancien header PHP (div#header) uniquement dans l'interface client .app */
.app div#header {
  display: none !important;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink, #0A0A0A);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  background: #fff;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
/* Icône profil du header (accès Paramètres du compte) — taille confortable (EP 2026-06-25). */
.topbar-profile :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 27px;
}
/* Brand mark « eA + e-Agora » sur fond sombre (login public + footer) — remplace l'ancien
   logo bitmap « e-agora DIGITAL PUBLIC ». Carré blanc / texte blanc. EP 2026-06-25. */
.brand-name { font-weight: 700; }
.brand--on-dark { color: #fff; }
.brand--on-dark .brand-mark { background: #fff; color: var(--brand); border: none; }
.brand--login { gap: 11px; margin-left: 25px; }
.brand--login .brand-mark { width: 38px; height: 38px; font-size: 18px; border-radius: var(--radius, 8px); }
.brand--login .brand-name { font-size: 24px; letter-spacing: 0.01em; }
.brand--footer { gap: 9px; }
.brand--footer .brand-mark { width: 30px; height: 30px; font-size: 15px; border-radius: var(--radius, 8px); }
.brand--footer .brand-name { font-size: 19px; }
.env-chip {
  border: 1px solid var(--line, #E5E2DA);
  padding: 2px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #716D61);
  flex-shrink: 0;
}

/* --- Layout : grid 264px + 1fr, min-height 100vh (identique maquette) --- */
.app {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}
/* === Mode compact (mobile / tablette) — DÉCLENCHEURS ==========================
   Les bascules ci-dessous et plus bas (.app grid, home-mobile/desktop, topbar #settings,
   .menugauche, .mobile-navbar, footer) partagent la MÊME liste de media queries :
     @media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse)
   → mode compact si ≤1024px (tout device) OU 1025-1366px sur écran TACTILE (vraies tablettes
   en paysage ; exclut les laptops `pointer: fine` et les grands écrans tactiles >1366px).
   VT 2026-06-25 — la partie >1024 n'est vérifiable que sur une vraie tablette (un navigateur
   desktop redimensionné reste `pointer: fine`). ============================== */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .app {
    grid-template-columns: 1fr;
  }
}

/* --- Home page — version mobile (essentiel : nom + menu + déconnexion) --- */
.home-mobile {
  display: none;
}
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .home-mobile {
    display: block;
    padding: 16px;
  }
  .home-desktop {
    display: none;
  }
}
html.preview-tablet .home-mobile,
html.preview-mobile .home-mobile {
  display: block;
  padding: 16px;
}
html.preview-tablet .home-desktop,
html.preview-mobile .home-desktop {
  display: none;
}
/* Mode preview « tablette » (largeur simulée ~818px, SANS @media ni orientation) : refléter la
   HP tablette portrait → springboard 3 colonnes aérées + tuile seule centrée. Pour tester le
   PAYSAGE ou le rendu réel, redimensionner la vraie fenêtre (≤1024 déclenche les @media) ou
   utiliser une vraie tablette (>1024 tactile). VT 2026-06-25. */
html.preview-tablet .home-mobile-tiles:not(.home-mobile-tiles--compact):not(.home-mobile-tiles--solo) {
  grid-template-columns: repeat(3, 1fr);
}
html.preview-tablet .home-mobile-tiles:not(.home-mobile-tiles--compact):not(.home-mobile-tiles--solo) > .home-mobile-tile:last-child:nth-child(3n+1) {
  grid-column: 2;
}
html.preview-tablet .home-mobile-tile { min-height: 66px; }
html.preview-tablet .home-mobile-tiles:not(.home-mobile-tiles--compact) .home-mobile-tile { padding: 16px 14px; }

/* Springboard mobile (EP 2026-06-25) — lanceur de tuiles groupées (remplace l'accordéon noir).
   Charte : crème + noir, pas de bleu. Visibilité/gating gérés côté PHP ($homeMobileSections). */
.home-mobile-springboard {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
/* Section à accès direct (ex. Campagnes) — CTA pleine largeur, noir charte */
.home-mobile-cta {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-radius: var(--radius, 8px);
  padding: 13px 14px;
  text-decoration: none;
  margin-bottom: 16px;
}
.home-mobile-cta :is([class^="ri-"], [class*=" ri-"]),
.home-mobile-cta > i[class^="ri-"],
.home-mobile-cta > i[class*=" ri-"] {
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
.home-mobile-cta-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}
.home-mobile-cta-chevron {
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
/* Libellé de section (icône + texte, discret) */
.home-mobile-sec-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a857a;
}
.home-mobile-sec-label :is([class^="ri-"], [class*=" ri-"]),
.home-mobile-sec-label > i[class^="ri-"],
.home-mobile-sec-label > i[class*=" ri-"] {
  font-size: 15px;
  color: #8a857a;
}
/* Grille de tuiles — une par ligne par défaut */
.home-mobile-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.home-mobile-tiles--compact {
  grid-template-columns: 1fr 1fr 1fr;
}
/* Tuile (icône + libellé), crème, coins 8px */
.home-mobile-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream2, #F2F0E8);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  padding: 13px 14px;
  color: var(--ink, #0A0A0A);
  text-decoration: none;
}
.home-mobile-tile:hover {
  background: #fff;
  border-color: var(--ink, #0A0A0A);
}
.home-mobile-tile :is([class^="ri-"], [class*=" ri-"]),
.home-mobile-tile > i[class^="ri-"],
.home-mobile-tile > i[class*=" ri-"] {
  font-size: 20px;
  color: var(--ink, #0A0A0A);
  flex-shrink: 0;
}
.home-mobile-tile-label {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}
/* Tile « solo » (ex. Scanner les check-ins, pleine largeur du springboard) : aplat NOIR,
   libellé + icône CENTRÉS et en blanc. */
.home-mobile-tiles--solo .home-mobile-tile {
  background: var(--ink, #0A0A0A);
  border-color: var(--ink, #0A0A0A);
  justify-content: center;
  color: #fff;
}
.home-mobile-tiles--solo .home-mobile-tile:hover {
  background: #1f1f1f;
  border-color: #1f1f1f;
}
.home-mobile-tiles--solo .home-mobile-tile :is([class^="ri-"], [class*=" ri-"]) {
  color: #fff;
}

/* === Demandes presse — liste en cards (style « card small ») sur TOUS les viewports.
   Sélection / suppression / ouverture pilotées par le JS existant (classes inchangées). === */
.dp-selectall { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink, #0A0A0A); margin: 0 2px 12px; cursor: pointer; }
.dp-selectall input { cursor: pointer; }
.dp-cards { display: flex; flex-direction: column; gap: 10px; }
.dp-card { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--line, #E5E2DA); border-radius: var(--radius, 8px); padding: 12px; }
.js-dp-card { margin-top: 14px; flex-shrink: 0; cursor: pointer; }
.dp-card-avatar {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px; font-weight: 600;
  /* ⛔ LE RAYON DE LA CHARTE, PAS UN CARRÉ À ANGLES VIFS (EP, 15/09/2026). Il manquait
     dans une carte qui, elle, est arrondie. Et les deux couleurs étaient recopiées :
     un jeton se lit, il ne se recopie pas. */
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius, 8px);
}
.dp-card-body { flex: 1; min-width: 0; }
.dp-card-name { font-size: 15px; font-weight: 600; color: var(--ink, #0A0A0A); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-card-mail { font-size: 12.5px; color: var(--muted, #716D61); margin-top: 1px; overflow-wrap: anywhere; }
.dp-card-line { font-size: 12.5px; color: var(--ink, #0A0A0A); margin-top: 3px; }
.dp-card-dates { color: var(--muted, #716D61); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dp-card-statutmeta { color: var(--muted, #716D61); }
/* ⛔ CE BOUTON ÉTAIT UN .btn-ghost DÉGUISÉ — fond ET filet transparents, souligné. La
   charte a supprimé .btn-ghost le 17/07/2026 en interdisant de le recréer : « le bouton
   n'était pas visible, et la charte exige un filet complet ». Il avait été recréé ici
   sous un autre nom. EP, 15/09/2026 : « le bouton ouvrir n'est pas dans la charte ».
   Registre neutre unique = fond blanc + filet, comme .btn-outline. */
.dp-card-open {
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
}
.dp-card-open:hover { background: var(--cream); border-color: var(--ink); }
.dp-card-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Poubelle PAR card. DESKTOP = case à cocher + « tout sélectionner » + bouton « Supprimer la sélection ».
   VUE SMALL (VT/VM + previews) = pas de case / master / bouton bulk → poubelle dans chaque card. */
.dp-card-trash { display: none; background: none; border: 0; color: var(--err, #B5170D); cursor: pointer; padding: 2px 4px; align-self: center; flex-shrink: 0; }
.dp-card-trash :is([class^="ri-"], [class*=" ri-"]) { font-size: 20px; color: var(--err, #B5170D); }
.dp-card-trash:hover :is([class^="ri-"], [class*=" ri-"]) { color: #8e120a; }
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .page-demandes_presse .js-dp-card,
  .page-demandes_presse .dp-selectall,
  .page-demandes_presse .dp-del-btn { display: none; }
  .page-demandes_presse .dp-card-trash { display: inline-flex; align-items: center; }
}
html.preview-tablet .page-demandes_presse .js-dp-card,
html.preview-tablet .page-demandes_presse .dp-selectall,
html.preview-tablet .page-demandes_presse .dp-del-btn,
html.preview-mobile .page-demandes_presse .js-dp-card,
html.preview-mobile .page-demandes_presse .dp-selectall,
html.preview-mobile .page-demandes_presse .dp-del-btn { display: none; }
html.preview-tablet .page-demandes_presse .dp-card-trash,
html.preview-mobile .page-demandes_presse .dp-card-trash { display: inline-flex; align-items: center; }

/* Variante compacte (Assistance) : icône au-dessus du libellé, centré, 3 sur une ligne */
.home-mobile-tiles--compact .home-mobile-tile {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  min-height: 48px;
  text-align: center;
}
.home-mobile-tiles--compact .home-mobile-tile :is([class^="ri-"], [class*=" ri-"]),
.home-mobile-tiles--compact .home-mobile-tile > i[class^="ri-"],
.home-mobile-tiles--compact .home-mobile-tile > i[class*=" ri-"] {
  font-size: 18px;
}
.home-mobile-tiles--compact .home-mobile-tile-label {
  font-size: 11px;
  line-height: 1.15;
}

.home-mobile-logout-form {
  margin-top: 24px;
}
/* Variante filet rouge sur fond blanc, ciblée à .home-mobile-logout-form pour
   battre la spécificité de .btn-outline (0,1,0) sans !important.
   Hauteur alignée sur le CTA scanner ci-dessus (padding 16px 20px, font 16). */
.home-mobile-logout-form .home-mobile-logout-btn {
  width: 100%;
  justify-content: center;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--err, #B5170D);
  color: var(--err, #B5170D);
}
.home-mobile-logout-form .home-mobile-logout-btn:hover,
.home-mobile-logout-form .home-mobile-logout-btn:focus {
  background: #fdf3f2;
  border-color: var(--err, #B5170D);
  color: var(--err, #B5170D);
}
.home-mobile-logout-form .home-mobile-logout-btn :is([class^="ri-"], [class*=" ri-"]) {
  color: var(--err, #B5170D);
}

/* Sur mobile/tablette, masque le bouton Compte dans le header — les infos + la déconnexion
   sont déjà accessibles sur la home mobile. */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .topbar #settings {
    display: none;
  }
  /* Sélecteur de vue desktop/tablette/mobile = outil de dev, inutile sur un vrai
     mobile → masqué (EP 2026-06-25). `.topbar .viewport-preview` (spécificité 0,2,0)
     pour battre la base `.viewport-preview{display:inline-flex}` déclarée plus bas.
     Reste visible en mode preview (largeur desktop, le @media ne s'applique pas). */
  .topbar .viewport-preview {
    display: none;
  }
}
html.preview-tablet .topbar #settings,
html.preview-mobile .topbar #settings {
  display: none !important;
}

/* --- Menu drawer (mobile/tablette) — burger retiré (EP 2026-06-25) : nav mobile via la barre
   basse (Précédent · Accueil · Suivant) + le hub d'accueil. Le menugauche desktop reste un
   panneau hors-écran sur mobile (jamais ouvert), pour ne pas s'afficher inline. --- */
@media (max-width: 1024px) {
  .menugauche {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease-in-out;
    z-index: 1000;
    overflow-y: auto !important;
  }
  .menugauche.is-open {
    transform: translateX(0);
  }
}
html.preview-tablet .menugauche,
html.preview-mobile .menugauche {
  display: flex !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 280px !important;
  height: 100vh !important;
  transform: translateX(-100%);
  transition: transform 0.25s ease-in-out;
  z-index: 1000;
  overflow-y: auto !important;
}
html.preview-tablet .menugauche.is-open,
html.preview-mobile .menugauche.is-open {
  transform: translateX(0);
}

/* Overlay sombre derrière le drawer */
.menu-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 999;
}
.menu-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.menu-drawer-locked {
  overflow: hidden;
}

/* --- Prévisualisation responsive (dev tool) : contraint la largeur du .app --- */
.viewport-preview {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  margin-right: 8px;
}
.viewport-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted, #716D61);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.viewport-preview-btn:hover {
  background: var(--cream, #FAF9F5);
  color: var(--ink, #0A0A0A);
}
.viewport-preview-btn.is-active {
  background: var(--ink, #0A0A0A);
  color: #fff;
}
.viewport-preview-btn :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 18px;
}

/* Contraint la largeur du .app + topbar + footer pour simuler tablette/smartphone. */
html.preview-tablet header > .topbar,
html.preview-tablet .app,
html.preview-tablet .site-footer {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px dashed var(--line2, #D8D3C6);
  border-right: 1px dashed var(--line2, #D8D3C6);
}
html.preview-mobile header > .topbar,
html.preview-mobile .app,
html.preview-mobile .site-footer {
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px dashed var(--line2, #D8D3C6);
  border-right: 1px dashed var(--line2, #D8D3C6);
}
/* En preview mobile/tablet, on force la bascule en layout 1 colonne (menugauche cachée) */
html.preview-mobile .app,
html.preview-tablet .app {
  grid-template-columns: 1fr !important;
}
html.preview-mobile .menugauche,
html.preview-tablet .menugauche {
  display: none !important;
}
/* Le footer aussi se comporte comme sur mobile en preview mobile */
html.preview-mobile .site-footer {
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
}

/* --- Sidebar : colonne gauche, flux normal (identique maquette) --- */
/* Neutralise main.css : position:fixed, width:18vw, padding:100px, display:none */
.menugauche {
  position: static !important;
  width: 264px !important;
  height: auto !important;
  background: var(--ink, #0A0A0A) !important;
  color: #fff;
  padding: 16px 10px 24px !important;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex !important;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  z-index: auto !important;
}
.menugauche::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .menugauche {
    display: none !important;
  }
}

/* --- Items menu --- */
.menu-section {
  color: var(--ghost, #A29B8B);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  padding: 16px 12px 6px;
  margin: 0;
}
.menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--cream2, #F2F0E8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.menu-link:hover {
  background: #1a1a1a;
  color: #fff;
}
.menu-link[aria-current="page"] {
  background: #1a1a1a;
  color: #fff;
  border-left-color: var(--brand);
  font-weight: 700;
}
.menu-link :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 18px;
  opacity: 0.85;
  flex-shrink: 0;
}
/* État verrouillé (option commerciale non souscrite) : cadenas gris à droite,
   item visuellement adouci pour signaler qu'il est inactif sans le masquer. */
.menu-link--locked {
  opacity: 0.55;
}
.menu-link--locked:hover {
  opacity: 0.8;
}
.menu-link .menu-link-lock {
  font-size: 14px;
  opacity: 0.9;
  margin-left: auto;
  color: #c4bfb3;
}
.menu-sub {
  padding-left: 0;
  margin-left: 14px;
  border-left: 1px solid #2a2a2a;
}
.menu-sub .menu-link {
  font-size: 13px;
  color: var(--line2, #D8D3C6);
  padding: 6px 10px;
}
.menu-sub .menu-link:hover {
  color: #fff;
  background: #1a1a1a;
}

/* --- Contenu principal --- */
.app-main {
  min-height: 100vh;
}

/* Neutralise main.css : .pageheart width:100vw display:flex / .pagepoumondroit width:80vw margin:10vh.
   Scope `body:not(.is-admin)` : la partie admin utilise encore l'ancien layout
   .pageheart > .menugauche + .pagepoumondroit, à ne pas casser. */
body:not(.is-admin) .pageheart {
  display: contents !important;
  width: auto !important;
  min-height: 0 !important;
}
body:not(.is-admin) .pagepoumondroit {
  width: auto !important;
  margin: 0 !important;
  /* Compense le #header fixed (height = 7.5vh, voir main.css) afin que le haut
       du contenu (titre, hero, etc.) ne soit pas masqué par la barre noire. */
  padding-top: calc(7.5vh + 24px);
}

/* Masque l'ancien markup footer (remplacé par .site-footer) */
footer .footer {
  display: none;
}

/* --- Pied de page v8 (connecté + non connecté) --- */
footer {
  display: block;
}
.site-footer {
  background: var(--ink, #0A0A0A);
  color: #fff;
  padding: 28px 40px 28px 288px; /* 264px sidebar + 24px (aligne avec px-6 du main) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
nav.site-footer-menu,
.site-footer-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px !important;
  font-size: 13px;
  line-height: 1.6;
}
.site-footer-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.site-footer-menu a:hover {
  /* Rouge e-Agora.fr. Remplace un #20b6b6 turquoise, hors charte : la charte
     n'admet ni bleu ni turquoise (vert #167A39, rouge #B5170D, noir #0A0A0A). */
  color: var(--err, #B5170D);
}
.site-footer-menu .sep {
  color: #3a3a3a;
  user-select: none;
}
.site-footer-logo img {
  display: block;
  height: 40px;
  width: auto;
}
@media (max-width: 1024px) {
  .site-footer {
    padding-left: 24px;
  }
}
@media (max-width: 720px) {
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
}

/* --- Boutons V8 --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  border: 1px solid transparent;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
  min-height: 38px;
  /* box-sizing explicite : min-height doit s'appliquer a la boite BORDURE.
     Sans lui, <button> (border-box par le navigateur) fait 38px et <a>
     (content-box par defaut) fait 58px pour la MEME declaration. */
  box-sizing: border-box;
  font-family: inherit;
  white-space: nowrap;
}
/* ⭐ L'ÉTAT DÉSACTIVÉ D'UN BOUTON — RÈGLE UNIQUE (EP, 20/10/2026).

   Il n'en existait aucune ici : trois écrans la réinventaient chacun de leur côté
   (`scanner.css` à .5, `userpage.css` à .55 avec `pointer-events`, et l'ajout de
   destinataires en PE2), et partout ailleurs un bouton `disabled` restait NOIR, blanc et
   `cursor: pointer` — inerte, mais d'apparence cliquable. Constaté le 20/10 sur « Ajouter »
   d'une fiche sans adresse : rien ne distinguait le bouton mort du bouton vivant.

   Retenu le traitement le plus complet des trois, celui de `userpage.css` : l'opacité dit
   l'état, le curseur le confirme au survol, et `pointer-events` empêche le clic d'atteindre
   quoi que ce soit — un `disabled` retiré par mégarde en JS ne rouvre pas l'action.
   Les trois règles locales ont été retirées dans le même geste. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
}
.btn-primary:hover {
  background: #000;
}
.btn-accent {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-accent:hover {
  background: var(--ink2);
}
.btn-outline {
  background: #fff;
  color: var(--ink, #0A0A0A);
  border-color: var(--line, #E5E2DA);
}
.btn-outline:hover {
  background: var(--cream, #FAF9F5);
  border-color: var(--ink, #0A0A0A);
}
/* .btn-ghost SUPPRIME le 2026-07-17 (decision EP). Motif : fond ET filet transparents
   -> le bouton n'etait pas visible, et la charte exige un filet complet. Registre
   neutre unique = .btn-outline (fond blanc + filet). Ne pas le recreer. */
.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 32px;
}
.btn-danger {
  background: #fff;
  color: var(--err, #B5170D);
  /* filet = rouge charte plein (EP 17/07) : le rouge est TOUJOURS #B5170D,
     jamais une teinte pale. Meme regle pour Annuler et pour Supprimer. */
  border-color: var(--err, #B5170D);
}
/* Variante PLEINE du rouge charte — fond #B5170D, texte blanc (EP, 07/10/2026, pour le
   bouton de desinscription de la page publique). `.btn-danger` reste le FILET rouge sur
   blanc : c'est la regle du 17/07 pour Annuler et Supprimer dans l'espace client, et on
   n'y touche pas — la changer repeindrait tous les boutons de suppression du produit.
   Meme rouge dans les deux cas : #B5170D, jamais une teinte pale. Aucun survol non plus. */
.btn-danger--plein {
  background: var(--err, #B5170D);
  color: #fff;
  border-color: var(--err, #B5170D);
}

/* .btn-danger n'a AUCUN survol (EP 17/07). L'aplat rose #fbded6 (pose le 10/06)
   n'etait ecrit nulle part et violait la regle « le rouge est toujours #B5170D ».
   Le bouton est identique au repos et au survol. Ne pas recreer de :hover ici. */

/* --- Ensure [hidden] always hides --- */
[hidden] {
  display: none !important;
}

/* --- Cards plates --- */
.card {
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
}
.card-section {
  padding: 48px 24px;
}
.card-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line, #E5E2DA);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Le compteur d'actualités de l'étape 3 rejoint cette règle plutôt que de recopier la
   taille du titre : même corps, même graisse, même casse, et les deux suivront toute
   évolution ensemble (EP, 29/09/2026 — « même taille de police »). */
.card-head h2,
.card-head h3,
.card-head .pe3-compte-items {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* --- Panneaux d'onglets internes --- */
.pe-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Champs désactivés (mode lecture) --- */
.field:disabled,
input.field[disabled],
textarea.field[disabled] {
  background: var(--cream, #FAF9F5);
  border-color: var(--line, #E5E2DA);
  color: var(--ink, #0A0A0A);
  cursor: default;
  opacity: 1;
}

/* --- Tuiles type de campagne --- */
.type-tile {
  background: var(--cream2, #F2F0E8);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--ink, #0A0A0A);
  min-height: 110px;
  transition:
    transform 0.15s ease,
    border-color 0.15s,
    background 0.15s;
}
.type-tile:hover {
  /* Pas de `cursor` ici : la tuile est un <a href>, le navigateur rend donc le
     curseur de lien standard. Un `zoom-in` y trainait, qui promettait un
     agrandissement d'image alors qu'il s'agit d'un lien de navigation.
     L'affordance de survol est portee par l'agrandissement ci-dessous. */
  transform: scale(1.03);
  border-color: var(--ink, #0A0A0A);
  background: #fff;
}
.type-tile:active {
  transform: scale(1.01);
}
.type-tile :is([class^="ri-"], [class*=" ri-"]),
.type-tile > i[class^="ri-"],
.type-tile > i[class*=" ri-"] {
  font-size: 28px;
  color: var(--ink, #0A0A0A);
  line-height: 1;
}
.type-tile .lbl {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}
.type-tile .sub {
  font-size: 12px;
  color: var(--muted, #716D61);
  line-height: 1.4;
}
/* Tuile verrouillée : le compte a la feature mais le contributeur n'a pas le droit (cadenas,
   EP 2026-06-25). Grisée + cadenas en coin. Reste cliquable (le backend bloque l'accès),
   cohérent avec `.menu-link--locked`. Pack absent (offre) = la tuile n'est PAS rendue (côté PHP). */
.type-tile--locked {
  position: relative;
  opacity: 0.55;
}
.type-tile--locked:hover {
  transform: none;
  border-color: var(--line, #E5E2DA);
  background: var(--cream2, #F2F0E8);
  cursor: not-allowed;
}
.type-tile .type-tile-lock {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: var(--muted, #716D61);
}

/* --- Champs V8 --- */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink, #0A0A0A);
}
.field {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  color: var(--ink, #0A0A0A);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
input.field,
select.field,
textarea.field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  border-radius: var(--radius, 8px);
}
.field:focus {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 1px var(--ink, #0A0A0A) inset;
}
/* Champ verrouillé quand « lieu validé ultérieurement » est coché (TBD) */
.field.is-locked-tbd {
  background: var(--cream2, #F2F0E8);
  color: var(--muted, #716D61);
  cursor: not-allowed;
}
.field.is-locked-tbd::placeholder {
  color: #b3ad9f;
}
/* Override main.css input[type=...] (spécificité plus haute que .field seul) */
input[type="text"].field,
input[type="password"].field,
input[type="email"].field,
input[type="search"].field,
input[type="url"].field,
input[type="tel"].field,
input[type="number"].field {
  padding: 8px 12px;
  height: auto;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  font-family: inherit;
}
input[type="text"].field:focus-visible,
input[type="password"].field:focus-visible,
input[type="email"].field:focus-visible,
input[type="search"].field:focus-visible,
input[type="url"].field:focus-visible,
input[type="tel"].field:focus-visible,
input[type="number"].field:focus-visible {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 1px var(--ink, #0A0A0A) inset;
}
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A7568'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 34px;
}

/* --- Chips / tags V8 --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 400;
  background: var(--cream2, #F2F0E8);
  color: var(--ink, #0A0A0A);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius-pill, 999px);
}
/* ⛔ LES PASTILLES RECOPIAIENT LES JETONS AU LIEU DE LES LIRE. EP, 15/09/2026 :
   « porte ses couleurs en dur, c'est une faute ». Elle avait un coût mesurable : le
   15/09/2026 axe-core a trouvé la pastille d'avertissement à 4,25:1 sur trois écrans
   clients, sous le seuil de 4,5. Corriger la valeur recopiée n'aurait traité que le
   symptôme — la prochaine correction du jeton aurait laissé la pastille derrière elle,
   exactement comme celle-ci. Fond et texte lisent désormais la source unique.
   ⚠️ Les filets n'ont PAS de jeton dans la charte : ils restent écrits ici, seuls de
   leur espèce, et c'est la seule raison pour laquelle ils y sont encore. */
.chip-ok {
  background: var(--ok2);
  border-color: #bbe2c6;   /* pas de jeton */
  color: var(--ok);
}
.chip-warn {
  background: var(--warn2);
  border-color: #f2da9a;   /* pas de jeton */
  color: var(--warn);
}
.chip-err {
  background: var(--err2);
  border-color: var(--err-line, #F1C3B6);   /* pas de jeton */
  color: var(--err);
}
.chip-accent {
  background: #f0f9f2;
  border-color: #a8dab5;
  color: var(--ok, #167A39);
}
.chip-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: var(--radius-pill, 999px);
  margin-right: 4px;
}

/* --- Tables V8 --- */
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tbl caption {
  text-align: left;
  padding-bottom: 10px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
}
table.tbl thead th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #716D61);
  background: var(--cream, #FAF9F5);
  border-bottom: 1px solid var(--line, #E5E2DA);
  white-space: nowrap;
}
table.tbl thead th [class^="ri-"],
table.tbl thead th [class*=" ri-"] {
  font-size: 20px;
  vertical-align: middle;
}
table.tbl tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #E5E2DA);
  vertical-align: middle;
}
table.tbl tbody tr:last-child td {
  border-bottom: none;
}
table.tbl tbody tr:hover {
  background: var(--cream, #FAF9F5);
}
table.tbl-campagnes thead th.text-center,
table.tbl-campagnes tbody td.text-center {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
table.tbl-campagnes thead th.text-center {
  text-transform: none;
  letter-spacing: 0;
}
table.tbl-campagnes thead th.text-center [class^="ri-"],
table.tbl-campagnes thead th.text-center [class*=" ri-"] {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}
table.tbl-campagnes tbody td.text-center {
  text-align: center;
}

table.tbl thead th.text-center,
table.tbl tbody td.text-center {
  text-align: center;
}

/* --- Colonne Performance (taux + progress bar) --- */
table.tbl-campagnes tbody td.cr-open-cell {
  padding: 8px 12px;
  vertical-align: middle;
  text-align: center;
}
.cr-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cr-open-bar {
  flex: 0 0 auto;
  height: 6px;
  background: var(--cream2, #F2F0E8);
  overflow: hidden;
  width: 50px;
  min-width: 30px;
  max-width: 80px;
}
.cr-open-fill {
  height: 100%;
  background: var(--ink, #0A0A0A);
  transition: width 0.3s ease;
}
.cr-open-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}
.cr-open-empty {
  color: var(--ghost, #A29B8B);
}

/* --- Tabs de navigation --- */
.tabs-top {
  display: flex;
  border-bottom: 1px solid var(--line, #E5E2DA);
  background: #fff;
  padding: 0 24px;
  flex-wrap: wrap;
}
[role="tablist"] {
  display: flex;
  flex-wrap: wrap;
}
.tab-top {
  padding: 14px 16px;
  font-weight: 500;
  color: var(--ink2, #141413);
  border-bottom: 3px solid transparent;
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
}
.tab-top:hover {
  background: var(--cream, #FAF9F5);
}
.tab-top[aria-selected="true"],
.tab-top.active {
  color: var(--ink, #0A0A0A);
  border-bottom-color: var(--brand);
  font-weight: 700;
}

/* --- Fil d'Ariane --- */
.crumb {
  font-size: 13px;
  color: var(--muted, #716D61);
  padding: 14px 24px 0;
}
.crumb a {
  color: var(--ink, #0A0A0A);
  text-decoration: underline;
}
.crumb .sep {
  color: var(--ghost, #A29B8B);
  padding: 0 4px;
}

/* --- Avatar --- */
.avatar {
  width: 32px;
  height: 32px;
  background: var(--ink, #0A0A0A);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius, 8px);
}
.avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

/* --- KPI --- */
.kpi {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
}
.kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #716D61);
  font-weight: 500;
}
.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  margin-top: 6px;
  line-height: 1;
}
.kpi-delta {
  font-size: 12px;
  margin-top: 4px;
  color: var(--muted, #716D61);
}
.kpi-delta.ok {
  color: var(--ok, #167A39);
}
.kpi-delta.warn {
  color: #a65e00;
}

/* --- Barre de progression --- */
.progress-bar {
  background: var(--cream2, #F2F0E8);
  height: 6px;
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  width: 0;   /* une barre part de zéro ; l'avancement la remplit (largeur en ligne ou par script) */
  background: var(--ink, #0A0A0A);
}

/* --- Stepper --- */
.steps {
  display: flex;
  align-items: center;
}
.steps .st {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted, #716D61);
  padding: 12px 0;
}
.steps .st .num {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.steps .st.done .num {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
}
.steps .st.active .num {
  background: #fff;
  color: var(--ink, #0A0A0A);
  border-color: var(--ink, #0A0A0A);
}
.steps .st.active {
  color: var(--ink, #0A0A0A);
  font-weight: 700;
}
.steps .st + .st::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line, #E5E2DA);
  margin: 0 8px;
}
.steps .st.done + .st.done::before,
.steps .st.done + .st.active::before {
  background: var(--ink, #0A0A0A);
}

/* --- Calendrier V8 --- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line, #E5E2DA);
  border: 1px solid var(--line, #E5E2DA);
}
.cal-cell {
  background: #fff;
  min-height: 96px;
  padding: 8px;
}
.cal-cell.muted {
  background: var(--cream, #FAF9F5);
  color: var(--ghost, #A29B8B);
}
.cal-cell.today {
  background: var(--cream2, #F2F0E8);
  outline: 1px solid var(--ink, #0A0A0A);
  outline-offset: -1px;
}
.cal-cell .day-num {
  font-weight: 700;
  font-size: 13px;
}
.cal-ev {
  display: block;
  font-size: 11px;
  background: var(--ink, #0A0A0A);
  color: #fff;
  padding: 2px 6px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-ev.accent {
  background: var(--ink, #0A0A0A);
}
.cal-ev.ghost {
  background: var(--cream2, #F2F0E8);
  color: var(--ink, #0A0A0A);
  border: 1px solid var(--line, #E5E2DA);
}

/* --- Chart barres --- */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 190px;
  padding: 18px 6px 0;
}
.chart .bar-c {
  flex: 1;
  background: var(--ink, #0A0A0A);
  position: relative;
  min-width: 16px;
}
.chart .bar-c .val {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  white-space: nowrap;
}
.chart .bar-a {
  background: var(--ink, #0A0A0A);
}

/* --- Annuaire / facettes --- */
.bdc-card {
  background: #ffffff;
  border: 1px solid var(--line, #E5E2DA);
}

/* Bloc Identité contact_edit + Créer fiche : largeur du champ email principal (500px) */
#mainmail,
#fiche-mainmail {
  width: 500px !important;
  max-width: 100%;
}

/* Badge V.I.P. — icone ri-shield-star (gris si non VIP, vert si VIP - selection charte) */
.vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  color: var(--muted, #716D61);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}
.vip-badge:hover {
  border-color: var(--ink, #0A0A0A);
  background: var(--cream, #FAF9F5);
}
.vip-badge i {
  font-size: 22px;
  line-height: 1;
}
.vip-badge.is-vip {
  color: var(--ok, #167A39);
  border-color: var(--ok, #167A39);
  background: #f0f9f2;
}
.vip-badge.is-vip:hover {
  background: #d6f2de;
  border-color: var(--ok, #167A39);
}
.vip-badge[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Badge V.I.P. inline (à côté du nom dans les listes contacts / PE2 / etc.) */
.bdc-row-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ok, #167A39);
  background: #f0f9f2;
  color: var(--ok, #167A39);
  border-radius: var(--radius, 8px);
  flex: 0 0 auto;
}
.bdc-row-vip i {
  font-size: 14px;
  line-height: 1;
}

.onglets-facettes {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line, #E5E2DA);
  background: var(--cream, #FAF9F5);
}
.onglet-facette {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--muted, #716D61);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}
.onglet-facette:hover {
  background: #ffffff;
  color: var(--ink2, #141413);
}
.onglet-facette.on,
.onglet-facette.ongletselection,
.onglet-facette[aria-selected="true"] {
  background: #ffffff;
  color: var(--ink, #0A0A0A);
  font-weight: 700;
  border-bottom-color: var(--brand);
}
/* === DOCTRINE SITE : tous les onglets à facette en CTA empilés en VT/tablette/mobile + previews
   in-app (barre verticale pleine largeur, noir plein = actif, filet noir = autres). Source unique :
   ici, dans la charte. Remplace les traitements par-page (accréditation/badges). === */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .onglets-facettes {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 8px;
    border-bottom: none;
    padding: 0 12px;
  }
  .onglets-facettes > .onglet-facette {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--ink, #0A0A0A); border-radius: var(--radius, 8px); padding: 12px;
    color: var(--ink, #0A0A0A); font-weight: 500; white-space: normal; border-bottom-width: 1px;
  }
  .onglets-facettes > .onglet-facette.on,
  .onglets-facettes > .onglet-facette.ongletselection,
  .onglets-facettes > .onglet-facette[aria-selected="true"] {
    background: var(--ink, #0A0A0A); color: #fff; font-weight: 700; border-color: var(--ink, #0A0A0A);
  }
}
html.preview-tablet .onglets-facettes,
html.preview-mobile .onglets-facettes {
  flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; border-bottom: none; padding: 0 12px;
}
html.preview-tablet .onglets-facettes > .onglet-facette,
html.preview-mobile .onglets-facettes > .onglet-facette {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--ink, #0A0A0A); border-radius: var(--radius, 8px); padding: 12px;
  color: var(--ink, #0A0A0A); font-weight: 500; white-space: normal; border-bottom-width: 1px;
}
html.preview-tablet .onglets-facettes > .onglet-facette.on,
html.preview-tablet .onglets-facettes > .onglet-facette.ongletselection,
html.preview-tablet .onglets-facettes > .onglet-facette[aria-selected="true"],
html.preview-mobile .onglets-facettes > .onglet-facette.on,
html.preview-mobile .onglets-facettes > .onglet-facette.ongletselection,
html.preview-mobile .onglets-facettes > .onglet-facette[aria-selected="true"] {
  background: var(--ink, #0A0A0A); color: #fff; font-weight: 700; border-color: var(--ink, #0A0A0A);
}
.facette-panel {
  background: #ffffff;
  display: none;
}
.facette-panel.active {
  display: block;
}
.facette-entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.facette-entries .entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.35;
}
.facette-entries .entry input[type="checkbox"] {
  flex: 0 0 auto;
}
.facette-entries .entry:hover {
  background: var(--cream, #FAF9F5);
}
.search-media-row {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line, #E5E2DA);
  background: var(--cream, #FAF9F5);
  padding: 10px 16px;
}
.search-media-row .field {
  flex: 1;
}

/* --- Accessibilité --- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink, #0A0A0A);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 300;
  text-decoration: underline;
  font-weight: 500;
}
.skip-link:focus {
  left: 0;
}
*:focus-visible {
  outline: 2px solid var(--ink, #0A0A0A);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- Utilitaires flex/grid compatibles Tailwind --- */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.items-end {
  align-items: flex-end;
}
.gap-3 {
  gap: 12px;
}

/* Checkbox interne du .pub-toggle — convention v8 site-wide : outline gris
   décoché, check vert sélectionné (rouge réservé à la suppression).
   Définition globale (v8.css est chargé sur toutes les pages, contrairement
   à publication_client.css qui n'est pas chargé côté admin). */
/* Liste verticale de cases a cocher — composant partage (publication_etape_1,
   parametres des alertes citoyens.info). Vivait dans publication_client.css,
   qui n'est pas charge partout ou le composant sert. */
.pub-config-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cadre d'une case a cocher — meme rendu que sur publication_etape_1, dont la
   definition vit dans publication_client.css (charge APRES v8.css, donc toujours
   prioritaire la-bas : les pages publication ne changent pas). */
.pub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  background: var(--paper);
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  user-select: none;
}

.pub-toggle:hover {
  background: var(--cream2);
  border-color: var(--line2);
}
.pub-toggle input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-4 {
  gap: 16px;
}
.gap-6 {
  gap: 24px;
}
.ml-auto {
  margin-left: auto;
}
.ml-1 {
  margin-left: 4px;
}
.mr-2 {
  margin-right: 8px;
}
/* ⛔ UN LIEN DANS UN PARAGRAPHE NE SE DISTINGUE JAMAIS PAR LA SEULE COULEUR (RGAA 10.6).
   Mesure axe-core du 15/09/2026, ecran FAQ : le vert #167a39 dans du gris #716d61 rend
   1,05:1, la regle en demande 3. Souligner leve l'exigence : la couleur cesse d'etre le
   seul indice. Portee aux paragraphes en texte attenue, ou le cas se presente. */
p.text-muted a,
.info-utilisateur a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mt-2 {
  margin-top: 8px;
}
.mt-4 {
  margin-top: 16px;
}
.leading-tight {
  line-height: 1.25;
}
.text-xs {
  font-size: 12px;
}
.text-sm {
  font-size: 14px;
}
.text-base {
  font-size: 15px;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
/* Texte d'information à l'utilisateur — phrase explicative en tête d'écran,
   d'onglet ou de bloc.

   RÈGLE : une phrase adressée à l'utilisateur se lit d'un trait. Pas de césure,
   pas de coupure de mot, et surtout pas de largeur bridée qui la casse avant la
   fin de la ligne disponible. Chaque écran qui réinventait sa propre classe
   d'intro finissait par réintroduire un `max-width` et donc une coupure : d'où
   cette classe unique, à utiliser partout où l'on explique quelque chose au
   client.

   Ne pas y ajouter de `max-width`. Si un écran a besoin de borner sa colonne,
   c'est le conteneur qui la borne, pas le texte. */
/* Texte d'explication adresse au client. SOURCE UNIQUE — elle porte tout :
   taille, couleur, interligne, et le comportement de cesure.
   Avant, elle ne reglait que la cesure : chaque appelant devait lui adjoindre
   « text-sm text-muted », ou pire un style inline (12px/#716D61/1.4 dans
   _pe_hab_logo_block.php et salledepresse_edit.php). Trois facons d'ecrire la
   meme chose, donc trois tailles differentes a l'ecran. Reference retenue :
   celle du bloc logo, 12px — la plus discrete, et deja la plus repandue.
   ⚠️ Ne JAMAIS y remettre de max-width : c'est ce qui coupait les phrases
   140px avant le bord de leur carte (cf. BITE §5). */
.info-utilisateur {
    font-size: 12px;
    color: var(--muted, #716D61);
    line-height: 1.4;
    -webkit-hyphens: none;
            hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: pretty;
    max-width: none;
}
.text-muted {
  color: var(--muted, #716D61);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.hidden {
  display: none !important;
}

/* Rendu typographique des pages publiques (CGV, RGPD, mentions légales)
   alimentées via TinyMCE depuis l'admin Pages publiques. */
.page-publique-content {
  line-height: 1.6;
  color: #1f1a14;
}
.page-publique-content h1,
.page-publique-content h2,
.page-publique-content h3,
.page-publique-content h4 {
  color: var(--ink, #0A0A0A);
  margin: 1.4em 0 0.6em;
  line-height: 1.25;
}
.page-publique-content h1:first-child,
.page-publique-content h2:first-child,
.page-publique-content h3:first-child {
  margin-top: 0;
}
.page-publique-content h2 {
  font-size: 20px;
  border-bottom: 1px solid var(--line, #E5E2DA);
  padding-bottom: 8px;
}
.page-publique-content h3 {
  font-size: 16px;
}
.page-publique-content p {
  margin: 0 0 1em;
}
.page-publique-content ul,
.page-publique-content ol {
  margin: 0 0 1em;
  padding-left: 24px;
}
.page-publique-content li {
  margin-bottom: 6px;
}
.page-publique-content a {
  color: var(--ok, #167A39);
  text-decoration: underline;
}
.page-publique-content table {
  border-collapse: collapse;
  margin: 1em 0;
}
.page-publique-content table th,
.page-publique-content table td {
  border: 1px solid var(--line, #E5E2DA);
  padding: 8px 12px;
  vertical-align: top;
}
.page-publique-content blockquote {
  border-left: 3px solid var(--ok, #167A39);
  padding: 4px 16px;
  margin: 1em 0;
  color: var(--muted-dark, #5C5648);
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0;
}
.overflow-x-auto {
  overflow-x: auto;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opacity-0 {
  opacity: 0;
}
.max-w-xl {
  max-width: 36rem;
}
.mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}
.p-4 {
  padding: 16px;
}
.p-6 {
  padding: 24px;
}
.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

/* === Bloc centré standard pour les pages administrables et les formulaires ===
   Règle de chartre : marges G/D de 260px sur grand écran, réduites
   progressivement en dessous pour rester lisible (tablette / mobile). */
.content-centered {
  padding-left: 260px;
  padding-right: 260px;
  box-sizing: border-box;
}
@media (max-width: 1600px) {
  .content-centered {
    padding-left: 220px;
    padding-right: 220px;
  }
}
@media (max-width: 1300px) {
  .content-centered {
    padding-left: 120px;
    padding-right: 120px;
  }
}
@media (max-width: 900px) {
  .content-centered {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.col-span-full {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hidden.md\:inline-block {
    display: inline-block !important;
  }
  .hidden.md\:inline {
    display: inline !important;
  }
  .hidden.md\:flex {
    display: flex !important;
  }
}
@media (min-width: 1024px) {
  .hidden.lg\:flex {
    display: flex !important;
  }
}

/* --- Responsive tables --- */
@media (max-width: 900px) {
  table.tbl {
    display: block;
  }
  table.tbl thead {
    display: none;
  }
  table.tbl tbody,
  table.tbl tbody tr {
    display: block;
  }
  table.tbl tbody tr {
    padding: 10px 12px;
    border: 1px solid var(--line, #E5E2DA);
    border-bottom: none;
    background: #fff;
  }
  table.tbl tbody tr:last-child {
    border-bottom: 1px solid var(--line, #E5E2DA);
  }
  table.tbl tbody td {
    display: block;
    padding: 2px 0;
    border: none;
    font-size: 13px;
  }
  table.tbl tbody td:first-child {
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 4px;
  }
}
@media (max-width: 768px) {
  .topbar {
    padding: 0 16px;
  }
  /* Barre d'étapes mobile : n'afficher que l'étape en cours, chiffre + label
     empilés (label sous le chiffre) et le tout centré sur la page. */
  .steps {
    justify-content: center;
    align-items: center;
  }
  .steps .st:not(.active) {
    display: none;
  }
  .steps .st.active {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
  .steps .st + .st::before {
    display: none;
  }
}

/* --- Liste de contacts --- */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-item {
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  padding: 12px 14px;
}
.pe-canal-group {
  margin-bottom: 16px;
}
.pe-canal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  column-gap: 25px;
  row-gap: 8px;
  margin-top: 8px;
}
.pe-canal-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pe-canal-tile:hover {
  border-color: var(--ok, #167A39);
  background: var(--cream, #FAF9F5);
}
.pe-canal-tile-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius, 8px);
  background: #f1efe8;
  color: var(--muted-dark, #5C5648);
  font-size: 20px;
}
.pe-canal-tile:hover .pe-canal-tile-ic {
  color: var(--ok, #167A39);
}
.pe-canal-tile-body {
  min-width: 0;
  flex: 1;
}
.pe-canal-tile-label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-canal-tile-url {
  display: block;
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--muted, #716D61);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-canal-tile-go {
  flex-shrink: 0;
  color: #b4b2a9;
  font-size: 15px;
}
.pe-canal-tile:hover .pe-canal-tile-go {
  color: var(--ok, #167A39);
}
.contact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.contact-name {
  font-weight: 700;
  font-size: 15px;
  margin: 0;
  color: var(--ink, #0A0A0A);
}
.contact-role {
  font-size: 12px;
  color: var(--muted, #716D61);
  margin: 2px 0 0;
}
.contact-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
}
.contact-grid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #716D61);
  font-weight: 500;
  margin: 0 0 2px;
}
.contact-grid dd {
  margin: 0;
  font-size: 13px;
  word-break: break-word;
}
.contact-grid dd a {
  color: var(--ink, #0A0A0A);
  text-decoration: none;
}
.contact-grid dd a:hover {
  text-decoration: underline;
}

/* --- Section page (pad standard) --- */
.page-section {
  padding: 24px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

/* --- Menu déroulant compte (#logout) ---
   Fix 2026-07-01 : main.css pose ce menu en `position:fixed; width:100%` →
   couche flottante pleine largeur qui (1) reste collée au viewport au scroll
   alors que le topbar (non-sticky) défile, et (2) se superpose au contenu.
   On le repositionne en vrai dropdown ancré sous le topbar, à droite :
   `position:absolute` → défile avec la page ; le conteneur porte lui-même
   la largeur (25%, comme avant) au lieu d'être une couche 100% qui recouvre
   les autres éléments — seul le bloc menu reste, plus la bande pleine largeur.
   Le #logout est un frère juste après <header class="topbar"> (page top),
   donc `top:60px` (= hauteur topbar) l'aligne pile sous le bouton compte. */
.settingsdiv {
  position: absolute;
  top: 60px;
  right: 24px;
  width: 25%;          /* largeur d'origine conservée (main.css la mettait sur .settingsmenu) */
  min-width: 220px;    /* plancher mobile — 25% deviendrait trop étroit */
  align-items: stretch;
  z-index: 1000;
}
.settingsmenu {
  width: 100%;         /* remplit le conteneur 25% — remplace le width:25% de main.css */
}

/* --- Remap classes anciennes → V8 pour compat --- */
.boutonprin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-weight: 500;
  font-size: 14px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s;
}
.boutonprin:hover {
  background: var(--ink2);
  color: var(--paper);
}

/* Login header — override main.css underline-only sur les inputs login */
#login input[type="text"],
#login input[type="password"],
#login input.mdp {
  padding: 8px 12px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  background: var(--paper);
  font-family: inherit;
}
/* Wrapper du champ mot de passe (.mdpdiv contient input mdp + icône œil).
   main.css lui donne une bordure mais oublie le border-radius → cellule carrée.
   On aligne sur la charte (6px) pour matcher le champ email à côté. */
#login .mdpdiv {
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
#login input[type="text"]:focus-visible,
#login input[type="password"]:focus-visible,
#login input.mdp:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}

/* Conteneur du bloc identification : main.css lui donne un fond et un padding
   mais pas de border-radius -> coins carres alors que tous les champs qu'il
   contient sont arrondis. On applique le radius de la charte. EP 2026-07-30. */
#login {
  border-radius: var(--radius, 8px);
}

/* « Mot de passe oublie ? » : bouton filet noir, texte droit. Remplace le
   texte gris italique de main.css (declarations retirees la-bas : une seule
   source de verite pour ce bouton). EP 2026-07-30. */
#login .forgotmdp,
#login .loginrecover-send {
  justify-content: center;
}
#login .forgotmdp {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: background 0.15s;
}
#login .forgotmdp:hover {
  background: var(--cream);
}

/* Cinetique de recuperation : le clic substitue aux champs adresse + mot de
   passe un champ unique et le bouton « Envoyer ma demande ». L'etat vit dans
   #login[data-mode], la visibilite est ici — aucun style inline en JS. */
#login .loginrecover-send {
  display: none;
}
#login[data-mode="recover"] .mdpdiv,
#login[data-mode="recover"] input[name="connexion"],
#login[data-mode="recover"] .forgotmdp {
  display: none;
}
#login[data-mode="recover"] .loginrecover-send {
  display: inline-flex;
}
/* Seul champ restant : il doit pouvoir afficher son libelle en entier. */
#login[data-mode="recover"] input[name="identifiant"] {
  min-width: 280px;
}
.boutonsec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-weight: 500;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.boutonsec:hover {
  background: var(--cream);
  border-color: var(--ink);
}

/* === PAS DE BLEU sur les contrôles natifs : accent-color = vert charte #167A39.
   Le navigateur applique bleu par défaut sur radio / checkbox / range / progress / meter.
   Cohérent avec la règle « Sélection = vert » : un état coché est une sélection. === */
input[type="radio"],
input[type="range"],
progress,
meter {
  accent-color: var(--ok, #167A39);
}

/* ============================================================================
   CASE À COCHER — COMPOSANT UNIQUE (source unique de vérité, EP 2026-07-16)
   ----------------------------------------------------------------------------
   AVANT : 5 copies du même bloc (accreditations / base_de_contacts /
   demandes_presse / publication_client ×2), chacune revendiquant TOUTES les
   cases du site. Selon la feuille chargée en dernier, la case faisait 15, 18
   ou 20px — personne ne l'avait décidé. Les copies avaient dérivé : outline
   un outline BLEU (interdit par la charte) et un vert de coche hors charte.
   v8.css est chargée par client/index/admin/ouvert → la règle vaut PARTOUT.

   Taille = --control-size · rayon = --radius-control (une case n'est pas un
   bloc : à 15px, 8px en ferait un rond, donc un faux bouton radio).
   La coche est un SVG de fond en currentColor : cocher ne change qu'une
   COULEUR, jamais une géométrie. Le SVG suit la boîte tout seul — aucun offset
   à recalculer quand la taille bouge (c'était le défaut du mécanisme ::after).
   Variante rouge (suppression/refus) : .checkbox-delete, plus bas.
   ============================================================================ */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: var(--control-size, 15px);
  height: var(--control-size, 15px);
  flex-shrink: 0;
  margin-right: 10px;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  border-radius: var(--radius-control, 3px);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A29B8B'%3E%3Cpath d='M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z'%3E%3C/path%3E%3C/svg%3E");
  cursor: pointer;
  vertical-align: middle;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23167D3A'%3E%3Cpath d='M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z'%3E%3C/path%3E%3C/svg%3E");
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variante SUPPRESSION / REFUS : la case coche en rouge charte au lieu du vert.
   Une seule propriete suffit — la coche est un SVG en currentColor, donc la
   variante ne change QUE la couleur, jamais la geometrie ni le mecanisme.
   (Avant : 3 regles bardees de !important qui re-declaraient tout le controle,
   parce que la regle globale n'etait pas garantie sur toutes les pages.)
   Usage : class="checkbox-delete" sur l'input. */
input[type="checkbox"].checkbox-delete:checked,
.suppr-confirm-label input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5170D'%3E%3Cpath d='M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z'%3E%3C/path%3E%3C/svg%3E");
}

/* === PAS DE BLEU sur la sélection de texte : vert charte (--ok #167A39) au lieu du highlight bleu navigateur. === */
::selection {
  background: var(--ok, #167A39);
  color: #fff;
}
::-moz-selection {
  background: var(--ok, #167A39);
  color: #fff;
}
.grayborder {
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  padding: 20px;
}

/* --- Remap onglets existants --- */
.onglets {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line, #E5E2DA);
}
.onglet {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: var(--muted, #716D61);
  font-weight: 500;
  font-size: 14px;
  font-family: inherit;
  transition: color 0.15s;
}
.onglet:hover {
  background: var(--cream2, #F2F0E8);
  color: var(--ink2, #141413);
}
.ongletselection {
  height: auto;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 3px solid var(--brand);
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink, #0A0A0A);
  font-family: inherit;
  position: relative;
  top: 1px;
}

/* --- Shims layout anciens (pages non encore migrées) --- */
/* Le .app-main n'a pas de padding propre : chaque page met son wrapper px-6 py-6.
   Pour les pages sans wrapper, on leur donne un padding via .doubleblock racine */
.doubleblock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.rightblock {
  flex: 1;
  min-width: 0;
}
.leftblock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.verticalcenter {
  align-items: center;
}
.halfcolumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .halfcolumns {
    grid-template-columns: 1fr;
  }
}
.halfcolumn {
  min-width: 0;
}
.fullcolumn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.maincontent {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.nogap {
  gap: 0 !important;
}
.gap10 {
  gap: 10px !important;
}
.gap60 {
  gap: 40px !important;
}
.mcenter {
  justify-content: center !important;
}

/* Padding pour pages non migrées : premier .doubleblock dans .app-main devient le header */
.app-main > .doubleblock:first-child {
  padding: 24px 24px 0;
}
.app-main > .grayborder,
.app-main > .stats-content,
.app-main > .maincontent,
.app-main > form > .doubleblock:first-child {
  padding: 24px;
}

/* Wrapper de page générique pour les pages sans px-6 py-6 */
.app-main > h2:first-child,
.app-main > form > h2:first-child {
  padding: 24px 24px 0;
  margin: 0 0 16px;
}

/* --- Stats page shims --- */
.stats-content {
  padding: 0 24px 24px;
}
.stats-title {
  margin-bottom: 16px;
}
.stats-title h2 {
  font-size: 20px;
  font-weight: 700;
}
.stats-table-wrapper {
  border: 1px solid var(--line, #E5E2DA);
  overflow-x: auto;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.stats-table th {
  background: var(--cream, #FAF9F5);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--line, #E5E2DA);
  white-space: nowrap;
}
.stats-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #E5E2DA);
  vertical-align: top;
}
.stats-table tr:last-child td {
  border-bottom: none;
}
.stats-table-group-row td {
  background: var(--cream, #FAF9F5);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stats-table-group-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #716D61);
  font-family: inherit;
}
.stats-table-header-icon {
  display: inline-flex;
  align-items: center;
}
.stats-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Demandes presse shims --- */
.lignemesdemandespresses,
.lignemesdemandespresse {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.lignemesdemandespresses {
  border-bottom: 1px solid var(--line, #E5E2DA);
  padding: 8px 0;
}
.lignemesdemandespresse.bordertop {
  border-top: 1px solid var(--line, #E5E2DA);
}
.publicationmesdemandespresse {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mesdemandespresse {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.selectionmesdemandespresse,
.dupliquermesdemandespresse {
  flex-shrink: 0;
}
.infos {
  flex-shrink: 0;
}
.fiche-demande-presse {
  margin-top: 16px;
}

/* --- Profil page shims --- */
.identification2 {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}
.apropos2 {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}
.signature {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.selectprofil {
  padding: 8px 12px;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  min-width: 200px;
}
.profilmail {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.profilmail2 {
  flex: 1;
  min-width: 200px;
}
.polices-couleur {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.police-couleur {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.liens-reseau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.reseau svg {
  width: 28px;
  height: 28px;
}
.accordion {
  display: flex;
  flex-direction: column;
}
.accordion input[type="checkbox"] {
  display: none;
}
.accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #E5E2DA);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.accordion input:not(:checked) + .accordion-title .chevron-up {
  display: none;
}
.accordion input:checked + .accordion-title .chevron-down {
  display: none;
}
.accordion .contents {
  display: none;
  padding: 12px 0;
}
.accordion input:checked ~ .contents {
  display: block;
}
.imgetlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.webicon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.tuile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--line, #E5E2DA);
  cursor: pointer;
  margin-top: 16px;
}
.tuile:hover {
  background: var(--cream, #FAF9F5);
}
.radiosee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.radioseeright,
.radioseeleft {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line, #E5E2DA);
}
.radioseeright {
  background: var(--ink, #0A0A0A);
}

/* --- Zones de diffusion : correction alignement --- */
.zones-container .centerdiv {
  text-align: left;
  align-items: flex-start;
  gap: 4px;
}
.zones-container .centerdiv .normalsizeicon {
  flex-shrink: 0;
  margin-top: 2px;
}
.zone-level-1 {
  display: block;
  width: 100%;
}

/* --- Paramètres du compte : mode lecture / édition --- */
.param-card .param-fields input.field,
.param-card .param-fields select.field,
.param-card .param-fields textarea.field {
  background: var(--cream, #FAF9F5);
  border-color: transparent;
  pointer-events: none;
}
.param-card.is-editing .param-fields input.field,
.param-card.is-editing .param-fields select.field,
.param-card.is-editing .param-fields textarea.field {
  background: #fff;
  border-color: var(--line, #E5E2DA);
  pointer-events: auto;
}
.param-card .btn-edit {
  display: inline-flex;
}
.param-card.is-editing .btn-edit {
  display: none !important;
}
.param-card .btn-save-group {
  display: none;
}
.param-card.is-editing .btn-save-group {
  display: flex;
}

/* --- Mode lecture / édition profils d'envoi --- */
#screen-profils-envoi:not(.is-editing) .field,
#screen-profils-envoi:not(.is-editing) textarea.field,
#screen-profils-envoi:not(.is-editing) select.field {
  background: var(--cream, #FAF9F5);
  border-color: transparent;
  pointer-events: none;
}
#screen-profils-envoi.is-editing .card {
  box-shadow: inset 0 0 0 1px var(--ink, #0A0A0A);
}

/* --- Zones de dépôt de fichier : marges latérales uniformes --- */
.drop-wrapper {
  margin-left: 24px;
  margin-right: 24px;
}

/* --- Onglets de contenu (multimédia, cosignataires, etc.) : padding 24px
   pour garantir la marge entre les champs et le filet du cadre.
   L'onglet rédactionnel est exclu car TinyMCE a besoin du plein largeur. --- */
.contenu.multimedia,
.contenu.complementaire,
.contenu.conference,
.contenu.cosignataire {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Section à l'intérieur d'un onglet (ex: Illustration, Vidéo) */
.media-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.media-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: 0.02em;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #E5E2DA);
}

/* Grille 2 colonnes pour les paires de champs (légende/copyright) */
.media-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  .media-fields-grid {
    grid-template-columns: 1fr;
  }
}

/* Couple label + input vertical, écart de 6px */
.field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Dans un parent déjà paddé, le drop-wrapper n'a plus besoin de sa propre marge */
.contenu.multimedia .drop-wrapper,
.contenu.complementaire .drop-wrapper,
.contenu.conference .drop-wrapper,
.contenu.cosignataire .drop-wrapper,
.card-section .drop-wrapper {
  margin-left: 0;
  margin-right: 0;
}

/* Quand il n'y a pas de fichier, le .doubleblock du drop-wrapper ne contient
   que des éléments cachés (input hidden + bouton "Supprimer" .hidden).
   On le retire du flux pour coller la drop-zone à son label. */
.drop-wrapper:not(.has-file) .doubleblock {
  display: none;
}

/* FIX 2026-06-10 : sur les cards cosignataires, quand un logo est deja uploade
   on cache la drop-zone pour eviter le double affichage (logo + bloc "IL N'Y A PAS DE FICHIER").
   L'utilisateur doit cliquer sur la corbeille pour remplacer le logo. */
.cos-card .drop-wrapper.has-file .drop-zone {
  display: none;
}

/* --- Bouton Supprimer icône (charte rouge #B5170D) --- */
.delete-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--err, #B5170D);
  border-radius: var(--radius, 8px);
  color: var(--err, #B5170D);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
  margin-top: 8px;
}
.delete-icon-btn:hover,
.delete-icon-btn:focus-visible {
  background: #fcebea;
  color: #8e1108;
  border-color: #8e1108;
  outline: none;
}
.delete-icon-btn:active {
  background: #f5d6d3;
}
.delete-icon-btn :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 20px;
  line-height: 1;
}
.delete-icon-btn.hidden {
  display: none !important;
}

/* --- Listes de diffusion (publication étape 1 — Relations publiques)
   Pattern « cards » : master row + tuiles. Markup : publication_tags.js.
   IMPORTANT : toutes les tuiles ont MÊME HAUTEUR et MÊME LARGEUR. --- */

/* Container global : flex wrap, tuiles 480px de large */
.zones-container-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 16px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
}

/* Master row : pleine largeur, fond blanc, filet gris arrondi */
.zones-container-tag .tags-master-row {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
}
.zones-container-tag .tags-master-row .js-tags-master {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ok, #167A39);
}
.zones-container-tag .tags-master-row label {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  flex: 1 1 auto;
  cursor: pointer;
  margin: 0;
}
.zones-container-tag .tags-master-row label > i {
  grid-row: 1 / 3;
  grid-column: 1;
  font-size: 22px;
  color: var(--ok, #167A39);
  align-self: center;
}
.zones-container-tag .tags-master-row label > strong {
  grid-row: 1;
  grid-column: 2;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
}
.zones-container-tag .tags-master-row label > .master-hint {
  grid-row: 2;
  grid-column: 2;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted, #716D61);
}

/* Tuiles individuelles — UNIFORMES : 1/3 de la largeur du container (3 tuiles
   par ligne), 50px de haut. La largeur est calculee pour que 3 tuiles + 2 gaps
   de 16px remplissent EXACTEMENT la largeur disponible (= largeur du master row
   .tags-master-row qui prend 100%). Avant : width: 480px fixe → decalage a
   droite si le parent fait plus que 1472px (regression 2026-06-09). */
.zones-container-tag .col31 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
  height: 50px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
  overflow: hidden;
}
.zones-container-tag .col31:hover {
  border-color: var(--ok, #167A39);
  background: #f0f9f2;
}
.zones-container-tag .col31 input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ok, #167A39);
}
/* Focus = noir charte #0A0A0A. JAMAIS rouge ici : le rouge (#B5170D) signifie
   suppression, or ces cases sont une SÉLECTION de listes de diffusion en PE1
   (pas de suppression) → l'outline rouge donnait une sélection « rouge » hors charte.
   !important pour battre la règle globale *:focus-visible. */
.zones-container-tag *:focus,
.zones-container-tag *:focus-visible,
.zones-container-tag input:focus,
.zones-container-tag input:focus-visible,
.zones-container-tag label:focus,
.zones-container-tag label:focus-visible {
  outline: 2px solid var(--ink, #0A0A0A) !important;
  outline-offset: 1px;
}
.zones-container-tag .col31:focus-within {
  border-color: var(--ink, #0A0A0A);
}

/* Labels statut "Objet du mail" etc. sur une seule ligne */
.statut-label,
.elements-associes .element {
  white-space: nowrap;
}
.zones-container-tag .col31 label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  cursor: pointer;
  margin: 0;
  font-size: 13px;
  color: var(--ink, #0A0A0A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zones-container-tag .col31 label > i {
  font-size: 18px;
  color: var(--muted, #716D61);
  flex: 0 0 auto;
}
/* Liste posée par une option (Hémicycle) : icône à la couleur de marque, comme dans le
   sélecteur de listes. */
.zones-container-tag .col31 label.est-option > i {
  color: var(--brand, var(--err, #B5170D));
}
.zones-container-tag .col31 label .list-name {
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  overflow: hidden;
  text-overflow: ellipsis;
}
.zones-container-tag .col31:has(input:checked) {
  border-color: var(--ok, #167A39);
  background: #f0f9f2;
}
.zones-container-tag .col31:has(input:checked) label > i {
  color: var(--ok, #167A39);
}

/* --- Pickers date/heure v8 (champs saisissables + bouton calendrier) --- */
/* Wrapper qui place les labels au-dessus du bloc dt-pack */
.dt-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  vertical-align: middle;
}
.dt-stack-labels {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 0;
}
.dt-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #716D61);
  width: 62px;
  text-align: center;
  padding: 5px 10px 0 10px;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;
}
.dt-label--year {
  width: 76px;
}
.dt-label-sep {
  width: 5px;
  flex-shrink: 0;
}
.dt-label-picker-spacer {
  width: 40px;
  flex-shrink: 0;
}
/* Quand le picker est dans une dt-stack, on masque les labels internes des dt-fields */
.dt-stack .dt-field-label {
  display: none;
}
/* Sans label interne, on centre le placeholder verticalement dans la cellule */
.dt-stack .dt-field {
  justify-content: center;
}

.dt-pack {
  display: inline-flex;
  align-items: stretch;
  min-height: 48px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.dt-pack:focus-within {
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 1px var(--ink, #0A0A0A) inset;
}
.dt-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 10px;
  width: 62px;
  box-sizing: border-box;
}
.dt-field--year {
  width: 76px;
}
.dt-field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #716D61);
  margin: 0 0 2px 0;
  line-height: 1;
  white-space: nowrap;
}
.dt-field-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink, #0A0A0A);
  text-align: center;
  outline: none;
}
.dt-field-input::placeholder {
  color: var(--ghost, #A29B8B);
  font-weight: 400;
}
.dt-pack-sep {
  width: 1px;
  background: var(--line, #E5E2DA);
  margin: 6px 2px;
}
.dt-pack-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--line, #E5E2DA);
  background: var(--cream, #FAF9F5);
  color: var(--ink, #0A0A0A);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.dt-pack-picker:hover {
  background: var(--ink, #0A0A0A);
  color: #fff;
}
.dt-pack-picker :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 20px;
}
/* Récap `.dt-readout` (créé par v8_datetime.js pour tout .dt-pack) : masqué par DÉFAUT partout
   (les cases jour/mois/année servent). v8_mobile.css le ré-affiche en @media mobile sur les pages
   qui le chargent (app). Sur le public (sans v8_mobile.css), il reste donc caché. */
.dt-readout {
  display: none;
}
/* Champ date : ne pas s'étirer pleine largeur quand il est dans un conteneur flex qui étire
   ses enfants (ex. formulaire consultation PE4) → garder la largeur du contenu (le fond blanc
   de .dt-pack ne déborde plus). Desktop uniquement ; le mobile est géré par v8_mobile.css. */
@media (min-width: 769px) {
  .dt-stack {
    align-self: flex-start;
  }
}

/* --- Composant date de naissance (selection_date_naissance.php) ---
   Scope strict via [data-dn-stack] : tout pack date publi reste inchangé.
   Objectifs :
     - Aligner verticalement les champs .field du bloc Identité sur la hauteur 48px du dt-pack.
     - Élargir la colonne ANNÉE (76 → 92px) pour ne plus tronquer le placeholder AAAA.
*/
/* Hauteur 37px = hauteur native des inputs/select .field standards (référence Prénom/Nom).
   On force le dt-pack du composant naissance à la même hauteur (au lieu des 48px hérités du pack publi). */
[data-dn-stack] .dt-pack {
  height: 37px;
  min-height: 37px;
}
[data-dn-stack] .dt-field {
  padding: 0 8px;
}
[data-dn-stack] .dt-field-input {
  font-size: 13px;
  line-height: 1;
}
[data-dn-stack] .dt-field--year,
[data-dn-stack] .dt-label--year {
  width: 84px;
}

/* --- event-line : ligne d'evenement (selection_date.php composant) --- */
.event-line {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.event-line .event-type {
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #0A0A0A);
  cursor: pointer;
  align-self: flex-end;
}
/* cache-bust 2026-05-29-trash-border */
.event-line button.remove-line,
.event-line button.nobutton.remove-line {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0 !important;
  margin: 0;
  border: 1px solid var(--line, #E5E2DA) !important;
  border-radius: var(--radius, 8px) !important;
  background: #fff !important;
  cursor: pointer;
  align-self: flex-end;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.event-line .remove-line:hover {
  background: var(--cream2, #F2F0E8);
  border-color: var(--ink, #0A0A0A);
}
.event-line .remove-line .icone {
  width: 20px;
  height: 20px;
}

/* --- Bouton "+ Ajouter une date" (composant selection_date) --- */
.btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  color: var(--ink, #0A0A0A);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius, 8px);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn-add:hover {
  background: var(--cream2, #F2F0E8);
  border-color: var(--ink, #0A0A0A);
}
.btn-add--label {
  margin-top: 4px;
}
.btn-add i {
  font-size: 16px;
  line-height: 1;
}
.flatpickr-calendar {
  border: 1px solid var(--line, #E5E2DA) !important;
  border-radius: var(--radius, 8px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  font-family: inherit !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none !important;
}
.flatpickr-months {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #fff !important;
}
/* Fix affichage : l'année à 4 chiffres était tronquée (« 20 » au lieu de « 2025 ») dans
   l'en-tête. On élargit l'en-tête (75%→84%) et le champ année (6ch→7ch), en gardant une
   marge latérale (left 8%) pour les flèches ‹ › — pas de chevauchement. */
.flatpickr-current-month {
  width: 84%;
  left: 8%;
}
.flatpickr-current-month .numInputWrapper {
  width: 7ch;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #fff;
  color: var(--ink, #0A0A0A);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #fff !important;
  fill: #fff !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--cream2, #F2F0E8) !important;
}
.flatpickr-weekdays {
  background: var(--cream, #FAF9F5);
}
span.flatpickr-weekday {
  color: var(--muted, #716D61) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.flatpickr-day {
  color: var(--ink, #0A0A0A);
  border-radius: var(--radius, 8px);
}
.flatpickr-day:hover {
  background: var(--cream2, #F2F0E8);
  border-color: transparent;
}
.flatpickr-day.today {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
}
.flatpickr-day.today:hover {
  background: var(--cream2, #F2F0E8);
  color: var(--ink, #0A0A0A);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--ink, #0A0A0A) !important;
  border-color: var(--ink, #0A0A0A) !important;
  color: #fff !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--ghost, #A29B8B);
}
.flatpickr-time {
  border-top: 1px solid var(--line, #E5E2DA) !important;
  background: var(--cream, #FAF9F5);
}
.flatpickr-time input {
  color: var(--ink, #0A0A0A) !important;
}
.flatpickr-time .flatpickr-time-separator {
  color: var(--ink, #0A0A0A);
}
.flatpickr-time .numInputWrapper:hover,
.flatpickr-time input:hover {
  background: var(--cream2, #F2F0E8) !important;
}

/* --- Albert Londres (bot assistant flottant) --- */
.albert-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--ink, #0A0A0A);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.albert-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  background: #1a1a1a;
}
.albert-fab:active {
  transform: translateY(0);
}
.albert-fab :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
  line-height: 1;
}
.albert-fab-label {
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .albert-fab {
    padding: 14px;
    bottom: 16px;
    right: 16px;
  }
  .albert-fab-label {
    display: none;
  }
}

/* --- Modal de chat Albert Londres --- */
.albert-modal {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 400px;
  height: 580px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.albert-modal.hidden {
  display: none;
}

.albert-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--ink, #0A0A0A);
  color: #fff;
}
.albert-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
.albert-modal-title :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
}
.albert-modal-close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius, 8px);
  transition: background 0.15s;
}
.albert-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.albert-modal-close :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 20px;
}

.albert-modal-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--cream, #FAF9F5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.albert-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius, 8px);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.albert-msg-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  color: var(--ink, #0A0A0A);
  border-bottom-left-radius: var(--radius, 8px);
}
.albert-msg-user {
  align-self: flex-end;
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-bottom-right-radius: var(--radius, 8px);
}
.albert-msg-typing {
  color: var(--muted, #716D61);
  font-style: italic;
}

.albert-modal-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line, #E5E2DA);
  background: #fff;
}
.albert-modal-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius-pill, 999px);
  font-family: inherit;
  font-size: 14px;
  background: var(--cream, #FAF9F5);
}
.albert-modal-form input:focus {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  background: #fff;
}
.albert-modal-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink, #0A0A0A);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.albert-modal-send:hover {
  background: #1a1a1a;
}
.albert-modal-send:disabled {
  background: var(--ghost, #A29B8B);
  cursor: not-allowed;
}
.albert-modal-send :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 20px;
}

@media (max-width: 640px) {
  .albert-modal {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 80px;
    height: calc(100vh - 110px);
  }
}

/* ===========================================================================
   « Nos offres » — page publique (client + ouvert)
   3 cards tarifaires, la card .offre-card--best est mise en avant (fond sombre).
   =========================================================================== */
.offres-hero {
  max-width: 980px;
  margin: 0 auto 32px;
  text-align: center;
}
.offres-hero h1 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.15;
}
.offres-hero-sub {
  font-size: 16px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto;
}

.offres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 48px;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .offres-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sections « Relations presse » / « Relations publiques » / « Offres globales »
   — chaque section a son propre titre et sa rangée de cards. */
.offres-section {
  max-width: 1200px;
  margin: 0 auto 48px;
}

.offres-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #E5E2DA);
}
.offres-section-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.offres-section-icon :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 26px;
  color: var(--ink, #0A0A0A);
}
.offres-section--globales .offres-section-icon {
  background: var(--ink, #0A0A0A);
  border-color: var(--ink, #0A0A0A);
}
.offres-section--globales .offres-section-icon :is([class^="ri-"], [class*=" ri-"]) {
  color: #e0a800;
}

.offres-section-headtext {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.offres-section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink, #0A0A0A);
  margin: 0;
  line-height: 1.2;
}
.offres-section-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-dark, #5C5648);
  margin: 0;
  max-width: 720px;
}

.offres-grid--row {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  /* Sur les sections, on garde 2 colonnes maxi (chaque catégorie a 2 offres). */
  .offres-grid--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.offre-card {
  position: relative;
  background: #faf6ec;
  border: 1px solid #e8dfc9;
  border-top: 3px solid #e0a800;
  padding: 40px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.offre-card:hover {
  transform: translateY(-4px);
  background: #f7efd9;
  box-shadow: 0 12px 28px rgba(224, 168, 0, 0.18);
}

/* RGAA : fond foncé + texte blanc → contraste AAA. !important pour battre
   tout override hérité (ex. styles legacy ou inline). */
.offre-card--best {
  background: var(--ink, #0A0A0A) !important;
  color: #fff !important;
  border-color: var(--ink, #0A0A0A) !important;
  padding-top: 56px;
}
.offre-card--best,
.offre-card--best .offre-features,
.offre-card--best .offre-features li,
.offre-card--best .offre-features--rich,
.offre-card--best .offre-feature-text {
  color: #fff !important;
}
.offre-card--best:hover {
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.28);
}

.offre-badge {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #e0a800;
  color: var(--ink, #0A0A0A);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}

.offre-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.offre-card--best .offre-name {
  color: #fff;
}

/* Baseline / tagline sous le nom de l'offre (visible uniquement sur Nos offres) */
.offre-tagline {
  margin: -8px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted-dark, #5C5648);
  font-style: italic;
}
.offre-card--best .offre-tagline {
  color: rgba(255, 255, 255, 0.78);
}

.offre-price-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8dfc9;
}
.offre-card--best .offre-price-block {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.offre-price {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.offre-price-unit {
  font-size: 14px;
  color: var(--muted-dark, #5C5648);
  font-weight: 500;
}
.offre-card--best .offre-price-unit {
  color: rgba(255, 255, 255, 0.7);
}

.offre-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.offre-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.offre-features li :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 20px;
  color: var(--ok, #167A39);
  flex-shrink: 0;
  margin-top: 1px;
}
.offre-card--best .offre-features li :is([class^="ri-"], [class*=" ri-"]) {
  color: #34d058;
}

.offre-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.offre-feature-sub {
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted-dark, #5C5648);
  font-weight: 400;
}
.offre-card--best .offre-feature-sub {
  color: rgba(255, 255, 255, 0.72);
}

/* ===========================================================================
   Page « Ils utilisent e-Agora » — mur de logos + carte IGN
   =========================================================================== */
/* Le header public est position:fixed (min-height 7.5vh, z-index 200) — on pousse
   la hero en dessous pour ne pas qu'il chevauche le titre. */
.ils-hero {
  max-width: 1200px;
  margin: calc(7.5vh + 24px) auto 24px;
  text-align: center;
}
.ils-hero h1 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.15;
}
.ils-hero-sub {
  font-size: 15px;
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto;
}

.ils-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto 28px;
}
.ils-legend-chip {
  --cat-color: #5c5648;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-left: 3px solid var(--cat-color);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #0A0A0A);
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  font-family: inherit;
}
.ils-legend-chip:hover {
  background: var(--cream, #FAF9F5);
}
.ils-legend-chip:active {
  transform: translateY(1px);
}
.ils-legend-chip.is-active {
  background: var(--cat-color);
  border-color: var(--cat-color);
  color: #fff;
}
.ils-legend-chip.is-active :is([class^="ri-"], [class*=" ri-"]),
.ils-legend-chip.is-active em {
  color: #fff;
}
.ils-legend-chip :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 18px;
  color: var(--cat-color);
}
.ils-legend-chip em {
  font-style: normal;
  font-weight: 700;
  color: var(--cat-color);
  margin-left: 4px;
}

/* Card masquée par le filtre. */
.js-ils-card.is-hidden {
  display: none !important;
}

.ils-split {
  max-width: 1200px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .ils-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ils-wall {
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  padding: 20px;
  max-height: 720px;
  overflow-y: auto;
}
.ils-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.ils-card {
  --cat-color: #5c5648;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-top: 3px solid var(--cat-color);
  text-align: center;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.ils-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.08);
}
.ils-card-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill, 999px);
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ils-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.ils-card-initials {
  font-size: 22px;
  font-weight: 800;
  color: var(--cat-color);
  letter-spacing: 0.02em;
}
.ils-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.ils-card-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  word-break: break-word;
}
.ils-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--cat-color);
  font-weight: 500;
}
.ils-card-cat :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 14px;
}

.ils-map-wrap {
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Crée un stacking context qui borne les z-index internes de Leaflet
       (panes 200-700, controls 1000) → la carte ne peut plus passer
       au-dessus du header fixe public (z-index 200). */
  position: relative;
  z-index: 0;
}

/* Sous-titre au-dessus du mur de logos */
.ils-wall-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #209fb1; /* Bleu logo e-Agora */
}
.ils-map {
  height: 720px;
  width: 100%;
  background: var(--cream, #FAF9F5);
}
.ils-map-credit {
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted-dark, #5C5648);
  background: var(--cream, #FAF9F5);
  border-top: 1px solid var(--line, #E5E2DA);
}
.ils-map-credit a {
  color: var(--ink, #0A0A0A);
  text-decoration: underline;
}

/* === Cluster (regroupement de markers proches) ===
   Style neutre uniforme gris foncé avec le nombre de clients dedans. */
.ils-cluster-wrap {
  background: transparent !important;
  border: none !important;
}
.ils-cluster {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--muted-dark, #5C5648);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.25);
  transition: transform 0.15s;
}
.ils-cluster:hover {
  transform: scale(1.08);
}
/* Surcharge des styles par défaut du plugin pour neutraliser les couleurs vertes/jaunes/rouges */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: transparent !important;
}
.marker-cluster div {
  background: transparent !important;
  color: inherit !important;
}

/* SVG inline custom (ex. Marianne) — taille alignée sur Material Symbols */
.ils-cat-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ils-cat-svg svg {
  width: 1em;
  height: 1em;
}

/* Marker custom — pastille colorée + icône Material */
.ils-marker-wrap {
  background: transparent !important;
  border: none !important;
}
.ils-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill, 999px);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.3);
  color: #fff;
}
.ils-marker :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 18px;
  color: #fff;
}

.offre-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ink, #0A0A0A);
  background: #fff;
  color: var(--ink, #0A0A0A);
  transition:
    background 0.15s ease,
    color 0.15s ease;
  margin-top: 8px;
}
.offre-cta:hover {
  background: var(--ink, #0A0A0A);
  color: #fff;
}

.offre-card--best .offre-cta {
  background: #fff;
  color: var(--ink, #0A0A0A);
  border-color: #fff;
}
.offre-card--best .offre-cta:hover {
  background: #e0a800;
  color: var(--ink, #0A0A0A);
  border-color: #e0a800;
}

/* Newsletter — réseaux sociaux : grille avec curseur main et état coché */
.pe-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}
.pe-network-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
  user-select: none;
}
.pe-network-item:hover {
  background-color: #faf8f2;
  border-color: #c7c0b0;
}
.pe-network-item input[type="checkbox"] {
  display: none;
}
.pe-network-item:has(input[type="checkbox"]:checked) {
  background-color: #f0f9f2;
  border-color: var(--ok, #167A39);
  color: var(--ok, #167A39);
}
.pe-network-item :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
}

/* SDP edit : Personnalisation et Habillage côte à côte */
.maincontent.gap60 > .a-propos,
.maincontent.gap60 > .habillage {
  flex: 1 1 380px;
  min-width: 0;
}
@media (max-width: 900px) {
  .maincontent.gap60 > .a-propos,
  .maincontent.gap60 > .habillage {
    flex: 1 1 100%;
  }
}

/* === Options compte (admin + client) === */
.user-opt-group {
  margin-bottom: 24px;
}
.user-opt-group:last-child {
  margin-bottom: 0;
}
.user-opt-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dark, #5C5648);
  font-weight: 700;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, #E5E2DA);
}
.user-opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

/* === Variante read-only (espace contractuel client) === */
.user-opt-tile-readonly {
  border: 1px solid var(--line, #E5E2DA);
  border-left: 4px solid var(--line, #E5E2DA);
  background: var(--cream, #FAF9F5);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.user-opt-tile-readonly.is-active {
  background: #fff;
  border-left-color: var(--ok, #167A39);
}
.user-opt-tile-readonly.is-inactive {
  opacity: 0.85;
}
.user-opt-tile-readonly summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 14px;
  user-select: none;
}
.user-opt-tile-readonly summary::-webkit-details-marker {
  display: none;
}
.user-opt-tile-readonly summary::marker {
  display: none;
}
.user-opt-tile-readonly:hover summary {
  background: #fff;
}
.user-opt-tile-readonly .user-opt-tile-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  color: var(--muted-dark, #5C5648);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-opt-tile-readonly.is-active .user-opt-tile-icon {
  background: var(--ok, #167A39);
  border-color: var(--ok, #167A39);
  color: #fff;
}
.user-opt-tile-readonly .user-opt-tile-icon :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
}
.user-opt-tile-readonly .user-opt-tile-body {
  flex: 1;
  min-width: 0;
}
.user-opt-tile-readonly .user-opt-tile-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  line-height: 1.2;
}
.user-opt-tile-readonly .user-opt-tile-state {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-opt-tile-readonly .user-opt-tile-state :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
}
.user-opt-tile-readonly .user-opt-tile-chevron {
  color: var(--muted, #716D61);
  font-size: 22px;
  transition: transform 0.2s ease;
}
.user-opt-tile-readonly[open] .user-opt-tile-chevron {
  transform: rotate(180deg);
}
.user-opt-tile-readonly .user-opt-tile-desc-panel {
  padding: 0 16px 14px 64px;
  font-size: 13px;
  color: var(--muted-dark, #5C5648);
  line-height: 1.5;
  border-top: 1px solid #f0eee6;
  padding-top: 10px;
}

/* === Souscription cards (espace contractuel client) === */
.souscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.souscription-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px 14px 16px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-left: 4px solid var(--line, #E5E2DA);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.checkbox-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
/* ⛔ `display:flex` de la regle de base ci-dessus ECRASE le `display:none` que
   le navigateur applique a [hidden]. Sans cette ligne, une carte que le script
   masque reste visible — c est ce qui faisait paraitre le pack de messages
   vocaux sur un compte depourvu du module. Mesure du 26/10/2026. */
.souscription-card[hidden] {
  display: none;
}
.souscription-card:hover {
  background: #fff;
  border-color: var(--muted-dark, #5C5648);
}
.souscription-card:has(input:checked) {
  background: #fff;
  border-left-color: var(--ok, #167A39);
  box-shadow: 0 2px 6px rgba(22, 125, 58, 0.08);
}
.souscription-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  color: var(--muted-dark, #5C5648);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.souscription-card:has(input:checked) .souscription-card-icon {
  background: var(--ok, #167A39);
  border-color: var(--ok, #167A39);
  color: #fff;
}
.souscription-card-icon :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
}
.souscription-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.souscription-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  line-height: 1.3;
}
.souscription-card-desc {
  font-size: 12.5px;
  color: var(--muted-dark, #5C5648);
  line-height: 1.4;
}
/* Selecteur de quantite dans une tuile de souscription. Etait porte par un
   style en ligne ; la charte veut le style dans une feuille. */
.souscription-card-select {
  margin-top: 8px;
  max-width: 180px;
}

/* Tarif de l'option, sous sa description (EP 2026-10-21). Le montant se lit,
   l'unite reste discrete : c'est le chiffre qu'on vient chercher. */
.souscription-card-prix {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  line-height: 1.3;
}
.souscription-card-prix-unite {
  font-weight: 400;
  color: var(--muted, #716D61);
}

.souscription-card-state {
  flex-shrink: 0;
  color: #c7c0b0;
  font-size: 22px;
}
.souscription-card:has(input:checked) .souscription-card-state {
  color: var(--ok, #167A39);
}

/* === Option DEJA SOUSCRITE : la meme tuile, en lecture seule. EP, 26/10/2026 :
   « un client ne peut pas voir, depuis ses parametres, ce qu'il a deja ».
   Ce n'est PAS une case a cocher : il n'y a rien a decider ici. Donc pas de
   curseur main, pas d'etat de survol, pas de case. Le filet gauche et le picto
   prennent le vert d'acquisition — le meme que la selection, parce que c'est
   la meme idee : cette option est a vous. === */
.souscription-card--acquise {
  cursor: default;
  background: #fff;
  border-left-color: var(--ok, #167A39);
}
.souscription-card--acquise:hover {
  background: #fff;
  border-color: var(--line, #E5E2DA);
}
.souscription-card--acquise .souscription-card-icon {
  background: var(--ok, #167A39);
  border-color: var(--ok, #167A39);
  color: #fff;
}
.souscription-card--acquise .souscription-card-state {
  color: var(--ok, #167A39);
}

/* === Case « Ne pas afficher la têtière » (spec EP) : case à cocher qui devient
   rouge (charte suppression #B5170D) quand cochée. Pas un toggle noir/blanc. === */
.pe-hide-tetiere {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted, #716D61);
  cursor: pointer;
  user-select: none;
}
.pe-hide-tetiere input[type="checkbox"] {
  accent-color: var(--err, #B5170D);
  cursor: pointer;
  margin: 0;
}
.pe-hide-tetiere:has(input:checked) {
  color: var(--err, #B5170D);
  font-weight: 600;
}

/* === pe-signature-card : head optionnel (drag + position + remove) === */
.pe-signature-card {
  position: relative;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  padding: 16px;
  margin-bottom: 12px;
}
.pe-signature-card.is-draggable {
  cursor: move;
}
.pe-signature-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #E5E2DA);
}
.pe-signature-drag-handle {
  flex-shrink: 0;
  color: var(--muted, #716D61);
  cursor: grab;
  display: inline-flex;
}
.pe-signature-drag-handle:active {
  cursor: grabbing;
}
.pe-signature-card-pos {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted-dark, #5C5648);
}
.pe-signature-card-remove {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius, 8px);
  color: var(--err, #B5170D);
  cursor: pointer;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
}
.pe-signature-card-remove:hover {
  background: var(--err2, #FBDED6);
  border-color: var(--err-line, #F1C3B6);
}
.pe-signature-trash {
  position: absolute;
  top: 12px;
  right: 12px;
}
/* Tabs sur une ligne */
section.card .tab-top {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tabs profil_edit : compact pour tenir sur une ligne */
section.card div[role="tablist"] {
  flex-wrap: nowrap !important;
}
section.card .tab-top {
  padding: 12px 8px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  gap: 6px !important;
}
section.card .tab-top :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 16px !important;
}

/* Segmented toggle (Afficher/Ne pas afficher) */
/* Toggle segmenté noir/blanc — composant GLOBAL complet (charte v8).
   Le layout (bordure, radius 6px, séparateur, padding) est ici, plus dans l'inline des pages :
   il suffit d'écrire <div class="seg-toggle"><button class="seg-btn is-on">…</button>…</div>.
   Les anciens usages qui portent encore ces styles en inline restent identiques (l'inline
   redéclare les mêmes valeurs, aucun changement visuel). */
.seg-toggle {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: #fff;
}
.seg-toggle .seg-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  background: #fff;
  color: var(--ink, #0A0A0A);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.seg-toggle .seg-btn + .seg-btn {
  border-left: 1px solid var(--line);
}
.seg-toggle .seg-btn.is-on {
  background: var(--ink, #0A0A0A);
  color: #fff;
  font-weight: 700;
}
.seg-toggle .seg-btn small {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
}
.seg-toggle .seg-btn.is-on small {
  opacity: 0.85;
}

/* --- Variante RADIO multi-options (label.seg-option > input radio + span) ---
   Même composant .seg-toggle, mais pour un choix radio à 2, 3 options ou plus.
   Remplace l'ancien composant .segmented-control (fusionné ici : une seule classe toggle). */
.seg-toggle .seg-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.seg-toggle .seg-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.seg-toggle .seg-option > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted, var(--muted, #716D61));
  border-left: 1px solid var(--line);
  transition: background 0.15s, color 0.15s;
  user-select: none;
  white-space: nowrap;
}
.seg-toggle .seg-option:first-child > span {
  border-left: 0;
}
.seg-toggle .seg-option > span :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 18px;
  line-height: 1;
}
.seg-toggle .seg-option > span .seg-sep {
  color: var(--muted, var(--muted, #716D61));
  font-weight: 400;
  opacity: 0.6;
}
.seg-toggle .seg-option:hover > span {
  background: var(--cream2, var(--cream, #FAF9F5));
  color: var(--ink, #0A0A0A);
}
.seg-toggle .seg-option input:checked + span {
  background: var(--ink, #0A0A0A);
  color: #fff;
  font-weight: 700;
}
.seg-toggle .seg-option input:focus-visible + span {
  box-shadow: inset 0 0 0 2px var(--ink, #0A0A0A);
}
/* Options à largeur égale */
.seg-toggle--equal {
  display: flex;
  width: 100%;
}
.seg-toggle--equal .seg-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.seg-toggle--equal .seg-option > span {
  justify-content: center;
  width: 100%;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  box-sizing: border-box;
}
/* Options empilées verticalement (libellés longs) */
.seg-toggle--vertical {
  flex-direction: column;
  align-items: stretch;
  display: flex;
  width: 100%;
}
.seg-toggle--vertical .seg-option > span {
  border-left: 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.seg-toggle--vertical .seg-option:first-child > span {
  border-top: 0;
}

/* Boutons sidebar salle de presse / publication — uniformisation taille + graisse
   (charte : la police reste contextuelle au profil, on n'impose que font-size + font-weight). */
.sdp-sidebar-btn,
.sdp-sidebar-btn-label {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ============================================================
   CHARTE GRAPHIQUE — coins légèrement arrondis sur tous les champs
   Référence : memoire feedback_field_rounded_corners.md.
   ============================================================ */
.field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  border-radius: var(--radius, 8px);
}

/* ============================================================
   CHARTE GRAPHIQUE — Bouton « Ajouter à un agenda »
   Pattern unique pour tous les évènements du site : bouton 40×40 +
   menu déroulant au hover (Agenda Google / Autres agendas .ics).
   Origine : almanach.css — promu site-wide le 2026-05-18.
   ============================================================ */
.dossier-calendar {
  position: relative;
  display: inline-flex;
}
.dossier-calendar-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream, var(--cream, #FAF9F5));
  border: 1px solid var(--line, var(--line, #E5E2DA));
  border-radius: var(--radius, 8px);
  color: var(--ink, var(--ink, #0A0A0A));
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.dossier-calendar-btn:hover {
  background: var(--ink, var(--ink, #0A0A0A));
  color: #fff;
  border-color: var(--ink, var(--ink, #0A0A0A));
}
.dossier-calendar-btn :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
}
.dossier-calendar-btn--disabled {
  background: var(--err2, #FBDED6);
  color: var(--err, #B5170D);
  border-color: var(--err-line, #F1C3B6);
  cursor: not-allowed;
}
.dossier-calendar-btn--disabled:hover {
  background: var(--err2, #FBDED6);
  color: var(--err, #B5170D);
  border-color: var(--err-line, #F1C3B6);
}
.calendar-actions {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line, var(--line, #E5E2DA));
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 50;
  min-width: 180px;
}
.dossier-calendar:hover .calendar-actions,
.dossier-calendar:focus-within .calendar-actions {
  display: flex;
}
.calendar-actions .btn-agenda {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, var(--ink, #0A0A0A));
  text-decoration: none;
  border-radius: var(--radius, 8px);
  transition: background 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calendar-actions .btn-agenda:hover {
  background: var(--cream2, var(--cream2, #F2F0E8));
}
/* fix hover bridge : évite la fermeture quand on traverse l'espace bouton ↔ menu */
.calendar-actions::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Modificateur .dossier-calendar--up : ouvre le menu vers le HAUT
   (utile quand le bouton est en bas d'une card, pas de place dessous). */
.dossier-calendar--up .calendar-actions {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}
.dossier-calendar--up .calendar-actions::before {
  top: auto;
  bottom: -8px;
}

/* Aplat gris de l'encadré "Voir l'ODJ" — aligné sur .article-publi (margin: 0 20px) */
.complementaire-download {
  width: auto !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
  box-sizing: border-box !important;
}

/* Bouton télécharger publication — min 250px, peut grandir si le texte dépasse */
.complementaire-download .bouton-download,
.complementaire-download .bouton-download.sdp-sidebar-btn {
  min-width: 250px !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  /* Sur une PUBLICATION, ce bouton emprunte le composant .sdp-sidebar-btn dont le fond est
     var(--sdp-color, var(--err, #B5170D)) (rouge marque salle de presse). Ici on veut la couleur du PROFIL
     émetteur : fond forcé sur --publi-button-color (défaut charte #0A0A0A). Spécificité 2 classes
     > .sdp-sidebar-btn (1) → pas de !important. Le composant SDP partagé n'est pas touché. */
  background: var(--publi-button-color, var(--ink, #0A0A0A));
}

/* =============================================================
   Annuaire v2 (selection_journaliste + selection_media)
   Layout 2-col : catégories (gauche) + détails (droite)
   ============================================================= */

.dest-layout-v2 {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  background: #fff;
  overflow: hidden;
  min-height: 480px;
}
.dest-layout-v2--flat {
  grid-template-columns: 1fr;
}

/* Colonne gauche : catégories */
.dest-categories-v2 {
  background: var(--cream, #FAF9F5);
  border-right: 1px solid var(--line, #E5E2DA);
  padding: 12px;
  overflow-y: auto;
  max-height: 640px;
}
.dest-layout-v2--flat .dest-categories-v2 {
  display: none;
}

/* Barre de recherche en haut de la colonne gauche */
.dest-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  padding: 0 10px;
  margin-bottom: 10px;
  height: 36px;
}
.dest-search > i {
  font-size: 16px;
  color: var(--muted, #716D61);
  flex: 0 0 auto;
  margin-right: 8px;
}
.dest-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink, #0A0A0A);
}
.dest-search input::placeholder {
  color: var(--ghost, #A29B8B);
}

/* Item catégorie (gauche) — clickable card */
.dest-cat-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dest-cat-v2:hover {
  background: var(--cream2, #F2F0E8);
  border-color: var(--ink, #0A0A0A);
}
.dest-cat-v2.is-selected {
  background: #fff;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 1px var(--ink, #0A0A0A) inset;
}
.dest-cat-v2.has-children-selected {
  border-color: var(--ok, #167A39);
}
.dest-cat-v2-icon {
  font-size: 18px;
  color: var(--ink, #0A0A0A);
  flex: 0 0 auto;
}

.dest-cat-v2-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dest-cat-v2-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--ok, #167A39);
  background: #d6f2de;
  padding: 2px 6px;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}
.dest-cat-v2-chevron {
  font-size: 16px;
  color: var(--muted, #716D61);
  flex: 0 0 auto;
}

/* Colonne droite : détails */
.dest-details-v2 {
  padding: 18px 20px;
  overflow-y: auto;
  max-height: 640px;
}
.dest-details-v2--full {
  padding: 18px 20px;
}

.dest-details-v2-pane {
  display: none;
}
.dest-details-v2-pane.is-active {
  display: block;
}

.dest-details-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #E5E2DA);
}
.dest-details-v2-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
}
.dest-details-v2-title i {
  font-size: 20px;
  color: var(--ink, #0A0A0A);
}
.dest-details-v2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dest-action-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  color: var(--ink, #0A0A0A);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.dest-action-link:hover {
  color: var(--ink, #0A0A0A);
}

/* Bandeau info en haut des onglets flat */
.dest-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  font-size: 12px;
  color: var(--ink, #0A0A0A);
  line-height: 1.5;
}
.dest-info-banner > i {
  font-size: 16px;
  color: var(--muted, #716D61);
  flex: 0 0 auto;
}
.dest-info-banner strong {
  color: var(--ink, #0A0A0A);
  font-weight: 700;
}

/* Master block "Toute la catégorie..." */
.dest-master {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dest-master:hover {
  background: var(--cream2, #F2F0E8);
  border-color: var(--ink, #0A0A0A);
}

.dest-master-icon {
  font-size: 22px;
  color: var(--ok, #167A39);
  flex: 0 0 auto;
}
.dest-master-content {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 2px;
  flex: 1 1 auto;
}
.dest-master-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
}
.dest-master-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted, #716D61);
}

/* Grille des items (sous-catégories) */
.dest-items-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.dest-subgroup-v2 {
  display: contents;
}

/* Item (checkbox + label) */
.dest-item-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius-control, 3px);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dest-item-v2:hover {
  background: var(--cream2, #F2F0E8);
  border-color: var(--ink, #0A0A0A);
}
.dest-item-v2:has(input:checked) {
  background: #f0f9f2;
  border-color: var(--ok, #167A39);
}

.dest-item-v2--sub {
  margin-left: 24px;
}
.dest-item-v2-icon {
  font-size: 16px;
  color: var(--muted, #716D61);
  flex: 0 0 auto;
}
.dest-item-v2:has(input:checked) .dest-item-v2-icon {
  color: var(--ok, #167A39);
}
.dest-item-v2-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #0A0A0A);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer récap "X critères sélectionnés" */
.dest-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
}
.dest-summary-icon {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--ok, #167A39);
}
.dest-summary-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--ink, #0A0A0A);
}
.dest-summary-strong {
  font-weight: 700;
  color: var(--ink, #0A0A0A);
}
.dest-summary-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--err, #B5170D);
  border-radius: var(--radius, 8px);
  color: var(--err, #B5170D);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.dest-summary-reset:hover {
  background: var(--err, #B5170D);
  color: #fff;
}
.dest-summary-reset i {
  font-size: 14px;
}

/* ⛔ « RÉINITIALISER » ET « LANCER LA RECHERCHE » VONT ENSEMBLE, À LA MÊME HAUTEUR
   (EP, 23/09/2026). Dans les deux panneaux — journalistes et médias — la
   réinitialisation était posée à l'autre bout de la barre, contre le compteur, et
   deux fois plus basse que le bouton principal : 12 ou 13 px de police contre 14,
   6 px de rembourrage contre 9. Les mêmes valeurs que `.boutonprin` (main.css)
   donnent la même hauteur, sans rien recopier en ligne dans le PHP. */
.dest-topbar-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.dest-summary .dest-summary-reset,
.dest-topbar-actions .dest-summary-reset {
  padding: 9px 14px;
  font-size: 14px;
}


/* =============================================================
   ITEM CARDS UNIFIÉES (publication imbriquée : agenda, newsletter,
   info_travaux, consultation). Doctrine homogénéité EP 2026-06-11.
   ============================================================= */

/* ----- PE1 admin : drag handle + vignette + body + actions ----- */
.item-card {
  display: grid;
  grid-template-columns: 32px 180px 1fr auto;
  align-items: stretch;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  margin-bottom: 10px;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.item-card.is-current { box-shadow: inset 3px 0 0 0 var(--ok, #167A39); }

.item-card-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream, #FAF9F5);
  color: #9C9789;
  cursor: grab;
  border-right: 1px solid var(--line, #E5E2DA);
}
.item-card-drag:active { cursor: grabbing; }
.item-card-drag :is([class^="ri-"], [class*=" ri-"]) { font-size: 22px; }

.item-card-vignette {
  background: #D7D2C8;
  color: var(--ink, #0A0A0A);
  padding: 18px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.item-card-vignette--newsletter { background: var(--cream2, #F2F0E8); padding: 8px; }
.item-card-vignette--newsletter img { max-width: 100%; max-height: 100px; object-fit: cover; border-radius: var(--radius, 8px); }
.item-card-vignette--newsletter.is-empty { color: #9C9789; font-size: 12px; font-weight: 500; gap: 6px; }
.item-card-vignette--newsletter.is-empty :is([class^="ri-"], [class*=" ri-"]) { font-size: 28px; color: #C7C2B7; }
.item-card-vignette--consult { background: #E8E4D8; color: var(--muted-dark, #5C5648); font-size: 13px; }
.item-card-vignette--consult strong { font-size: 22px; color: var(--ink, #0A0A0A); }

.item-card-body { padding: 16px 18px; min-width: 0; }
.item-card-body h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.item-card-body .item-card-summary { margin: 0 0 8px; color: #444; font-size: 13px; }
.item-card-body .item-card-meta { margin: 0; color: var(--ink, #0A0A0A); font-size: 13px; line-height: 1.4; }
.item-card-body .item-card-meta :is([class^="ri-"], [class*=" ri-"]) { font-size: 14px; vertical-align: middle; color: var(--muted-dark, #5C5648); }
.item-card-body .item-card-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 4px 8px; background: var(--cream2, #F2F0E8);
  border-radius: var(--radius, 8px); color: var(--muted-dark, #5C5648); margin-top: 6px;
}
.item-card-body .item-card-badge--obligatoire { background: #E6F4EA; color: #1E6F3B; }

.item-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-left: 1px solid var(--line, #E5E2DA);
}
.item-card-actions .btn-icon,
.item-card-actions a.btn-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  cursor: pointer;
  border-radius: var(--radius, 8px);
  color: var(--ink, #0A0A0A);
  padding: 0;
  text-decoration: none;
}
.item-card-actions .btn-icon:hover { background: var(--cream2, #F2F0E8); }
.item-card-actions .btn-icon.is-delete { color: var(--err, #B5170D); border-color: #E5BFBA; }
.item-card-actions .btn-icon.is-delete:hover { color: #fff; background: var(--err, #B5170D); border-color: var(--err, #B5170D); }

/* ----- PE4 public : vignette + body + CTA ----- */
.pub-item {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: stretch;
  border: 1px solid var(--line, #E5E2DA);
  background: #fff;
  margin-bottom: 12px;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.pub-item--no-cta { grid-template-columns: 180px 1fr; }

.pub-item-vignette {
  background: #D7D2C8;
  color: var(--ink, #0A0A0A);
  padding: 22px 14px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.pub-item-vignette--newsletter { background: var(--cream2, #F2F0E8); padding: 10px; }
.pub-item-vignette--newsletter img { max-width: 100%; max-height: 130px; object-fit: cover; border-radius: var(--radius, 8px); }
.pub-item-vignette--newsletter.is-empty { color: #9C9789; font-size: 12px; gap: 6px; }
.pub-item-vignette--newsletter.is-empty :is([class^="ri-"], [class*=" ri-"]) { font-size: 32px; color: #C7C2B7; }
.pub-item-vignette--consult { background: #E8E4D8; color: var(--muted-dark, #5C5648); font-size: 13px; }
.pub-item-vignette--consult strong { font-size: 28px; color: var(--ink, #0A0A0A); }

.pub-item-body { padding: 18px 22px; min-width: 0; }
.pub-item-body h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.pub-item-body .pub-item-summary { margin: 0 0 10px; color: #444; font-size: 14px; line-height: 1.5; }
.pub-item-body .pub-item-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 8px 0 0; color: var(--muted-dark, #5C5648); font-size: 13px;
}
.pub-item-body .pub-item-meta :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; vertical-align: middle; color: #9C9789; }
.pub-item-body .pub-item-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 4px 10px; background: var(--cream2, #F2F0E8);
  border-radius: var(--radius, 8px); color: var(--muted-dark, #5C5648); font-weight: 500;
}

.pub-item-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-left: 1px solid var(--line, #E5E2DA);
  background: var(--cream, #FAF9F5);
}

/* =============================================================
   PUB ITEM — classes de rendu détail (PE3 + PE4) issues du
   partial `_item_card_public.php`. Migration des inline styles
   2026-06-11 EP « pas de dette technique ».
   ============================================================= */
.pub-item-vignette-time { font-size: 13px; font-weight: 500; }
.pub-item-body-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pub-item-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink, #0A0A0A); }
.pub-item-badges-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pub-item-badge--bold { font-weight: 700; }
.pub-item-badge--it { color: #fff; font-weight: 600; } /* background appliqué inline car dépend du type intervention */
.pub-item-badge :is([class^="ri-"], [class*=" ri-"]) { font-size: 14px; }
.pub-item-redac { margin: 6px 0; color: #444; font-size: 14px; line-height: 1.5; }
.pub-item-suite { margin: 6px 0 0; }
.pub-item-suite summary {
  cursor: pointer;
  color: var(--publi-title-color, var(--ink, #0A0A0A));
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pub-item-suite summary :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; }
.pub-item-suite-content {
  margin-top: 10px;
  font-family: inherit;
  font-size: inherit;
  color: var(--publi-base-color, #000);
  line-height: 1.6;
}
.pub-item-meta--mt8 { margin-top: 8px; }
.pub-item-map-wrapper {
  margin: 12px 0 0;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.pub-item-contact-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-dark, #5C5648);
}
.pub-item-contact-line { display: block; }
.pub-item-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}
/* Rangée submit/annuler d'un formulaire de publication (ex. « Ajouter un item » consultation).
   Distincte de .pub-item-actions-row (actions d'un item AFFICHÉ). Base desktop ici ; empilement
   CTA pleine largeur en VM dans la bibliothèque v8_mobile.css. */
.pub-form-actions {
  display: flex;
  gap: 8px;
}
.pub-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: #fff;
  color: var(--publi-button-color, var(--ink, #0A0A0A));
  border: 1px solid var(--publi-button-color, var(--line, #E5E2DA));
  border-radius: var(--radius, 8px);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.pub-item-btn :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; }
.pub-item-btn--primary {
  background: var(--publi-button-color, var(--ok, #167A39));
  color: #fff;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}
.pub-item-inscription-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--muted, #716D61);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
.pub-item-inscription-locked :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; }

/* PE3 admin preview (readOnly) : pas de drag handle ni d'actions → 2 colonnes seulement.
   Cause racine sinon : la grille 4-cols garde une 1ère colonne vide (32px) et la dernière
   (auto) → vignette comprimée à <50px car le contenu fluide prend le reste. 2026-06-11. */
.item-card.is-readonly {
  grid-template-columns: 180px 1fr;
}

/* =================================================================
   ALIAS classes maquette (.summary, .meta, .badge dans .pub-item-body)
   Le partial `_item_card_public.php` 2026-06-11 v2 utilise les noms
   exacts de la maquette validée (items_pe4_unified.html). On référence
   ces classes scoppées au body sans casser les sélecteurs existants.
   ================================================================= */
.pub-item-body .summary { margin: 0 0 10px; color: #444; font-size: 14px; line-height: 1.5; }
.pub-item-body .meta {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin: 8px 0 0; color: var(--muted-dark, #5C5648); font-size: 13px;
}
.pub-item-body .meta :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; vertical-align: middle; color: #9C9789; }
.pub-item-body .meta a { color: var(--publi-color, var(--ink, #0A0A0A)); text-decoration: none; }
.pub-item-body .meta a:hover { text-decoration: underline; }
.pub-item-body .badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; padding: 4px 10px; background: var(--cream2, #F2F0E8);
    border-radius: var(--radius, 8px); color: var(--muted-dark, #5C5648); font-weight: 500;
}

/* Rédactionnel + Lire la suite — demande EP 2026-06-11 */
.pub-item-redac {
    margin: 8px 0;
    color: #2B2B2B;
    font-size: 14px;
    line-height: 1.6;
}
.pub-item-redac p { margin: 0 0 8px; }
.pub-item-redac p:last-child { margin-bottom: 0; }
.pub-item-suite { margin: 6px 0 0; }
.pub-item-suite summary {
    cursor: pointer;
    color: var(--publi-button-color, var(--ink, #0A0A0A));
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pub-item-suite summary :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; }
.pub-item-suite summary::-webkit-details-marker { display: none; }
.pub-item-suite-content {
    margin-top: 10px;
    color: #2B2B2B;
    line-height: 1.6;
    font-size: 14px;
}

/* CTA buttons — conformes maquette PE4 */
.pub-item-cta .btn-primary {
    background: var(--publi-color, var(--publi-button-color, var(--ok, #167A39)));
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius, 8px);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pub-item-cta .btn-primary:hover { filter: brightness(.92); }
.pub-item-cta .btn-outline {
    background: #fff;
    color: var(--publi-color, var(--publi-button-color, var(--ok, #167A39)));
    border: 1px solid var(--publi-color, var(--publi-button-color, var(--ok, #167A39)));
    padding: 9px 17px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius, 8px);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Badge en tant que LIEN (<a class="badge">) : conserver couleur texte maquette + hover.
   Sinon le style générique a:link applique color: blue. 2026-06-11. */
.pub-item-body a.badge,
.item-card-body a.badge {
    text-decoration: none;
    color: var(--muted-dark, #5C5648);
}
.pub-item-body a.badge:hover,
.item-card-body a.badge:hover {
    background: var(--line, #E5E2DA);
    color: var(--ink, #0A0A0A);
}

/* Zone chips sous la ligne meta — sépare clairement adresse / badges informatifs.
   Demande EP 2026-06-11 : « chips sous adresse, pas après ». */
.pub-item-body .chips {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 8px;
}
.item-card-body .chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 6px;
}

/* Accueil — tableau « Dernières campagnes » : titre tronqué (…) pour garder la chip
   de statut (« Envoyée le … ») sur UNE seule ligne. Scopé, sans impact sur les autres .tbl. */
.home-campaigns-tbl td:first-child a {
    display: inline-block;
    /* 11rem (EP 17/07) : plafond calé pour que le tableau tienne des 1280px de
       viewport. Chaque rem gagnee ici abaisse la largeur mini du tableau. */
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.home-campaigns-tbl td:last-child .chip {
    white-space: nowrap;
}

/* Accueil — « Dernières campagnes » responsive sur la LARGEUR DU CONTENEUR (et non du
   viewport), via container queries. Au-dessus de 630px de conteneur : table classique
   (630 = largeur mini MESUREE du tableau, 622px, + marge ; couvre des 1280px de viewport).
   En-dessous : chaque <tr> devient une carte autonome, transformation purement CSS via
   data-label sur chaque <td>. Une seule boucle PHP, zéro duplication. */
.home-campaigns-section {
    container-type: inline-size;
    container-name: campaigns;
}
@container campaigns (max-width: 630px) {
    .home-campaigns-tbl,
    .home-campaigns-tbl thead,
    .home-campaigns-tbl tbody,
    .home-campaigns-tbl tr,
    .home-campaigns-tbl td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .home-campaigns-tbl thead {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    .home-campaigns-tbl tr {
        border: 1px solid var(--line);
        border-radius: var(--radius, 8px);
        padding: 12px 14px;
        margin-bottom: 10px;
        background: var(--card-bg, #fff);
    }
    .home-campaigns-tbl td {
        border: 0;
        padding: 4px 0;
        text-align: left !important;
    }
    .home-campaigns-tbl td::before {
        content: attr(data-label) " : ";
        display: inline-block;
        min-width: 110px;
        font-weight: 600;
        color: var(--muted, #716D61);
    }
    .home-campaigns-tbl td:first-child { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
    .home-campaigns-tbl td:first-child::before { display: none; }
    .home-campaigns-tbl td:first-child a { max-width: none; white-space: normal; }
}

/* === ACCUEIL PUBLIQUE — connexion mobile accessible (landing index.php) ===
   Scopé body.accueil-publique → ouvert.php + app client non touchés.
   DESKTOP STRICTEMENT INCHANGÉ : tout est sous @media max-width:768px.
   Mobile : page plein écran dédiée à la connexion — header en colonne centrée
   verticalement (logo + carte Connexion), footer et visuel mégaphone masqués,
   marges noires/blanches symétriques (width:100% + box-sizing). 2026-06-20. */
@media (max-width: 768px) {
  .accueil-publique #header {
    box-sizing: border-box;
    position: static;
    width: 100%;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 24px 20px;
    gap: 24px;
  }
  .accueil-publique .arrowsandlogo { justify-content: center; }
  .accueil-publique .logo { height: auto; width: 160px; margin: 0; }
  .accueil-publique #accountname { display: none !important; }

  .accueil-publique #login {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 18px;
  }
  .accueil-publique #login::before {
    content: "Connexion";
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
  }
  .accueil-publique #login input[name="identifiant"] {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line2);
    border-radius: var(--radius, 8px);
  }
  .accueil-publique #login .mdpdiv {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    border-radius: var(--radius, 8px);
  }
  .accueil-publique #login .mdp { flex: 1; width: auto; min-width: 0; }
  .accueil-publique #login .boutonprin {
    box-sizing: border-box;
    width: 100%;
    /* text-align pour <input type="submit">, justify-content pour <button>. */
    text-align: center;
    justify-content: center;
    height: 44px;
    font-size: 15px;
    border-radius: var(--radius, 8px);
  }
  /* Meme gabarit que « Se connecter » juste au-dessus. Le padding 4px 0
     d'origine servait l'ancien look « texte gris italique ». */
  .accueil-publique #login .forgotmdp {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    font-size: 15px;
  }

  .accueil-publique footer,
  .accueil-publique .mainpageimg { display: none !important; }
}

/* === APP CLIENT — pied de page masqué sur mobile ET tablette (EP 2026-06-20 / VT 2026-06-25) ===
   `.app ~ footer` = le <footer> de client.php, frère de <div class="app">.
   Exclut les footers d'aperçu de publication (descendants de .app/main) et le
   footer public (pages sans .app). En tablette (≤1024px) on masque aussi : la nav
   passe par la barre basse, comme en mobile. Desktop inchangé. */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .app ~ footer { display: none !important; }
}
/* Mode preview du header (largeur simulée, sans @media) : masquer aussi le pied de page. */
html.preview-tablet .app ~ footer,
html.preview-mobile .app ~ footer { display: none !important; }

/* === CAMPAGNES — vue mobile en cartes (≤768px) ===========================
   Le tableau desktop (#campagnesDeleteForm) est masqué ; .campagnes-mobile
   (hors du form, après lui) prend le relais avec une carte par campagne.
   Données identiques (cardsHtml rempli dans la même boucle). EP 2026-06-20. */
.campagnes-mobile { display: none; }
@media (max-width: 768px) {
  #campagnesDeleteForm { display: none; }
  .campagnes-mobile { display: block; }
  /* En-tête Campagnes : « Filtrer » + « Exporter » empilés, pleine largeur (1 bouton/ligne). EP 2026-06-25. */
  .campagnes-toolbar { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  .campagnes-toolbar > .btn { width: 100% !important; justify-content: center !important; }
}
.cm-list-head { font-size: 16px; font-weight: 600; color: var(--ink, #0A0A0A); margin: 0 0 10px; }
.cm-empty { padding: 24px 0; text-align: center; color: var(--muted, #716D61); font-size: 14px; }
.cm-card { background: #fff; border: 0.5px solid var(--line, #E5E2DA); border-radius: var(--radius, 8px); padding: 12px; margin-bottom: 12px; }
.cm-card-status { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.cm-card-title { display: block; font-size: 16px; font-weight: 600; color: var(--ink, #0A0A0A); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: break-word; margin-bottom: 3px; }

/* CADENAS DE DOMAINE DANS « Mes campagnes » — EP, 12/10/2026 : « rajoute un cadenas après le
   titre pour ne pas tenter l'ouverture ». Le titre d'une publication que le contributeur n'a pas
   le droit d'ouvrir cesse d'être un lien et porte `ri-lock-line`.
   ⭐ Mêmes valeurs que les deux motifs déjà en place, `.menu-link--locked` (l. 580) et
      `.type-tile--locked` (l. 878) : opacité 0.55, curseur interdit, aucune nouvelle couleur.
   ⛔ Modificateur posé APRÈS la règle de base, comme l'exige la charte. */
.cm-locked {
  opacity: 0.55;
  text-decoration: none;
  cursor: not-allowed;
}
.cm-lock {
  font-size: 14px;
  opacity: 0.9;
  vertical-align: baseline;
}

.cm-card-meta { font-size: 12.5px; color: var(--muted, #716D61); line-height: 1.5; margin: 0 0 12px; }
.cm-card-rcp { color: var(--ok, #167A39); text-decoration: underline; }
.cm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cm-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 2px; background: #FAF8F2; border-radius: var(--radius, 8px); }
.cm-stat [class^="ri-"], .cm-stat [class*=" ri-"] { font-size: 20px; color: var(--muted, #716D61); }
.cm-stat-val { font-size: 16px; font-weight: 600; color: var(--ink, #0A0A0A); }
.cm-stat-val.cm-pos { color: var(--ok, #167A39); }
.cm-stat-val.cm-neg { color: var(--err, #B5170D); }
.cm-stat-val.cm-note { color: #BA7517; }
.cm-stat-lbl { font-size: 11px; color: var(--muted, #716D61); text-align: center; line-height: 1.15; }
.cm-stat-perf { background: #E3F1E8; }
.cm-stat-perf :is([class^="ri-"], [class*=" ri-"]),
.cm-stat-perf .cm-stat-val,
.cm-stat-perf .cm-stat-lbl { color: var(--ok, #167A39); }
.cm-card-draft { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted, #716D61); background: #FAF8F2; border-radius: var(--radius, 8px); padding: 9px 10px; }
.cm-card-draft :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; }
.cm-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--line, #E5E2DA); }
.cm-act { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink, #0A0A0A); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.cm-act :is([class^="ri-"], [class*=" ri-"]) { font-size: 16px; }
.cm-act-danger { color: var(--err, #B5170D); }
.cm-act-del-form { margin: 0; }

/* === CONTRIBUTEUR_EDIT — grilles responsives (≤768px : empilées) EP 2026-06-20 === */
.contrib-id-grid { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 14px; }
.contrib-droits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 768px) {
  .contrib-id-grid { grid-template-columns: 1fr; }
  .contrib-droits-grid { grid-template-columns: 1fr; }
}

/* Miroirs aperçu in-app (html.preview-*) : l'aperçu de l'éditeur ne déclenche PAS les @media,
   on y reflète donc les collapses VM/VT des grilles de champs de formulaire (doctrine jumeau).
   .halfcolumns ≤900 (VT+VM) ; .media-fields-grid ≤720 et .contrib-* ≤768 (VM). */
html.preview-tablet .halfcolumns,
html.preview-mobile .halfcolumns { grid-template-columns: 1fr; }
html.preview-mobile .media-fields-grid,
html.preview-mobile .contrib-id-grid,
html.preview-mobile .contrib-droits-grid { grid-template-columns: 1fr; }

/* Actions d'en-tête de page (titre + boutons, ex. Almanach / Calendrier rédactionnel) : en VT ET VM
   les actions s'empilent en pleine largeur utile (un bouton par ligne). + miroirs aperçu in-app. */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .page-head-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .page-head-actions > .btn { width: 100%; justify-content: center; }
}
html.preview-tablet .page-head-actions,
html.preview-mobile .page-head-actions { flex-direction: column; align-items: stretch; width: 100%; }
html.preview-tablet .page-head-actions > .btn,
html.preview-mobile .page-head-actions > .btn { width: 100%; justify-content: center; }

/* === CONTRIBUTEURS (parametres_compte) — vue mobile en cartes (≤768px) === EP 2026-06-20 */
@media (max-width: 768px) { .contrib-table { display: none; } }
.contrib-mobile { display: none; }
@media (max-width: 768px) { .contrib-mobile { display: block; } }
.contrib-card { border: 0.5px solid var(--line, #E5E2DA); border-radius: var(--radius, 8px); padding: 12px; margin-bottom: 10px; background: #fff; }
.contrib-card.is-inactive { opacity: .6; }
.contrib-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.contrib-card-name { font-size: 15px; font-weight: 600; color: var(--ink, #0A0A0A); }
.contrib-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px; border-radius: var(--radius, 8px); }
.contrib-badge :is([class^="ri-"], [class*=" ri-"]) { font-size: 13px; }
.contrib-badge--on { background: #E3F1E8; color: var(--ok, #167A39); }
.contrib-badge--off { background: #F1EFE8; color: var(--muted, #716D61); }
.contrib-card-mail { font-size: 13px; color: var(--muted, #716D61); margin-bottom: 12px; overflow-wrap: break-word; }
.contrib-card-droits-lbl { font-size: 12px; color: var(--muted, #716D61); margin-bottom: 7px; }
.contrib-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.contrib-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 9px; border-radius: var(--radius, 8px); background: #E3F1E8; color: var(--ok, #167A39); }
.contrib-chip :is([class^="ri-"], [class*=" ri-"]) { font-size: 13px; }
.contrib-chip--checkin { background: #FBF0D6; color: #9A5B00; }
.contrib-chip-none { font-size: 12px; color: var(--ghost, #A29B8B); }
.contrib-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 0.5px solid var(--line, #E5E2DA); }
.contrib-act { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink, #0A0A0A); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.contrib-act :is([class^="ri-"], [class*=" ri-"]) { font-size: 15px; }
.contrib-act-danger { color: var(--err, #B5170D); }
.contrib-act-del-form { margin: 0; }

/* CTA « Demander un devis » : texte gauche / bouton droite en desktop ; bouton pleine largeur + texte dessous en mobile (EP 2026-06-20) */
.param-devis-cta { display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 6px; }
.param-devis-note { font-size: 12px; }
.param-devis-btn { white-space: nowrap; }
@media (max-width: 768px) {
  .param-devis-cta { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .param-devis-btn { width: 100%; justify-content: center; }
  .param-devis-note { text-align: center; }
}

/* CONTRIBUTEURS — en-tête empilé + bouton Ajouter pleine largeur sur mobile (EP 2026-06-20) */
@media (max-width: 768px) {
  #card-contributeurs .card-head { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  #card-contributeurs .card-head > a.btn { display: flex; width: 100%; justify-content: center; }
}

/* === FICHE CONTACT — grilles responsives (≤768px) EP 2026-06-20 ===
   KPI 4→2 colonnes ; cartes Coordonnées/Notes/Historique (390px fixe) → 1 colonne pleine largeur. */
.fc-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.fc-coord-cards { display: grid; grid-template-columns: repeat(auto-fill, 390px); gap: 16px; margin-bottom: 16px; align-items: start; }
.fc-coord-notes { display: grid; grid-template-columns: 390px 1fr; gap: 16px; align-items: start; }
.fc-coord-solo  { display: grid; grid-template-columns: 390px 1fr; gap: 20px; align-items: start; }
.fc-coord-card  { min-height: 456px; } /* hauteur égale des cartes coordonnées en grille desktop (ex-inline) */
@media (max-width: 768px) {
  /* KPIs : les 4 sur une seule ligne, compactés pour tenir (valeur 32px -> 16px, etc.). */
  .fc-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
  .fc-kpi-grid > .kpi { padding: 8px 7px; min-width: 0; display: flex; flex-direction: column; }
  .fc-kpi-grid .kpi-value { order: -1; font-size: 16px; margin-top: 0; line-height: 1.05; } /* valeur en gras en HAUT du bloc */
  .fc-kpi-grid .kpi-label { font-size: 8.5px; letter-spacing: .02em; margin-top: 4px; }
  .fc-kpi-grid .kpi-delta { font-size: 8.5px; margin-top: 2px; line-height: 1.25; }
  /* Coordonnées / notes : 1 colonne, hauteur = contenu (on annule le min-height desktop). */
  .fc-coord-cards, .fc-coord-notes, .fc-coord-solo { grid-template-columns: 1fr; }
  .fc-coord-card { min-height: 0; }
  /* Boutons d'action : pleine largeur, empilés. */
  .fc-actions { flex-direction: column; align-items: stretch; }
  .fc-actions > .btn, .fc-actions > form, .fc-actions > form > .btn { width: 100%; }
  .fc-actions > .btn, .fc-actions > form > .btn { justify-content: center; }
  /* Historique (tableau .tbl réflowé en blocs) : chips Type / Ouvert / Cliqué sur une même ligne. */
  #fcHistoryTable tbody td:nth-child(n+3) { display: inline-block; padding: 2px 6px 2px 0; }
  /* Notes privées : bouton "Ajouter une note" en bas du bloc + pleine largeur. */
  #contactNoteCard { display: flex; flex-direction: column; }
  #contactNoteEmpty:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; }
  #contactNoteEmpty #contactNoteAddBtn { margin-top: auto; width: 100%; justify-content: center; }
}

/* === Barre de navigation basse — mobile ET tablette (≤1024px ; VT 2026-06-25). Masquée en
   desktop ; non rendue sur l'accueil (condition PHP dans client.php). JS : mobile_navbar.js. === */
/* Style de la barre TOUJOURS présent (masquée par défaut via display:none) ; seul l'AFFICHAGE
   (display:flex) + la réserve d'espace bas sont pilotés par la plage compacte / le preview plus bas.
   Ainsi la barre se rend correctement aussi en mode preview (qui n'a pas de @media). */
.mobile-navbar {
  display: none;
  flex-direction: row; /* annule le `nav{flex-direction:column}` global de main.css (sinon boutons empilés) */
  align-items: center;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: #fff; border-top: 1px solid var(--line, #E5E2DA);
  box-shadow: 0 -2px 10px rgba(10, 10, 10, .05);
  padding: 7px 4px;
  padding-bottom: calc(7px + env(safe-area-inset-bottom));
}
.mobile-navbar__btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  color: var(--ink, #0A0A0A); text-decoration: none; font-family: inherit;
}
.mobile-navbar__btn i { font-size: 23px; line-height: 1; }
.mobile-navbar__btn span { font-size: 10.5px; color: var(--muted, #716D61); }
.mobile-navbar__btn:active i,
.mobile-navbar__btn:active span { color: var(--ok, #167A39); }
/* Déconnexion (à droite d'Accueil) — rouge charte. Le <form> disparaît du layout
   (display:contents) pour que le bouton soit un item flex direct comme les autres. */
.mobile-navbar__logout-form { display: contents; }
.mobile-navbar__btn--logout i,
.mobile-navbar__btn--logout span,
.mobile-navbar__btn--logout:active i,
.mobile-navbar__btn--logout:active span { color: var(--err, #B5170D); }
/* AFFICHAGE de la barre + réserve d'espace bas : mobile/tablette (≤1024) + tablette tactile (>1024). */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .mobile-navbar { display: flex; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}
/* Mode preview du header (largeur simulée, sans @media) : afficher la barre + réserver l'espace. */
html.preview-tablet .mobile-navbar,
html.preview-mobile .mobile-navbar { display: flex; }
html.preview-tablet body,
html.preview-mobile body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

/* === Pagination Campagnes — nav re-skinnée « ‹ Précédent · Page X/Y · Suivant › » sur mobile (≤768px).
   Desktop : numéros de page conservés. Mécanisme serveur (?p=) inchangé. EP 2026-06-22. === */
.pagination .pag-label { display: none; } /* libellés Précédent/Suivant : mobile uniquement */
@media (max-width: 768px) {
  /* Annule le `nav{flex-direction:column}` global de main.css : pager sur UNE ligne. */
  .pagination { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
  .pagination > p { order: 0; margin: 0; white-space: nowrap; }
  .pagination .flex.gap-1 { display: contents; } /* prev/next deviennent enfants directs de .pagination */
  .pagination .pag-num { display: none; }         /* masque les numéros de page */
  .pagination .pag-label { display: inline; }     /* affiche Précédent/Suivant sur les flèches ‹ › */
  .pagination a[aria-label="Page précédente"] { order: -1; }
  .pagination a[aria-label="Page suivante"] { order: 1; }
}

/* ===== Annuaire facettes (selection_journaliste) : catégories en GRANDES TUILES pleine largeur,
   sous-thèmes EN DESSOUS, aucune ouverture par défaut → fin du grand panneau blanc latéral.
   Scopé > 768px (desktop + VT) ; la VM garde ses bottom-sheets intacts. EP 2026-06-27. ===== */
@media (min-width: 769px) {
  .dest-layout-v2 { display: block; min-height: 0; }
  .dest-categories-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    background: #fff;
    border-right: none;
    max-height: none;
    overflow: visible;
    padding: 16px;
  }
  .dest-categories-v2 .dest-search { grid-column: 1 / -1; }
  .dest-cat-v2 { margin-bottom: 0; padding: 14px 16px; min-height: 54px; }
  /* Volet déplacé dans la grille (selection_journaliste.js) : ligne pleine largeur sous sa tuile ;
     quand il devient actif il se déplie sur place et pousse les tuiles suivantes vers le bas. */
  .dest-categories-v2 .dest-details-v2-pane { grid-column: 1 / -1; }
  .dest-details-v2-pane.is-active { padding: 16px 18px; border: 1px solid var(--line, #E5E2DA); border-radius: var(--radius, 8px); background: #f7f5ef; margin: 2px 0 6px; }
  .dest-details-v2 { padding: 0; max-height: none; overflow: visible; }
}

/* === Bloc « Profil actif » (profil_see.php) ====================================
   Card latérale qui affiche le profil sélectionné, son chip d'état, le sélecteur
   de profil et les actions (Créer / Éditer). Migration depuis 12 styles inline
   (2026-06-30) — charte v8 : radius 6px, fond crème pour les initiales. */
.profil-card {
  background: #fff;
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  padding: 16px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profil-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.profil-card-initials {
  width: 40px;
  height: 40px;
  background: var(--cream, #FAF9F5);
  border: 1px solid var(--line, #E5E2DA);
  border-radius: var(--radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.profil-card-meta {
  flex: 1;
  min-width: 0;
}
.profil-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #716D61);
  margin: 0;
}
.profil-card-name {
  font-weight: 700;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profil-card-chip {
  flex-shrink: 0;
}
.profil-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line, #E5E2DA);
  padding-top: 12px;
}
.profil-card-actions .btn { flex: 1; }

/* Ancien composant .toggle-bw (mode d'envoi vocal VMS/TTS) fusionné dans
   .seg-toggle / .seg-btn : une seule classe toggle pour tout le site. */

/* ==========================================================================
   Gestion des mails — onglet « Contenus des mails »
   Les intitules ouvrent l'edition en place. Aucune couleur ici : la charte
   les porte deja (--radius, .card, .btn). Ne pas dupliquer de valeurs.
   ========================================================================== */
.mails-contenus { margin-top: 24px; }
.onglets-facettes + .mails-grid { margin-top: 24px; }
.mails-contenus .mc-intro { margin: 0 0 20px; }
.mails-contenus .mc-section { margin-bottom: 20px; }
.mails-contenus .mc-desc { margin: 0 0 12px; }
.mails-contenus .mc-list { margin: 0; padding: 0; list-style: none; }
.mails-contenus .mc-item { padding: 14px 0; }
.mails-contenus .mc-item + .mc-item { border-top: 1px solid var(--line, var(--line, #E5E2DA)); }
.mails-contenus .mc-titre {
    font-weight: 600;
    text-decoration: none;
    color: var(--text, var(--ink, #0A0A0A));
}
.mails-contenus .mc-titre:hover { text-decoration: underline; }
.mails-contenus .mc-objet { margin: 4px 0 0; }
.mails-contenus .mc-maj { margin: 2px 0 0; }
.mails-contenus .mc-action { margin: 0; }
.mails-contenus .mc-form { margin: 16px 0 4px; }
.mails-contenus .mc-champ { margin-bottom: 14px; }
.mails-contenus .mc-corps {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
}
.mails-contenus .mc-aide { margin: 6px 0 0; }
.mails-contenus .mc-jetons { margin-bottom: 14px; }
.mails-contenus .mc-jetons-aide { margin: 0 0 8px; }
.mails-contenus .mc-jetons-liste { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Salle de presse : adresse publique -------------------------------------
   Deux lignes de meme nature : le sous-domaine choisi, encadre par son protocole
   et son domaine, puis l'URL native suivie de son bouton Copier. Le balisage
   existait sans regle : chaque element prenait toute la largeur et le bloc
   s'empilait. Le champ absorbe la place restante, le retour a la ligne protege
   les petits ecrans (pas de scroll horizontal). */
.sdp-slug-row,
.sdp-native-url-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sdp-slug-row .sdp-slug-input,
.sdp-native-url-row .field { flex: 1 1 220px; min-width: 0; margin-bottom: 0; }
.sdp-slug-prefix,
.sdp-slug-suffix { color: var(--muted, var(--muted, #716D61)); white-space: nowrap; }
.sdp-native-url-row .btn { flex: 0 0 auto; }

/* --- Pied de page collant, gabarit public ---------------------------------
   ouvert.php construit <body> > <header> + .pageheart + <footer>.
   .pageheart portait min-height:80vh (main.css 354) : sur une page courte, le
   pied de page s'arretait donc a 80% de l'ecran, laissant 20% de blanc EN
   DESSOUS de lui. Un pied de page doit etre en bas.
   Scope volontairement etroit : body:has(> .pageheart) ne matche que le
   gabarit public. Les pages client, qui n'ont pas .pageheart en enfant direct,
   ne sont pas touchees. Les pages plus hautes que l'ecran sont inchangees. */
body:has(> .pageheart) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body:has(> .pageheart) > .pageheart {
    flex: 1 0 auto;
}
body:has(> .pageheart) > footer {
    flex-shrink: 0;
}

/* --- Page de validation d'une demande publique (double opt-in) -------------
   ouvert.php?page=valider_demande. La page reprend tel quel le composant de
   php/ouvert/wrongmdp.php : carte blanche .login-error-toast posee sur l'image
   d'accueil. Cette carte est neutre (background:#fff, open.css 23) ; seule la
   pastille d'icone porte la couleur, rouge par defaut. D'ou cette unique
   variante, pour les etats positifs. Vert #167A39 : couleur de validation de
   la charte. */
.dpv-toast-icon--ok {
    background: #E6F4EA;
}
.dpv-toast-icon--ok :is([class^="ri-"], [class*=" ri-"]) {
    color: var(--ok, #167A39);
}


/* --- Etat de validation d'une adresse d'expedition -------------------------
   Composant php/Composants/sender_status.php, affiche sous les quatre champs
   d'adresse du profil. Aucun bleu (charte) : vert de validation #167A39,
   rouge #B5170D pour un lien expire, gris neutre pour une attente — attendre
   n'est pas une erreur, ce serait mentir que de l'afficher en rouge. */
/* Champ « copie cachée » du bloc d'authentification de domaine. La largeur vit ICI et non
   dans le PHP : le filet de charte compte les styles en ligne et refuse qu'ils augmentent.
   Ses voisins les portent encore en ligne — c'est une dette antérieure, pas une raison d'en
   ajouter une. */
.champ-dsi-copie { max-width: 260px; }

.sender-etat {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #4a4a4a;
}
.sender-etat :is([class^="ri-"], [class*=" ri-"]) {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.3;
}
/* ⛔ UN PICTO EST NOIR OU BLANC, JAMAIS VERT (EP, 23/10/2026). Le vert de la charte
   sert aux aplats et au texte d'état, pas aux icônes. Cette règle était la seule de
   la charte client à colorer un picto en vert ; elle sert quatre endroits — le
   composant `sender_status`, son pendant JavaScript et la liste des domaines admin. */
.sender-etat--ok :is([class^="ri-"], [class*=" ri-"]) { color: var(--ink, #0A0A0A); }

/* Attente et expiration : APLAT ROUGE, comme en V7. Choix EP du 12/08/2026.
   Une adresse non validee n'expedie rien — les envois partent sous
   envoi@e-agora.fr sans que le client s'en doute. Ce n'est pas une information
   de confort, c'est un blocage a lever : il doit se voir au premier coup d'oeil,
   pas se fondre dans une ligne grise. Le vert de l'etat valide reste discret,
   lui : il n'appelle aucune action. */
.sender-etat--attente,
.sender-etat--expire {
    background: var(--err, #B5170D);
    color: #fff;
    padding: 10px 12px;
    border-radius: var(--radius, 8px);
    font-weight: 500;
}
.sender-etat--attente :is([class^="ri-"], [class*=" ri-"]),
.sender-etat--expire :is([class^="ri-"], [class*=" ri-"]) { color: #fff; }

/* ce-sd — sous-droits differencies contributeur (cadre englobant sous la tuile parent, ancre a droite) */
.ce-sd {
    grid-column: 1 / -1;
    width: 48%;                 /* legerement plus petit qu'une tuile parent (50% - gap) */
    margin: 4px 0 6px auto;     /* auto a gauche => ancre a droite */
    padding: 12px 14px;
    background: var(--cream, #FAF9F5);
    border: 1px solid var(--line, #E5E2DA);
    border-radius: 8px;
    box-sizing: border-box;
}
.ce-sd[hidden] { display: none; }
.ce-sd-titre {
    font-size: 12px;
    color: var(--muted, #716D61);
    margin: 0 0 8px;
}
.ce-sd-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ce-sd-item {
    padding: 8px 12px;
    border: 1px solid var(--line, #E5E2DA);
    border-radius: 6px;
    background: #FFFFFF;
}

/* contrib-table — desactive faux gras des icones remix dans les TH; 1ere col alignee gauche + nom non gras */
.contrib-table th :is([class^="ri-"], [class*=" ri-"]) { font-weight: 400; }
.contrib-table th:first-child { text-align: left; }
.contrib-table td:first-child { text-align: left; }
.contrib-table td.contrib-identite { font-weight: 400; }

/* contrib-actif — Oui (vert) / Non (rouge) dans la colonne "Actif" */
.contrib-actif { font-weight: 500; }
.contrib-actif--yes { color: #167D3A; }
.contrib-actif--no  { color: var(--err, #B5170D); }


/* Form de creation liste (.bdc-lm-create) : seg-toggle ancre a droite + hauteur harmonisee avec btn-sm */
.bdc-lm-create { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bdc-lm-create .seg-toggle { margin-left: auto; }
.bdc-lm-create .seg-toggle .seg-btn { padding: 6px 10px; font-size: 13px; min-height: 32px; line-height: 1; }

/* seg-toggle dans la toolbar des resultats (page contacts liste ouverte) : ancre a GAUCHE + hauteur alignee btn-sm */
.bdc-toolbar-scope { margin-right: auto; }
.bdc-toolbar-scope .seg-btn { padding: 6px 10px; font-size: 13px; min-height: 32px; line-height: 1; }

/* is-locked-tag - liste de diffusion reservee a un autre type de contributeur */
.is-locked-tag { opacity: .55; cursor: not-allowed; }
.is-locked-tag input[type=checkbox] { display: none; }
.is-locked-tag label { cursor: not-allowed; }

/* ------------------------------------------------------------------
   COMPTE EN PÉRIODE D'ESSAI — gratuité d'avant-vente
   La classe est posée sur le <body> par client.php quand le compte est en
   gratuité de type « avant_vente ». Les exports Excel sont alors neutralisés.
   ⚠️ Ceci ne protège RIEN : la protection est le refus serveur posé dans
   chaque export (php/compte_gratuite_helpers.php). Un bouton grisé n'empêche
   pas d'appeler l'adresse directement. Les deux gestes vont ensemble.
   Les exports PDF ne sont pas concernés (règle EP : la limitation porte sur
   les téléchargements Excel).
   ------------------------------------------------------------------ */
body.compte-essai-sans-export .eag-export-xlsx {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ── L'ANNONCE DES FORMATS ET DU POIDS SOUS UN CHAMP DE DÉPÔT ─────────────────────
   ⭐ Critère 4.11 du RGESN : l'utilisateur doit connaître les formats acceptés ET le
   poids maximum AVANT de choisir son fichier. Un transfert qui part pour être refusé
   est un aller-retour réseau pur perdu.
   ⚠️ Le texte vient de `eag_upload_mention()`, jamais d'un libellé écrit dans la vue :
   le chiffre est celui que le serveur applique réellement. */
.input-file-mention,
.drop-zone-mention {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
}
/* Dans une zone de dépôt, la mention se place sous le texte d'invitation, dans le
   flux de la colonne — elle ne doit pas capter le clic qui ouvre le sélecteur. */
.drop-zone .drop-zone-mention { pointer-events: none; }

/* === Sélecteur multiple hiérarchique — voir javascript/eag_multi_select.js =================
   ⛔ AUCUNE COULEUR EN DUR : tout vient des jetons de la charte. La leçon du 15/09/2026 —
   une valeur recopiée ne suit pas la correction de sa source. */
.eag-multi { position: relative; }

.eag-multi-natif {
  /* Le <select> reste dans la page : c'est lui qui porte la valeur envoyée au serveur.
     `display:none` le sortirait de la soumission sur certains navigateurs anciens ;
     on le retire de la vue sans le retirer du formulaire. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  border: 0; padding: 0; margin: -1px;
}

.eag-multi-puces {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.eag-multi-puces:empty { display: none; }

.eag-multi-puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px;
  font-size: 12px; line-height: 1.4;
  background: var(--cream2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-pill);
  color: var(--ink);
}

.eag-multi-btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--paper);
  color: var(--muted);
}

.eag-multi-panneau {
  position: absolute; z-index: 40;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line2);
  border-radius: var(--radius, 8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

.eag-multi-filtre { width: 100%; margin-bottom: 8px; }

.eag-multi-liste { max-height: 260px; overflow-y: auto; }

.eag-multi-ligne {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px;
  font-size: 13px;
  border-radius: var(--radius-control);
  cursor: pointer;
}
.eag-multi-ligne:hover { background: var(--cream2); }

/* Le décalage dit la hiérarchie. Il suit data-enfant, posé par le PHP d'après parent_id :
   la structure vient de la base, pas d'une convention de nommage. */
.eag-multi-ligne--enfant { padding-left: 24px; color: var(--muted); }

.eag-multi-ligne input[type="checkbox"] {
  width: var(--control-size); height: var(--control-size);
  border-radius: var(--radius-control);
  flex-shrink: 0;
}

/* Poubelle d'action — le rouge de la charte est réservé à la suppression.
   ⚠️ Une icône seule n'est pas un libellé : le bouton porte toujours un aria-label. */
.eag-poubelle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--paper);
  color: var(--err);
  border: 1px solid var(--line2);
  border-radius: var(--radius, 8px);
  font-size: 18px;
  cursor: pointer;
}
.eag-poubelle:hover { background: var(--err2); border-color: var(--err); }
.eag-poubelle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* La croix d'une puce. Géométrie reprise de .bdc-chip-remove (base_de_contacts.css) —
   18 px, ronde, sans filet, icône à 14 px — mais écrite ici : ce composant sert en
   administration, où cette feuille-là n'est pas chargée. Emprunter un nom de classe
   n'emprunte pas la feuille qui va avec. */
.eag-multi-croix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 -2px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.eag-multi-croix:hover { background: rgba(0, 0, 0, .08); }
.eag-multi-croix:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.eag-multi-croix :is([class^="ri-"], [class*=" ri-"]) { font-size: 14px; line-height: 1; }

/* === Autocomplétion d'un média — voir javascript/eag_media_autocomplete.js ================
   ⛔ UNE LISTE DE SUGGESTIONS EST UN PANNEAU DÉROULANT, PAS UNE RANGÉE DE PASTILLES.
   Sans feuille, les propositions retombaient en boutons alignés qui passaient à la ligne,
   et le nom se collait à son détail — « LE MONDEPresse nationale ». EP, 15/09/2026 :
   « c'est quoi ça, pas dans la charte ». Même registre que .eag-multi-panneau. */
.eag-media { position: relative; }

.eag-media-liste {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 6px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line2);
  border-radius: var(--radius, 8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

/* Une proposition occupe toute la largeur : le nom sur une ligne, sa nature dessous. */
.eag-media-ligne {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.eag-media-ligne:hover { background: var(--cream2); }
.eag-media-ligne:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.eag-media-nom {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.eag-media-detail {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--muted);
}

/* Largeurs de listes déroulantes dont les libellés sont longs.
   ⛔ MESURÉ, PAS ESTIMÉ (15/09/2026) : le plus long libellé de `abonnement_action` occupe
   298 px de texte — « CiteeZen Relations publiques — 2 000 € /an » — auxquels s'ajoutent
   12 px de retrait à gauche et 34 px réservés au chevron. Un champ à 320 px le coupait de
   24 px, et ce libellé-là porte un prix. `formation_type` en perdait 9. */
.field.champ-large { margin-top: 8px; max-width: 360px; }
.field.champ-moyen { margin-top: 8px; max-width: 300px; }

/* Fiche journaliste — ajout à une liste de diffusion.
   La charte veut le style en feuille : ces deux règles remplacent les styles en ligne
   qu'aurait portés `fiche_journaliste.php`. */
.fj-liste-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.fj-alert { display: inline-flex; margin-bottom: 10px; }

/* --- Suivi commercial : le nombre de mails se déplie (EP, 21/09/2026) --- */
.suivi-envois-detail { display: inline-block; text-align: left; }
.suivi-envois-detail > summary { cursor: pointer; list-style: none; text-align: center; }
.suivi-envois-detail > summary::-webkit-details-marker { display: none; }
.suivi-envois-detail > summary > strong { border-bottom: 1px dotted var(--muted-dark, #5C5648); }
.suivi-envois-detail[open] > summary > strong { border-bottom-style: solid; }
.suivi-envois-detail ul { margin: 6px 0 0; padding-left: 14px; white-space: nowrap; }

/* Espace contractuel — les liens vers les documents téléchargeables (CGV, fiche technique,
   conformité RGPD). Ils portaient leur style en ligne, que la charte interdit ; la classe
   les réunit et les trois restent identiques quoi qu'il arrive à l'un d'eux. */
.lien-document { color: var(--ink, #0A0A0A); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RETOUR EN HAUT DE PAGE — le CTA flottant.

   EP, 23/10/2026 : la regle s'applique « des qu'une page depasse l'equivalent
   de deux pages en pagination ». C'est `javascript/retour_haut.js` qui mesure
   la hauteur du document et decide ; aucun ecran ne s'y declare.

   Couleurs : noir d'encre, picto BLANC. Dans un bouton, le picto prend la
   couleur de la POLICE (EP, 23/10/2026) — jamais de picto vert, jamais de bleu.
   z-index 900 : DESSOUS les panneaux mobiles (1100+) et les modales, pour que
   le bouton ne recouvre jamais une fenetre ouverte.
   ═══════════════════════════════════════════════════════════════════════════ */
.retour-haut {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--ink, #0A0A0A);
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(10, 10, 10, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.retour-haut.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.retour-haut:hover { background: var(--ink2, #141413); }

.retour-haut:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink, #0A0A0A);
}

/* Le picto suit la police du bouton : blanc ici, jamais une couleur propre. */
.retour-haut :is([class^="ri-"], [class*=" ri-"]) { color: inherit; }

@media print { .retour-haut { display: none !important; } }

@media (prefers-reduced-motion: reduce) { .retour-haut { transition: none; } }

/* ─── VT 769-1024 + pointeur grossier — et son jumeau de previsualisation ─── */
@media (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {
    .retour-haut { right: 20px; bottom: 20px; }
}
html.preview-tablet .retour-haut { right: 20px; bottom: 20px; }

/* ─── VM <=768 — cible tactile 44px, et on degage la barre systeme ─── */
@media (max-width: 768px) {
    .retour-haut {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}
html.preview-mobile .retour-haut {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    font-size: 20px;
}

/* ⛔ ON NE CONCURRENCE JAMAIS UNE DEMANDE DE CONSENTEMENT. Mesure du
   23/10/2026 : sur mobile, `#eag-cookie-banner` est en position fixed, pleine
   largeur, 230 px de haut, z-index 99999 — il recouvre exactement le coin du
   CTA. Le bandeau est RETIRE du DOM au clic (javascript/cookie_consent.js,
   removeChild), donc cette regle se leve d'elle-meme : rien a nettoyer. */
body:has(#eag-cookie-banner) .retour-haut { display: none; }
/* Grille de la carte « Responsable du traitement des donnees ».
   Des CLASSES et pas des `style="..."` : le cliquet des styles en ligne
   (check_charte_ecrans.php) ne doit pas remonter d'un cran. */
.param-card .param-grille { display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.param-card .param-grille .param-pleine-largeur { grid-column: 1 / -1; }
.param-card .param-grille .champ-espace { margin-bottom: 8px; }

/* Civilite + prenom sur une ligne, nom en face : §2sexdecies.1bis.
   La civilite a une largeur FIXE de 150 px — dictee par le contenu du
   <select> (12 px de padding a gauche, 34 px pour le chevron), pas choisie.
   SELECTEUR DOUBLE indispensable : a specificite egale, la largeur pleine
   declaree sur `.field` l'emporterait et la civilite prendrait toute la place. */
.param-card .param-grille .param-identite-ligne {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.param-card .param-grille .param-identite-ligne .param-civilite select.field { width: 150px; }
.param-card .param-grille .champ-indice { font-weight: 400; color: var(--muted, #716D61); }

/* Colonne « Choix » de l'onglet Opt'in : l'attente se signale par la COULEUR
   DU TEXTE, jamais par un aplat (EP, 26/10/2026) — un tableau de 320 lignes
   constelle de pastilles se lit moins bien qu'un texte simple. La COULEUR, elle,
   reste : EP, 26/10/2026 — « j'ai dit pas de fond, je n'ai pas dit pas de couleur
   de police ». Jetons de la charte, jamais une teinte choisie.
   `--warn` est le jeton de la charte, et il porte sa justification : 5,33:1,
   la teinte precedente etait sous le seuil AA. */
/* La derniere colonne (« Choix ») est centree — en-tete comprise. Par la
   POSITION et non par une classe sur chaque cellule : une seule regle, et
   l'en-tete suit la colonne sans qu'on ait a y penser. */
#optin-table th:last-child,
#optin-table td:last-child { text-align: center; }

#optin-table td.optin-ok      { color: var(--ok,   #167A39); }
#optin-table td.optin-err     { color: var(--err,  #B5170D); }
#optin-table td.optin-attente { color: var(--warn, #8F5200); }

/* Carte d'ACTIONS de l'onglet Opt'in.
   ⛔ HORS de toute `.alert` : cet ecran masque ses alertes en mobile et en
   tablette (decision EP), et la regle vise les BANDEAUX D INFORMATION. Un
   bouton est une ACTION — loge dans une alerte, il disparaissait avec le texte.
   ⭐ BOUTON ANCRE A DROITE (EP, 26/10/2026) : le texte prend la place qu il lui
   faut, l action se trouve toujours au meme endroit d une ligne a l autre. */
.optin-carte { margin: 0 0 20px; }
.optin-carte .optin-actions { display: flex; flex-direction: column; gap: 14px; }
.optin-carte .optin-ligne { display: flex; align-items: center; justify-content: space-between;
    gap: 18px; margin: 0; }
.optin-carte .optin-ligne > .info-utilisateur { margin: 0; }
.optin-carte .optin-ligne > form { margin: 0; flex: 0 0 auto; }
.optin-carte .optin-ligne > .btn { flex: 0 0 auto; }
/* Un filet separe le reglage des actions — et il ne touche pas le texte. */
.optin-carte .optin-ligne--filet { border-top: 1px solid var(--line, #E5E2DA); padding-top: 14px; }
.optin-carte .optin-case { display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.45; cursor: pointer; }
.optin-carte .optin-case input { margin-top: 3px; flex: 0 0 auto; }
.optin-carte .optin-domaines-liste { display: block; color: var(--muted, #716D61); font-size: 13px; }

/* Entree de navigation reservee au DESKTOP. Jumeaux obligatoires : la media
   query ET la classe de previsualisation, sinon l apercu in-app ment. */
@media (max-width: 768px) { .menu-link--desktop { display: none; } }
html.preview-mobile .menu-link--desktop { display: none; }

/* La derniere colonne de l onglet Opt in (« Choix ») est centree, en-tete comprise. */
#optin-table th:last-child,
#optin-table td:last-child { text-align: center; }
#optin-table td.optin-ok      { color: var(--ok,   #167A39); }
#optin-table td.optin-err     { color: var(--err,  #B5170D); }
#optin-table td.optin-attente { color: var(--warn, #8F5200); }

/* Actions de la modale Opt in : ancrees a DROITE, comme les boutons des cartes
   (EP, 26/10/2026). Le lecteur retrouve l action toujours au meme endroit. */
.optin-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE PUBLIQUE DE MESSAGE — lien expire, devis annule, document introuvable.

   ⛔ AVANT LE 27/10/2026, CES PAGES N'AVAIENT AUCUNE CHARTE. Seize points de
   sortie des pages publiques servaient une ligne de texte nu, rendue dans la
   police par defaut du navigateur, sans logo, sans cadre, sans couleur — y
   compris celle que lit un prospect qui ouvre le lien de son devis. EP,
   27/10/2026 : « tu crois que c'est compatible avec notre charte graphique ? »
   Un seul gabarit les sert desormais toutes : `php/ouvert/page_message.php`.

   Rien n'est invente ici : le bandeau est le composant `.alert` de `main.css`,
   le logo est le `.brand` de cette feuille, les couleurs et le rayon sont les
   jetons maison. Ce bloc ne fait que centrer l'ensemble. */
.page-message {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--cream, #FAF9F5);
}

.page-message__boite {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* Le bandeau occupe toute la largeur de la boite : un filet qui s'arrete avant
   le bord donnerait l'impression d'un gabarit casse. */
.page-message .alert { width: 100%; box-sizing: border-box; }

.page-message .alert strong { display: block; margin-bottom: 4px; font-size: 15px; }
.page-message .alert span   { display: block; line-height: 1.5; }

/* Le logo reprend la version sur fond clair : la page n'a pas de bandeau sombre. */
.page-message .brand-mark { width: 38px; height: 38px; font-size: 18px; }
.page-message .brand-name { font-size: 22px; }