/* =============================================================
   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: .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; }
.env-chip { border: 1px solid #E5E2DA; padding: 2px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .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;
}
@media (max-width: 1024px) { .app { grid-template-columns: 1fr; } }

/* --- Home page — version mobile (essentiel : nom + menu + déconnexion) --- */
.home-mobile { display: none; }
@media (max-width: 1024px) {
  .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; }

.home-mobile-header {
  padding: 16px 0 20px;
  border-bottom: 1px solid #E5E2DA;
  margin-bottom: 16px;
}
.home-mobile-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-mobile-avatar {
  width: 44px;
  height: 44px;
  background: #0A0A0A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  border-radius: 50%;
}
.home-mobile-hello {
  margin: 0;
  font-size: 12px;
  color: #7A7568;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.home-mobile-name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #0A0A0A;
}

/* Menu accordéon mobile — 5 sections principales, fond noir (même charte que sidebar desktop) */
.home-mobile-acc {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
  background: #0A0A0A;
  color: #fff;
}
.home-mobile-acc-item {
  border-bottom: 1px solid #1F1F1F;
}
.home-mobile-acc-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  cursor: pointer;
  background: #0A0A0A;
  color: #F2F0E8;
  list-style: none;
  user-select: none;
  transition: background .15s;
}
.home-mobile-acc-summary::-webkit-details-marker { display: none; }
.home-mobile-acc-summary:hover { background: #1A1A1A; }
.home-mobile-acc-item[open] > .home-mobile-acc-summary {
  background: #1A1A1A;
  color: #fff;
  border-left: 3px solid #fff;
  padding-left: 11px;
}
.home-mobile-acc-icon { font-size: 24px; color: #A29B8B; flex-shrink: 0; }
.home-mobile-acc-item[open] > .home-mobile-acc-summary .home-mobile-acc-icon { color: #fff; }
.home-mobile-acc-label {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
}
.home-mobile-acc-chevron {
  font-size: 24px;
  color: #A29B8B;
  transition: transform .2s;
  flex-shrink: 0;
}
.home-mobile-acc-item[open] > .home-mobile-acc-summary .home-mobile-acc-chevron {
  color: #fff;
  transform: rotate(180deg);
}
.home-mobile-acc-links {
  display: flex;
  flex-direction: column;
  background: #0A0A0A;
  padding: 4px 0 10px;
}
.home-mobile-acc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 50px;
  color: #D8D3C6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-left: 2px solid #2A2A2A;
  margin-left: 28px;
}
.home-mobile-acc-link:hover {
  background: #1A1A1A;
  color: #fff;
}
.home-mobile-acc-link .mi { font-size: 18px; color: #A29B8B; flex-shrink: 0; }
.home-mobile-acc-link:hover .mi { color: #fff; }

.home-mobile-logout-form { margin-top: 8px; }
.home-mobile-logout-btn {
  width: 100%;
  justify-content: center;
}

/* Masque le burger sur la home mobile — le menu est déjà la page */
@media (max-width: 1024px) {
  body.page-accueil .burger-btn { display: none; }
}
html.preview-tablet body.page-accueil .burger-btn,
html.preview-mobile body.page-accueil .burger-btn { display: none; }

/* 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) {
  .topbar #settings { display: none; }
}
html.preview-tablet .topbar #settings,
html.preview-mobile .topbar #settings { display: none !important; }

/* --- Burger + Menu drawer (mobile/tablette) --- */
.burger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0A0A0A;
  cursor: pointer;
  margin-right: 4px;
}
.burger-btn .mi { font-size: 24px; }
.burger-btn:hover { background: #FAF9F5; }

/* Afficher le burger + passer le menugauche en drawer < 1024px OU en preview mobile/tablet */
@media (max-width: 1024px) {
  .burger-btn { display: inline-flex; }
  .menugauche {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform .25s ease-in-out;
    z-index: 1000;
    overflow-y: auto !important;
  }
  .menugauche.is-open { transform: translateX(0); }
}
html.preview-tablet .burger-btn,
html.preview-mobile .burger-btn { display: inline-flex; }
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 .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 .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 .15s, color .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.
   Le burger doit rester visible DANS la zone de preview. */
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) { .menugauche { display: none !important; } }

/* --- Items menu --- */
.menu-section { color: #A29B8B; font-size: 11px; text-transform: uppercase; letter-spacing: .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 .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: .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: .55; }
.menu-link--locked:hover { opacity: .8; }
.menu-link .menu-link-lock { font-size: 14px; opacity: .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; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .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: #0B2FBE; color: #fff; border-color: #0B2FBE; }
.btn-accent:hover { background: #1E4AE9; }
.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; 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: .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: #fff; border: 1px solid #E5E2DA; padding: 14px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: #0A0A0A; min-height: 110px; transition: border-color .15s, background .15s; }
.type-tile:hover { border-color: #0A0A0A; background: #FAF9F5; }
.type-tile .mi { font-size: 28px; color: #0B2FBE; }
.type-tile .lbl { font-weight: 700; font-size: 14px; line-height: 1.25; }
.type-tile .sub { font-size: 12px; 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; color: #0A0A0A; font-family: inherit; font-size: 13px; box-sizing: border-box; }
.field:focus { outline: none; border-color: #0B2FBE; box-shadow: 0 0 0 1px #0B2FBE inset; }
/* 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: #0B2FBE;
  box-shadow: 0 0 0 1px #0B2FBE 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 8px; font-size: 12px; font-weight: 500; background: #F2F0E8; color: #0A0A0A; border: 1px solid #E5E2DA; }
.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: #E7ECFE; border-color: #C9D4FB; color: #0B2FBE; }
.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: .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 .1s; }
.tab-top:hover { background: #FAF9F5; }
.tab-top[aria-selected="true"],
.tab-top.active { color: #0A0A0A; border-bottom-color: #0A0A0A; 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; }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .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: #0B2FBE; }
.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: #0B2FBE; }

/* --- Annuaire / facettes --- */
.bdc-card { background: #FFFFFF; border: 1px solid #E5E2DA; }
.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[aria-selected="true"] { background: #FFFFFF; color: #0A0A0A; font-weight: 700; border-bottom-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: .75rem 1rem; z-index: 300; text-decoration: underline; font-weight: 500; }
.skip-link:focus { left: 0; }
*:focus-visible { outline: 2px solid #0B2FBE; 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; }
  .steps { flex-direction: column; align-items: flex-start; }
  .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: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; margin: 10px 0 0; }
.contact-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .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: #0B2FBE; 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 --- */
.settingsdiv { top: 60px !important; }

/* --- 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: #0A0A0A; color: #fff; border: 1px solid #0A0A0A; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .15s; }
.boutonprin:hover { background: #000; color: #fff; }
.boutonsec { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; font-weight: 500; font-size: 14px; background: #fff; color: #0A0A0A; border: 1px solid #E5E2DA; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .15s, border-color .15s; }
.boutonsec:hover { background: #FAF9F5; border-color: #0A0A0A; }
.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 .15s; }
.onglet:hover { background: #F2F0E8; color: #141413; }
.ongletselection { height: auto; padding: 10px 14px; background: transparent; border: none; border-bottom: 3px solid #0A0A0A; 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: .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: .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:checked + .accordion-title .chevron-up { display: none; }
.accordion input:not(: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 #0B2FBE; }

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

/* --- Pickers date/heure v8 (champs saisissables + bouton calendrier) --- */
.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: 14px;
  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;
}
.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: #0B2FBE;
  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);
  }
}

/* --- Segmented control v8 (radio buttons stylisés en pilule/onglets) ---
   Usage : <div class="segmented-control [segmented-control--equal|--vertical]">
             <label class="seg-option"><input type="radio" name="x"><span>Label</span></label>
             ...
           </div>
   Identique aux contrôles "Mention inscription" (publication_etape_1).
   Rendu : inactif = gris clair, actif = noir + blanc. */
.segmented-control {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}
.seg-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.seg-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.seg-option > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-right: 1px solid var(--line);
  transition: background 0.15s, color 0.15s;
  user-select: none;
  white-space: nowrap;
}
.seg-option > span .mi { font-size: 18px; line-height: 1; }
.seg-option > span .seg-sep { color: var(--muted); font-weight: 400; opacity: .6; }
.seg-option:last-child > span { border-right: 0; }
.seg-option:hover > span { background: var(--cream2); color: var(--ink); }
.seg-option input:checked + span {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.seg-option input:focus-visible + span {
  box-shadow: inset 0 0 0 2px var(--accent, #0B2FBE);
}
/* Variante "equal" : options à largeur égale */
.segmented-control--equal {
  display: flex;
  width: 100%;
}
.segmented-control--equal .seg-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.segmented-control--equal .seg-option > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 8px;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  box-sizing: border-box;
}
/* Variante verticale (pour options longues) */
.segmented-control--vertical {
  flex-direction: column;
  align-items: stretch;
  display: flex;
  width: 100%;
}
.segmented-control--vertical .seg-option > span {
  border-right: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.segmented-control--vertical .seg-option:last-child > span { border-bottom: 0; }

/* --- 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 .2s ease, box-shadow .2s ease, background .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 .15s ease, transform .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 .15s ease, box-shadow .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 .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 .15s ease, color .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;
}