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

/* --- Reset (identique maquette) --- */
html,
body {
  margin: 0;
  padding: 0;
  background: #faf9f5;
  color: #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 #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: #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 #e5e2da;
  padding: 2px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #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: #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: #f2f0e8;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  padding: 13px 14px;
  color: #0a0a0a;
  text-decoration: none;
}
.home-mobile-tile:hover {
  background: #fff;
  border-color: #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: #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: #0a0a0a;
  border-color: #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: #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 #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; background: #0a0a0a; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 600; }
.dp-card-body { flex: 1; min-width: 0; }
.dp-card-name { font-size: 15px; font-weight: 600; color: #0a0a0a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-card-mail { font-size: 12.5px; color: #716D61; margin-top: 1px; overflow-wrap: anywhere; }
.dp-card-line { font-size: 12.5px; color: #0a0a0a; margin-top: 3px; }
.dp-card-dates { color: #716D61; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dp-card-statutmeta { color: #716D61; }
.dp-card-open { flex-shrink: 0; align-self: center; font-size: 13px; color: #0a0a0a; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-family: inherit; white-space: nowrap; }
/* 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: #b5170d; cursor: pointer; padding: 2px 4px; align-self: center; flex-shrink: 0; }
.dp-card-trash :is([class^="ri-"], [class*=" ri-"]) { font-size: 20px; color: #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 #B5170D;
  color: #B5170D;
}
.home-mobile-logout-form .home-mobile-logout-btn:hover,
.home-mobile-logout-form .home-mobile-logout-btn:focus {
  background: #fdf3f2;
  border-color: #B5170D;
  color: #B5170D;
}
.home-mobile-logout-form .home-mobile-logout-btn :is([class^="ri-"], [class*=" ri-"]) {
  color: #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 #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: #716D61;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.viewport-preview-btn:hover {
  background: #faf9f5;
  color: #0a0a0a;
}
.viewport-preview-btn.is-active {
  background: #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 #d8d3c6;
  border-right: 1px dashed #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 #d8d3c6;
  border-right: 1px dashed #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: #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: #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: #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: #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: #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: #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;
}
.btn-primary {
  background: #0a0a0a;
  color: #fff;
  border-color: #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: #0a0a0a;
  border-color: #e5e2da;
}
.btn-outline:hover {
  background: #faf9f5;
  border-color: #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: #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: #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 #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 #e5e2da;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-head h2,
.card-head h3 {
  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: #faf9f5;
  border-color: #e5e2da;
  color: #0a0a0a;
  cursor: default;
  opacity: 1;
}

/* --- Tuiles type de campagne --- */
.type-tile {
  background: #f2f0e8;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: #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: #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: #0a0a0a;
  line-height: 1;
}
.type-tile .lbl {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}
.type-tile .sub {
  font-size: 12px;
  color: #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: #e5e2da;
  background: #f2f0e8;
  cursor: not-allowed;
}
.type-tile .type-tile-lock {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: #716D61;
}

/* --- Champs V8 --- */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #0a0a0a;
}
.field {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  color: #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: #0a0a0a;
  box-shadow: 0 0 0 1px #0a0a0a inset;
}
/* Champ verrouillé quand « lieu validé ultérieurement » est coché (TBD) */
.field.is-locked-tbd {
  background: #f2f0e8;
  color: #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 #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: #0a0a0a;
  box-shadow: 0 0 0 1px #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: #f2f0e8;
  color: #0a0a0a;
  border: 1px solid #e5e2da;
  border-radius: var(--radius-pill, 999px);
}
.chip-ok {
  background: #d6f2de;
  border-color: #bbe2c6;
  color: #167A39;
}
.chip-warn {
  background: #fcecc8;
  border-color: #f2da9a;
  color: #a65e00;
}
.chip-err {
  background: #fbded6;
  border-color: #f1c3b6;
  color: #b5170d;
}
.chip-accent {
  background: #f0f9f2;
  border-color: #a8dab5;
  color: #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: #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: #716D61;
  background: #faf9f5;
  border-bottom: 1px solid #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 #e5e2da;
  vertical-align: middle;
}
table.tbl tbody tr:last-child td {
  border-bottom: none;
}
table.tbl tbody tr:hover {
  background: #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: #f2f0e8;
  overflow: hidden;
  width: 50px;
  min-width: 30px;
  max-width: 80px;
}
.cr-open-fill {
  height: 100%;
  background: #0a0a0a;
  transition: width 0.3s ease;
}
.cr-open-pct {
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}
.cr-open-empty {
  color: #a29b8b;
}

/* --- Tabs de navigation --- */
.tabs-top {
  display: flex;
  border-bottom: 1px solid #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: #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: #faf9f5;
}
.tab-top[aria-selected="true"],
.tab-top.active {
  color: #0a0a0a;
  border-bottom-color: var(--brand);
  font-weight: 700;
}

/* --- Fil d'Ariane --- */
.crumb {
  font-size: 13px;
  color: #716D61;
  padding: 14px 24px 0;
}
.crumb a {
  color: #0a0a0a;
  text-decoration: underline;
}
.crumb .sep {
  color: #a29b8b;
  padding: 0 4px;
}

/* --- Avatar --- */
.avatar {
  width: 32px;
  height: 32px;
  background: #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 #e5e2da;
  border-radius: var(--radius, 8px);
}
.kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #716D61;
  font-weight: 500;
}
.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: #0a0a0a;
  margin-top: 6px;
  line-height: 1;
}
.kpi-delta {
  font-size: 12px;
  margin-top: 4px;
  color: #716D61;
}
.kpi-delta.ok {
  color: #167A39;
}
.kpi-delta.warn {
  color: #a65e00;
}

/* --- Barre de progression --- */
.progress-bar {
  background: #f2f0e8;
  height: 6px;
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: #0a0a0a;
}

/* --- Stepper --- */
.steps {
  display: flex;
  align-items: center;
}
.steps .st {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #716D61;
  padding: 12px 0;
}
.steps .st .num {
  width: 26px;
  height: 26px;
  border: 1px solid #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: #0a0a0a;
  color: #fff;
  border-color: #0a0a0a;
}
.steps .st.active .num {
  background: #fff;
  color: #0a0a0a;
  border-color: #0a0a0a;
}
.steps .st.active {
  color: #0a0a0a;
  font-weight: 700;
}
.steps .st + .st::before {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e2da;
  margin: 0 8px;
}
.steps .st.done + .st.done::before,
.steps .st.done + .st.active::before {
  background: #0a0a0a;
}

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

/* --- Chart barres --- */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 190px;
  padding: 18px 6px 0;
}
.chart .bar-c {
  flex: 1;
  background: #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: #0a0a0a;
  white-space: nowrap;
}
.chart .bar-a {
  background: #0a0a0a;
}

/* --- Annuaire / facettes --- */
.bdc-card {
  background: #ffffff;
  border: 1px solid #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 #e5e2da;
  background: #fff;
  color: #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: #0a0a0a;
  background: #faf9f5;
}
.vip-badge i {
  font-size: 22px;
  line-height: 1;
}
.vip-badge.is-vip {
  color: #167A39;
  border-color: #167A39;
  background: #f0f9f2;
}
.vip-badge.is-vip:hover {
  background: #d6f2de;
  border-color: #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 #167A39;
  background: #f0f9f2;
  color: #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 #e5e2da;
  background: #faf9f5;
}
.onglet-facette {
  padding: 14px 20px;
  font-size: 14px;
  color: #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: #141413;
}
.onglet-facette.on,
.onglet-facette.ongletselection,
.onglet-facette[aria-selected="true"] {
  background: #ffffff;
  color: #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 #0a0a0a; border-radius: var(--radius, 8px); padding: 12px;
    color: #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: #0a0a0a; color: #fff; font-weight: 700; border-color: #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 #0a0a0a; border-radius: var(--radius, 8px); padding: 12px;
  color: #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: #0a0a0a; color: #fff; font-weight: 700; border-color: #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: #faf9f5;
}
.search-media-row {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid #e5e2da;
  background: #faf9f5;
  padding: 10px 16px;
}
.search-media-row .field {
  flex: 1;
}

/* --- Accessibilité --- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #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 #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;
}
.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: #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: #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: #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 #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: #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 #e5e2da;
  padding: 8px 12px;
  vertical-align: top;
}
.page-publique-content blockquote {
  border-left: 3px solid #167A39;
  padding: 4px 16px;
  margin: 1em 0;
  color: #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 #e5e2da;
    border-bottom: none;
    background: #fff;
  }
  table.tbl tbody tr:last-child {
    border-bottom: 1px solid #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 #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 #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: #167A39;
  background: #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: #5c5648;
  font-size: 20px;
}
.pe-canal-tile:hover .pe-canal-tile-ic {
  color: #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: #0a0a0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-canal-tile-url {
  display: block;
  margin: 1px 0 0;
  font-size: 12px;
  color: #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: #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: #0a0a0a;
}
.contact-role {
  font-size: 12px;
  color: #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: #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: #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: #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: #167A39;
  color: #fff;
}
::-moz-selection {
  background: #167A39;
  color: #fff;
}
.grayborder {
  border: 1px solid #e5e2da;
  background: #fff;
  padding: 20px;
}

/* --- Remap onglets existants --- */
.onglets {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e2da;
}
.onglet {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: #716D61;
  font-weight: 500;
  font-size: 14px;
  font-family: inherit;
  transition: color 0.15s;
}
.onglet:hover {
  background: #f2f0e8;
  color: #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: #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 #e5e2da;
  overflow-x: auto;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.stats-table th {
  background: #faf9f5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #e5e2da;
  white-space: nowrap;
}
.stats-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e2da;
  vertical-align: top;
}
.stats-table tr:last-child td {
  border-bottom: none;
}
.stats-table-group-row td {
  background: #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: #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 #e5e2da;
  padding: 8px 0;
}
.lignemesdemandespresse.bordertop {
  border-top: 1px solid #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 #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 #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 #e5e2da;
  cursor: pointer;
  margin-top: 16px;
}
.tuile:hover {
  background: #faf9f5;
}
.radiosee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.radioseeright,
.radioseeleft {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #e5e2da;
}
.radioseeright {
  background: #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: #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: #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: #faf9f5;
  border-color: transparent;
  pointer-events: none;
}
#screen-profils-envoi.is-editing .card {
  box-shadow: inset 0 0 0 1px #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: #0a0a0a;
  letter-spacing: 0.02em;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #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 #b5170d;
  border-radius: var(--radius, 8px);
  color: #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: #faf9f5;
  border: 1px solid #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 #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: #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: #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: #0a0a0a;
}
.zones-container-tag .tags-master-row label > .master-hint {
  grid-row: 2;
  grid-column: 2;
  font-size: 12px;
  font-weight: 400;
  color: #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 #e5e2da;
  border-radius: var(--radius, 8px);
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
  overflow: hidden;
}
.zones-container-tag .col31:hover {
  border-color: #167A39;
  background: #f0f9f2;
}
.zones-container-tag .col31 input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  accent-color: #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 #0a0a0a !important;
  outline-offset: 1px;
}
.zones-container-tag .col31:focus-within {
  border-color: #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: #0a0a0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zones-container-tag .col31 label > i {
  font-size: 18px;
  color: #716D61;
  flex: 0 0 auto;
}
.zones-container-tag .col31 label .list-name {
  font-weight: 600;
  color: #0a0a0a;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zones-container-tag .col31:has(input:checked) {
  border-color: #167A39;
  background: #f0f9f2;
}
.zones-container-tag .col31:has(input:checked) label > i {
  color: #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: #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 #e5e2da;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.dt-pack:focus-within {
  border-color: #0a0a0a;
  box-shadow: 0 0 0 1px #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: #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: #0a0a0a;
  text-align: center;
  outline: none;
}
.dt-field-input::placeholder {
  color: #a29b8b;
  font-weight: 400;
}
.dt-pack-sep {
  width: 1px;
  background: #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 #e5e2da;
  background: #faf9f5;
  color: #0a0a0a;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.dt-pack-picker:hover {
  background: #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 #e5e2da;
  border-radius: var(--radius, 8px);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #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 #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: #f2f0e8;
  border-color: #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 #e5e2da;
  background: #fff;
  color: #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: #f2f0e8;
  border-color: #0a0a0a;
}
.btn-add--label {
  margin-top: 4px;
}
.btn-add i {
  font-size: 16px;
  line-height: 1;
}
.flatpickr-calendar {
  border: 1px solid #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: #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: #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: #f2f0e8 !important;
}
.flatpickr-weekdays {
  background: #faf9f5;
}
span.flatpickr-weekday {
  color: #716D61 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.flatpickr-day {
  color: #0a0a0a;
  border-radius: var(--radius, 8px);
}
.flatpickr-day:hover {
  background: #f2f0e8;
  border-color: transparent;
}
.flatpickr-day.today {
  border-color: #0a0a0a;
  color: #0a0a0a;
}
.flatpickr-day.today:hover {
  background: #f2f0e8;
  color: #0a0a0a;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #fff !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #a29b8b;
}
.flatpickr-time {
  border-top: 1px solid #e5e2da !important;
  background: #faf9f5;
}
.flatpickr-time input {
  color: #0a0a0a !important;
}
.flatpickr-time .flatpickr-time-separator {
  color: #0a0a0a;
}
.flatpickr-time .numInputWrapper:hover,
.flatpickr-time input:hover {
  background: #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: #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 #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: #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: #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 #e5e2da;
  color: #0a0a0a;
  border-bottom-left-radius: var(--radius, 8px);
}
.albert-msg-user {
  align-self: flex-end;
  background: #0a0a0a;
  color: #fff;
  border-bottom-right-radius: var(--radius, 8px);
}
.albert-msg-typing {
  color: #716D61;
  font-style: italic;
}

