* {
  box-sizing: border-box;
}

/* Jamais de défilement horizontal au niveau du document : le tiroir de l'aside
   vit hors écran (transform) et les contenus larges (tableaux, code) ont leur
   propre conteneur défilant. Cette garde évite tout débordement horizontal
   résiduel (barre de défilement fantôme). */
html,
body {
  overflow-x: hidden;
}

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --danger: #dc2626;
  --text: #1f2937;
  --text-light: #6b7280;
  --border: #e5e7eb;
  --bg: #f9fafb;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  /* Zones sûres pour l'affichage mobile (encoche, barre système) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* --- Footer sticky : en bas de l'écran si la page est courte,
       en fin de page si elle défile --- */
.public-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.public-shell main.container {
  flex: 1;
  width: 100%;
}

.footer {
  background: #fff;
  border-top: 1px solid var(--border);
  color: var(--text-light);
  font-size: 0.88rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px;
}

.footer-brand-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  color: var(--text);
}

.footer-brand-name img {
  height: 32px;
}

.footer-brand p {
  margin: 10px 0 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col h3 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.footer-col a {
  color: var(--text-light);
  text-decoration: none;
  width: fit-content;
}

.footer-col a:hover,
.footer-col a.active {
  color: var(--primary);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}

.footer-social-icons {
  display: flex;
  gap: 8px;
}

.footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
}

.footer-social-icons img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.footer-cookies {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-cookies a,
.footer-cookies button {
  color: var(--text-light);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
}

.footer-cookies a:hover,
.footer-cookies button:hover {
  color: var(--primary);
}

@media (max-width: 720px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
  }

  /* Bas de footer empilé et centré (copyright / réseaux / cookies) */
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 16px 20px;
  }

  .footer-cookies {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* --- Back office : CRUD réseaux sociaux --- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.page-header h1 {
  margin: 0;
}

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filters input,
.filters select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
}

.filters input {
  flex: 1;
  min-width: 220px;
}

/* Mobile : chaque filtre (recherche + selects statut/tri) empilé, pleine largeur */
@media (max-width: 720px) {
  .filters {
    flex-direction: column;
  }

  .filters input,
  .filters select {
    width: 100%;
    min-width: 0;
  }
}

tr[draggable='true'] {
  cursor: grab;
}

.social-drag {
  color: var(--text-light);
  width: 28px;
}

/* Poignée de réordonnancement : glisser à la souris ou flèches haut/bas au
   clavier (accessibilité). Apparence de simple poignée, focus visible. */
.drag-handle {
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
  padding: 4px 6px;
  border-radius: 6px;
}

.drag-handle:hover {
  color: var(--text);
}

.drag-handle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  color: var(--text);
}

/* Boutons monter / descendre : réordonnancement au tactile (mobile), où le
   glisser HTML5 ne fonctionne pas. Masqués en desktop (drag souris + clavier). */
.reorder-buttons {
  display: none;
  gap: 6px;
}

.reorder-btn {
  width: 34px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.reorder-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.reorder-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Le vrai critère du réordonnancement tactile n'est pas la taille d'écran mais
   le type de pointeur : `pointer: coarse` = l'input principal est le doigt,
   donc le glisser HTML5 ne fonctionne pas. On y ajoute `max-width: 720px` en
   filet de sécurité (vue carte / fenêtre étroite). Dans ces cas : la poignée de
   glisser (souris) est masquée et les boutons monter/descendre apparaissent -
   y compris en tableau normal (tablette tactile en paysage). Le glisser souris
   reste intact sur desktop à pointeur fin. */
@media (pointer: coarse), (max-width: 720px) {
  .drag-cell .drag-handle {
    display: none;
  }

  .drag-cell .reorder-buttons {
    display: inline-flex;
  }
}

.social-logo img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: block;
}

.table-link {
  color: var(--text-light);
  text-decoration: none;
}

.table-link:hover {
  color: var(--primary);
}

table .toggle-row {
  /* Dans un tableau, le libellé est vide : on ne veut pas d'un flex pleine
     largeur avec justify-content:space-between (qui pousse l'interrupteur tout
     à droite de la cellule, loin de son en-tête). L'interrupteur se cale donc
     à gauche, sous son en-tête. */
  display: inline-flex;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* --- Formulaire de contact (public) --- */
.contact-card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

/* Honeypot anti-spam : hors écran, invisible pour les humains */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Messages de contact (back office) --- */
.nav-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.badge-unread {
  background: #fef2f2;
  color: var(--danger);
}

.badge-banned {
  background: var(--danger);
  color: #fff;
}

.badge-read {
  background: var(--bg);
  color: var(--text-light);
}

.row-unread td {
  background: #f8faff;
}

.contact-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-head-infos {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.contact-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 12px;
  white-space: pre-wrap;
}

.bubble p {
  margin: 0 0 6px;
}

.bubble-in {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
}

.bubble-out {
  align-self: flex-end;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.bubble-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-light);
}

/* --- SEO (back office) --- */
.seo-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.seo-tabs a {
  padding: 10px 16px;
  color: var(--text-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-size: 0.95rem;
}

.seo-tabs a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.seo-google {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 600px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.seo-google-url {
  font-size: 0.8rem;
  color: #0f7a3d;
}

.seo-google-title {
  font-size: 1.15rem;
  color: #1a0dab;
}

.seo-google-desc {
  font-size: 0.88rem;
  color: var(--text-light);
}

.seo-social-card {
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.seo-social-card img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  display: block;
}

.seo-social-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  font-size: 0.9rem;
}

/* --- Éditeur WYSIWYG (Tiptap) --- */
.rte {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.rte-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.rte-btn {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text);
}

.rte-btn:hover {
  border-color: var(--primary);
}

.rte-btn-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.rte-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.rte .ProseMirror {
  min-height: 320px;
  padding: 14px 16px;
  outline: none;
  font-weight: 400;
}

.rte .ProseMirror h2 {
  font-size: 1.25rem;
  margin: 16px 0 8px;
}

.rte .ProseMirror h3 {
  font-size: 1.05rem;
  margin: 12px 0 6px;
}

.rte .ProseMirror blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--border);
  color: var(--text-light);
}

