/* =============================================================
   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;
  background: #0a0a0a;
  color: #fff;
  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 .mi {
  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: #0a0a0a; }
.brand--login { gap: 11px; }
.brand--login .brand-mark { width: 38px; height: 38px; font-size: 18px; border-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: 7px; }
.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: #7a7568;
  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: 8px;
  padding: 13px 14px;
  text-decoration: none;
  margin-bottom: 16px;
}
.home-mobile-cta .mi,
.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 .mi,
.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: 8px;
  padding: 13px 14px;
  color: #0a0a0a;
  text-decoration: none;
}
.home-mobile-tile:hover {
  background: #fff;
  border-color: #0a0a0a;
}
.home-mobile-tile .mi,
.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 .mi {
  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: 6px; padding: 12px; }
.dp-card-check { 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: #7a7568; margin-top: 1px; overflow-wrap: anywhere; }
.dp-card-line { font-size: 12.5px; color: #0a0a0a; margin-top: 3px; }
.dp-card-dates { color: #7a7568; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dp-card-statutmeta { color: #7a7568; }
.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 .mi { font-size: 20px; color: #b5170d; }
.dp-card-trash:hover .mi { color: #8e120a; }
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  .page-demandes_presse .dp-card-check,
  .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 .dp-card-check,
html.preview-tablet .page-demandes_presse .dp-selectall,
html.preview-tablet .page-demandes_presse .dp-del-btn,
html.preview-mobile .page-demandes_presse .dp-card-check,
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 .mi,
.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 .mi {
  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: #7a7568;
  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 .mi {
  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: #fff;
  font-weight: 700;
}
.menu-link .mi {
  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 {
  color: #20b6b6;
}
.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: 6px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
  min-height: 38px;
  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 {
  background: transparent;
  color: #0a0a0a;
  border-color: transparent;
}
.btn-ghost:hover {
  background: #f2f0e8;
}
.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 32px;
}
.btn-danger {
  background: #fff;
  color: #b5170d;
  border-color: #f1c3b6;
}
.btn-danger:hover {
  background: #fbded6;
  border-color: #b5170d;
}

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

/* --- Cards plates --- */
.card {
  background: #fff;
  border: 1px solid #e5e2da;
  border-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: 6px;
  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 {
  transform: scale(1.03);
  border-color: #0a0a0a;
  background: #fff;
  cursor: zoom-in;
}
.type-tile:active {
  transform: scale(1.01);
}
.type-tile .mi,
.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: #7a7568;
  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: #7a7568;
}

/* --- 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: 6px;
  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: 6px;
}
.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: #7a7568;
  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: 999px;
}
.chip-ok {
  background: #d6f2de;
  border-color: #bbe2c6;
  color: #167d3a;
}
.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: #167d3a;
}
.chip-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 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: #7a7568;
  background: #faf9f5;
  border-bottom: 1px solid #e5e2da;
  white-space: nowrap;
}
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 .mi {
  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: #b5170d;
  font-weight: 700;
}

/* --- Fil d'Ariane --- */
.crumb {
  font-size: 13px;
  color: #7a7568;
  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: 0;
}
.avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

/* --- KPI --- */
.kpi {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5e2da;
  border-radius: 8px;
}
.kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a7568;
  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: #7a7568;
}
.kpi-delta.ok {
  color: #167d3a;
}
.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: #7a7568;
  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: #7a7568;
  border-radius: 6px;
  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: #167d3a;
  border-color: #167d3a;
  background: #f0f9f2;
}
.vip-badge.is-vip:hover {
  background: #d6f2de;
  border-color: #167d3a;
}
.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 #167d3a;
  background: #f0f9f2;
  color: #167d3a;
  border-radius: 4px;
  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: #7a7568;
  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: #b5170d;
}
/* === 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: 6px; 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: 6px; 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;
  width: 16px;
  height: 16px;
  accent-color: #0a0a0a;
}
.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;
}

/* --- Icônes Material Symbols --- */
.mi {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
  font-variation-settings:
    "wght" 400,
    "GRAD" 0,
    "opsz" 24,
    "FILL" 0;
  user-select: none;
}

/* --- 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). */
.pub-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  background-color: transparent;
  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/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border: none;
}
.pub-toggle 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='rgba(22,125,58,1)'%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/svg%3E");
}
.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;
}
.text-muted {
  color: #7a7568;
}
.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: #167d3a;
  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 #167d3a;
  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;
  padding: 12px 14px;
}
.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: #7a7568;
  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: #7a7568;
  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: 4px;
  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: 6px;
  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: 6px;
  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;
}
.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 #167D3A.
   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="checkbox"],
input[type="range"],
progress,
meter {
  accent-color: #167d3a;
}

/* === PAS DE BLEU sur la sélection de texte : vert charte (--ok #167D3A) au lieu du highlight bleu navigateur. === */
::selection {
  background: #167d3a;
  color: #fff;
}
::-moz-selection {
  background: #167d3a;
  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: #7a7568;
  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 #b5170d;
  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: #7a7568;
  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: 6px;
  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 .mi {
  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: 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: 6px;
}
.zones-container-tag .tags-master-row .tags-master-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #167d3a;
}
.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: #167d3a;
  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: #7a7568;
}