.albert-modal-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e5e2da;
  background: #fff;
}
.albert-modal-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e5e2da;
  border-radius: var(--radius-pill, 999px);
  font-family: inherit;
  font-size: 14px;
  background: #faf9f5;
}
.albert-modal-form input:focus {
  outline: none;
  border-color: #0a0a0a;
  background: #fff;
}
.albert-modal-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #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: #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 #e5e2da;
}
.offres-section-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: #faf9f5;
  border: 1px solid #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: #0a0a0a;
}
.offres-section--globales .offres-section-icon {
  background: #0a0a0a;
  border-color: #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: #0a0a0a;
  margin: 0;
  line-height: 1.2;
}
.offres-section-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #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: #0a0a0a !important;
  color: #fff !important;
  border-color: #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: #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: #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: #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: #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: #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 #e5e2da;
  border-left: 3px solid var(--cat-color);
  font-size: 13px;
  font-weight: 500;
  color: #0a0a0a;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  font-family: inherit;
}
.ils-legend-chip:hover {
  background: #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 #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: #faf9f5;
  border: 1px solid #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 #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 #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: #0a0a0a;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #209fb1; /* Bleu logo e-Agora */
}
.ils-map {
  height: 720px;
  width: 100%;
  background: #faf9f5;
}
.ils-map-credit {
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
  color: #5c5648;
  background: #faf9f5;
  border-top: 1px solid #e5e2da;
}
.ils-map-credit a {
  color: #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: #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 #0a0a0a;
  background: #fff;
  color: #0a0a0a;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  margin-top: 8px;
}
.offre-cta:hover {
  background: #0a0a0a;
  color: #fff;
}