.rte .ProseMirror a {
  color: var(--primary);
}

/* --- Tableaux du WYSIWYG (édition) et du rendu public (.rich-html) --- */
.rte .ProseMirror table,
.rich-html table {
  border-collapse: collapse;
  margin: 12px 0;
}

.rte .ProseMirror th,
.rte .ProseMirror td,
.rich-html th,
.rich-html td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  min-width: 60px;
}

.rte .ProseMirror th,
.rich-html th {
  background: var(--bg);
  font-weight: 600;
}

/* Cellule(s) sélectionnée(s) dans l'éditeur (extension table) */
.rte .ProseMirror .selectedCell {
  position: relative;
}

.rte .ProseMirror .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, 0.12);
  pointer-events: none;
}

/* Côté public : un large tableau défile horizontalement dans son cadre
   au lieu de casser la mise en page (mobile). */
.rich-html table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* --- Pages légales --- */
.legal-page {
  max-width: 1120px;
}

.legal-preview {
  max-width: 760px;
}

/* Mise en page : sommaire à gauche (collant), contenu à droite */
.legal-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  align-items: start;
}

.legal-layout-solo {
  grid-template-columns: 1fr;
  max-width: 760px;
}

.legal-main {
  min-width: 0;
}

.legal-aside {
  position: sticky;
  top: 16px;
  align-self: start;
  /* Décalé sous le titre principal (hauteur mesurée en JS) : le sommaire
     commence au niveau du contenu, pas à la hauteur du H1. */
  margin-top: var(--legal-title-h, 0px);
}

.legal-aside-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

.legal-toc ul,
.legal-seealso ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
}

.legal-toc a:hover {
  background: var(--bg);
  color: var(--text);
}

.legal-toc li.active > a {
  background: #eff6ff;
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.legal-toc .toc-num {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
}

.legal-toc li.active .toc-num {
  color: var(--primary);
}

/* Sous-titres (H3) : décalés et sans numéro */
.legal-toc .toc-l3 a {
  padding-left: 30px;
  font-size: 0.85rem;
}

.legal-seealso {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.legal-seealso a {
  display: block;
  padding: 5px 10px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.88rem;
}

.legal-seealso a:hover {
  color: var(--primary);
}

/* Ancre : le titre ne colle pas au bord haut à l'arrivée */
.rich-html h2,
.rich-html h3 {
  scroll-margin-top: 24px;
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .legal-aside {
    position: static;
    margin-top: 0;
  }
}

.legal-preview {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 16px;
  background: var(--bg);
}

/* Aperçu d'une page d'erreur (rendu visiteur) */
.error-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 32px 16px;
  background: var(--bg);
}

.error-preview img {
  max-height: 96px;
  max-width: 260px;
}

.error-preview h1 {
  margin: 0;
  font-size: 1.4rem;
}

.error-preview p {
  margin: 0;
  color: var(--text-light);
}

.error-preview .btn {
  cursor: default;
}

.legal-preview h1 {
  font-size: 1.3rem;
}

/* --- Pagination --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-info {
  font-size: 0.9rem;
  color: var(--text-light);
}

.pagination select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.85rem;
}

.show-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.show-logo img {
  max-width: 128px;
  max-height: 128px;
  border-radius: 12px;
}

/* --- Barre de navigation --- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.navbar-brand {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  /* peut rétrécir pour ne pas pousser l'avatar / les liens hors écran */
  min-width: 0;
  flex: 0 1 auto;
}

/* Le nom du site se tronque (…) au lieu de forcer un retour à la ligne.
   min-width:0 : indispensable pour que le span (élément flex) puisse
   réellement rétrécir, sinon la marque garde sa largeur de contenu et pousse
   les burgers hors de la nav (débordement horizontal). */
.navbar-brand-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  /* les liens/avatar ne se compressent pas : c'est la marque qui cède */
  flex: 0 0 auto;
}

.navbar-links a {
  color: var(--text);
  text-decoration: none;
}

.navbar-links a.active {
  color: var(--primary);
  font-weight: 600;
}

/* --- Dropdown utilisateur (nav, à droite) --- */
.nav-dropdown {
  position: relative;
}