/* 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: 6px;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
  overflow: hidden;
}
.zones-container-tag .col31:hover {
  border-color: #167d3a;
  background: #f0f9f2;
}
.zones-container-tag .col31 input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #167d3a;
}
/* 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: #7a7568;
  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: #167d3a;
  background: #f0f9f2;
}
.zones-container-tag .col31:has(input:checked) label > i {
  color: #167d3a;
}

/* --- 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: #7a7568;
  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: 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: #7a7568;
  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 .mi {
  font-size: 20px;
}

/* --- 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: 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: 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: 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: 10px !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: 10px 10px 0 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #fff !important;
}
.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: #7a7568 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.flatpickr-day {
  color: #0a0a0a;
  border-radius: 6px;
}
.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: 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 .mi {
  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: 16px;
  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 .mi {
  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: 6px;
  transition: background 0.15s;
}
.albert-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.albert-modal-close .mi {
  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: 14px;
  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: 4px;
}
.albert-msg-user {
  align-self: flex-end;
  background: #0a0a0a;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.albert-msg-typing {
  color: #7a7568;
  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: 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 .mi {
  font-size: 20px;
}

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

/* Ancien composant .segmented-control fusionné dans .seg-toggle (plus bas) :
   une seule classe toggle pour tout le site — boutons ET radios multi-options
   (variantes .seg-toggle--equal / .seg-toggle--vertical). */

/* --- Checkbox "suppression" v8 ---
   Décoché : neutre (comme toute checkbox du site).
   Coché : rouge (outline + check rouge). Usage : class="checkbox-delete"
   sur l'input[type=checkbox]. Réservé aux cas de suppression/refus.
   Auto-suffisante : fonctionne même sur les pages qui ne chargent pas
   de règle globale `input[type="checkbox"]`. */
input[type="checkbox"].checkbox-delete {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px;
  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='currentColor'%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") !important;
  color: var(--ghost);
  cursor: pointer;
  vertical-align: middle;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
input[type="checkbox"].checkbox-delete:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(153,22,50,1)'%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") !important;
}
input[type="checkbox"].checkbox-delete:focus-visible {
  outline: 2px solid #0053b3;
  outline-offset: 2px;
}