.offre-card--best .offre-cta {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}
.offre-card--best .offre-cta:hover {
  background: #e0a800;
  color: #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 #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: #167A39;
  color: #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: #5c5648;
  font-weight: 700;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #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 #e5e2da;
  border-left: 4px solid #e5e2da;
  background: #faf9f5;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.user-opt-tile-readonly.is-active {
  background: #fff;
  border-left-color: #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 #e5e2da;
  color: #5c5648;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-opt-tile-readonly.is-active .user-opt-tile-icon {
  background: #167A39;
  border-color: #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: #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: #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: #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: #faf9f5;
  border: 1px solid #e5e2da;
  border-left: 4px solid #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;
}
.souscription-card:hover {
  background: #fff;
  border-color: #5c5648;
}
.souscription-card:has(input:checked) {
  background: #fff;
  border-left-color: #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 #e5e2da;
  color: #5c5648;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.souscription-card:has(input:checked) .souscription-card-icon {
  background: #167A39;
  border-color: #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: #0a0a0a;
  line-height: 1.3;
}
.souscription-card-desc {
  font-size: 12.5px;
  color: #5c5648;
  line-height: 1.4;
}
.souscription-card-state {
  flex-shrink: 0;
  color: #c7c0b0;
  font-size: 22px;
}
.souscription-card:has(input:checked) .souscription-card-state {
  color: #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: #716D61;
  cursor: pointer;
  user-select: none;
}
.pe-hide-tetiere input[type="checkbox"] {
  accent-color: #b5170d;
  cursor: pointer;
  margin: 0;
}
.pe-hide-tetiere:has(input:checked) {
  color: #b5170d;
  font-weight: 600;
}