.nav-avatar {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-avatar:hover {
  background: var(--primary-dark);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px;
  z-index: 50;
}

.dropdown-header {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-email {
  font-size: 0.82rem;
  color: var(--text-light);
  word-break: break-all;
}

/* Badge de rôle sous l'email dans la dropdown : compact, aligné à gauche */
.dropdown-header .badge {
  align-self: flex-start;
  margin-top: 6px;
}

.dropdown-separator {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--bg);
}

.dropdown-item.active {
  color: var(--primary);
  font-weight: 600;
}

.dropdown-logout {
  color: var(--danger);
}

.dropdown-logout:hover {
  background: #fef2f2;
}

/* --- Burger de section (mobile) : ouvre le tiroir de l'aside (espace client /
   back office). Distinct du burger de nav, placé juste à sa gauche. Le
   margin-left:auto colle ce bouton + le burger de nav à droite, la marque
   reste à gauche. --- */
.navbar-aside-toggle {
  display: none; /* visible uniquement en mobile (media query) */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex: 0 0 auto;
}

.navbar-aside-toggle .nav-icon {
  width: 23px;
  height: 23px;
  color: var(--text);
}

/* Léger surlignage quand le tiroir de section est ouvert */
.navbar-aside-toggle.open {
  color: var(--primary);
}

.navbar-aside-toggle.open .nav-icon {
  color: var(--primary);
}

/* --- Burger (mobile) : ouvre le menu plein écran de navigation globale --- */
.navbar-burger {
  display: none; /* visible uniquement en mobile (media query) */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.navbar-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Croix quand le tiroir est ouvert */
.navbar-burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-burger.open span:nth-child(2) {
  opacity: 0;
}

.navbar-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Voile derrière le tiroir mobile (clic = fermeture, géré en JS) */
.sidebar-backdrop {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 35;
}

@media (min-width: 721px) {
  /* Par sécurité : jamais de voile sur desktop (le burger y est masqué) */
  .sidebar-backdrop {
    display: none;
  }
}

/* --- Menu plein écran du site public (mobile) --- */
.navbar-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #fff;
  display: flex;
  flex-direction: column;
  /* mêmes marges latérales que .navbar (mobile) ; la rangée d'en-tête
     ci-dessous reprend EXACTEMENT la hauteur de la nav (--nav-h) pour que le
     logo soit au même endroit : aucun saut vertical à l'ouverture */
  padding: 0 20px 24px;
  overflow-y: auto;
}

.navbar-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* hauteur identique à la nav : logo centré au même niveau que dans la nav */
  height: var(--nav-h);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Groupe de boutons à droite de l'en-tête du menu : bascule vers le menu de
   section (icône panneau) + croix de fermeture */
.navbar-mobile-actions {
  display: flex;
  align-items: center;
  /* même écart que dans la barre (gap de .navbar) entre l'icône panneau et le
     bouton voisin : l'icône reste horizontalement immobile à l'ouverture */
  gap: 10px;
  flex-shrink: 0;
}

/* Dans l'en-tête du menu, le bouton de section ne pousse pas à droite
   (le margin auto ne sert que dans la barre de nav) */
.navbar-mobile-actions .navbar-aside-toggle {
  margin-left: 0;
}

/* même empreinte que le burger (40x40) pour une rangée de même hauteur,
   donc un logo centré exactement comme dans la nav */
.navbar-mobile-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.navbar-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}

.mobile-menu-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.mobile-menu-email {
  font-size: 0.85rem;
  color: var(--text-light);
  word-break: break-all;
}

/* Badge de rôle sous l'email dans le menu burger : compact, aligné à gauche */
.mobile-menu-user .badge {
  align-self: flex-start;
  margin-top: 8px;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Icône des entrées du menu plein écran (un peu plus grande que dans l'aside) */
.mobile-menu-item .nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-light);
}

.mobile-menu-item.active .nav-icon {
  color: var(--primary);
}

.mobile-menu-logout .nav-icon {
  color: var(--danger);
}

.mobile-menu-item:hover,
.mobile-menu-item.active {
  background: var(--bg);
}