/* ===========================================================================
   « 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: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.offres-section-icon .mi {
  font-size: 26px;
  color: #0a0a0a;
}
.offres-section--globales .offres-section-icon {
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.offres-section--globales .offres-section-icon .mi {
  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: 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 .mi {
  font-size: 20px;
  color: #167d3a;
  flex-shrink: 0;
  margin-top: 1px;
}
.offre-card--best .offre-features li .mi {
  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 .mi,
.ils-legend-chip.is-active em {
  color: #fff;
}
.ils-legend-chip .mi {
  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: 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 .mi {
  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: 999px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.3);
  color: #fff;
}
.ils-marker .mi {
  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: 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: #167d3a;
  color: #167d3a;
}
.pe-network-item .mi {
  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: #167d3a;
}
.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: #167d3a;
  border-color: #167d3a;
  color: #fff;
}
.user-opt-tile-readonly .user-opt-tile-icon .mi {
  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 .mi {
  font-size: 22px;
}
.user-opt-tile-readonly .user-opt-tile-chevron {
  color: #7a7568;
  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;
}
.souscription-card-checkbox {
  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: #167d3a;
  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: #167d3a;
  border-color: #167d3a;
  color: #fff;
}
.souscription-card-icon .mi {
  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: #167d3a;
}

/* === pe-signature-card : head optionnel (drag + position + remove) === */
.pe-signature-card {
  position: relative;
  background: #faf9f5;
  border: 1px solid #e5e2da;
  border-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: #7a7568;
  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: 4px;
  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 .mi {
  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: 6px;
  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, #7A7568);
  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 .mi {
  font-size: 18px;
  line-height: 1;
}
.seg-toggle .seg-option > span .seg-sep {
  color: var(--muted, #7A7568);
  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: 6px;
}

/* ============================================================
   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: 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 .mi {
  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: 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: 6px;
  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: 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: 6px;
  padding: 0 10px;
  margin-bottom: 10px;
  height: 36px;
}
.dest-search > i {
  font-size: 16px;
  color: #7a7568;
  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: 6px;
  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: #167d3a;
}
.dest-cat-v2-icon {
  font-size: 18px;
  color: #0a0a0a;
  flex: 0 0 auto;
}
.dest-cat-v2-inline-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid #c8c4bc;
  border-radius: 4px;
  background: #fff;
  position: relative;
}
.dest-cat-v2-inline-check:checked {
  background: #167d3a;
  border-color: #167d3a;
}
.dest-cat-v2-inline-check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.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: #167d3a;
  background: #d6f2de;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.dest-cat-v2-chevron {
  font-size: 16px;
  color: #7a7568;
  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: 6px;
  font-size: 12px;
  color: #0a0a0a;
  line-height: 1.5;
}
.dest-info-banner > i {
  font-size: 16px;
  color: #7a7568;
  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: 6px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dest-master:hover {
  background: #f2f0e8;
  border-color: #0a0a0a;
}
.dest-master input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid #c8c4bc;
  border-radius: 4px;
  background: #fff;
  position: relative;
}
.dest-master input[type="checkbox"]:checked {
  background: #167d3a;
  border-color: #167d3a;
}
.dest-master input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dest-master-icon {
  font-size: 22px;
  color: #167d3a;
  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: #7a7568;
}

/* 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: 6px;
  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: #167d3a;
}
.dest-item-v2 input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid #c8c4bc;
  border-radius: 4px;
  background: #fff;
  position: relative;
}
.dest-item-v2 input[type="checkbox"]:checked {
  background: #167d3a;
  border-color: #167d3a;
}
.dest-item-v2 input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dest-item-v2--sub {
  margin-left: 24px;
}
.dest-item-v2-icon {
  font-size: 16px;
  color: #7a7568;
  flex: 0 0 auto;
}
.dest-item-v2:has(input:checked) .dest-item-v2-icon {
  color: #167d3a;
}
.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: 8px;
}
.dest-summary-icon {
  flex: 0 0 auto;
  font-size: 22px;
  color: #167d3a;
}
.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: 6px;
  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: 6px;
  overflow: hidden;
}
.item-card.is-current { box-shadow: inset 3px 0 0 0 #167D3A; }

.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 .mi { 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: 4px; }
.item-card-vignette--newsletter.is-empty { color: #9C9789; font-size: 12px; font-weight: 500; gap: 6px; }
.item-card-vignette--newsletter.is-empty .mi { 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 .mi { 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: 6px; 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: 4px;
  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: 6px;
  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: 4px; }
.pub-item-vignette--newsletter.is-empty { color: #9C9789; font-size: 12px; gap: 6px; }
.pub-item-vignette--newsletter.is-empty .mi { 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 .mi { 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: 6px; 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 .mi { 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 .mi { 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: 6px;
  overflow: hidden;
}
.pub-item-contact-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: #FAF9F5;
  border: 1px solid #E5E2DA;
  border-radius: 4px;
  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: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.pub-item-btn .mi { font-size: 16px; }
.pub-item-btn--primary {
  background: var(--publi-button-color, #167D3A);
  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: #7A7568;
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
.pub-item-inscription-locked .mi { 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 .mi { 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: 6px; 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 .mi { 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, #167D3A));
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    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, #167D3A));
    border: 1px solid var(--publi-color, var(--publi-button-color, #167D3A));
    padding: 9px 17px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    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;
    max-width: 16rem;
    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 900px de conteneur : table classique.
   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: 900px) {
    .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: 6px;
        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;
    border-radius: 8px;
  }
  .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: 4px;
  }
  .accueil-publique #login .mdpdiv {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    border-radius: 4px;
  }
  .accueil-publique #login .mdp { flex: 1; width: auto; min-width: 0; }
  .accueil-publique #login .boutonprin {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    height: 44px;
    font-size: 15px;
    border-radius: 4px;
  }
  .accueil-publique #login .forgotmdp { width: 100%; text-align: center; padding: 4px 0; }

  .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: #7A7568; font-size: 14px; }
.cm-card { background: #fff; border: 0.5px solid #E5E2DA; border-radius: 12px; 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: #7A7568; line-height: 1.5; margin: 0 0 12px; }
.cm-card-rcp { color: #167D3A; 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: 8px; }
.cm-stat .mi { font-size: 16px; color: #7A7568; }
.cm-stat-val { font-size: 16px; font-weight: 600; color: #0A0A0A; }
.cm-stat-val.cm-pos { color: #167D3A; }
.cm-stat-val.cm-neg { color: #B5170D; }
.cm-stat-val.cm-note { color: #BA7517; }
.cm-stat-lbl { font-size: 11px; color: #7A7568; text-align: center; line-height: 1.15; }
.cm-stat-perf { background: #E3F1E8; }
.cm-stat-perf .mi,
.cm-stat-perf .cm-stat-val,
.cm-stat-perf .cm-stat-lbl { color: #167D3A; }
.cm-card-draft { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #7A7568; background: #FAF8F2; border-radius: 8px; padding: 9px 10px; }
.cm-card-draft .mi { 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 .mi { 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: 10px; 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: 20px; }
.contrib-badge .mi { font-size: 13px; }
.contrib-badge--on { background: #E3F1E8; color: #167D3A; }
.contrib-badge--off { background: #F1EFE8; color: #7A7568; }
.contrib-card-mail { font-size: 13px; color: #7A7568; margin-bottom: 12px; overflow-wrap: break-word; }
.contrib-card-droits-lbl { font-size: 12px; color: #7A7568; 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: 6px; background: #E3F1E8; color: #167D3A; }
.contrib-chip .mi { 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 .mi { 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: #7A7568; }
.mobile-navbar__btn:active i,
.mobile-navbar__btn:active span { color: #167D3A; }
/* 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: 6px; 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: 6px;
  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: 6px;
  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: #7A7568;
  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. */