/* === pe-signature-card : head optionnel (drag + position + remove) === */
.pe-signature-card {
  position: relative;
  background: #faf9f5;
  border: 1px solid #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 #e5e2da;
}
.pe-signature-drag-handle {
  flex-shrink: 0;
  color: #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: #5c5648;
}
.pe-signature-card-remove {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius, 8px);
  color: #b5170d;
  cursor: pointer;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
}
.pe-signature-card-remove:hover {
  background: #fbded6;
  border-color: #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: #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: #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, #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, #716D61);
  font-weight: 400;
  opacity: 0.6;
}
.seg-toggle .seg-option:hover > span {
  background: var(--cream2, #FAF9F5);
  color: #0a0a0a;
}
.seg-toggle .seg-option input:checked + span {
  background: #0a0a0a;
  color: #fff;
  font-weight: 700;
}
.seg-toggle .seg-option input:focus-visible + span {
  box-shadow: inset 0 0 0 2px #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, #faf9f5);
  border: 1px solid var(--line, #e5e2da);
  border-radius: var(--radius, 8px);
  color: var(--ink, #0a0a0a);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.dossier-calendar-btn:hover {
  background: var(--ink, #0a0a0a);
  color: #fff;
  border-color: var(--ink, #0a0a0a);
}
.dossier-calendar-btn :is([class^="ri-"], [class*=" ri-"]) {
  font-size: 22px;
}
.dossier-calendar-btn--disabled {
  background: #fbded6;
  color: #b5170d;
  border-color: #f1c3b6;
  cursor: not-allowed;
}
.dossier-calendar-btn--disabled:hover {
  background: #fbded6;
  color: #b5170d;
  border-color: #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, #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, #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, #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, #c8102e) (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, #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 #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: #faf9f5;
  border-right: 1px solid #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 #e5e2da;
  border-radius: var(--radius, 8px);
  padding: 0 10px;
  margin-bottom: 10px;
  height: 36px;
}
.dest-search > i {
  font-size: 16px;
  color: #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: #0a0a0a;
}
.dest-search input::placeholder {
  color: #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 #e5e2da;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dest-cat-v2:hover {
  background: #f2f0e8;
  border-color: #0a0a0a;
}
.dest-cat-v2.is-selected {
  background: #fff;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 1px #0a0a0a inset;
}
.dest-cat-v2.has-children-selected {
  border-color: #167A39;
}
.dest-cat-v2-icon {
  font-size: 18px;
  color: #0a0a0a;
  flex: 0 0 auto;
}

.dest-cat-v2-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: #0a0a0a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dest-cat-v2-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #167A39;
  background: #d6f2de;
  padding: 2px 6px;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}
.dest-cat-v2-chevron {
  font-size: 16px;
  color: #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 #e5e2da;
}
.dest-details-v2-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0a0a0a;
}
.dest-details-v2-title i {
  font-size: 20px;
  color: #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: #0a0a0a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.dest-action-link:hover {
  color: #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: #faf9f5;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  font-size: 12px;
  color: #0a0a0a;
  line-height: 1.5;
}
.dest-info-banner > i {
  font-size: 16px;
  color: #716D61;
  flex: 0 0 auto;
}
.dest-info-banner strong {
  color: #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: #faf9f5;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dest-master:hover {
  background: #f2f0e8;
  border-color: #0a0a0a;
}

.dest-master-icon {
  font-size: 22px;
  color: #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: #0a0a0a;
}
.dest-master-hint {
  font-size: 12px;
  font-weight: 400;
  color: #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 #e5e2da;
  border-radius: var(--radius-control, 3px);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dest-item-v2:hover {
  background: #f2f0e8;
  border-color: #0a0a0a;
}
.dest-item-v2:has(input:checked) {
  background: #f0f9f2;
  border-color: #167A39;
}

.dest-item-v2--sub {
  margin-left: 24px;
}
.dest-item-v2-icon {
  font-size: 16px;
  color: #716D61;
  flex: 0 0 auto;
}
.dest-item-v2:has(input:checked) .dest-item-v2-icon {
  color: #167A39;
}
.dest-item-v2-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  color: #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: #faf9f5;
  border: 1px solid #e5e2da;
  border-radius: var(--radius, 8px);
}
.dest-summary-icon {
  flex: 0 0 auto;
  font-size: 22px;
  color: #167A39;
}
.dest-summary-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: #0a0a0a;
}
.dest-summary-strong {
  font-weight: 700;
  color: #0a0a0a;
}
.dest-summary-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #b5170d;
  border-radius: var(--radius, 8px);
  color: #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: #b5170d;
  color: #fff;
}
.dest-summary-reset i {
  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 #E5E2DA;
  background: #fff;
  margin-bottom: 10px;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.item-card.is-current { box-shadow: inset 3px 0 0 0 #167A39; }

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

.item-card-vignette {
  background: #D7D2C8;
  color: #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: #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: #5C5648; font-size: 13px; }
.item-card-vignette--consult strong { font-size: 22px; color: #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: #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: #5C5648; }
.item-card-body .item-card-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 4px 8px; background: #F2F0E8;
  border-radius: var(--radius, 8px); color: #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 #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 #E5E2DA;
  background: #fff;
  cursor: pointer;
  border-radius: var(--radius, 8px);
  color: #0A0A0A;
  padding: 0;
  text-decoration: none;
}
.item-card-actions .btn-icon:hover { background: #F2F0E8; }
.item-card-actions .btn-icon.is-delete { color: #B5170D; border-color: #E5BFBA; }
.item-card-actions .btn-icon.is-delete:hover { color: #fff; background: #B5170D; border-color: #B5170D; }

/* ----- PE4 public : vignette + body + CTA ----- */
.pub-item {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: stretch;
  border: 1px solid #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: #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: #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: #5C5648; font-size: 13px; }
.pub-item-vignette--consult strong { font-size: 28px; color: #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: #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: #F2F0E8;
  border-radius: var(--radius, 8px); color: #5C5648; font-weight: 500;
}

.pub-item-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-left: 1px solid #E5E2DA;
  background: #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: #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, #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 #E5E2DA;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.pub-item-contact-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: #FAF9F5;
  border: 1px solid #E5E2DA;
  border-radius: var(--radius, 8px);
  font-size: 13px;
  line-height: 1.5;
  color: #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, #0A0A0A);
  border: 1px solid var(--publi-button-color, #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, #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: #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: #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, #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: #F2F0E8;
    border-radius: var(--radius, 8px); color: #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, #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, #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, #167A39));
    border: 1px solid var(--publi-color, var(--publi-button-color, #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: #5C5648;
}
.pub-item-body a.badge:hover,
.item-card-body a.badge:hover {
    background: #E5E2DA;
    color: #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(--text-muted, #6b6b6b);
    }
    .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: #0A0A0A; margin: 0 0 10px; }
.cm-empty { padding: 24px 0; text-align: center; color: #716D61; font-size: 14px; }
.cm-card { background: #fff; border: 0.5px solid #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: #0A0A0A; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: break-word; margin-bottom: 3px; }
.cm-card-meta { font-size: 12.5px; color: #716D61; line-height: 1.5; margin: 0 0 12px; }
.cm-card-rcp { color: #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: #716D61; }
.cm-stat-val { font-size: 16px; font-weight: 600; color: #0A0A0A; }
.cm-stat-val.cm-pos { color: #167A39; }
.cm-stat-val.cm-neg { color: #B5170D; }
.cm-stat-val.cm-note { color: #BA7517; }
.cm-stat-lbl { font-size: 11px; color: #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: #167A39; }
.cm-card-draft { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #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 #E5E2DA; }
.cm-act { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #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: #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 #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: #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: #167A39; }
.contrib-badge--off { background: #F1EFE8; color: #716D61; }
.contrib-card-mail { font-size: 13px; color: #716D61; margin-bottom: 12px; overflow-wrap: break-word; }
.contrib-card-droits-lbl { font-size: 12px; color: #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: #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: #A29B8B; }
.contrib-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 0.5px solid #E5E2DA; }
.contrib-act { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #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: #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 #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: #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: #716D61; }
.mobile-navbar__btn:active i,
.mobile-navbar__btn:active span { color: #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: #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 #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 #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: #FAF9F5;
  border: 1px solid #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: #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 #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, #E5E2DA); }
.mails-contenus .mc-titre {
    font-weight: 600;
    text-decoration: none;
    color: var(--text, #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, #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: #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. */
.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;
}
.sender-etat--ok :is([class^="ri-"], [class*=" ri-"]) { color: #167A39; }

/* 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: #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: #FAF9F5;
    border: 1px solid #E5E2DA;
    border-radius: 8px;
    box-sizing: border-box;
}
.ce-sd[hidden] { display: none; }
.ce-sd-titre {
    font-size: 12px;
    color: #716D61;
    margin: 0 0 8px;
}
.ce-sd-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ce-sd-item {
    padding: 8px 12px;
    border: 1px solid #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: #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;
}