.mobile-menu-logout {
  color: var(--danger);
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

@media (min-width: 721px) {
  /* jamais le menu plein écran sur desktop */
  .navbar-mobile-menu {
    display: none;
  }
}

/* --- Navbar responsive --- */
@media (max-width: 720px) {
  .navbar {
    /* jamais de retour à la ligne : marque à gauche, avatar/liens à droite */
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 20px;
    /* hauteur unifiée (la nav publique n'est pas fixée comme celle des espaces
       à aside) : le menu plein écran s'aligne alors au logo partout */
    min-height: var(--nav-h);
  }

  .navbar-brand {
    font-size: 1.15rem;
  }

  .navbar-logo {
    height: 24px;
  }

  .navbar-links {
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .navbar {
    padding: 8px 16px;
  }

  .navbar-brand {
    font-size: 1.05rem;
  }

  /* même marge latérale que la nav à ce palier (16px) ; top à 0, la hauteur du
     logo est portée par .navbar-mobile-top (--nav-h) : logo toujours superposé */
  .navbar-mobile-menu {
    padding: 0 16px 24px;
  }

  /* la dropdown ne déborde pas d'un petit écran */
  .dropdown-menu {
    min-width: min(230px, calc(100vw - 24px));
  }
}

/* --- Boutons --- */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-block {
  width: 100%;
}

.btn-small {
  padding: 5px 10px;
  font-size: 0.85rem;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Div avec apparence de bouton désactivé (formulaire incomplet / sans changement) */
.btn-inactive {
  opacity: 0.55;
  cursor: not-allowed;
  user-select: none;
}

/* --- Formulaires --- */
form label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 500;
}

form input,
form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}

form input:focus,
form select:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

form input:disabled {
  background: var(--bg);
  color: var(--text-light);
}

/* Champ non modifiable rendu comme un div (même rendu qu'un input disabled) */
.field-static {
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 500;
}

.input-disabled {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 400;
  background: var(--bg);
  color: var(--text-light);
  cursor: not-allowed;
  user-select: text;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* --- Champ mot de passe avec oeil afficher/masquer --- */
.password-field {
  position: relative;
  margin-top: 6px;
}

.password-field input {
  margin-top: 0;
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 6px;
}

.password-toggle:hover {
  color: var(--text);
}

.hint {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* --- Cartes d'authentification --- */
.auth-card {
  max-width: 420px;
  margin: 40px auto;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.auth-card h1 {
  margin-top: 0;
  font-size: 1.5rem;
  text-align: center;
}

.auth-links {
  margin-top: 16px;
  font-size: 0.9rem;
  text-align: center;
}

/* Séparateur « ou » + bouton Google */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--text-light);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.google-btn {
  display: flex;
  justify-content: center;
}

/* --- Alertes --- */
.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.alert-success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* --- Espace client : nav fixe pleine largeur en haut,
       aside fixe à gauche en dessous, contenu à droite --- */
:root {
  --nav-h: 62px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 74px;
}

.client-shell .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 30;
}

.sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  height: calc(100vh - var(--nav-h));
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 20;
  transition: width 0.2s ease;
}

/* Contenu décalé sous la nav et à droite de l'aside.
   Colonne flex pour pousser le footer en bas de l'écran */
.client-main {
  margin-left: var(--sidebar-w);
  padding-top: var(--nav-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}

.client-main .client-content {
  flex: 1;
}

.client-content {
  padding: 32px 24px;
}

.client-content > div {
  max-width: 900px;
}

.sidebar-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}


.sidebar-user strong {
  font-size: 0.95rem;
}

.sidebar-email {
  font-size: 0.82rem;
  color: var(--text-light);
  word-break: break-all;
}

.sidebar-bottom {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-bottom .sidebar-link {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}

.sidebar-bottom .sidebar-link:hover {
  background: var(--bg);
}

.sidebar-logout {
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--danger);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.sidebar-logout:hover {
  background: #fef2f2;
}

/* Icône de déconnexion en rouge (au lieu du gris par défaut des icônes) */
.sidebar-logout .nav-icon {
  color: var(--danger);
}

.sidebar-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* La liste occupe l'espace restant et défile si elle est trop longue :
     l'en-tête utilisateur et les liens du bas restent visibles. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* un peu d'air pour que la scrollbar ne colle pas aux libellés */
  padding-right: 4px;
  /* scrollbar fine (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* scrollbar fine (Chromium / WebKit) */
.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}

.sidebar-nav a:hover {
  background: var(--bg);
}

.sidebar-nav a.active {
  background: #eff6ff;
  color: var(--primary);
  font-weight: 600;
}

/* Libellé : occupe la largeur pour pousser le compteur (nav-count) à droite */
.nav-label {
  flex: 1;
  min-width: 0;
}

.nav-icon {
  flex-shrink: 0;
  color: var(--text-light);
}

.sidebar-nav a.active .nav-icon {
  color: var(--primary);
}

/* Aligne les liens du bas (espace client / déconnexion) sur le même gabarit */
.sidebar-bottom .sidebar-link,
.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-bottom .nav-count {
  margin-left: auto;
}

/* --- Bouton de repli de l'aside (rail d'icônes, desktop) --- */
.sidebar-collapse {
  margin-top: 4px;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-collapse:hover {
  background: var(--bg);
  color: var(--text);
}

.sidebar-collapse .nav-icon {
  transition: transform 0.2s ease;
}

/* Sur mobile l'aside est un tiroir plein écran : le repli n'a pas de sens */
@media (max-width: 720px) {
  .sidebar-collapse {
    display: none;
  }
}

/* En tablette (721-1024 px) le rail d'icônes est imposé (voir useSidebarCollapse) :
   le bouton de repli n'a rien à basculer, on le masque. */
@media (min-width: 721px) and (max-width: 1024px) {
  .sidebar-collapse {
    display: none;
  }
}

/* Rail d'icônes : seulement en desktop (la classe est ignorée sous 720 px) */
@media (min-width: 721px) {
  .client-shell.sidebar-collapsed .sidebar {
    width: var(--sidebar-w-collapsed);
    padding-left: 10px;
    padding-right: 10px;
  }

  .client-shell.sidebar-collapsed .client-main {
    margin-left: var(--sidebar-w-collapsed);
  }

  /* En-tête utilisateur masqué : le rail ne montre que la navigation */
  .client-shell.sidebar-collapsed .sidebar-user {
    display: none;
  }

  /* Libellés cachés, icônes centrées */
  .client-shell.sidebar-collapsed .nav-label {
    display: none;
  }

  /* En rail, plus de libellés donc plus besoin de la gouttière de scrollbar :
     on l'enlève pour que les icônes du menu soient centrées EXACTEMENT comme
     celles du bas (sinon décalage de ~4px). */
  .client-shell.sidebar-collapsed .sidebar-nav {
    padding-right: 0;
  }

  .client-shell.sidebar-collapsed .sidebar-nav a,
  .client-shell.sidebar-collapsed .sidebar-bottom .sidebar-link,
  .client-shell.sidebar-collapsed .sidebar-logout,
  .client-shell.sidebar-collapsed .sidebar-collapse {
    justify-content: center;
    gap: 0;
  }

  /* Compteurs (messages/erreurs) en pastille sur l'icône */
  .client-shell.sidebar-collapsed .sidebar-nav a {
    position: relative;
  }

  .client-shell.sidebar-collapsed .sidebar-nav .nav-count {
    position: absolute;
    top: 2px;
    right: 8px;
    margin: 0;
  }

  /* Chevron retourné quand c'est replié (invite à ré-agrandir) */
  .client-shell.sidebar-collapsed .sidebar-collapse .nav-icon {
    transform: rotate(180deg);
  }

  /* --- Survol du rail : il se déploie temporairement (flyout) ---
     L'aside étant en position fixe, l'agrandissement recouvre le contenu sans
     le décaler (la marge de .client-main reste celle du rail). */
  .client-shell.sidebar-collapsed .sidebar:hover {
    width: var(--sidebar-w);
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.14);
    transition: width 0.18s ease, box-shadow 0.18s ease;
  }

  /* Rétablit l'affichage complet tant que la souris survole le rail */
  .client-shell.sidebar-collapsed .sidebar:hover .sidebar-user {
    display: flex;
  }

  .client-shell.sidebar-collapsed .sidebar:hover .nav-label {
    display: block;
  }

  /* Rétablit la gouttière de scrollbar quand le rail est déployé au survol */
  .client-shell.sidebar-collapsed .sidebar:hover .sidebar-nav {
    padding-right: 4px;
  }

  .client-shell.sidebar-collapsed .sidebar:hover .sidebar-nav a,
  .client-shell.sidebar-collapsed .sidebar:hover .sidebar-bottom .sidebar-link,
  .client-shell.sidebar-collapsed .sidebar:hover .sidebar-logout,
  .client-shell.sidebar-collapsed .sidebar:hover .sidebar-collapse {
    justify-content: flex-start;
    gap: 10px;
  }

  .client-shell.sidebar-collapsed .sidebar:hover .sidebar-nav .nav-count {
    position: static;
    margin-left: auto;
  }
}

.client-content h1 {
  margin-top: 0;
}

.card-narrow {
  max-width: 480px;
}

.client-content .card {
  margin-bottom: 20px;
  max-width: 760px;
}

/* --- Page Profil --- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  font-size: 1.3rem;
}

.profile-identity {
  flex: 1;
  min-width: 200px;
}

.profile-identity h1 {
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.profile-email {
  display: block;
  color: var(--text-light);
  margin-bottom: 6px;
}

.badge-verified {
  background: #f0fdf4;
  color: #15803d;
}

/* Badges d'état neutres / d'avertissement (fiches du back office) */
.badge-muted {
  background: var(--bg);
  color: var(--text-light);
  border: 1px solid var(--border);
}

.badge-warn {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Rangée de badges d'état sous l'identité d'une fiche */
.fiche-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Pile de badges dans une cellule de tableau (ex : colonne Statut) */
.cell-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.profile-since {
  text-align: right;
}

.info-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.info-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

.info-box code {
  font-size: 0.85rem;
  word-break: break-all;
}

/* --- Zone danger (suppression de compte) --- */
.card-danger {
  border-color: #fecaca;
}

.danger-title {
  color: var(--danger);
}

.danger-text {
  color: var(--danger);
}

.btn-outline-danger {
  background: transparent;
  border-color: #fecaca;
  color: var(--danger);
}

.btn-outline-danger:hover {
  background: #fef2f2;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  /* La nav reste fixe en haut pour garder les burgers accessibles */
  .navbar-burger {
    display: flex;
  }

  /* Burger de section (icône panneau) : à gauche du burger de nav */
  .navbar-aside-toggle {
    display: flex;
  }

  /* L'aside devient un menu plein écran (sous la nav) : caché hors écran,
     glisse depuis la gauche et couvre toute la largeur */
  .sidebar {
    width: 100%;
    border-right: none;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 40;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Le contenu prend toute la largeur (plus de colonne réservée à l'aside) */
  .client-main {
    margin-left: 0;
  }

  /* Les liens/dropdown de droite (desktop) disparaissent : la navigation
     globale passe par le burger de nav (menu plein écran), et la navigation
     de section par le burger de section (tiroir aside). Marque à gauche,
     burgers à droite. */
  .navbar-links {
    display: none;
  }
}

/* --- Interrupteurs (toggle) --- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.toggle-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
}

.toggle-hint {
  font-size: 0.8rem;
  color: var(--text-light);
  font-weight: 400;
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #d1d5db;
  transition: background 0.15s;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
  pointer-events: none;
}

.toggle-on {
  background: var(--primary);
}

.toggle-on .toggle-knob {
  left: 23px;
}

/* --- Page Paramètres (back office) --- */
.client-content > div.content-wide {
  max-width: none;
}

.settings-grid {
  display: grid;
  /* Grille progressive : 4 colonnes en grand écran, puis 3, 2, 1 en réduisant.
     align-items par défaut (stretch) : cartes d'une même ligne à hauteur égale */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1400px) {
  .settings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.settings-grid .card {
  margin-bottom: 0;
}

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-light);
}

form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

form textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

/* Textarea à hauteur automatique : pas de redimensionnement manuel
   ni de défilement interne, la hauteur suit le contenu */
textarea.autogrow {
  resize: none;
  overflow: hidden;
}

.settings-save {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  padding: 12px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* --- Médias (logo / favicon) --- */
.media-field {
  margin-bottom: 24px;
}

.media-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  margin-bottom: 6px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  /* Fond damier : rend visibles les zones transparentes */
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #ffffff 0% 50%) 0 0 / 16px 16px;
}

.media-dropzone:hover {
  border-color: var(--primary);
}

.media-dragover {
  border-color: var(--primary);
  background: #eff6ff;
}

.media-dragreject {
  border-color: var(--danger);
  background: #fef2f2;
}

.media-dropzone img {
  max-width: 100%;
  max-height: 90px;
}

.media-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  color: var(--text-light);
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  text-align: center;
}

.media-empty-hint {
  font-size: 0.75rem;
}

.media-info {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: center;
}

.media-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.media-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.media-zoom {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  cursor: zoom-out;
  padding: 24px;
}

.media-zoom figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  cursor: default;
  max-width: 85vw;
}

.media-zoom img {
  max-width: 75vw;
  max-height: 70vh;
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #ffffff 0% 50%) 0 0 / 16px 16px;
}

.media-zoom figcaption {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* --- Fenêtre de recadrage --- */
.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 16px;
}

.crop-dialog {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.crop-area {
  position: relative;
  height: 340px;
  background: #111;
}

.crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.crop-zoom input {
  flex: 1;
}

.crop-value {
  min-width: 40px;
  text-align: right;
  color: var(--text-light);
  font-weight: 400;
}

.crop-transforms {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Mode libre : rectangle de sélection à poignées --- */
.crop-area-free {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px;
}

.freecrop-stage {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.freecrop-stage img {
  max-width: 100%;
  max-height: 316px;
  user-select: none;
}

.freecrop-rect {
  position: absolute;
  border: 2px solid #fff;
  cursor: move;
  /* Assombrit tout ce qui est hors de la sélection */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  touch-action: none;
}

.freecrop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 2px;
  touch-action: none;
}

.handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.handle-n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.handle-e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.handle-s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.handle-w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.crop-controls {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crop-aspects {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Bannière cookies --- */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  z-index: 90;
  max-width: 360px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cookie-banner p {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* Panneau « Personnaliser » de la bannière */
.cookie-categories {
  max-height: 45vh;
  overflow-y: auto;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cookie-category {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.cookie-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cookie-category-head .toggle-row {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.cookie-category p.hint {
  margin: 6px 0;
}

.cookie-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--text-light);
}

.cookie-bottom-right {
  right: 16px;
}

.cookie-bottom-left {
  left: 16px;
}

.cookie-bottom {
  left: 16px;
  right: 16px;
  max-width: none;
}

/* --- Page maintenance --- */
.maintenance-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.maintenance-logo {
  max-height: 96px;
  max-width: 260px;
  margin-bottom: 16px;
}

.maintenance-site-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 8px;
}

/* --- Logo dans la nav --- */
.navbar-logo {
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
}

/* --- Pages --- */
.page h1 {
  margin-bottom: 8px;
}

.page-loader {
  text-align: center;
  padding: 60px 0;
  color: var(--text-light);
}

.home {
  text-align: center;
  padding-top: 60px;
}

.home-logo {
  max-height: 96px;
  max-width: 260px;
  margin-bottom: 8px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.card h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

/* --- Badges de rôle --- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-user {
  background: #eff6ff;
  color: var(--primary);
}

.badge-admin {
  background: #fef3c7;
  color: #b45309;
}

.badge-super_admin {
  background: #fce7f3;
  color: #be185d;
}

.badge-intern {
  background: #ecfeff;
  color: #0e7490;
}

/* Alerte informative (ex : bandeau lecture seule des stagiaires) */
.alert-info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.readonly-banner {
  margin-bottom: 16px;
}

/* Bannière du mode maintenance (back office) */
.maintenance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 4px solid #ea580c;
  border-radius: 8px;
  color: #9a3412;
}

.maintenance-banner-text {
  font-size: 0.9rem;
}

.maintenance-banner-error {
  color: var(--danger);
  font-weight: 500;
}

.btn-maintenance-off {
  flex-shrink: 0;
  background: #ea580c;
  color: #fff;
  border: none;
}

.btn-maintenance-off:hover:not(:disabled) {
  background: #c2410c;
}

.btn-maintenance-off:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.toggle-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.role-select.role-intern {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}

/* --- Tableau admin --- */
.table-wrapper {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th,
td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--bg);
  font-weight: 600;
}

tr:last-child td {
  border-bottom: none;
}

.row-disabled td {
  color: var(--text-light);
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Groupe d'exports : transparent en desktop (les boutons s'intègrent
   directement à la ligne de boutons de l'en-tête, layout inchangé). */
.export-buttons {
  display: contents;
}

/* --- Menu d'export (icône de téléchargement + liste déroulante) --- */
.export-menu {
  position: relative;
  display: inline-flex;
}

.export-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.export-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 150px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.export-menu-item {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.export-menu-item:hover {
  background: var(--bg);
}

/* Mobile : le bouton Exporter prend toute la largeur, comme les autres boutons
   d'en-tête (btn-group en colonne). */
@media (max-width: 720px) {
  .export-menu {
    width: 100%;
  }

  .export-menu-trigger {
    width: 100%;
    justify-content: center;
  }
}

/* En-tête d'admin sur mobile : action principale pleine largeur, puis une
   rangée d'exports à largeurs égales et libellés courts (CSV / Excel / SQL). */
@media (max-width: 720px) {
  .page-header .btn-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .page-header .btn-group > .btn-primary {
    width: 100%;
  }

  .export-buttons {
    display: flex;
    gap: 8px;
  }

  .export-buttons .btn {
    flex: 1;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }

  /* Le mot « Export » disparaît : ne reste que CSV / Excel / SQL */
  .export-buttons .export-word {
    display: none;
  }
}

/* --- Tableaux en cartes sur mobile (classe .table-cards sur le wrapper) ---
   Chaque ligne devient une fiche empilée : l'en-tête de colonne est masqué et
   remplacé par le libellé porté par data-label sur chaque cellule. */
@media (max-width: 720px) {
  .table-cards {
    border: none;
    background: transparent;
    border-radius: 0;
    overflow-x: visible;
  }

  .table-cards table,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: 100%;
  }

  /* En-tête de tableau inutile en mode carte (les libellés viennent des cellules) */
  .table-cards thead {
    display: none;
  }

  .table-cards tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 14px;
    margin-bottom: 12px;
  }

  .table-cards tr.row-disabled {
    opacity: 0.65;
  }

  .table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    text-align: right;
    border-bottom: 1px solid var(--border);
  }

  .table-cards td:last-child {
    border-bottom: none;
  }

  /* Libellé de la donnée (nom de colonne) à gauche de la valeur */
  .table-cards td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-light);
    text-align: left;
  }

  /* Ligne d'actions : icônes alignées à gauche, sans libellé */
  .table-cards td.actions {
    justify-content: flex-start;
    padding-top: 12px;
  }

  /* Cellule vide (« Aucun résultat ») : centrée, pleine largeur */
  .table-cards td:not([data-label]):not(.actions):not(.select-cell):not(.drag-cell) {
    justify-content: center;
    text-align: center;
  }

  /* Cellule de réordonnancement en vue carte : reste visible et propose des
     boutons monter/descendre (le glisser tactile n'existe pas ; poignée/boutons
     pilotés par le type de pointeur, voir plus bas). Masquée si vide (filtre
     actif / lecture seule : rien à réordonner). */
  .table-cards td.drag-cell {
    display: flex;
  }

  .table-cards td.drag-cell:empty {
    display: none;
  }

  /* Case à cocher de sélection multiple : gardée, alignée à gauche */
  .table-cards td.select-cell {
    justify-content: flex-start;
  }

  /* Cellule purement décorative sans en-tête (ex : pastille de couleur du
     journal d'activité) : inutile en carte, masquée. */
  .table-cards td[data-label=''] {
    display: none;
  }
}

/* --- Icônes d'action colorées (voir / modifier / supprimer / restaurer) --- */
.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.action-view {
  color: #b45309;
  border-color: #fde68a;
}

.action-view:hover {
  background: #fef3c7;
}

.action-edit {
  color: var(--primary);
  border-color: #bfdbfe;
}

.action-edit:hover {
  background: #eff6ff;
}

.action-delete {
  color: var(--danger);
  border-color: #fecaca;
}

.action-delete:hover {
  background: #fef2f2;
}

.action-restore {
  color: #15803d;
  border-color: #bbf7d0;
}

.action-restore:hover {
  background: #f0fdf4;
}

.action-power {
  color: #475569;
  border-color: #cbd5e1;
}

.action-power:hover {
  background: #f1f5f9;
}

.action-key {
  color: #7c3aed;
  border-color: #ddd6fe;
}

.action-key:hover {
  background: #f5f3ff;
}

.action-check {
  color: #15803d;
  border-color: #bbf7d0;
}

.action-check:hover {
  background: #f0fdf4;
}

/* --- Journal des erreurs --- */
.badge-level-error {
  background: #fef2f2;
  color: var(--danger);
}

.badge-level-critical,
.badge-level-alert,
.badge-level-emergency {
  background: var(--danger);
  color: #fff;
}

/* --- Onglets par rôle (gestion des utilisateurs) --- */
.role-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Onglets de rôle sur mobile : passage à la ligne (tous visibles) sous forme
   de pastilles - plus lisible qu'un défilement horizontal qui en cache. */
@media (max-width: 720px) {
  .role-tabs {
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: none;
  }

  .role-tabs button {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
  }

  .role-tabs button.active {
    border-color: var(--primary);
    background: #eff6ff;
  }
}

.role-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-light);
  font-size: 0.95rem;
  cursor: pointer;
}

.role-tabs button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.role-tab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.role-tabs button.active .role-tab-count {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--primary);
}

/* --- Sélecteur de rôle (aux couleurs des badges) --- */
.role-select {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.role-select.role-user {
  background: #eff6ff;
  color: var(--primary);
  border-color: #bfdbfe;
}

.role-select.role-admin {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.role-select.role-super_admin {
  background: #fce7f3;
  color: #be185d;
  border-color: #fbcfe8;
}

/* --- Modale de confirmation --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5);
  padding: 16px;
}

.modal {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.modal h3 {
  margin: 0 0 8px;
}

.modal p {
  margin: 0 0 18px;
  color: var(--text-light);
}

.modal-actions {
  justify-content: flex-end;
}

/* Modale de page légale (CGU, confidentialité) : plus large, contenu défilant */
.modal-legal {
  max-width: 640px;
}

.modal-legal-body {
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 18px;
  padding-right: 8px;
  color: var(--text-light);
}

/* Encart d'information sous un champ (ex : politique de mot de passe) */
.field-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: normal;
  line-height: 1.45;
  color: #1e40af;
}

.field-info svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Checklist de conformité du mot de passe (pendant la saisie) :
   même aspect d'encart que .field-info, en version neutre */
.pwd-check {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: normal;
  line-height: 1.4;
}

.pwd-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pwd-check-item.ok {
  color: #16a34a;
}

.pwd-check-item.ko {
  color: #dc2626;
}

.pwd-check-item.pending {
  color: var(--text-light);
}

.pwd-check-wait {
  width: 1em;
  text-align: center;
}

.pwd-check-all {
  margin-top: 3px;
  font-weight: 600;
}

/* Astérisque des champs obligatoires (collé au libellé) */
.required-mark {
  color: var(--danger);
}

/* --- Notifications toast --- */
.toast-viewport {
  position: fixed;
  /* Sous la barre de navigation fixe (+ marge sous les zones safe-area mobile) */
  top: calc(var(--nav-h) + 16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  pointer-events: auto;
  animation: toast-in 0.22s ease-out;
}

.toast-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}

.toast-success {
  border-left-color: #16a34a;
}

.toast-error {
  border-left-color: var(--danger);
}

.toast-info {
  border-left-color: var(--primary);
}

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.toast-close:hover {
  color: var(--text);
}

/* Barre de progression : se vide sur la durée de vie du toast */
.toast-progress {
  height: 3px;
  background: rgba(15, 23, 42, 0.08);
}

.toast-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: var(--primary);
  animation-name: toast-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.toast-success .toast-progress-bar {
  background: #16a34a;
}

.toast-error .toast-progress-bar {
  background: var(--danger);
}

.toast-info .toast-progress-bar {
  background: var(--primary);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* --- Dashboard : indicateurs (KPI) --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.kpi-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.kpi-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.kpi-label {
  font-size: 0.85rem;
  color: var(--text-light);
}

.kpi-accent .kpi-value {
  color: var(--primary);
}

.kpi-danger .kpi-value {
  color: var(--danger);
}

.kpi-sub {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 2px;
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Tableau de bord (dashboard) --- */
.dashboard-subtitle {
  margin: -8px 0 20px;
  color: var(--text-light);
  text-transform: capitalize;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

/* Deux colonnes de cartes qui repassent en une seule sous 900px */
.dash-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .dash-cols {
    grid-template-columns: 1fr;
  }
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dash-card-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

/* Points à traiter */
.attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attention-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.attention-list a:hover {
  border-color: var(--primary);
}

.attention-count {
  flex-shrink: 0;
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: #eff6ff;
  color: var(--primary);
}

.attention-list a.attention-danger .attention-count {
  background: #fef2f2;
  color: var(--danger);
}

.attention-ok {
  margin: 0;
  color: var(--text-light);
}

/* Répartition par rôle (barres) */
.role-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}

.role-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.role-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.role-bar-count {
  text-align: right;
  font-weight: 600;
}

/* Listes courtes (derniers inscrits, messages non lus) */
.mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mini-list li {
  border-top: 1px solid var(--border);
}

.mini-list li:first-child {
  border-top: none;
}

.mini-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--text);
}

.mini-list a:hover .mini-title {
  color: var(--primary);
}

.mini-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mini-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-sub {
  font-size: 0.8rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-light);
}

.mini-flag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 600;
}

.mini-flag-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--danger);
}

.mini-empty {
  margin: 0;
  color: var(--text-light);
}

@media (max-width: 480px) {
  /* Sur très petit écran, la méta des listes passe sous le titre */
  .mini-meta {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* --- Recherche globale du back office --- */
/* Dans la nav du back office : centrée, largeur contrainte */
.navbar-search {
  flex: 1 1 auto;
  max-width: 460px;
  margin: 0 auto;
}

.navbar-search .admin-search {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .navbar-search {
    display: none;
  }
}

.admin-search {
  position: relative;
  margin-bottom: 14px;
}

/* Champ avec icône loupe à gauche et bouton effacer à droite */
.admin-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search-icon {
  position: absolute;
  left: 11px;
  color: var(--text-light);
  pointer-events: none;
}

.admin-search-field input {
  width: 100%;
  padding: 9px 32px 9px 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-search-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg);
  color: var(--text-light);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.admin-search-clear:hover {
  background: #e5e7eb;
  color: var(--text);
}

.admin-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 62vh;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.admin-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.admin-search-item.is-active {
  background: var(--bg);
}

/* Puce de type (couleur par entité) */
.admin-search-chip {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #eff6ff;
  color: var(--primary);
  white-space: nowrap;
}

.admin-search-chip.chip-user { background: #eff6ff; color: #2563eb; }
.admin-search-chip.chip-message { background: #fef2f2; color: #dc2626; }
.admin-search-chip.chip-social { background: #f0fdf4; color: #16a34a; }
.admin-search-chip.chip-legal { background: #fefce8; color: #a16207; }
.admin-search-chip.chip-seo { background: #f5f3ff; color: #7c3aed; }
.admin-search-chip.chip-cookie { background: #fff7ed; color: #c2410c; }

.admin-search-text {
  min-width: 0;
}

.admin-search-label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-search-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-search-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-light);
  font-size: 0.85rem;
}

/* --- Aide du back office --- */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .help-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .help-grid {
    grid-template-columns: 1fr;
  }
}

.help-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.help-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.help-card h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.help-card p {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--text-light);
}

.help-count {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
}

/* Question/réponse en accordéon */
.help-item {
  border-bottom: 1px solid var(--border);
}

.help-item:last-child {
  border-bottom: none;
}

.help-item summary {
  padding: 12px 4px;
  font-weight: 600;
  cursor: pointer;
  list-style-position: inside;
}

.help-item summary:hover {
  color: var(--primary);
}

.help-answer {
  padding: 0 4px 14px 22px;
  color: var(--text-light);
  font-size: 0.92rem;
  line-height: 1.55;
}

.help-answer p {
  margin: 0 0 10px;
}

.help-answer p:last-child,
.help-answer ul:last-child {
  margin-bottom: 0;
}

.help-theme-link {
  color: inherit;
  text-decoration: none;
}

.help-theme-link:hover {
  color: var(--primary);
}

/* Puces des autres thématiques */
.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.help-toc a {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
}

.help-toc a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.help-badge {
  margin-left: 8px;
  vertical-align: middle;
}

/* Fil d'ariane du back office */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--text-light);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-sep {
  color: var(--text-light);
  opacity: 0.6;
}

.breadcrumb a {
  color: var(--text-light);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* Compte à rebours de la fenêtre de modification (espace client) */
.window-countdown {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}

/* Demande de changement d'email en attente (espace client) */
.pending-request {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.pending-request .hint {
  margin-top: 0;
}

.pending-request .window-countdown {
  margin-bottom: 10px;
}

/* --- Case à cocher du projet (composant Checkbox) --- */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  font-size: 0.92rem;
  font-weight: normal;
  color: var(--text-light);
  cursor: pointer;
}

/* Variante case seule (sélection de lignes de tableau) : pas de marge */
.checkbox-bare {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* Case native masquée mais focusable (accessibilité clavier) */
.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkbox-box svg {
  width: 11px;
  height: 9px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.checkbox-row:hover .checkbox-box {
  border-color: var(--primary);
}

.checkbox-input:checked + .checkbox-box {
  background: var(--primary);
  border-color: var(--primary);
}

.checkbox-input:checked + .checkbox-box svg {
  opacity: 1;
  transform: scale(1);
}

.checkbox-input:focus-visible + .checkbox-box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Journal d'activité --- */
.activity-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red {
  background: var(--danger);
}

.dot-green {
  background: #15803d;
}

.dot-blue {
  background: var(--primary);
}

.dot-orange {
  background: #b45309;
}

.badge-category {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-feed li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.activity-feed .activity-dot {
  margin-top: 5px;
  flex-shrink: 0;
}

.activity-feed-body {
  display: flex;
  flex-direction: column;
}

.stacktrace {
  max-height: 320px;
  overflow: auto;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Booléens des tableaux : check vert, croix rouge */
.bool-yes {
  color: #15803d;
  font-weight: 700;
}

.bool-no {
  color: var(--danger);
  font-weight: 700;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .auth-card {
    margin: 16px auto;
    padding: 24px;
  }
}