/* ═══════════════════════════════════════════════════════════════════════════
   THÈMES — variables CSS
   Valeurs par défaut = thème « Professionnel » (celui d'origine). Chaque autre
   thème redéfinit ce même jeu de variables dans un bloc html[data-theme="..."]
   tout en bas de ce fichier ; le reste de la feuille de style n'y fait jamais
   directement référence à une couleur en dur, ce qui suffit à tout rethémer.
   Le thème actif est choisi via le sélecteur de thème (voir session.js) et
   mémorisé côté navigateur (localStorage) — indépendant par appareil.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --surface-hover: #e6f0fa;
  --border: #e0e8f5;
  --text: #333333;
  --text-strong: #1a1a2e;
  --text-heading: #1a2d4e;
  --text-muted: #6b7280;
  --accent: #005bbb;
  --accent-hover: #004999;
  --accent-ink: #ffffff;
  --font-display: inherit;
  --font-body: Arial, sans-serif;
  --tracking: normal;
  --transform: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
}

/* ─── Typographie des titres — cohérente avec le thème, mais seulement pour
   les VRAIS titres de page/section/popup (le "chrome" de l'interface).
   h1 et h2 suffisent pour ça : sur tout le site, une balise h1 ou h2 est
   toujours un titre de page, de section ou de popup — jamais le sous-titre
   d'une carte dans une liste. Les h3 sont un mélange des deux (ex.
   « Indicateurs de l'agence » vs. le nom d'une équipe dans une carte), donc
   listés un par un plutôt qu'en bloc — pour ne PAS themer les libellés
   secondaires (nom d'une équipe, intitulé d'un indicateur, question d'un
   sondage...), qui doivent rester dans la police normale, lisible, pour
   rester des DONNÉES plutôt que de la décoration. */
h1, h2,
.site-title, .sidebar-title,
.news-card-title, .newsletter-title-text, .kpi-category-title, .dash-panel-title,
.checklist-section-header h3 {
  font-family: var(--font-display);
}

/* ─── BODY ──────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── HEADER ────────────────────────────────────────────────────────────────── */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--accent);
  padding: 12px 20px;
  gap: 15px;
  flex-shrink: 0;
}

.site-title {
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: bold;
  font-family: var(--font-display);
  letter-spacing: var(--tracking, normal);
  text-transform: var(--transform, none);
  white-space: nowrap;
  text-decoration: none;
}

a.site-title:hover { opacity: 0.85; }

.site-title-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-title-link:hover { opacity: 0.85; }

.site-logo {
  height: 36px;
  width: 36px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 10px;
  /* Toujours blanc (et non var(--surface)) : les logos ont un fond transparent
     pensé pour un support clair, quel que soit le thème actif. */
  background: white;
  padding: 2px;
}

.nav-left  { display: flex; align-items: center; }
.nav-right { display: flex; align-items: center; gap: 10px; }

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-center input {
  width: 100%;
  max-width: 420px;
  padding: 9px 18px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  outline: none;
  background: rgba(255,255,255,0.9);
  margin: 0;
}

.nav-center input:focus { background: var(--surface); }

.user-label {
  color: var(--accent-ink);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}

/* ─── Menu déroulant « Mon compte » (clic sur nom/prénom, ou survol souris) ── */
.user-menu { position: relative; }
.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  min-width: 220px;
  overflow: hidden;
  z-index: 600;
}
.user-dropdown.open { display: block; }
/* Zone invisible qui comble l'espace entre le bouton et le menu, pour que la
   souris ne « sorte » pas du survol en descendant vers le menu. */
.user-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
/* Ouverture au survol : seulement sur les appareils avec une vraie souris
   (« hover: hover »), pour ne pas gêner le tactile où le clic reste le seul
   moyen d'ouvrir/fermer le menu (voir toggleUserMenu dans session.js). */
@media (hover: hover) and (pointer: fine) {
  .user-menu:hover .user-dropdown { display: block; }
}
.user-dropdown-link {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  transition: background .15s;
}
.user-dropdown-link:hover { background: #f0f6ff; color: var(--accent); }

/* ─── BOUTONS ───────────────────────────────────────────────────────────────── */
.menu-btn {
  background-color: var(--surface);
  color: var(--accent);
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  text-decoration: none;
}

.menu-btn:hover { background-color: var(--surface-hover); }

.logout-btn {
  background-color: var(--surface);
  color: var(--accent);
  padding: 8px 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.logout-btn:hover { background-color: var(--surface-hover); }

.btn-cancel             { background-color: #e53935 !important; color: white !important; }
.btn-cancel:hover       { background-color: #c62828 !important; }

/* Bouton "Enregistrer en brouillon" : un fond clair type var(--surface-2)
   était quasiment invisible à côté du bouton "Publier" (même famille de
   gris/blanc que le reste de la popup) — un ton plein et distinct, comme
   .btn-cancel, le rend repérable au premier coup d'œil. Gris ardoise neutre
   plutôt qu'une couleur vive : une action secondaire ("pas encore prêt à
   publier"), pas une alerte ni l'action principale de la popup. */
.btn-draft              { background-color: #607080 !important; color: white !important; }
.btn-draft:hover        { background-color: #4c5a68 !important; }

/* ── Section "Vos brouillons" ────────────────────────────────────────────
   Un brouillon mélangé dans la même liste que le contenu déjà publié/en
   attente rendait impossible de distinguer ce qui est réellement en ligne
   de ce qui ne l'est pas encore (demande explicite) — cadre à part, teinté,
   toujours au-dessus du reste, avec sa propre bordure en pointillés pour
   bien marquer "ceci n'est pas (encore) publié". */
.drafts-section {
  background: rgba(96, 112, 128, 0.07);
  border: 1.5px dashed #607080;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.drafts-section-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: #4c5a68;
}
.drafts-section-hint {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
}
.draft-card {
  background: var(--surface);
  border: 1px solid #607080;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.draft-card:last-child { margin-bottom: 0; }
.draft-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.draft-card-title {
  margin: 0;
  font-size: 1rem;
  color: var(--text-heading, #1a2d4e);
}
.draft-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Site des procédures : la carte d'un brouillon réutilise .procedure-card
   (même structure DOM que le JS existant lit/écrit) plutôt que .draft-card
   seul — cette règle, plus spécifique, lui garde quand même le liseré
   ardoise plutôt que le bleu habituel des notes déjà publiées. */
.procedure-card.draft-card { border-left-color: #607080; }

/* ─── LAYOUT PRINCIPAL ──────────────────────────────────────────────────────── */
.main-layout {
  display: flex;
  flex: 1;
}

/* ─── SIDEBAR ───────────────────────────────────────────────────────────────── */
.sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--surface);
  border-right: 2px solid var(--border);
  flex-shrink: 0;
  padding: 20px 0;
}

/* Réduction de la sidebar sur ordinateur/tablette (ouverte par défaut, repliable via le ☰) :
   repliée, elle ne se ferme pas complètement, elle passe en mode « icônes seules ».
   Ce choix n'est jamais mémorisé : chaque chargement de page repart sidebar ouverte. */
@media (min-width: 861px) {
  .sidebar {
    overflow: hidden;
    transition: width .2s ease, min-width .2s ease;
  }
  /* Toujours actif (pas seulement à l'état replié) : le texte ne doit jamais
     passer à la ligne, y compris pendant la transition d'ouverture/fermeture. */
  .sidebar-link,
  .sidebar-title {
    white-space: nowrap;
    overflow: hidden;
  }
  /* Exception : un libellé plus long que la largeur de la sidebar (ex. "Exporter
     les notes et bonnes pratiques") ne doit pas être coupé/tronqué en silence —
     il passe sur 2 lignes plutôt que de disparaître. La règle nowrap ci-dessus
     reste utile pour les libellés courts (l'icône ne doit jamais se retrouver
     seule sur sa ligne pendant l'animation d'ouverture/fermeture). */
  .sidebar-link-text {
    white-space: normal;
    overflow-wrap: break-word;
  }
  html.sidebar-collapsed .sidebar {
    width: 56px;
    min-width: 56px;
  }
  /* Le libellé est masqué via son propre <span> (et non plus via un simple
     rognage en largeur) : seule l'icône reste visible, garanti sans texte
     résiduel quelle que soit la police ou la largeur réelle de l'emoji. */
  html.sidebar-collapsed .sidebar-link {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  html.sidebar-collapsed .sidebar-link-text {
    display: none;
  }
  html.sidebar-collapsed .sidebar-title,
  html.sidebar-collapsed .sidebar-separator {
    display: none;
  }

  /* Contenu centré dès qu'il reste de la place sur un grand écran, plutôt
     que collé à gauche — que la sidebar soit ouverte ou repliée. */
  .procedures,
  .intranet-content {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Pages qui restent volontairement en pleine largeur (demande explicite) :
     tableau de bord, journal d'audit, indicateurs de l'agence, AART Assist,
     et les deux pages Challenges (bandeau à la mise en page particulière,
     conçue pour occuper toute la largeur — voir les règles .chl-*). */
  .procedures-wide {
    max-width: none;
    margin: 0;
  }
}

.sidebar-title {
  padding: 8px 20px 14px;
  font-size: 11px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted, #999);
  font-weight: bold;
  margin: 0;
}

.sidebar-link {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover,
.sidebar-link.active {
  background: var(--surface-hover);
  color: var(--accent);
  border-left-color: var(--accent);
}

.sidebar-link.active { font-weight: bold; }

.cat-count {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-weight: normal;
}

/* ─── CONTENU PRINCIPAL ─────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  min-width: 0;
}

.procedures { padding: 30px 40px; }

.procedures h2 {
  color: var(--accent);
  font-family: var(--font-display);
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.empty-msg {
  color: var(--text-muted, #888);
  font-size: 14px;
  margin-top: 20px;
}

/* Recherche en grand dans la page (mobile uniquement) — la barre du header
   (#searchInput) est repliée sous 860px car trop étroite pour être
   utilisable ; celle-ci la remplace visuellement, voir plus bas dans ce
   fichier pour son affichage sous 860px. */
.procedures-search-mobile { display: none; }

/* ─── CARTES ────────────────────────────────────────────────────────────────── */
.procedure-card h3 { overflow-wrap: anywhere; }   /* titre long : retour à la ligne */
.procedure-card {
  display: block;
  background-color: var(--surface);
  padding: 15px;
  margin-bottom: 15px;
  border-left: 5px solid var(--accent);
  border-radius: 5px;
  text-decoration: none;
  color: var(--text-strong);
}

.procedure-card.critique { border-left-color: red; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: 12px;
}

.favorite {
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted, #bbb);
  transition: transform 0.2s;
}

.favorite:hover  { transform: scale(1.2); }
.favorite.active { color: gold; }

.edit-btn {
  cursor: pointer;
  font-size: 18px;
  transition: transform 0.2s;
}

.edit-btn:hover { transform: scale(1.2); }

.delete-btn {
  cursor: pointer;
  color: red;
  font-size: 18px;
  transition: transform 0.2s;
}

.delete-btn:hover { transform: scale(1.2); }

/* ─── FOOTER ────────────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 20px;
  background-color: var(--accent);
  color: var(--accent-ink);
  flex-shrink: 0;
}

/* ─── BOUTON HAUT ───────────────────────────────────────────────────────────── */
.top-btn {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 900;
  /* Même gabarit que la cloche et les pense-bêtes (#notif-bell-btn,
     #pb-fab-btn) qui sont empilés au-dessus : rond 44px avec ombre. On garde en revanche
     la couleur d'accent (et non le fond de carte des deux autres) pour que
     ce bouton reste facile à repérer parmi eux. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.top-btn:hover { filter: brightness(1.12); }

/* ─── POPUPS ────────────────────────────────────────────────────────────────── */
.popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
}

/* Posé par session.js dès qu'une popup (ou la popup pense-bête) est ouverte —
   empêche l'intranet en dessous de défiler pendant qu'on interagit avec elle
   (voir le commentaire détaillé dans session.js). Spécificité supérieure à la
   règle "html, body { overflow-y: auto }" du bloc mobile plus bas, qui
   l'emporterait sinon sur un simple sélecteur de classe posé sur <body>. */
html.modal-open,
html.modal-open body {
  overflow: hidden;
}

.popup-content {
  background: var(--surface);
  padding: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  /* Sans ça, un formulaire plus haut que 85vh (beaucoup de champs, petit
     écran) débordait silencieusement de la popup : .popup-body a beau être
     flex:1 + overflow-y:auto, ça ne sert à rien tant que son parent direct
     (<form>) n'est pas lui-même un conteneur flex qui contraint sa hauteur —
     voir la règle .popup-content form ci-dessous. Le pied de page (boutons
     Créer/Enregistrer et Annuler) se retrouvait alors hors écran, sans
     scroll possible pour l'atteindre, sur les écrans les moins hauts. */
  overflow: hidden;
}

.popup-content h2 {
  color: var(--accent);
  font-family: var(--font-display);
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* Rend le formulaire contenu dans la popup flex (et non plus block) : seul
   .popup-body (le corps, entre le titre et les boutons) grandit et défile
   si besoin ; .popup-footer, en flex-shrink:0, reste toujours visible en bas. */
.popup-content form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.popup-body {
  overflow-y: auto;
  /* Empêche le scroll d'aller au bout de son contenu puis de continuer sur
     la page derrière la popup (scroll chaining) — demande explicite : on ne
     doit faire défiler QUE le panneau ouvert, jamais l'intranet en dessous. */
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding-right: 8px;
  margin-bottom: 5px;
  /* Barre de défilement volontairement visible et colorée (et non le filet
     gris quasi invisible du navigateur) : sans repère clair, rien n'indique
     qu'un formulaire trop grand pour la popup continue plus bas — on
     croirait le formulaire entier affiché alors que des champs (et les
     boutons Créer/Enregistrer et Annuler) restent hors vue plus bas. Fine
     plutôt qu'épaisse pour rester discrète tant qu'on ne l'utilise pas. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #e2e8f3;
}
.popup-body::-webkit-scrollbar { width: 7px; }
.popup-body::-webkit-scrollbar-track { background: #e2e8f3; border-radius: 8px; }
.popup-body::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; }
.popup-body::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }

.popup-footer {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

/* champs dans popup */
.popup-content select,
.popup-content input[type="text"],
.popup-content input[type="url"] {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.popup-content textarea {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
  resize: none;
  min-height: 80px;
  overflow-y: auto;
  font-family: inherit;
}

.popup-content button {
  background-color: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.popup-content button:hover { background-color: var(--accent-hover); }

/* Fix spécificité : inputs et boutons dans les rangées de tags (import + edit) */
.popup-content .edit-tag-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}

.popup-content .edit-tag-row input[type="text"] {
  flex: 1 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}

.popup-content .tag-remove-btn {
  background: #e53935 !important;
  color: white !important;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content .tag-remove-btn:hover { background: #c62828 !important; }

/* Ligne de fichier dans import */
.import-item {
  background: var(--surface-2, #f5f8fc);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.import-notice {
  background-color: #fff8e1;
  border-left: 4px solid #f9a825;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-muted, #555);
  margin: 10px 0 15px 0;
}

/* ─── FORMULAIRE MODIFICATION ───────────────────────────────────────────────── */
.edit-form-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.edit-form-row-tags { align-items: flex-start; }

/* Variante pour un champ dont le libellé est trop long pour tenir sur la
   même ligne que la zone de saisie (ex. un libellé avec une note en petit
   à côté) : sans ça, le libellé prend toute la place disponible et relègue
   le champ tout à droite, en tout petit, au lieu de l'étirer sur toute la
   largeur comme les autres champs du formulaire. */
.edit-form-row-stacked {
  flex-direction: column;
  align-items: stretch;
}
.edit-form-row-stacked .edit-label { padding-top: 0; }

.edit-label {
  min-width: 90px;
  font-weight: bold;
  color: var(--text);
  padding-top: 9px;
  font-size: 14px;
}

/* Titre d'actualité : une seule ligne par défaut, qui s'agrandit toute seule quand le
   texte passe à la ligne (autoGrowTitles dans session.js) ; la poignée dans le coin
   permet aussi de l'agrandir à la main. */
textarea.edit-input.edit-textarea-title { min-height: 38px; resize: vertical; line-height: 1.4; overflow-y: hidden; }
/* Sur téléphone .edit-form-row passe en colonne : le flex:1 (flex-basis 0) de .edit-input
   l'emporterait sur la hauteur posée par autoGrowTitles et bloquerait la zone à une ligne. */
@media (max-width: 860px) {
  textarea.edit-input.edit-textarea-title { flex: none; }
}

.edit-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  width: auto;
  margin: 0;
}

/* Champ « Surnom » du tableau Gérer les utilisateurs : sur téléphone la règle
   mobile `.edit-input { width:100% }` (voir plus bas) se calcule contre une
   cellule de tableau sans largeur fixe, et le champ s'écrasait à 0 — le
   surnom devenait invisible. Largeur fixe, spécificité supérieure à
   `.edit-input`, donc valable sur tous les écrans. */
.display-name-form .edit-input {
  flex: 0 0 140px;
  width: 140px;
  min-width: 140px;
}

textarea.edit-input { min-height: 70px; resize: vertical; }

/* Champs "un seul mot très long" (lien SharePoint, nom de fichier...) :
   un <input> classique ne revient jamais à la ligne — un lien un peu long
   défile hors champ et devient illisible, surtout sur téléphone où le champ
   est étroit. Passés en <textarea> (voir les vues concernées) pour que tout
   le texte reste visible, ligne après ligne. overflow-wrap:anywhere (et non
   overflow-wrap:normal, utilisé ailleurs pour du texte en français) : une
   URL n'a généralement aucun espace, donc sans ça elle ne reviendrait jamais
   à la ligne et déborderait quand même — contrairement à un mot en langue
   naturelle, couper une URL n'importe où ne pose aucun problème de lecture. */
textarea.edit-textarea-url {
  min-height: 44px;
  resize: vertical;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
}

/* Bouton natif "Parcourir..." d'un <input type="file"> — moche et non
   stylisable directement, il faut cibler son pseudo-élément interne. Les deux
   règles ci-dessous visent la même chose : ::file-selector-button est le nom
   standard (Chrome/Edge/Firefox récents, Safari 16.4+), ::-webkit-file-upload-button
   celui des navigateurs plus anciens basés sur WebKit/Blink — sans lui, le
   bouton resterait gris par défaut sur ces versions-là. */
input[type="file"].edit-input {
  padding: 6px 10px;
  cursor: pointer;
}
input[type="file"].edit-input::file-selector-button,
input[type="file"].edit-input::-webkit-file-upload-button {
  margin-right: 10px;
  padding: 5px 12px;
  border: none;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background .15s;
}
input[type="file"].edit-input:hover::file-selector-button,
input[type="file"].edit-input:hover::-webkit-file-upload-button {
  background: var(--accent-hover);
}

.edit-tags-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.edit-tag-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.edit-tag-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  width: auto;
  margin: 0;
}

.tag-remove-btn {
  background: #e53935;
  color: white;
  border: none;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tag-remove-btn:hover { background: #c62828; }

.edit-add-tag-row {
  margin-left: 104px;
  margin-bottom: 20px;
}

.edit-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

/* ─── TOASTS ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 28px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  white-space: nowrap;
  pointer-events: none;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { background-color: #28a745; }
.toast-error   { background-color: #e53935; }

/* ─── VISITE GUIDÉE (nouvel arrivant) ─────────────────────────────────────────
   Un seul calque plein écran, dont clip-path découpe un trou rectangulaire
   autour de l'élément présenté à chaque étape (voir tour.js, dans
   session.js) : tout le reste s'assombrit et devient non cliquable, SAUF
   l'élément mis en avant (le trou du clip-path n'intercepte plus les clics,
   ils atteignent directement l'élément réel en dessous). Aucune règle
   position/box-shadow n'est posée sur les éléments ciblés eux-mêmes — ils
   sont souvent déjà position:fixed (cloche, pense-bêtes, thèmes) et leur
   imposer position:relative pour un effet de halo les aurait fait sortir de
   leur emplacement fixe pendant la visite. */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, .65);
  z-index: 200000;
  transition: clip-path .25s ease;
}

.tour-card {
  position: fixed;
  z-index: 200001;
  max-width: 320px;
  background: var(--card, #fff);
  color: var(--ink, #1a1a1a);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 16px 18px;
  font-size: .9rem;
  line-height: 1.5;
}
.tour-card h4 { margin: 0 0 8px; font-size: 1rem; }
.tour-card p  { margin: 0 0 14px; color: var(--ink-muted, #555); }
.tour-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-card-steps { font-size: .78rem; color: var(--ink-muted, #888); }
.tour-card-buttons { display: flex; gap: 8px; }
.tour-skip {
  position: fixed;
  z-index: 200001;
  top: 18px;
  right: 18px;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: .82rem;
  cursor: pointer;
}
.tour-skip:hover { background: rgba(255,255,255,.28); }

@media (max-width: 480px) {
  .tour-card { max-width: calc(100vw - 32px); }
}

/* ─── SIDEBAR SEPARATOR ─────────────────────────────────────────────────────── */
.sidebar-separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 20px;
}

/* ─── PAGE ADMIN UTILISATEURS ───────────────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  /* Défilement horizontal dès que la largeur disponible ne suffit plus, quelle que
     soit la taille d'écran (tablette, mobile, ou simplement une fenêtre étroite) */
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.admin-table th {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
}

.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--surface-2, #f5f8fc); }

.role-select {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  background: var(--surface);
}

.btn-delete-user {
  background: #e53935;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}

.btn-delete-user:hover { background: #c62828; }

.self-label { color: var(--text-muted, #aaa); font-size: 12px; }

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

.btn-reset-pwd {
  background: #ff9800;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.btn-reset-pwd:hover { background: #e65100; }

/* Ligne de réinitialisation mot de passe */
.pwd-reset-row td {
  background: #fff8e1;
  border-top: 2px solid #ff9800;
  padding: 14px 16px;
}

.inline-pwd-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pwd-label { font-size: 13px; color: var(--text-muted, #555); white-space: nowrap; }

/* input[type="text"] en plus de [type="password"] : l'œil (voir .pwd-field
   ci-dessous) fait passer le champ de l'un à l'autre en JS, il doit garder
   exactement le même style dans les deux états. */
.inline-pwd-form input[type="password"], .inline-pwd-form input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
}

/* ─── Œil « afficher le mot de passe » ──────────────────────────────────────
   Marquage : un conteneur .pwd-field autour de l'<input>, avec un bouton
   .pwd-toggle-btn superposé (voir public/js/password-toggle.js, inclus sur
   chaque page qui a un champ mot de passe). Le conteneur reprend le rôle de
   mise en page (flex/largeur) que l'<input> avait seul avant d'être
   enveloppé — voir les deux règles ".inline-pwd-form .pwd-field" et
   ".add-user-row .pwd-field" un peu plus bas, propres aux formulaires en
   ligne qui utilisaient flex/min-width directement sur l'input. */
.pwd-field { position: relative; width: 100%; }
/* width:100% explicite : dans .add-user-row, l'input comptait sur flex:1
   pour s'étirer (règle .add-user-row input, héritée) — sans effet une fois
   l'input dans ce conteneur non-flex, d'où ce rattrapage. */
.pwd-field input[type="password"], .pwd-field input[type="text"] { width: 100%; padding-right: 34px; }
/* Edge (et IE) ajoutent AUTOMATIQUEMENT leur propre icône native « afficher
   le mot de passe » (::-ms-reveal) sur tout <input type="password">, sous
   forme d'un petit bouton encadré distinct du nôtre — c'est très probablement
   le « cadre bleu » toujours visible malgré nos styles sur .pwd-toggle-btn,
   qui ne peuvent rien contre un contrôle natif du navigateur. On la masque
   partout : notre propre œil (.pwd-toggle-btn) suffit. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
/* top:0 + bottom:0 + margin:auto 0 (plutôt que top:50%/translateY) : centre
   verticalement de façon fiable même si .pwd-field est légèrement plus haut
   que l'input (ex. contexte flex). display:flex sur le bouton lui-même
   centre l'émoji dans sa propre boîte, qui a souvent des marges internes
   irrégulières selon la police système. Aucun fond ni bordure : juste l'œil,
   sans cadre visible — demande explicite.
   !important sur le fond/bordure/padding/coins : la vraie cause du cadre
   bleu qui persistait — sur les pages connexion / changer-mdp / création
   d'utilisateur, ce bouton est nichée dans .login-form / .change-pwd-form /
   .add-user-row, qui ont chacune une règle générique ".xxx button" (classe +
   balise = plus spécifique qu'une simple classe comme .pwd-toggle-btn) lui
   redonnant le fond bleu et les coins arrondis du bouton "Se connecter"/
   "Ajouter". Sans ces !important, ce bouton gagnait selon la page. */
.pwd-toggle-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  margin: auto 0;
  width: 22px !important;
  height: 22px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted, #888) !important;
  /* Retire le contour bleu par défaut du navigateur au clic/tab (et le
     halo de tap bleuté sur mobile) : demande explicite, aucun cadre visible
     dans aucun état, même focus. appearance:none en plus d'outline:none —
     certains navigateurs dessinent un halo de focus natif indépendant de
     "outline" sur les <button>, que outline:none seul ne suffit pas toujours
     à effacer. Règles :focus/:focus-visible répétées explicitement pour ne
     laisser aucune ambiguïté de cascade. */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.pwd-toggle-btn svg {
  /* L'icône (paupière + pupille) a un centre optique légèrement plus haut
     que son centre géométrique — décalage manuel pour la recentrer visuellement. */
  position: relative;
  top: 2px;
}
.pwd-toggle-btn::-moz-focus-inner { border: 0; }
.pwd-toggle-btn:hover { opacity: .65; }
.pwd-toggle-btn:focus,
.pwd-toggle-btn:focus-visible,
.pwd-toggle-btn:active {
  outline: none;
  box-shadow: none;
  border: none;
}
.inline-pwd-form .pwd-field, .add-user-row .pwd-field { flex: 1; min-width: 160px; }

.btn-pwd-save {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}

.btn-pwd-save:hover { background: #1e7e34; }

.btn-pwd-cancel {
  background: #e53935;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}

.btn-pwd-cancel:hover { background: #c62828; }

/* Barre de recherche utilisateurs */
/* ── Compteurs de comptes (page Gestion des utilisateurs) ────────────────── */
.user-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.user-stat-card {
  background: var(--surface);
  border-radius: 10px;
  border: 1.5px solid #dce3ef;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  /* Cliquable : filtre le tableau des utilisateurs sur son statut (voir
     setFilter() dans la page) plutôt que de rester un simple compteur. */
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.user-stat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #b7c4dc; }
.user-stat-card.active-filter { border-color: var(--accent, #005bbb); box-shadow: 0 0 0 2px rgba(0,91,187,0.3); }
.user-stat-value { display: block; font-size: 1.7rem; font-weight: 700; color: var(--text-heading, #1a2d4e); line-height: 1.1; }
.user-stat-label { display: block; margin-top: 4px; font-size: .82rem; color: var(--text-muted, #6b7280); }
.user-stat-active .user-stat-value   { color: #1e7e34; }
.user-stat-inactive .user-stat-value { color: #c62828; }
.user-stat-locked .user-stat-value   { color: #b8710b; }

.admin-search-bar {
  margin-bottom: 16px;
}

.admin-search-bar input {
  width: 100%;
  max-width: 400px;
  padding: 10px 18px;
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 14px;
  outline: none;
}

.user-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.user-search-row input#userSearch { flex: 1 1 220px; }
.role-filter { position: relative; }
.role-filter .role-filter-btn {
  padding: 10px 16px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.role-filter .role-filter-btn:hover { border-color: var(--accent); }
.role-filter-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.role-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.role-filter-menu[hidden] { display: none; }
.role-filter-menu label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
/* Sans ça, la règle .admin-search-bar input (largeur 100 %, marges) étire les cases à cocher. */
.role-filter-menu input[type="checkbox"] {
  width: 16px;
  max-width: none;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}
.role-filter-menu label:hover { background: var(--surface-hover); }
.role-filter-menu .role-filter-reset {
  width: 100%;
  margin-top: 4px;
  padding: 6px;
  border: none;
  background: none;
  color: var(--text-muted, #888);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.add-user-box {
  background: var(--surface);
  padding: 24px;
  border-radius: 8px;
  border-left: 5px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}

.add-user-box h3 {
  color: var(--accent);
  margin-bottom: 20px;
  font-size: 1rem;
}

.add-user-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.add-user-row input,
.add-user-row select {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  flex: 1;
  min-width: 160px;
}

.add-user-row button {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.add-user-row button:hover { background: var(--accent-hover); }

.alert {
  padding: 12px 18px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
}

.alert-success {
  background: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #43a047;
}

.alert-error {
  background: #ffebee;
  color: #c62828;
  border-left: 4px solid #e53935;
}

/* ─── PAGE CONNEXION ────────────────────────────────────────────────────────── */
body.login-body {
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: auto;
}

.login-box {
  background: var(--surface);
  padding: 50px 40px;
  border-radius: 16px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  text-align: center;
}

.login-logo {
  font-size: 48px;
  margin-bottom: 12px;
}

.login-title {
  font-size: 1.2rem;
  color: var(--accent);
  font-family: var(--font-display);
  margin-bottom: 30px;
  line-height: 1.4;
}

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

.login-form input {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
}

.login-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.login-form button {
  background-color: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 6px;
}

.login-form button:hover { background-color: var(--accent-hover); }

.login-error {
  color: #e53935;
  font-size: 13px;
  font-weight: bold;
  margin: 0;
}

/* ─── PAGE CHANGEMENT MOT DE PASSE (première connexion) ────────────────────── */
body.change-pwd-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.change-pwd-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow-y: auto;
}

.change-pwd-card {
  background: var(--surface);
  padding: 50px 44px;
  border-radius: 16px;
  width: 480px;
  max-width: 90%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  text-align: center;
  border-top: 5px solid var(--accent);
  margin: 30px 0;
}

.change-pwd-icon { font-size: 50px; margin-bottom: 16px; }

.change-pwd-title {
  font-size: 1.2rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: bold;
  margin-bottom: 12px;
}

.change-pwd-subtitle {
  font-size: 13px;
  color: var(--text-muted, #666);
  line-height: 1.6;
  margin-bottom: 28px;
}

.change-pwd-error {
  background: #ffebee;
  color: #c62828;
  border-left: 4px solid #e53935;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: left;
}

.change-pwd-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.change-pwd-form input {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.change-pwd-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,91,187,0.1);
}

.change-pwd-form button {
  background-color: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 6px;
  font-family: inherit;
}

.change-pwd-form button:hover { background-color: var(--accent-hover); }

/* ─── JOURNAL D'AUDIT ───────────────────────────────────────────────────────── */
.log-count {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--text-muted, #888);
}

.log-table { table-layout: fixed; }

.log-table th:nth-child(1) { width: 135px; }
.log-table th:nth-child(2) { width: 130px; }
.log-table th:nth-child(3) { width: 210px; }
.log-table th:nth-child(4) { width: auto; }
.log-table th:nth-child(5) { width: 110px; }
.log-table th:nth-child(6) { width: 50px; }

.log-date {
  font-size: 12px;
  color: var(--text-muted, #555);
  white-space: nowrap;
}

.log-details {
  /* .admin-table met TOUTE la table en white-space:nowrap (voir plus haut)
     pour que le défilement horizontal fonctionne — mais ça empêchait aussi
     ce champ, souvent long, de revenir à la ligne : il poussait la table
     bien au-delà de sa largeur réelle et forçait à défiler horizontalement
     rien que pour atteindre la colonne Supprimer, même quand elle tenait
     largement à l'écran. Il faut donc annuler ce nowrap hérité — mais sans
     word-break/overflow-wrap:break-word, qui coupent un mot en 2 dès qu'il
     ne tient plus dans la colonne (surtout sur téléphone, où les autres
     colonnes en nowrap laissent très peu de place à celle-ci) : un mot trop
     long dépasse simplement sur sa ligne plutôt que d'être tronché, quitte
     à profiter du défilement horizontal déjà prévu sur .admin-table. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 13px;
  color: var(--text);
}

.log-ip {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-muted, #777);
}

/* Badges colorés par type d'action */
.log-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.log-badge-login           { background: #e8f5e9; color: #2e7d32; }
.log-badge-login-failed    { background: #ffebee; color: #c62828; }
.log-badge-logout          { background: #f5f5f5; color: #555; }
.log-badge-create-procedure { background: #e3f2fd; color: #1565c0; }
.log-badge-update-procedure { background: #fff3e0; color: #e65100; }
.log-badge-delete-procedure { background: #ffebee; color: #b71c1c; }
.log-badge-create-user     { background: #e0f7fa; color: #006064; }
.log-badge-delete-user     { background: #ffebee; color: #b71c1c; }
.log-badge-update-role     { background: #f3e5f5; color: #6a1b9a; }
.log-badge-reset-password      { background: #fff3e0; color: #e65100; }
.log-badge-change-password     { background: #e8f5e9; color: #2e7d32; }
.log-badge-restore-procedure   { background: #e8f5e9; color: #1b5e20; }
.log-badge-permanent-delete    { background: #b71c1c; color: white; }

/* ─── PAGINATION JOURNAL D'AUDIT ────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 12px 0;
}

.page-btn {
  display: inline-block;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border: none;
}

.page-btn:hover           { background: var(--accent-hover); }
.page-btn-disabled        { background: #ccc; color: #888; cursor: default; padding: 8px 18px; border-radius: 6px; font-size: 14px; font-weight: bold; }
.page-info                { font-size: 14px; color: var(--text-muted, #555); }

/* ─── EXPORT CSV (journal d'audit) ─────────────────────────────────────────── */
.log-export-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-2, #f0f6ff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}

.log-export-label { font-weight: bold; color: var(--accent); white-space: nowrap; }

.log-date-input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.btn-export {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: bold;
}

.btn-export:hover { background: var(--accent-hover) !important; }

/* ─── PAGE CHANGEMENT MDP AUTONOME ─────────────────────────────────────────── */
.change-pwd-success {
  background: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #43a047;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: left;
}

/* ─── CORBEILLE ─────────────────────────────────────────────────────────────── */
.corbeille-notice {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted, #555);
  margin-bottom: 16px;
}

.corbeille-empty {
  background: #e8f5e9;
  border-left: 4px solid #43a047;
  padding: 20px 24px;
  border-radius: 8px;
  color: #2e7d32;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 10px;
}

.corbeille-bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.corbeille-select-all-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
}

.btn-restore-bulk {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.btn-restore-bulk:hover { background: #1e7e34; }

.btn-danger-bulk {
  background: #e53935;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.btn-danger-bulk:hover { background: #c62828; }

.btn-restore-sm {
  background: #28a745;
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.btn-restore-sm:hover { background: #1e7e34; }

.corbeille-desc { font-size: 12px; color: var(--text-muted, #888); }
.corbeille-cat  { font-size: 12px; background: var(--surface-hover); color: var(--accent); padding: 2px 8px; border-radius: 10px; }

/* ─── BADGES NOUVEAUX (verrouillage, statut compte) ────────────────────────── */
.badge-locked {
  display: inline-block;
  margin-left: 8px;
  background: #ffebee;
  color: #c62828;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
}

.badge-active {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.badge-inactive {
  display: inline-block;
  /* Fond gris neutre volontairement fixe (pas thémé) : texte fixe pour garder
     un contraste correct sur ce fond précis. */
  background: #fafafa;
  color: #999;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  white-space: nowrap;
}

/* ─── BOUTONS GESTION UTILISATEUR ───────────────────────────────────────────── */
.btn-unlock {
  background: #ff9800;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}
.btn-unlock:hover { background: #e65100; }

.btn-disable-user {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #e65100;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}
.btn-disable-user:hover { background: #ffe0b2; }

.btn-enable-user {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #2e7d32;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}
.btn-enable-user:hover { background: #c8e6c9; }

/* ─── BADGES NOUVEAUX AUDIT ─────────────────────────────────────────────────── */
.log-badge-account-locked  { background: #ffebee; color: #c62828; }
.log-badge-unlock-account  { background: #e8f5e9; color: #2e7d32; }
.log-badge-enable-user     { background: #e8f5e9; color: #2e7d32; }
.log-badge-disable-user    { background: #fafafa; color: #888; border: 1px solid #ddd; }

/* ─── PAGE CONNEXION — timeout / tentatives ─────────────────────────────────── */
.login-timeout {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}

.login-attempts {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
}

/* ─── FILTRE JOURNAL D'AUDIT ────────────────────────────────────────────────── */
.log-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-2, #f0f6ff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.log-filter-input {
  padding: 7px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  min-width: 200px;
  flex: 1;
}

.log-filter-select {
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  background: var(--surface);
}

.btn-clear-filter {
  background: #f5f5f5 !important;
  color: var(--text-muted, #555 !important) !important;
  border: 1px solid #ccc !important;
}
.btn-clear-filter:hover { background: #e0e0e0 !important; }

/* ─── BADGE "LU" SUR LES CARTES PROCÉDURES ─────────────────────────────────── */
.read-badge {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  margin-right: 4px;
  vertical-align: middle;
}

/* ─── PAGES D'ERREUR 404 / 500 ───────────────────────────────────────────────── */
.error-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.error-box {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 48px 56px;
  text-align: center;
  max-width: 480px;
  width: 90%;
}

.error-code {
  font-size: 72px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

.error-icon { font-size: 40px; margin-bottom: 12px; }

.error-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--text-heading, #222);
  margin-bottom: 10px;
}

.error-msg {
  font-size: 15px;
  color: var(--text-muted, #666);
  margin-bottom: 28px;
}

.error-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  transition: background 0.2s;
}
.error-btn:hover { background: var(--accent-hover); }

/* ─── TABLEAU DE BORD ADMIN ─────────────────────────────────────────────────── */
/* Onglets (Aperçu / Gestion du temps / Stats de lecture, fusionnées ici
   depuis leurs anciennes pages dédiées — voir intranet-dashboard.ejs). */
.dash-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.dash-tab-btn {
  border: none;
  background: none;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: bold;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s ease, border-color .15s ease;
}
.dash-tab-btn:hover { color: var(--text); }
.dash-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.dash-tab-panel[hidden] { display: none; }

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* Tableau de bord intranet : 8 cartes → 2 rangées pleines de 4 (plutôt que
   5 + 3, qui laissait un vide disgracieux à droite sur la 2e rangée).
   minmax(0,1fr) et non 1fr : sans ça, une étiquette un peu longue impose sa
   largeur mini à la colonne et la grille déborde à droite. */
.dash-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .dash-kpi-grid   { grid-template-columns: repeat(3, 1fr); }
  /* 8 cartes : rangées pleines de 2 plutôt que 3 + 3 + 2. */
  .dash-kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

.dash-kpi {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 22px 16px;
  text-align: center;
}

.dash-kpi-value {
  font-size: 42px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1.1;
}

.dash-kpi-warn { color: #c62828; }

.dash-kpi-label {
  font-size: 13px;
  color: var(--text-muted, #555);
  margin-top: 6px;
  font-weight: 600;
}

/* ─── INDICATEURS DE L'AGENCE (KPI) ─────────────────────────────────────────── */
.kpi-category-section { margin-bottom: 32px; }

.kpi-category-title {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: white;
  background: #00a3e0;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.kpi-card {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
}

.kpi-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}

.kpi-value-box {
  background: var(--surface-2, #f4f6f8);
  border-radius: 8px;
  padding: 16px 8px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 10px;
}

/* Toutes les valeurs d'indicateur dans le même vert clair, quelle que soit
   la catégorie de couleur choisie à la création (l'admin garde le choix
   dans le formulaire, mais l'affichage est volontairement uniforme). Fixe
   (pas de var() liée au thème) : "neutral" utilisait par erreur la couleur
   de titre du thème actif, ce qui la faisait ressortir en vert vif sur
   certains thèmes (ex. Matrix) — clashant avec le vert foncé fixe d'origine
   de "green". */
.kpi-value-green,
.kpi-value-orange,
.kpi-value-red,
.kpi-value-blue,
.kpi-value-neutral { color: #28a745; }

.kpi-title {
  overflow-wrap: anywhere;   /* titre long : retour à la ligne, sans débordement */
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading, #1f2937);
  margin: 0 0 4px;
}

.kpi-desc {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  margin: 0;
  line-height: 1.4;
}

.kpi-date {
  font-size: 11.5px;
  color: var(--text-muted, #9ca3af);
  margin: 6px 0 0;
  font-style: italic;
}

/* Tendance neutre (▲/▼) : on ne préjuge pas si une hausse est bonne ou
   mauvaise selon l'indicateur, donc pas de vert/rouge ici — juste un ton
   informatif discret. */
.kpi-trend {
  font-size: 11.5px;
  /* Fond gris neutre volontairement fixe (pas thémé) : texte fixe pour garder
     un contraste correct sur ce fond précis. */
  color: #4b5563;
  background: #f4f6f8;
  border-radius: 6px;
  padding: 3px 8px;
  margin: 6px 0 0;
  display: inline-block;
}
.kpi-history-btn {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px;
  text-align: center;
  text-decoration: none;
}
.kpi-history-btn:hover { text-decoration: underline; }

.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 1100px) {
  .dash-two-col { grid-template-columns: 1fr; }
}

.dash-panel {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  overflow: hidden;
}

/* Les .admin-table sont en display:block + overflow-x pour pouvoir défiler
   horizontalement sur les pages « liste » étroites. Dans un panneau du
   tableau de bord, cet display:block empêchait le tableau de s'étirer sur
   toute la largeur du panneau : le contenu se tassait à gauche et laissait
   un grand vide à droite. Ici on repasse en tableau normal (peu de colonnes,
   titres qui peuvent revenir à la ligne) pour qu'il remplisse le panneau. */
.dash-panel .admin-table {
  display: table;
  white-space: normal;
  overflow-x: visible;
  margin-bottom: 0;
  box-shadow: none;
  border-radius: 0;
}

.dash-panel-title {
  background: var(--surface-2, #f0f6ff);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: bold;
  color: var(--accent);
  margin: 0;
}

.dash-link-more {
  display: block;
  text-align: right;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid #eee;
}
.dash-link-more:hover { text-decoration: underline; }

/* ─── STATISTIQUES DE LECTURE ────────────────────────────────────────────────── */
.stats-subtitle {
  color: var(--text-muted, #666);
  font-size: 14px;
  margin-bottom: 16px;
}

.live-indicator {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 11.5px;
  font-weight: bold;
  vertical-align: middle;
}

.stats-bar-wrap {
  display: inline-block;
  width: 140px;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  vertical-align: middle;
}

.stats-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s;
}

.stats-pct {
  font-size: 13px;
  font-weight: bold;
  margin-left: 8px;
  vertical-align: middle;
  color: var(--text);
}

/* ─── GESTION CATÉGORIES ─────────────────────────────────────────────────────── */
.cat-slug {
  /* Fond gris neutre volontairement fixe (pas thémé) : le texte reste donc
     lui aussi fixe pour garder un contraste correct sur ce fond précis. */
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  color: #555;
  font-family: monospace;
}

/* ─── BADGE AUDIT NOUVELLES ACTIONS ─────────────────────────────────────────── */
.log-badge-create-category { background: #e0f7fa; color: #006064; }
.log-badge-update-category { background: #fff3e0; color: #e65100; }
.log-badge-delete-category { background: #ffebee; color: #b71c1c; }

/* ─── INDICATEUR EXPIRATION SESSION ─────────────────────────────────────────── */
#session-warning-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

#session-warning-box {
  background: var(--surface);
  border-radius: 10px;
  padding: 32px 40px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

#session-stay-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTRANET
═══════════════════════════════════════════════════════════════════════════ */

.intranet-content {
  padding: 30px 40px;
  max-width: 1200px;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.intranet-hero {
  background: linear-gradient(135deg, var(--accent) 0%, #003e8a 100%);
  color: var(--accent-ink);
  padding: 32px 40px;
  border-radius: 12px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intranet-hero-title {
  font-size: 1.7rem;
  font-weight: bold;
  font-family: var(--font-display);
  letter-spacing: var(--tracking, normal);
  text-transform: var(--transform, none);
  margin-bottom: 6px;
}

.intranet-hero-subtitle {
  font-size: 1rem;
  opacity: 0.85;
  margin: 0;
}

.intranet-hero-icon {
  font-size: 4.2rem;
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  flex-shrink: 0;
  margin-left: 24px;
}

/* ─── Liens rapides ──────────────────────────────────────────────────────── */
.quick-links {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.quick-link-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 22px 30px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
  min-width: 180px;
  text-align: center;
  cursor: pointer;
}

.quick-link-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 91, 187, 0.14);
  color: var(--accent);
}

.quick-link-procedures {
  border-left: 4px solid var(--accent);
}

.quick-link-icon {
  font-size: 2.2rem;
}

.quick-link-label {
  font-weight: bold;
  font-size: 0.95rem;
}

.quick-link-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #999);
}

/* ─── Grille ─────────────────────────────────────────────────────────────── */
.intranet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  min-width: 0;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */
.intranet-section {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  min-width: 0;
}

.intranet-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8f0fb;
}

.intranet-section-title {
  color: var(--accent);
  font-size: 1.05rem;
  font-family: var(--font-display);
  margin: 0;
}

.btn-add-intranet {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-add-intranet:hover { background: var(--accent-hover); }

.intranet-empty {
  color: var(--text-muted, #bbb);
  font-size: 0.875rem;
  text-align: center;
  padding: 24px 0;
}

/* ─── Cartes actualités ──────────────────────────────────────────────────── */
.news-card {
  border-left: 4px solid var(--accent);
  padding: 14px 16px;
  background: var(--surface-2, #f8fafd);
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
}

.news-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.news-card-title {
  /* Retour à la ligne même sans espace (titre très long, URL...) : sans ça un mot
     trop long débordait de la carte au lieu de passer à la ligne. */
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  color: var(--text-strong);
  font-family: var(--font-display);
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.news-content {
  font-size: 0.875rem;
  color: var(--text-muted, #555);
  line-height: 1.55;
  margin: 0 0 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.news-meta {
  font-size: 0.75rem;
  color: var(--text-muted, #aaa);
}

/* ── Kit nouvel arrivant : miniature d'un document ──────────────────────── */
.onboarding-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.onboarding-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2, #eee);
}
.onboarding-card-text {
  flex: 1;
  min-width: 0;
}

/* ─── Newsletter ─────────────────────────────────────────────────────────── */
.newsletter-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-2, #f8fafd);
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  gap: 8px 12px;
}

.newsletter-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* flex-basis à 220px (plutôt que 0) : le titre garde une largeur correcte
     tant qu'il y a la place, et le bloc d'actions (Consulter, Télécharger,
     ❤️, ✏️...) passe entièrement à la ligne du dessous — via le flex-wrap
     ci-dessus — dès que ça ne rentre plus, au lieu de se superposer au
     titre/à la date (observé sur tablette, où plusieurs boutons admin
     s'affichent en plus de "Consulter"). */
  flex: 1 1 220px;
  min-width: 0;
}

.newsletter-month {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.newsletter-title-text {
  font-size: 0.875rem;
  color: var(--text);
  /* Titre complet, à la ligne si besoin (avant : une seule ligne coupée par « … »). */
  overflow-wrap: anywhere;
}

.newsletter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.btn-view-newsletter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-view-newsletter:hover { background: var(--accent-hover); color: var(--accent-ink); }

.btn-delete-intranet {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted, #ccc);
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}

.btn-delete-intranet:hover { color: #e53935; }

/* ─── INTRANET — CARTES ACTUALITÉS ──────────────────────────────────────────── */
.news-card-title-link {
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.news-card-title-link:hover h3 { color: var(--accent); }

.news-card-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.btn-edit-intranet {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-muted, #aaa);
  padding: 3px 5px;
  transition: color 0.15s;
}
.btn-edit-intranet:hover { color: var(--accent); }

.news-content-preview {
  font-size: 0.875rem;
  color: var(--text-muted, #555);
  line-height: 1.55;
  margin: 6px 0 8px 0;
  word-break: break-word;
}

.news-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.news-read-more {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.news-read-more:hover { text-decoration: underline; }

/* ─── INTRANET — PAGE DÉTAIL ACTUALITÉ ──────────────────────────────────────── */
.news-back-link {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 20px;
}
.news-back-link:hover { text-decoration: underline; }

.news-article {
  background: var(--surface);
  border-radius: 12px;
  padding: 36px 40px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  max-width: 800px;
}

.news-article-title {
  overflow-wrap: anywhere;
  font-size: 1.6rem;
  color: var(--text-strong);
  font-family: var(--font-display);
  margin-bottom: 12px;
  line-height: 1.3;
}

.news-article-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted, #aaa);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8eef8;
}

.news-article-body {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 24px;
}

.news-article-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-2, #f0f6ff);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}

.attachment-label {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
}

.news-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.news-attachment:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* ─── INTRANET — CORBEILLE ───────────────────────────────────────────────────── */
.corbeille-section-title {
  font-size: 1rem;
  color: var(--accent);
  margin: 20px 0 12px;
}

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

.btn-restore {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}
.btn-restore:hover { background: #c8e6c9 !important; }

/* Lien retour intranet dans la sidebar du portail procédures */
.sidebar-back-intranet {
  font-size: 12px !important;
  color: var(--text-muted, #888 !important) !important;
  padding: 10px 20px 8px !important;
  border-left-color: transparent !important;
}
.sidebar-back-intranet:hover {
  background: var(--bg) !important;
  color: var(--accent) !important;
}

/* ─── Badges audit intranet ──────────────────────────────────────────────── */
.log-badge-create-news       { background: #e8f5e9; color: #1b5e20; }
.log-badge-delete-news       { background: #ffebee; color: #b71c1c; }
.log-badge-create-newsletter { background: #e3f2fd; color: #0d47a1; }
.log-badge-delete-newsletter { background: #ffebee; color: #b71c1c; }

/* ── Colonne Action dans les logs : le badge tient sur une seule ligne
   (colonne plus large en conséquence) plutôt que de repartir à la verticale
   lettre par lettre — si un nom d'action est vraiment très long, le tableau
   défile horizontalement comme le reste de .admin-table. */
.log-table td.log-action-cell {
  white-space: nowrap;
}
.log-table .log-badge {
  white-space: nowrap;
  display: inline-block;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTRANET v3 — Catégories · Pagination · Éditeur riche · Sondages · Annuaire
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Badge catégorie sur les actualités ─────────────────────────────────── */
.news-category-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
}

/* ── Épingle ────────────────────────────────────────────────────────────── */
.news-pin-indicator,
.pin-indicator {
  font-size: 0.85rem;
  color: #f59e0b;
  flex-shrink: 0;
}
/* Bouton épingler d'une note (site Notes et Bonnes Pratiques) — même
   comportement (span cliquable) que .favorite/.edit-btn/.delete-btn juste
   au-dessus, plutôt que le <button> dans un <form> utilisé côté actualités. */
.pin-btn {
  cursor: pointer;
  font-size: 18px;
  transition: transform 0.2s;
}
.pin-btn:hover { transform: scale(1.2); }
.pin-btn.active { color: #f59e0b; }
.btn-pin-intranet {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px;
  opacity: .6;
  transition: opacity .15s;
}
.btn-pin-intranet:hover { opacity: 1; }

/* ── Tag « Nouveau » sur une actualité non lue ──────────────────────────── */
.news-new-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: #16a34a;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.pending-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: #e08b00;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* ── Bandeau d'alerte prioritaire ───────────────────────────────────────── */
.priority-alerts { display: flex; flex-direction: column; }
.priority-alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: #dc2626;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.priority-alert-icon { flex-shrink: 0; font-size: 1.15rem; }
.priority-alert-text { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; }
.priority-alert-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: #fff;
  opacity: .85;
  padding: 2px 6px;
  transition: opacity .15s;
}
.priority-alert-close:hover { opacity: 1; }

/* ── Badge non-lues ─────────────────────────────────────────────────────── */
.unseen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Barre de recherche ─────────────────────────────────────────────────── */
.intranet-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.date-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  align-items: center;
}
.date-filter-label {
  font-size: 14px;
  color: var(--text-muted, #555);
  font-weight: 600;
}
.intranet-search-input {
  flex: 1;
  min-width: 180px;
  padding: 8px 14px;
  border: 1.5px solid #dce3ef;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.intranet-search-input:focus { border-color: var(--accent); }
.intranet-search-select {
  padding: 8px 12px;
  border: 1.5px solid #dce3ef;
  border-radius: 8px;
  font-size: 0.88rem;
  outline: none;
  background: var(--surface);
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

/* ── Popup large (éditeur Quill) — scrollable ───────────────────────────── */
.popup-large {
  max-width: 700px !important;
  width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.popup-large h2 { flex-shrink: 0; }
.popup-large form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.popup-large .popup-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}
.popup-large .popup-footer {
  flex-shrink: 0;
  border-top: 1px solid #eef2f7;
  padding-top: 14px;
  margin-top: 8px;
  background: var(--surface);
}

/* ── Éditeur Quill (layout barre à droite) ──────────────────────────────── */
.quill-split-wrap {
  display: flex;
  flex-direction: row;
  border: 1.5px solid #dce3ef;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  flex: 1;
}
/* Sélecteur .quill-split-wrap .quill-fixed-editor (et non .quill-fixed-editor
   seul) : la feuille Quill, chargée après style.css, pose .ql-container
   { height:100% } avec la même spécificité et l'emportait — la boîte se
   réduisait à une seule ligne au lieu des 280px voulus. */
.quill-split-wrap .quill-fixed-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Hauteur FIXE (et non plus min/max) : la boîte ne grandit plus au fil de
     la saisie, le texte défile dedans une fois qu'il dépasse (voir
     overflow-y sur .ql-editor plus bas). */
  height: 280px;
  overflow: hidden;
  font-family: inherit;
  font-size: 0.9rem;
}
/* Quill snow overrides dans le split — le conteneur ET la zone éditable
   doivent tous les deux s'étirer (flex:1 en cascade), sinon le texte
   s'arrête bien avant le bas de la boîte visible dès que la barre d'outils
   à droite (dont la hauteur dépend du nombre de boutons) est plus haute que
   l'ancien plafond de 140px — d'où la zone de texte qui paraissait "coupée"
   avec du vide en dessous. min-height:0 est nécessaire ici : par défaut, un
   élément flex ne rétrécit jamais en dessous de la taille de son contenu
   (même avec une hauteur figée sur le parent), ce qui aurait fait persister
   l'agrandissement de la boîte au lieu de laisser .ql-editor défiler. */
.quill-split-wrap .ql-container.ql-snow {
  border: none;
  border-right: 1.5px solid #dce3ef;
  border-radius: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: inherit;
  font-size: 0.9rem;
}
.quill-split-wrap .ql-editor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  /* Sans ça, le texte saisi ET le texte d'exemple (::before ci-dessous)
     peuvent se retrouver sur une seule ligne qui déborde de la boîte plutôt
     que de passer à la ligne — surtout visible sur mobile, où la barre
     d'outils (46px fixes) laisse peu de largeur à l'éditeur : le placeholder
     "Saisissez le contenu de l'actualité..." apparaissait coupé en plein
     mot au lieu de revenir à la ligne. */
  white-space: normal;
  overflow-wrap: break-word;
}
.quill-split-wrap .ql-editor.ql-blank::before {
  white-space: normal;
  overflow-wrap: break-word;
}
/* Barre d'outils latérale droite */
.quill-side-bar {
  width: 46px;
  min-width: 46px;
  background: #f8faff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
}
/* Quill ajoute ql-toolbar ql-snow à notre div — on écrase leurs bordures */
.quill-side-bar.ql-toolbar.ql-snow {
  border: none !important;
  padding: 8px 4px !important;
  box-shadow: none;
}
.quill-side-bar .ql-formats {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  margin: 0 0 6px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid #dce3ef;
  width: 100%;
  align-items: center;
}
.quill-side-bar .ql-formats:last-child {
  border-bottom: none;
  margin-bottom: 0 !important;
  padding-bottom: 0;
}
.quill-side-bar button {
  width: 28px !important;
  height: 26px !important;
  padding: 2px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.quill-side-bar button:hover { background: #e8f0fb !important; }

/* ── Contenu article (riche) ────────────────────────────────────────────── */
.news-article-body ul,
.news-article-body ol { margin: 8px 0 8px 24px; }
.news-article-body p  { margin: 6px 0; }
.news-article-body a  { color: var(--accent); text-decoration: underline; }

/* ── Reprendre où j'en étais ────────────────────────────────────────────── */
.recent-views-section { margin-top: 24px; margin-bottom: 24px; }
.recent-views-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  margin-top: 12px;
  scrollbar-width: thin;
}
.recent-view-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1.5px solid #dce3ef;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  color: var(--text);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .15s, transform .15s;
}
.recent-view-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.recent-view-icon { flex: 0 0 auto; }
.recent-view-title { overflow: hidden; text-overflow: ellipsis; }

/* ── Sondages ───────────────────────────────────────────────────────────── */
.polls-section { margin-top: 32px; margin-bottom: 24px; }
.polls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.poll-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1.5px solid #dce3ef;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.poll-question {
  font-size: 0.97rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text-heading, #1a2d4e);
  line-height: 1.4;
}
.poll-option-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}
.btn-vote {
  margin-top: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 7px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
}
.btn-vote:hover { background: #004a9e; }
.poll-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.poll-opt-label {
  width: 110px;
  min-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.82rem;
}
.poll-bar-wrap {
  flex: 1;
  background: #eef2f7;
  border-radius: 6px;
  height: 11px;
  overflow: hidden;
}
.poll-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width .4s ease;
  min-width: 0;
}
.poll-pct {
  font-weight: 700;
  color: var(--text-heading, #1a2d4e);
  min-width: 36px;
  text-align: right;
  font-size: 0.82rem;
}
.poll-voted-marker { color: #10b981; font-weight: 700; font-size: 0.8rem; }
.poll-total { color: var(--text-muted, #6b7280); font-size: 0.78rem; margin-top: 8px; display: block; }
.poll-meta {
  color: var(--text-muted, #9ca3af);
  font-size: 0.75rem;
  margin-top: 12px;
  display: block;
  border-top: 1px solid #f0f4f8;
  padding-top: 8px;
}
.poll-votes-count { color: var(--text-muted, #9ca3af); font-size: 0.78rem; min-width: 56px; }

/* ── Sondages (page de gestion) ─────────────────────────────────────────── */
.poll-manage-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1.5px solid #dce3ef;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.poll-manage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.poll-manage-question { font-size: 1rem; font-weight: 700; color: var(--text-heading, #1a2d4e); margin: 0; flex: 1; }
.poll-manage-results  { margin-bottom: 12px; }
.poll-manage-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f4f8;
  padding-top: 10px;
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
}
.poll-expiry-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
}
.poll-no-expiry { background: #f0fdf4; color: #166534; }
.poll-option-input { display: block; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Challenges — liste. Même identité « Ligue Interne » que la page détail
   (bandeau diagonal bleu nuit/orange, cartes joueur) plutôt qu'une grille de
   petites cartes plates — pour que la page donne déjà envie de cliquer.
   Classes préfixées "chl-" (Challenges Liste), isolées de "chg-" (détail).
   ══════════════════════════════════════════════════════════════════════════ */
.chl-page{
  --chl-navy:#0b1f3a; --chl-navy-2:#132c52; --chl-orange:#ff5a1f; --chl-orange-deep:#e64510;
  --chl-gold:#ffcf5c; --chl-paper:#f4f6fb; --chl-panel:#fff; --chl-text:#0b1f3a; --chl-text-mid:#5b6b8c; --chl-line:#dfe4ef;
  position: relative;
  margin: -30px -40px 0;
  padding: 0 40px 40px;
  background:
    radial-gradient(38% 32% at 4% 8%, rgba(11,31,58,0.08), transparent 70%),
    radial-gradient(42% 36% at 100% 18%, rgba(255,90,31,0.09), transparent 70%),
    radial-gradient(55% 42% at 50% 60%, rgba(255,207,92,0.1), transparent 70%),
    var(--chl-paper);
  color: var(--chl-text);
  font-family: 'Barlow Semi Condensed', 'Segoe UI', sans-serif;
}
.chl-banner{ position:relative; background:var(--chl-navy); color:#fff; clip-path:polygon(0 0,100% 0,100% 90%,0 100%); padding:20px 40px 34px; margin:0 -40px 26px; }
.chl-banner::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 55%, rgba(255,90,31,0.35) 100%); }
.chl-banner-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.chl-banner h2{ font-family:'Staatliches',sans-serif; font-weight:400; font-size:clamp(1.8rem,4vw,2.5rem); margin:0; letter-spacing:.01em; }
.chl-banner p{ position:relative; margin:6px 0 0; color:#c9d4ea; font-size:.98rem; max-width:520px; }
.chl-create-btn{ background:var(--chl-orange) !important; color:#fff !important; border:none !important; font-weight:700 !important; padding:12px 22px !important; border-radius:999px !important; box-shadow:0 10px 22px rgba(255,90,31,.35); white-space:nowrap; }

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.challenge-card {
  position: relative;
  background: var(--chl-panel);
  border-radius: 16px;
  border: 1px solid var(--chl-line);
  box-shadow: 0 8px 20px rgba(11,31,58,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  animation: chl-card-in .5s cubic-bezier(.22,.68,.3,1) forwards;
  transition: transform .2s ease, box-shadow .2s ease;
}
.challenge-grid .challenge-card:nth-child(1){animation-delay:.03s;} .challenge-grid .challenge-card:nth-child(2){animation-delay:.08s;}
.challenge-grid .challenge-card:nth-child(3){animation-delay:.13s;} .challenge-grid .challenge-card:nth-child(4){animation-delay:.18s;}
.challenge-grid .challenge-card:nth-child(5){animation-delay:.23s;} .challenge-grid .challenge-card:nth-child(6){animation-delay:.28s;}
.challenge-grid .challenge-card:nth-child(n+7){animation-delay:.32s;}
@keyframes chl-card-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .challenge-card{ animation:none; opacity:1; } }
.challenge-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(11,31,58,.16); border-color:var(--chl-orange); }
.challenge-card-done { opacity: .82; }
.challenge-card::before{ content:''; position:absolute; top:0; left:-20%; width:140%; height:34px; background:linear-gradient(120deg,var(--chl-navy) 40%, var(--chl-orange) 100%); transform:rotate(-2.5deg); transform-origin:top left; }
.challenge-card-done::before{ background:linear-gradient(120deg,var(--chl-navy) 40%, #8a97b3 100%); }
.challenge-card-link { position:relative; display: block; padding: 54px 20px 16px; color: inherit; text-decoration: none; flex: 1; }
.challenge-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.challenge-card-title { font-family:'Staatliches',sans-serif; font-weight:400; margin: 0; font-size: 1.4rem; letter-spacing:.01em; color: var(--chl-navy); line-height:1.05; }
.challenge-card-desc { font-size: .92rem; color: var(--chl-text-mid); margin: 0 0 14px; line-height:1.4; }
.challenge-card-footer { display: flex; justify-content: space-between; gap:10px; flex-wrap:wrap; font-size: .8rem; border-top: 1px solid var(--chl-line); padding-top: 12px; }
.challenge-card-footer small{ background:var(--chl-paper); color:var(--chl-text-mid); font-weight:600; padding:4px 10px; border-radius:999px; }
.challenge-card-admin-actions { display: flex; gap: 8px; padding: 0 20px 18px; }
.chl-page .challenge-card-admin-actions .menu-btn{ background:#fff; border:1px solid var(--chl-line); color:var(--chl-text); font-size:.78rem; }
.chl-page .challenge-card-admin-actions .menu-btn:hover{ border-color:var(--chl-orange); }
.chl-page .challenge-card-admin-actions .btn-cancel{ background:#e53935 !important; color:#fff !important; border-color:#e53935 !important; }

.challenge-status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.challenge-status-active { background: var(--chl-gold); color: var(--chl-navy); }
.challenge-status-done   { background: rgba(255,255,255,.9); color: var(--chl-text-mid); }

@media (max-width: 860px){
  .chl-page{ margin:-16px -16px 0; padding:0 16px 26px; }
  .chl-banner{ margin:0 -16px 22px; padding:16px 20px 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Challenges — page détail : « Ligue Interne ». Habillage retransmission
   sportive (bandeau diagonal bleu nuit/orange, cartes joueur), volontairement
   à part du reste du site (comme validé après plusieurs propositions) plutôt
   qu'un habillage neutre suivant les variables --surface/--accent du thème
   courant. Toutes les classes sont préfixées "chg-" pour rester isolées dans
   cette feuille de style partagée par tout le site. Les animations/le rythme
   de la cérémonie (rien au chargement → 3e → 2e → 1er → classement, avec
   confettis et phrase de motivation) restent identiques à la version
   précédente (« Scène des Champions ») — seul l'habillage visuel change.
   ══════════════════════════════════════════════════════════════════════════ */
.chg-stage{
  --chg-navy:#0b1f3a; --chg-navy-2:#132c52; --chg-orange:#ff5a1f; --chg-orange-deep:#e64510;
  --chg-gold:#ffcf5c; --chg-silver:#cfd8e6; --chg-bronze:#e3a26a;
  --chg-ink:#fff; --chg-text:#0b1f3a; --chg-text-dim:#5b6b8c; --chg-text-faint:#8a97b3;
  --chg-line:#dfe4ef; --chg-card:#fff; --chg-paper:#f4f6fb;
  position: relative;
  margin: -30px -40px 0;
  padding: 0 0 34px;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  background:
    radial-gradient(38% 32% at 4% 8%, rgba(11,31,58,0.08), transparent 70%),
    radial-gradient(42% 36% at 100% 18%, rgba(255,90,31,0.09), transparent 70%),
    radial-gradient(55% 42% at 50% 40%, rgba(255,207,92,0.13), transparent 70%),
    var(--chg-paper);
  color: var(--chg-text);
  font-family: 'Barlow Semi Condensed', 'Segoe UI', sans-serif;
}
.chg-stage h1, .chg-stage h2, .chg-stage h3 { font-family: inherit; }
#chg-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ── Bandeau diagonal (le seul bloc de la page en bleu nuit) ─────────────── */
.chg-banner{ position:relative; z-index:1; background:var(--chg-navy); color:#fff; clip-path:polygon(0 0,100% 0,100% 92%,0 100%); padding:12px 40px 22px; }
.chg-banner::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 55%, rgba(255,90,31,0.35) 100%); }

.chg-topbar{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.chg-back{ color:#c9d4ea; text-decoration:none; font-size:.92rem; font-weight:600; }
.chg-back:hover{ color:var(--chg-orange); }
.chg-topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chg-updated{ font-size:.78rem; color:#c9d4ea; white-space:nowrap; }
.chg-role{ font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--chg-navy); background:var(--chg-gold); padding:5px 12px; border-radius:999px; }

.chg-hero{ position:relative; z-index:1; text-align:center; padding:4px 0 0; }
.chg-eyebrow{ font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--chg-orange); font-size:.76rem; margin:0 0 3px; }
.chg-title{ font-family:'Staatliches',sans-serif; font-weight:400; font-size:clamp(1.6rem,3.6vw,2.2rem); line-height:1; letter-spacing:.01em; margin:0; color:#fff; }
.chg-meta{ margin:5px auto 0; max-width:540px; color:#c9d4ea; font-size:.9rem; line-height:1.35; }
.chg-meta strong{ color:#fff; }
.chg-motivate{ margin:4px auto 0; max-width:520px; color:var(--chg-gold); font-weight:700; font-size:.9rem; }

.chg-clock{ display:flex; justify-content:center; gap:8px; margin:8px 0 0; flex-wrap:wrap; }
.chg-clock .u{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:5px 12px 5px; min-width:54px; text-align:center; }
.chg-clock .n{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1.15rem; font-variant-numeric:tabular-nums; line-height:1; color:#fff; }
.chg-clock .l{ display:block; margin-top:2px; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#a9b8d6; font-weight:600; }
.chg-done-badge{ display:inline-block; margin-top:6px; font-size:1rem; font-weight:700; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; padding:7px 18px; border-radius:999px; }

.chg-caption{ position:relative; z-index:1; text-align:center; min-height:1.5em; margin:10px auto 0; max-width:600px; padding:0 16px; font-family:'Oswald',sans-serif; font-weight:600; font-size:1.25rem; color:var(--chg-navy); opacity:0; transition:opacity .45s cubic-bezier(.4,0,.2,1); }
.chg-caption.visible{ opacity:1; }

/* ── Podium : cartes joueur (ruban + badge façon maillot) plutôt qu'un
   simple bloc de couleur ; l'avatar du champion jaillit façon diable-à-
   ressort, exactement comme dans la version précédente. ─────────────────── */
.chg-podium{ position:relative; z-index:1; margin:8px auto 0; padding:10px 20px 0; display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2.6vw,22px); flex-wrap:wrap; }
.chg-step{ position:relative; display:flex; flex-direction:column; align-items:center; width:clamp(150px,20vw,210px); background:var(--chg-card); border:1px solid var(--chg-line); border-radius:16px; box-shadow:0 10px 24px rgba(11,31,58,.1); padding:20px 14px 20px; text-align:center; overflow:hidden; opacity:0; transform:translateY(70px) scale(.9); will-change:transform,opacity; }
.chg-step-1{ width:clamp(168px,22vw,232px); padding-top:26px; box-shadow:0 16px 34px rgba(255,207,92,.35); border-color:var(--chg-gold); }
/* 2e et 3e places : mêmes couleurs médaille (argent / bronze) que le badge,
   le médaillon et le ruban du 1er, plutôt que l'orange générique. */
.chg-step-2{ box-shadow:0 12px 26px rgba(207,216,230,.45); border-color:var(--chg-silver); }
.chg-step-3{ box-shadow:0 12px 26px rgba(227,162,106,.35); border-color:var(--chg-bronze); }
.chg-step::before{ content:''; position:absolute; top:0; left:-40%; width:180%; height:64px; background:linear-gradient(120deg,var(--chg-navy) 40%, var(--chg-orange) 100%); transform:rotate(-6deg); transform-origin:top left; }
.chg-step-1::before{ background:linear-gradient(120deg,var(--chg-navy) 30%, var(--chg-gold) 100%); }
.chg-step-2::before{ background:linear-gradient(120deg,var(--chg-navy) 30%, var(--chg-silver) 100%); }
.chg-step-3::before{ background:linear-gradient(120deg,var(--chg-navy) 30%, var(--chg-bronze) 100%); }
.chg-podium.show-3 .chg-step-3{ animation:chg-rise-in 1s cubic-bezier(.22,1.04,.36,1) forwards; }
.chg-podium.show-2 .chg-step-2{ animation:chg-rise-in 1s cubic-bezier(.22,1.04,.36,1) forwards; }
.chg-podium.show-1 .chg-step-1{ animation:chg-rise-in 1.15s cubic-bezier(.19,1.08,.3,1) forwards; }
@keyframes chg-rise-in{ to{ opacity:1; transform:translateY(0) scale(1); } }

.chg-badge{ position:relative; z-index:2; width:44px; height:50px; margin:4px auto 8px; background:var(--chg-orange); color:#fff; font-family:'Oswald',sans-serif; font-weight:700; font-size:1.3rem; display:flex; align-items:center; justify-content:center; clip-path:polygon(50% 0%,100% 20%,100% 100%,50% 82%,0 100%,0 20%); opacity:0; transform:scale(0) rotate(-18deg); will-change:transform; }
.chg-step-1 .chg-badge{ background:var(--chg-gold); color:var(--chg-navy); width:52px; height:58px; font-size:1.5rem; }
.chg-step-2 .chg-badge{ background:var(--chg-silver); color:var(--chg-navy); }
.chg-step-3 .chg-badge{ background:var(--chg-bronze); color:#fff; }
.chg-podium.show-3 .chg-step-3 .chg-badge, .chg-podium.show-2 .chg-step-2 .chg-badge, .chg-podium.show-1 .chg-step-1 .chg-badge{ animation:chg-badge-pop .6s cubic-bezier(.22,1.15,.36,1) .22s forwards; }
@keyframes chg-badge-pop{ to{ opacity:1; transform:scale(1) rotate(0); } }

.chg-medallion{ position:relative; width:clamp(56px,7.5vw,76px); height:clamp(56px,7.5vw,76px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:clamp(1rem,2.2vw,1.4rem); color:#fff; margin:0 auto 8px; background:linear-gradient(135deg,var(--chg-navy),var(--chg-navy-2)); border:4px solid var(--chg-card); box-shadow:0 0 0 2px var(--chg-line); will-change:transform; }
.chg-step-1 .chg-medallion{ width:clamp(66px,9vw,88px); height:clamp(66px,9vw,88px); font-size:clamp(1.15rem,2.4vw,1.6rem); border-color:var(--chg-card); box-shadow:0 0 0 3px var(--chg-gold); }
.chg-step-2 .chg-medallion{ box-shadow:0 0 0 3px var(--chg-silver); }
.chg-step-3 .chg-medallion{ box-shadow:0 0 0 3px var(--chg-bronze); }
.chg-pop-ring{ position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%) scale(.3); border-radius:50%; border:3px solid var(--chg-orange); opacity:0; pointer-events:none; will-change:transform,opacity; }
.chg-podium.show-3 .chg-step-3 .chg-pop-ring, .chg-podium.show-2 .chg-step-2 .chg-pop-ring, .chg-podium.show-1 .chg-step-1 .chg-pop-ring{ animation:chg-pop-ring-burst .75s cubic-bezier(.22,.7,.32,1) .5s forwards; }
@keyframes chg-pop-ring-burst{ 0%{ opacity:.85; transform:translate(-50%,-50%) scale(.3); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(2.1); } }
.chg-podium.show-3 .chg-step-3 .chg-medallion, .chg-podium.show-2 .chg-step-2 .chg-medallion, .chg-podium.show-1 .chg-step-1 .chg-medallion{ animation:chg-medallion-pop .7s cubic-bezier(.25,.85,.32,1) .48s both; }
@keyframes chg-medallion-pop{ 0%{ transform:scale(.62,.62) translateY(8px); } 60%{ transform:scale(1.08,.94) translateY(-5px); } 80%{ transform:scale(.97,1.03) translateY(1px); } 100%{ transform:scale(1,1) translateY(0); } }

.chg-name{ font-weight:700; font-size:clamp(.92rem,1.4vw,1.05rem); color:var(--chg-text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chg-score{ font-family:'Oswald',sans-serif; font-weight:600; font-size:clamp(1.3rem,2.2vw,1.7rem); font-variant-numeric:tabular-nums; margin:2px 0 2px; color:var(--chg-navy); }
.chg-step-1 .chg-score{ color:var(--chg-orange-deep); font-size:clamp(1.5rem,2.6vw,2rem); }
.chg-score-unit{ font-size:.5em; color:var(--chg-text-faint); font-weight:500; margin-left:3px; }
/* Commentaire libre saisi par l'admin / le chef d'agence, sous le chiffre.
   Affiché en entier même long (voir demande utilisateur) : la carte podium
   (.chg-step) n'a pas de hauteur fixe, elle grandit simplement avec son
   contenu — ça ne casse donc pas la mise en page du podium. */
.chg-score-comment{
  margin:3px auto 0; max-width:100%; font-size:.7rem; font-weight:500; line-height:1.3;
  color:var(--chg-text-dim); white-space:normal; overflow-wrap:anywhere;
}

.chg-trophy{ font-size:1.4rem; margin-top:2px; display:inline-block; opacity:0; animation-play-state:paused; }
.chg-podium.show-1 .chg-trophy{ animation:chg-trophy-in .5s cubic-bezier(.2,1.15,.34,1) .35s forwards, chg-bob 2.8s ease-in-out 1s infinite; animation-play-state:running; }
@keyframes chg-trophy-in{ from{ opacity:0; transform:translateY(-16px) scale(.55) rotate(-12deg); } to{ opacity:1; transform:translateY(0) scale(1) rotate(0); } }
@keyframes chg-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-5px) rotate(4deg);} }

/* Modifier/supprimer un participant du podium — même geste que dans le
   classement en dessous, discret pour ne pas gêner la mise en scène. */
.chg-podium-actions{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.chg-podium-actions .menu-btn{ font-size:.72rem; padding:3px 8px; background:#fff; border:1px solid var(--chg-line); color:var(--chg-text); }
.chg-podium-actions .menu-btn:hover{ border-color:var(--chg-orange); }
.chg-podium-actions .btn-cancel{ background:#e53935 !important; color:#fff !important; border-color:#e53935 !important; }

@media (prefers-reduced-motion: reduce){
  .chg-step, .chg-badge, .chg-trophy, .chg-medallion, .chg-pop-ring{ animation:none !important; opacity:1 !important; transform:none !important; }
  .chg-badge{ transform:scale(1) rotate(0) !important; }
  .chg-pop-ring{ display:none; }
}

.chg-scroll-hint{ position:relative; z-index:1; display:flex; justify-content:center; margin-top:20px; }
.chg-scroll-hint a{ color:var(--chg-text-faint); text-decoration:none; font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; animation:chg-hint-bob 1.8s ease-in-out infinite; }
.chg-scroll-hint a:hover{ color:var(--chg-orange); }
@keyframes chg-hint-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }
@media (prefers-reduced-motion: reduce){ .chg-scroll-hint a{ animation:none; } }

/* ── Classement — cartes claires, cohérentes avec le reste de la page (le
   bandeau bleu nuit reste réservé à l'en-tête). ──────────────────────────── */
.chg-board{ position:relative; z-index:1; margin-top:8px; padding:0 30px; opacity:0; transform:translateY(20px); will-change:transform,opacity; }
.chg-board.reveal{ animation:chg-board-in .75s cubic-bezier(.22,.68,.3,1) forwards; }
@keyframes chg-board-in{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .chg-board{ opacity:1; transform:none; } }

.chg-row{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:52px 1fr auto auto; align-items:center; gap:16px;
  padding:14px 18px; border-radius:12px; background:var(--chg-card); border:1px solid var(--chg-line);
  margin-bottom:10px; opacity:0; will-change:transform,opacity;
  transition:border-color .2s ease, transform .2s ease;
}
.chg-row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--chg-orange); transform:scaleY(0); transition:transform .2s ease; transform-origin:top; }
.chg-row:hover{ border-color:#c7cfe0; transform:translateX(3px); }
.chg-row:hover::before{ transform:scaleY(1); }
.chg-board.reveal .chg-row{ animation:chg-row-in .6s cubic-bezier(.22,.68,.3,1) forwards; }
.chg-board.reveal .chg-row:nth-child(2){animation-delay:.06s;} .chg-board.reveal .chg-row:nth-child(3){animation-delay:.12s;}
.chg-board.reveal .chg-row:nth-child(4){animation-delay:.18s;} .chg-board.reveal .chg-row:nth-child(5){animation-delay:.24s;}
.chg-board.reveal .chg-row:nth-child(6){animation-delay:.3s;}  .chg-board.reveal .chg-row:nth-child(7){animation-delay:.36s;}
.chg-board.reveal .chg-row:nth-child(8){animation-delay:.42s;} .chg-board.reveal .chg-row:nth-child(9){animation-delay:.48s;}
@keyframes chg-row-in{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .chg-row{ opacity:1; animation:none; } }

.chg-rank{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:600; font-size:1.1rem; background:var(--chg-paper); color:var(--chg-text-dim); }
.chg-who{ font-weight:700; font-size:1.1rem; color:var(--chg-text); }
.chg-result{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right; }
.chg-result-value{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1.3rem; white-space:nowrap; color:var(--chg-navy); font-variant-numeric:tabular-nums; }
.chg-result-unit{ font-size:.55em; color:var(--chg-text-faint); font-weight:500; margin-left:4px; }
.chg-result-comment{ max-width:min(240px,42vw); font-size:.76rem; font-weight:500; line-height:1.3; color:var(--chg-text-dim); white-space:normal; overflow-wrap:anywhere; }
.chg-row-actions{ display:flex; gap:6px; }

/* Boutons/pagination du site, réadaptés uniquement à l'intérieur de la page
   challenge (portée limitée au sélecteur descendant — n'affecte rien en
   dehors). */
.chg-stage .menu-btn{ background:#fff; border:1px solid var(--chg-line); color:var(--chg-text); font-size:.78rem; padding:5px 10px; }
.chg-stage .menu-btn:hover{ border-color:var(--chg-orange); }
.chg-stage .btn-cancel{ background:#e53935 !important; color:#fff !important; border-color:#e53935 !important; }
.chg-stage .btn-cancel:hover{ background:#c62828 !important; }
.chg-cta{ margin-top:18px; margin-left:30px; background:var(--chg-orange) !important; color:#fff !important; border:none !important; font-weight:700 !important; padding:12px 22px !important; border-radius:999px !important; box-shadow:0 10px 22px rgba(255,90,31,.3); }
.chg-stage .pagination{ margin-top:16px; }
.chg-stage .page-btn{ background:#fff; border:1px solid var(--chg-line); color:var(--chg-text-dim); }
.chg-stage .page-btn:hover{ border-color:var(--chg-orange); }
.chg-stage .page-btn-disabled{ opacity:.4; }
.chg-stage .page-info{ color:var(--chg-text-faint); }
.chg-stage .page-info em{ color:var(--chg-text); }

@media (max-width: 860px){
  .chg-stage{ margin:-16px -16px 0; }
  .chg-banner{ padding:16px 20px 32px; }
  .chg-board{ padding:0 14px; }
  .chg-cta{ margin-left:14px; }
  .chg-row{ grid-template-columns:40px 1fr auto; }
  .chg-row-actions{ display:none; }
}

/* ── Catégories (popups de gestion — indicateurs, actualités) ────────────
   Ces popups sont plus étroits qu'une page classique (max-width:560px) ;
   .admin-table met par défaut white-space:nowrap sur tout le tableau
   (voulu ailleurs, pour les grands tableaux d'admin), ce qui forçait ici
   des en-têtes comme "Ordre sur l'intranet" à rester sur une seule ligne
   et poussait le tableau plus large que le popup → barre de défilement
   horizontale. Autorise le retour à la ligne + réduit la taille du texte,
   et cantonne les colonnes numériques (ordre, nombre d'indicateurs/
   actualités) à une largeur étroite : leurs valeurs restent toujours
   petites (l'ordre d'affichage ne montera jamais à 6 chiffres). */
.cat-manage-table {
  white-space: normal;
  font-size: 13.5px;
  /* .admin-table met la table en display:block + overflow-x:auto pour porter
     elle-même son défilement horizontal — mais ici c'est le wrapper
     .cat-manage-table-scroll ci-dessous qui s'en charge (indispensable dans
     une popup, dont le corps défile déjà verticalement : deux zones de
     défilement horizontal imbriquées se marchent dessus au doigt sur
     mobile). On repasse donc cette table précise en display:table normal. */
  display: table;
  overflow-x: visible;
  /* Empêche les colonnes de s'écraser au point de rendre le bouton 🗑️
     illisible/inatteignable quand le nom de catégorie est long (ex.
     "Événement") : le tableau déborde alors plutôt du wrapper, qui prend le
     relais avec son propre défilement horizontal. */
  min-width: 480px;
  width: 100%;
}
.cat-manage-table th, .cat-manage-table td {
  padding: 9px 10px;
}
.cat-manage-table th { font-size: 12px; }
.cat-manage-col-order  { width: 84px; }
.cat-manage-col-count  { width: 120px; }

.cat-manage-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.cat-manage-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Catégories (page de gestion) ───────────────────────────────────────── */
.cat-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.cat-add-section {
  margin-top: 30px;
  padding: 20px;
  background: var(--surface-2, #f8faff);
  border-radius: 12px;
  border: 1.5px dashed var(--border);
}
.cat-add-section h3 { margin: 0 0 14px; font-size: 1rem; color: var(--text-heading, #1a2d4e); }
.cat-add-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.cat-color-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text);
}
.cat-color-input {
  width: 44px;
  height: 34px;
  border: 1.5px solid #dce3ef;
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: none;
}

/* ── Liens rapides (page de gestion) ────────────────────────────────────── */
.links-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.link-item {
  background: var(--surface);
  border-radius: 10px;
  border: 1.5px solid #dce3ef;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.link-icon  { font-size: 1.5rem; flex-shrink: 0; }
.link-info  { flex: 1; min-width: 0; }
.link-name  { font-weight: 600; font-size: 0.9rem; color: var(--text-heading, #1a2d4e); }
.link-url   { color: var(--text-muted, #6b7280); font-size: 0.78rem; word-break: break-all; margin-top: 2px; }

/* ── Annuaire ────────────────────────────────────────────────────────────── */
.annuaire-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.annuaire-card {
  background: var(--surface);
  border-radius: 14px;
  border: 1.5px solid #dce3ef;
  padding: 22px 18px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.annuaire-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 12px;
}
.annuaire-name   { font-weight: 700; font-size: 1rem; color: var(--text-heading, #1a2d4e); }
.annuaire-role   { color: var(--text-muted, #6b7280); font-size: 0.82rem; margin: 4px 0 10px; }
.annuaire-contact { font-size: 0.82rem; color: var(--text); line-height: 1.7; }
.annuaire-actions { margin-top: 12px; display: flex; gap: 6px; justify-content: center; }
.annuaire-empty { text-align: center; padding: 48px 20px; color: var(--text-muted, #6b7280); }

/* ── Trombinoscope ───────────────────────────────────────────────────────── */
.trombinoscope-frame {
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 500px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: var(--surface);
}

/* Sur téléphone ET tablette, le lecteur PDF intégré au navigateur, coincé
   dans un <iframe>, s'ouvre bien trop zoomé et impossible à parcourir/
   scroller correctement ("beaucoup trop gros, je vois rien" / "je ne peux
   même pas scroller") : on masque l'iframe et on affiche à la place un
   bouton qui ouvre le PDF dans son propre onglet, où le zoom et le défilement
   tactiles du navigateur fonctionnent normalement.
   Deux conditions séparées par une virgule (donc un OU) : la largeur
   d'écran (téléphone) ET, indépendamment de la largeur, tout appareil
   tactile sans souris (pointer: coarse — couvre aussi une tablette en
   mode paysage, plus large que 860px mais tout aussi tactile). Même
   technique déjà utilisée plus haut dans ce fichier pour l'inverse
   (hover: hover / pointer: fine = un vrai poste avec souris). */
.trombino-mobile-cta { display: none; }
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  .trombinoscope-frame { display: none; }
  .trombino-mobile-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 48px 20px;
    background: var(--surface);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: var(--text-muted, #6b7280);
    font-size: .92rem;
  }
}

/* ── AART Assist (outil intégré en iframe) ──────────────────────────────── */
/* Cette page tourne dans un iframe même origine. On lui donnait auparavant
   une hauteur fixe (100vh - entête) avec son propre défilement interne :
   deux zones de scroll imbriquées, ce qui obligeait à relâcher le geste puis
   recommencer pour passer du défilement de l'iframe à celui du reste de
   l'intranet ("on dirait deux pages"). Sa hauteur est maintenant recalée en
   JS pour épouser exactement celle de son contenu (voir le script en fin de
   intranet-aart-assist.ejs) : plus aucun scroll interne à elle, un seul
   défilement pour toute la page, jusqu'au pied de page de l'intranet —
   comme n'importe quelle autre page. min-height ci-dessous n'est qu'un
   filet de sécurité avant que ce script n'ait tourné. */
.aart-assist-frame {
  display: block;
  width: 100%;
  min-height: 600px;
  border: none;
  background: var(--bg, #f4f7fb);
}

/* ── Likes ────────────────────────────────────────────────────────────────── */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  padding: 2px 6px;
  border-radius: 6px;
  transition: transform .15s;
}
.like-btn:hover      { transform: scale(1.08); background: var(--bg); }
.like-btn.active      { color: #e0245e; }
.like-btn .like-icon  { font-size: 1rem; }
.like-btn .favorite-icon { font-size: 1rem; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-ask-box {
  background: var(--surface);
  border: 1.5px solid #dce3ef;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.faq-card {
  background: var(--surface);
  border: 1.5px solid #dce3ef;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.faq-question {
  font-weight: 700;
  color: var(--text-heading, #1a2d4e);
  font-size: 1rem;
  margin-bottom: 4px;
}
.faq-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 12px;
}
.faq-answer {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border-left: 4px solid #22c55e;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.faq-answer-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #15803d;
  margin-bottom: 6px;
}
.faq-answer-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #14532d;
  margin: 0;
}
.faq-answer-meta {
  font-size: 0.76rem;
  color: #4b7a5c;
  margin-top: 10px;
}
/* ── Accordéon : réservé aux questions pré-remplies (is_predefined) ────────── */
.faq-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  font-size: .85rem;
  padding: 4px 0 10px;
}
.faq-toggle-btn:hover { text-decoration: underline; }
.faq-toggle-arrow {
  display: inline-block;
  transition: transform .2s;
}
.faq-toggle-btn.open .faq-toggle-arrow { transform: rotate(90deg); }
.faq-pending {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.faq-answer-form {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.faq-answer-form textarea {
  flex: 1;
  min-width: 220px;
  padding: 8px 10px;
  border: 1px solid #dce3ef;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODE MOBILE — n'affecte jamais l'affichage bureau (uniquement <= 860px)
   ═══════════════════════════════════════════════════════════════════════ */

/* Bouton ☰ : masqué par défaut, réservé au mobile */
.hamburger-btn {
  display: inline-block;
  background: none;
  border: none;
  color: var(--accent-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  margin-right: 4px;
  border-radius: 6px;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: rgba(255,255,255,.15); }

/* Rideau sombre derrière la sidebar ouverte */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
}
.sidebar-overlay.active { display: block; }

/* ─── Anniversaires & arrivées (accueil intranet) ──────────────────────────── */
.birthday-widget {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.birthday-widget-col {
  background: var(--surface);
  border: 1.5px solid #dce3ef;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.birthday-widget-title {
  margin: 0 0 10px;
  font-size: .95rem;
  color: var(--text-heading, #1a2d4e);
}
.birthday-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .87rem;
}
.birthday-list li {
  padding: 5px 0;
  border-bottom: 1px solid #f0f2f5;
  color: var(--text);
}
.birthday-list li:last-child { border-bottom: none; }
.birthday-date {
  display: inline-block;
  min-width: 42px;
  font-weight: 700;
  color: var(--accent);
}

/* ─── Outils (catégories/dossiers) ──────────────────────────────────────────── */
.outils-category { margin-bottom: 24px; }
.outils-category-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}

/* ─── Contribution ───────────────────────────────────────────────────────────── */
.contributors-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}
.contributor-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1.5px solid #dce3ef;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.contributor-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4fa;
  border-radius: 12px;
}
.contributor-info {
  text-align: left;
  /* min-width:0 : sans lui un enfant flex ne rétrécit jamais sous la taille de
     son contenu, et un long titre débordait de la carte au lieu de passer à
     la ligne. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.contributor-role {
  font-weight: 700;
  color: var(--text-heading, #1a2d4e);
  font-size: .95rem;
  margin-bottom: 2px;
}
.contributor-name {
  color: var(--text-muted, #6b7280);
  font-size: .85rem;
}
/* Carte ajoutée par un admin : bouton de suppression poussé à droite */
.contributor-delete-form { margin: 0 0 0 auto; }
.contributor-delete-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.05rem;
  padding: 6px;
  border-radius: 8px;
  opacity: .65;
}
.contributor-delete-btn:hover { opacity: 1; background: rgba(224,36,94,.12); }

/* ─── Recherche globale ─────────────────────────────────────────────────────── */
.search-results-section { margin-bottom: 24px; }
.search-results-title {
  font-size: .95rem;
  color: var(--text-heading, #1a2d4e);
  margin: 0 0 10px;
}
.search-result-card {
  display: block;
  background: var(--surface);
  border: 1.5px solid #dce3ef;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.search-result-card:hover { border-color: var(--accent); }
.search-result-card strong { color: var(--text-heading, #1a2d4e); }
.search-result-card p {
  margin: 4px 0 0;
  font-size: .85rem;
  color: var(--text-muted, #6b7280);
}

@media (max-width: 860px) {

  html, body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .hamburger-btn { display: inline-block; }

  /* Formulaires (édition, ajout de document, etc.) sur téléphone : le
     libellé ("Titre", "Catégorie"...) et son champ sont côte à côte par
     défaut (voir .edit-form-row plus haut) — sur un écran étroit, le
     libellé grignote une bonne partie de la largeur et ne laisse au champ
     qu'une case minuscule. On passe le libellé au-dessus, avec le champ
     juste en dessous sur toute la largeur de l'onglet/popup — uniquement
     sur téléphone : sur ordinateur, la disposition sur une seule ligne
     reste inchangée. La possibilité d'agrandir un <textarea> (resize:
     vertical, définie plus haut) n'est pas touchée ici. */
  .edit-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .edit-label {
    min-width: 0;
    padding-top: 0;
  }
  .edit-input {
    width: 100%;
  }

  header {
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 500;
    padding: 10px 14px;
  }

  /* Repliée sur mobile plutôt qu'affichée en toute petite largeur sous le
     header (illisible pendant la saisie) : seule la page d'accueil des
     notes et bonnes pratiques y met du contenu (la recherche), reprise en
     grand dans la page elle-même — voir .procedures-search-mobile. */
  .nav-center { display: none; }

  .procedures-search-mobile {
    display: block;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    /* 16px minimum : en dessous, Safari iOS zoome automatiquement la page
       au moment où le champ prend le focus. */
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
  }

  .site-title { font-size: 13px; }
  .site-logo  { height: 28px; width: 28px; margin-right: 6px; }

  .user-label-text { display: none; }
  .user-dropdown { right: -10px; }

  /* La sidebar devient un tiroir qui glisse par-dessus le contenu */
  .main-layout {
    display: block;
    height: auto;
    overflow: visible;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 78vw;
    max-width: 280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1001;
    box-shadow: 3px 0 16px rgba(0,0,0,.25);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Marge en bas du tiroir, au-delà de la barre d'outils du navigateur
       mobile (adresse/onglets) qui peut recouvrir le dernier lien (« Contribution ») :
       sans ça il reste techniquement atteignable en scrollant, mais coupé
       visuellement contre le bord de l'écran. */
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px) + 24px);
  }
  .sidebar.sidebar-open { transform: translateX(0); }

  .main-content {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .procedures,
  .intranet-content { padding: 16px; }

  /* Grilles multi-colonnes → 1 colonne */
  .intranet-grid,
  .annuaire-grid,
  .polls-grid,
  .birthday-widget,
  .dash-kpi-grid,
  .dash-two-col {
    grid-template-columns: 1fr !important;
  }

  /* Sur téléphone, les panneaux du tableau de bord prennent toute la largeur :
     on redonne aux tableaux le défilement horizontal interne (comme les autres
     .admin-table) plutôt que de laisser le contenu être rogné par le panneau. */
  .dash-panel .admin-table {
    display: block;
    overflow-x: auto;
  }

  /* Popup "Gérer les catégories" (actualités) sur téléphone : .admin-table
     met tout en white-space:nowrap (pour le défilement horizontal — voir
     plus haut) mais dans une popup à peine plus large que l'écran, la
     colonne Nom/Actualités associées poussait la table bien au-delà de la
     largeur visible et coupait la colonne Actions (le bouton 🗑️ Supprimer)
     hors champ. On autorise ces colonnes à revenir à la ligne pour que le
     tableau tienne dans la popup et que le bouton reste entièrement visible
     sans avoir à défiler. */
  .cat-manage-table td,
  .cat-manage-table th {
    white-space: normal;
  }
  .cat-manage-table td:last-child {
    white-space: nowrap;
  }

  .quick-links { flex-direction: column; }
  .quick-link-btn { width: 100%; min-width: 0; }

  /* Popups adaptés à l'écran — padding réduit (30px de base, pensé pour
     ordinateur) : sur un petit téléphone ça mangeait à lui seul 60px de
     largeur utile, en plein sur celle de l'éditeur Quill juste en dessous. */
  .popup-content {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 85vh;
    padding: 18px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #e2e8f3;
  }
  .popup-content::-webkit-scrollbar { width: 7px; }
  .popup-content::-webkit-scrollbar-track { background: #e2e8f3; border-radius: 8px; }
  .popup-content::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; }

  /* Éditeur Quill (actualités) sur téléphone : la barre d'outils latérale de
     46px, une fois la popup réduite à 92vw, ne laissait plus assez de
     largeur à la zone de texte pour que des mots comme "actualité" (dans le
     texte d'exemple "Saisissez le contenu de l'actualité...") tiennent en
     entier sur une ligne — ils se retrouvaient coupés en plein mot par
     overflow-wrap. On passe la barre sous l'éditeur (pleine largeur) au lieu
     de la garder à droite, ce qui redonne toute la largeur de la popup au
     texte. */
  .quill-split-wrap { flex-direction: column; }
  /* Zone de texte nettement plus grande que le 220px fixe d'avant : bornée
     en vh (et non en % du parent, qui n'a pas de hauteur fixe ici) pour
     rester utilisable même sur un petit téléphone tout en profitant de plus
     de place sur un plus grand écran. */
  /* flex:none : en colonne, flex:1 (flex-basis 0) l'emporte sur height et
     écrasait la boîte à une ligne. */
  .quill-split-wrap .ql-container.ql-snow.quill-fixed-editor { flex: none; height: min(46vh, 380px); }
  .quill-split-wrap .ql-container.ql-snow {
    border-right: none;
    border-bottom: 1.5px solid #dce3ef;
  }
  .quill-side-bar {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .quill-side-bar .ql-formats {
    flex-direction: row !important;
    border-bottom: none !important;
    border-right: 1px solid #dce3ef;
    margin: 0 6px 0 0 !important;
    padding: 0 6px 0 0 !important;
    width: auto;
  }
  .quill-side-bar .ql-formats:last-child { border-right: none; }

  .intranet-search-bar { flex-wrap: wrap; }
  .intranet-search-input { width: 100%; }
  .intranet-search-select { width: 100%; }

  .top-btn { right: 10px; bottom: 10px; }

  .card-header,
  .news-card-header { flex-wrap: wrap; }

  /* Newsletters : passage en colonne pour laisser respirer le titre et les actions */
  .newsletter-item {
    flex-direction: column;
    align-items: stretch;
  }
  /* Sans ce reset, le "flex: 1 1 220px" posé plus haut (pensé pour la
     largeur, en ligne) s'applique ici à la HAUTEUR une fois le conteneur
     passé en colonne juste au-dessus — .newsletter-info se réservait donc
     220px de haut au lieu de la hauteur de son contenu réel (titre + mois),
     laissant un grand vide avant le bouton Consulter sur téléphone. */
  .newsletter-info {
    flex: 1 1 auto;
  }
  .newsletter-title-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .newsletter-actions {
    flex-wrap: wrap;
  }

  /* Journal d'audit : version compacte sur téléphone (colonnes plus étroites,
     police réduite) — la colonne Action reste sur une seule ligne comme sur
     desktop (voir .log-action-cell/.log-badge plus haut dans ce fichier). */
  .log-table th,
  .log-table td {
    font-size: 11px;
    padding: 8px 10px;
  }
  .log-table th:nth-child(1),
  .log-table th:nth-child(2) { width: 110px; }
  .log-table th:nth-child(3) { width: 200px; }
  .log-table th:nth-child(5) { width: 90px; }
  .log-table td.log-action-cell {
    white-space: nowrap;
    max-width: none;
  }
  .log-table .log-badge {
    white-space: nowrap;
    font-size: 10px;
    padding: 2px 8px;
  }
  .log-date   { font-size: 11px; }
  .log-details { font-size: 12px; }
}

/* ── Mon équipe (page unique remplaçant Départs et Arrivées) ─────────────── */
.hidden { display: none; }
.team-card {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 20px;
  margin-bottom: 24px;
}
.team-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.team-card-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-heading);
}
.team-card-manager {
  font-size: .8rem;
  font-weight: 400;
  color: var(--text-muted);
}
.team-card-actions { display: flex; gap: 6px; }
.team-rename-form { display: flex; gap: 8px; margin-bottom: 14px; }
.team-rename-form.hidden { display: none; }

/* ── Checklist d'intégration (Mon équipe) ─────────────────────────────────── */
.checklist-section {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.checklist-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
.checklist-section-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--accent);
}
.checklist-section-count {
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.checklist-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.checklist-item { border-radius: 8px; transition: background .15s; }
.checklist-item:hover { background: var(--surface-hover); }
.checklist-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
}
.checklist-checkbox {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.checklist-item-label {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.4;
}
.checklist-item.checked .checklist-item-label {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Pastille verte/rouge « fait / en retard » — couleurs sémantiques fixes,
   volontairement PAS thémées (comme les badges/alertes ailleurs sur le
   site) : leur sens doit rester lisible d'un coup d'œil, quel que soit le
   thème actif. */
.checklist-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #cbd2d9;
  transition: background .15s;
}
.checklist-item.checked .checklist-status-dot { background: #28a745; }
.checklist-item.overdue .checklist-status-dot { background: #dc3545; }
.checklist-item.overdue .checklist-item-label { color: #c62828; }

.checklist-late-badge {
  display: inline-block;
  background: #ffebee;
  color: #c62828;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THÈMES — déclinaisons
   Le thème « Professionnel » est celui d'origine (variables par défaut tout en
   haut du fichier) : aucune règle ci-dessous ne s'applique tant que
   html[data-theme] ne vaut pas l'une des 6 autres valeurs. Le bouton de
   changement de thème et sa logique vivent dans session.js (chargé sur
   presque toutes les pages), donc actif partout sauf connexion / 404 / 500.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Transition douce entre deux thèmes plutôt qu'un flash brutal — courbe
   "material standard" (accélère puis ralentit) pour un rendu plus fluide
   qu'un simple `ease`, et quelques propriétés de plus (fill/stroke) pour que
   les icônes en SVG (couleur via currentColor) suivent le mouvement elles
   aussi au lieu de changer de couleur d'un coup sec. */
*, *::before, *::after {
  transition: background-color .45s cubic-bezier(.4,0,.2,1),
              color .45s cubic-bezier(.4,0,.2,1),
              border-color .45s cubic-bezier(.4,0,.2,1),
              box-shadow .45s cubic-bezier(.4,0,.2,1),
              fill .45s cubic-bezier(.4,0,.2,1),
              stroke .45s cubic-bezier(.4,0,.2,1);
}

/* Liste partagée des « cartes »/panneaux : chaque thème leur donne le même
   traitement de bordure/ombre pour rester cohérent sans répéter 30 sélecteurs
   à chaque fois. */

/* ─── Espace rétro-futuriste ─────────────────────────────────────────────── */
html[data-theme="espace"] {
  --bg: #0b1330;
  --surface: #131b42;
  --surface-2: #1a2454;
  --surface-hover: #202c66;
  --border: #2c3868;
  --text: #d7ddf3;
  --text-strong: #f4ead9;
  --text-heading: #f4ead9;
  --text-muted: #93a0d1;
  --accent: #ff8a3d;
  --accent-hover: #e66f22;
  --accent-ink: #1a0f03;
  --font-display: 'Michroma', 'Segoe UI', sans-serif;
  --tracking: 0.05em;
  --transform: uppercase;
}
html[data-theme="espace"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1.5px 1.5px at 10% 22%, rgba(244,234,217,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 12%, rgba(244,234,217,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 74%, rgba(244,234,217,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 88%, rgba(244,234,217,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 55%, rgba(244,234,217,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 38%, rgba(244,234,217,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 60%, rgba(244,234,217,.35) 50%, transparent 51%);
  background-attachment: fixed;
}
html[data-theme="espace"] .intranet-hero {
  background: radial-gradient(circle at 82% -10%, var(--accent) 0%, transparent 45%), linear-gradient(135deg, #101c4c 0%, #0b1330 100%);
  color: var(--text-strong);
  border: 1px solid var(--border);
}
html[data-theme="espace"] .procedure-card, html[data-theme="espace"] .intranet-section,
html[data-theme="espace"] .news-card, html[data-theme="espace"] .popup-content,
html[data-theme="espace"] .admin-table, html[data-theme="espace"] .login-box,
html[data-theme="espace"] .change-pwd-card, html[data-theme="espace"] .dash-kpi,
html[data-theme="espace"] .kpi-card, html[data-theme="espace"] .dash-panel,
html[data-theme="espace"] .error-box, html[data-theme="espace"] #session-warning-box,
html[data-theme="espace"] .team-card, html[data-theme="espace"] .contributor-card,
html[data-theme="espace"] .search-result-card, html[data-theme="espace"] .faq-card,
html[data-theme="espace"] .faq-ask-box, html[data-theme="espace"] .birthday-widget-col,
html[data-theme="espace"] .annuaire-card, html[data-theme="espace"] .link-item,
html[data-theme="espace"] .poll-card, html[data-theme="espace"] .poll-manage-card,
html[data-theme="espace"] .add-user-box, html[data-theme="espace"] .cat-add-section,
html[data-theme="espace"] .quill-split-wrap {
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,138,61,.12);
}
html[data-theme="espace"] .sidebar-link.active,
html[data-theme="espace"] .sidebar-link:hover { box-shadow: inset 2px 0 0 var(--accent); }

/* ─── BD Pow! ─────────────────────────────────────────────────────────────── */
html[data-theme="bd"] {
  --bg: #fff6e4;
  --surface: #ffffff;
  --surface-2: #fff0c2;
  --surface-hover: #ffe4c2;
  --border: #141414;
  --text: #2a2a2a;
  --text-strong: #141414;
  --text-heading: #141414;
  --text-muted: #6b5f4a;
  --accent: #ff3b3b;
  --accent-hover: #d92222;
  --accent-ink: #ffffff;
  --font-display: 'Bangers', 'Comic Sans MS', cursive;
  --tracking: 0.01em;
  --transform: none;
}
html[data-theme="bd"] body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(20,20,20,.09) 1.2px, transparent 1.5px);
  background-size: 12px 12px;
}
html[data-theme="bd"] .intranet-hero {
  background: var(--surface);
  background-image: radial-gradient(rgba(20,20,20,.08) 1.5px, transparent 1.8px);
  background-size: 12px 12px;
  color: var(--text-strong);
  border: 3px solid var(--border);
  box-shadow: 8px 8px 0 var(--border);
}
html[data-theme="bd"] .procedure-card, html[data-theme="bd"] .intranet-section,
html[data-theme="bd"] .news-card, html[data-theme="bd"] .popup-content,
html[data-theme="bd"] .admin-table, html[data-theme="bd"] .login-box,
html[data-theme="bd"] .change-pwd-card, html[data-theme="bd"] .dash-kpi,
html[data-theme="bd"] .kpi-card, html[data-theme="bd"] .dash-panel,
html[data-theme="bd"] .error-box, html[data-theme="bd"] #session-warning-box,
html[data-theme="bd"] .team-card, html[data-theme="bd"] .contributor-card,
html[data-theme="bd"] .search-result-card, html[data-theme="bd"] .faq-card,
html[data-theme="bd"] .faq-ask-box, html[data-theme="bd"] .birthday-widget-col,
html[data-theme="bd"] .annuaire-card, html[data-theme="bd"] .link-item,
html[data-theme="bd"] .poll-card, html[data-theme="bd"] .poll-manage-card,
html[data-theme="bd"] .add-user-box, html[data-theme="bd"] .cat-add-section,
html[data-theme="bd"] .quill-split-wrap {
  border: 3px solid var(--border);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--border);
}
html[data-theme="bd"] .news-category-badge, html[data-theme="bd"] .cat-slug { transform: rotate(-2deg); display: inline-block; }

/* ─── Vaporwave Miami ─────────────────────────────────────────────────────── */
html[data-theme="vaporwave"] {
  --bg: #190a2c;
  --surface: #1b0b34;
  --surface-2: #2a1150;
  --surface-hover: #341757;
  --border: #ff2fb0;
  --text: #ecdcf7;
  --text-strong: #fdf1ff;
  --text-heading: #fdf1ff;
  --text-muted: #c9a6e6;
  --accent: #00e5ff;
  --accent-hover: #00b8cc;
  --accent-ink: #10041f;
  --font-display: 'Monoton', cursive;
  --tracking: 0.04em;
  --transform: uppercase;
}
html[data-theme="vaporwave"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(255,47,176,.16) 0%, transparent 26%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
  background-attachment: fixed;
}
html[data-theme="vaporwave"] .intranet-hero {
  background:
    linear-gradient(180deg, rgba(255,47,176,.22) 0%, rgba(0,229,255,.14) 100%),
    linear-gradient(135deg, #2a1150 0%, #190a2c 100%);
  color: var(--text-strong);
  border: 1px solid var(--border);
  box-shadow: 0 0 30px -6px var(--accent);
}
html[data-theme="vaporwave"] .procedure-card, html[data-theme="vaporwave"] .intranet-section,
html[data-theme="vaporwave"] .news-card, html[data-theme="vaporwave"] .popup-content,
html[data-theme="vaporwave"] .admin-table, html[data-theme="vaporwave"] .login-box,
html[data-theme="vaporwave"] .change-pwd-card, html[data-theme="vaporwave"] .dash-kpi,
html[data-theme="vaporwave"] .kpi-card, html[data-theme="vaporwave"] .dash-panel,
html[data-theme="vaporwave"] .error-box, html[data-theme="vaporwave"] #session-warning-box,
html[data-theme="vaporwave"] .team-card, html[data-theme="vaporwave"] .contributor-card,
html[data-theme="vaporwave"] .search-result-card, html[data-theme="vaporwave"] .faq-card,
html[data-theme="vaporwave"] .faq-ask-box, html[data-theme="vaporwave"] .birthday-widget-col,
html[data-theme="vaporwave"] .annuaire-card, html[data-theme="vaporwave"] .link-item,
html[data-theme="vaporwave"] .poll-card, html[data-theme="vaporwave"] .poll-manage-card,
html[data-theme="vaporwave"] .add-user-box, html[data-theme="vaporwave"] .cat-add-section,
html[data-theme="vaporwave"] .quill-split-wrap {
  border: 1px solid rgba(255,47,176,.35);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255,47,176,.18), 0 0 22px -10px var(--accent);
}
html[data-theme="vaporwave"] .news-card-title-link:hover h3,
html[data-theme="vaporwave"] .news-read-more,
html[data-theme="vaporwave"] .intranet-section-title { text-shadow: 0 0 10px rgba(0,229,255,.35); }

/* ─── Été Doré ────────────────────────────────────────────────────────────── */
html[data-theme="soleil"] {
  --bg: #fff3df;
  --surface: #fffaf1;
  --surface-2: #ffe3b0;
  --surface-hover: #ffe9c2;
  --border: #f6d9a8;
  --text: #6b3410;
  --text-strong: #5a2b0d;
  --text-heading: #5a2b0d;
  --text-muted: #a67c52;
  --accent: #ff9736;
  --accent-hover: #e67d1a;
  --accent-ink: #3a1a02;
  --font-display: 'Fraunces', Georgia, serif;
  --tracking: normal;
  --transform: none;
}
html[data-theme="soleil"] body {
  background-color: var(--bg);
  background-image: radial-gradient(circle at 50% -10%, rgba(255,151,54,.25), transparent 55%);
  background-attachment: fixed;
}
html[data-theme="soleil"] .intranet-hero {
  background:
    repeating-conic-gradient(from 0deg at 90% 0%, rgba(255,151,54,.35) 0deg 4deg, transparent 4deg 18deg),
    linear-gradient(135deg, var(--accent) 0%, #c96a12 100%);
  color: var(--accent-ink);
  border: 1px solid var(--border);
}
html[data-theme="soleil"] .procedure-card, html[data-theme="soleil"] .intranet-section,
html[data-theme="soleil"] .news-card, html[data-theme="soleil"] .popup-content,
html[data-theme="soleil"] .admin-table, html[data-theme="soleil"] .login-box,
html[data-theme="soleil"] .change-pwd-card, html[data-theme="soleil"] .dash-kpi,
html[data-theme="soleil"] .kpi-card, html[data-theme="soleil"] .dash-panel,
html[data-theme="soleil"] .error-box, html[data-theme="soleil"] #session-warning-box,
html[data-theme="soleil"] .team-card, html[data-theme="soleil"] .contributor-card,
html[data-theme="soleil"] .search-result-card, html[data-theme="soleil"] .faq-card,
html[data-theme="soleil"] .faq-ask-box, html[data-theme="soleil"] .birthday-widget-col,
html[data-theme="soleil"] .annuaire-card, html[data-theme="soleil"] .link-item,
html[data-theme="soleil"] .poll-card, html[data-theme="soleil"] .poll-manage-card,
html[data-theme="soleil"] .add-user-box, html[data-theme="soleil"] .cat-add-section,
html[data-theme="soleil"] .quill-split-wrap {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 24px -16px rgba(230,110,40,.5);
}

/* ─── Cyberpunk Néon ──────────────────────────────────────────────────────── */
html[data-theme="cyberpunk"] {
  --bg: #08090d;
  --surface: #101319;
  --surface-2: #171b24;
  --surface-hover: #1b202b;
  --border: #ff1f7a;
  --text: #cfe3ee;
  --text-strong: #e8f6ff;
  --text-heading: #e8f6ff;
  --text-muted: #7c8494;
  --accent: #ff1f7a;
  --accent-hover: #d1005f;
  --accent-ink: #08090d;
  --font-display: 'Wallpoet', 'Courier New', monospace;
  --tracking: 0.04em;
  --transform: uppercase;
}
html[data-theme="cyberpunk"] body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(100deg, rgba(34,224,255,.07) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 85% 0%, rgba(255,31,122,.28), transparent 60%);
  background-attachment: fixed;
}
html[data-theme="cyberpunk"] .intranet-hero {
  background:
    repeating-linear-gradient(100deg, rgba(34,224,255,.12) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 80% 0%, rgba(255,31,122,.4), transparent 65%),
    linear-gradient(135deg, #14161f 0%, #08090d 100%);
  color: var(--text-strong);
  border: 1px solid rgba(255,31,122,.5);
  box-shadow: 0 0 24px -8px var(--accent);
}
html[data-theme="cyberpunk"] .procedure-card, html[data-theme="cyberpunk"] .intranet-section,
html[data-theme="cyberpunk"] .news-card, html[data-theme="cyberpunk"] .popup-content,
html[data-theme="cyberpunk"] .admin-table, html[data-theme="cyberpunk"] .login-box,
html[data-theme="cyberpunk"] .change-pwd-card, html[data-theme="cyberpunk"] .dash-kpi,
html[data-theme="cyberpunk"] .kpi-card, html[data-theme="cyberpunk"] .dash-panel,
html[data-theme="cyberpunk"] .error-box, html[data-theme="cyberpunk"] #session-warning-box,
html[data-theme="cyberpunk"] .team-card, html[data-theme="cyberpunk"] .contributor-card,
html[data-theme="cyberpunk"] .search-result-card, html[data-theme="cyberpunk"] .faq-card,
html[data-theme="cyberpunk"] .faq-ask-box, html[data-theme="cyberpunk"] .birthday-widget-col,
html[data-theme="cyberpunk"] .annuaire-card, html[data-theme="cyberpunk"] .link-item,
html[data-theme="cyberpunk"] .poll-card, html[data-theme="cyberpunk"] .poll-manage-card,
html[data-theme="cyberpunk"] .add-user-box, html[data-theme="cyberpunk"] .cat-add-section,
html[data-theme="cyberpunk"] .quill-split-wrap {
  border: 1px solid rgba(255,31,122,.5);
  border-radius: 3px;
  box-shadow: 0 0 16px -8px rgba(255,31,122,.5), inset 0 0 0 1px rgba(34,224,255,.12);
}
html[data-theme="cyberpunk"] .news-card-title-link:hover h3,
html[data-theme="cyberpunk"] .intranet-section-title { color: #22e0ff; text-shadow: 0 0 10px rgba(34,224,255,.4); }

/* ─── Matrix ──────────────────────────────────────────────────────────────── */
html[data-theme="matrix"] {
  --bg: #000000;
  --surface: #050b05;
  --surface-2: #0a160a;
  --surface-hover: #0a1f0a;
  --border: #0d3a1a;
  --text: #3ddc84;
  --text-strong: #00ff41;
  --text-heading: #00ff41;
  --text-muted: #3ddc84;
  --accent: #00ff41;
  --accent-hover: #00cc34;
  --accent-ink: #000000;
  --font-display: 'Share Tech Mono', 'Courier New', monospace;
  --font-body: 'Share Tech Mono', 'Courier New', monospace;
  --tracking: 0.02em;
  --transform: none;
}
html[data-theme="matrix"] body { background-color: var(--bg); }
html[data-theme="matrix"] .intranet-hero {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
  box-shadow: 0 0 20px -6px rgba(0,255,65,.5);
  text-shadow: 0 0 8px rgba(0,255,65,.5);
}
html[data-theme="matrix"] .procedure-card, html[data-theme="matrix"] .intranet-section,
html[data-theme="matrix"] .news-card, html[data-theme="matrix"] .popup-content,
html[data-theme="matrix"] .admin-table, html[data-theme="matrix"] .login-box,
html[data-theme="matrix"] .change-pwd-card, html[data-theme="matrix"] .dash-kpi,
html[data-theme="matrix"] .kpi-card, html[data-theme="matrix"] .dash-panel,
html[data-theme="matrix"] .error-box, html[data-theme="matrix"] #session-warning-box,
html[data-theme="matrix"] .team-card, html[data-theme="matrix"] .contributor-card,
html[data-theme="matrix"] .search-result-card, html[data-theme="matrix"] .faq-card,
html[data-theme="matrix"] .faq-ask-box, html[data-theme="matrix"] .birthday-widget-col,
html[data-theme="matrix"] .annuaire-card, html[data-theme="matrix"] .link-item,
html[data-theme="matrix"] .poll-card, html[data-theme="matrix"] .poll-manage-card,
html[data-theme="matrix"] .add-user-box, html[data-theme="matrix"] .cat-add-section,
html[data-theme="matrix"] .quill-split-wrap {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 0 14px -8px rgba(0,255,65,.4);
}
html[data-theme="matrix"] .news-card-title, html[data-theme="matrix"] .news-article-title,
html[data-theme="matrix"] .intranet-section-title, html[data-theme="matrix"] .procedures h2 {
  text-shadow: 0 0 8px rgba(0,255,65,.5);
}
/* Curseur clignotant façon terminal, à côté du nom du site */
html[data-theme="matrix"] .site-title::after {
  content: "_";
  margin-left: 3px;
  animation: theme-blink 1s steps(1) infinite;
}
@keyframes theme-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="matrix"] .site-title::after { animation: none; }
}
/* Pluie de code en fond (canvas injecté par session.js), toujours derrière le
   contenu réel de la page grâce à son ordre dans le DOM (premier enfant du
   body) — jamais au-dessus d'un élément qui a son propre fond opaque. */
#matrix-rain-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: none;
}
html[data-theme="matrix"] #matrix-rain-canvas { display: block; }

/* ─── Grand Line ──────────────────────────────────────────────────────────── */
html[data-theme="onepiece"] {
  --bg: #ecdba6;
  --surface: #f6ecd0;
  --surface-2: #e7d5a0;
  --surface-hover: #ddc98a;
  --border: #8a6a2f;
  --text: #3a2812;
  --text-strong: #241505;
  --text-heading: #241505;
  --text-muted: #6d5636;
  --accent: #a8681a;
  --accent-hover: #8a5314;
  --accent-ink: #fff8e6;
  --font-display: 'Pirata One', 'Copperplate', Georgia, serif;
  --tracking: 0.02em;
  --transform: none;
}
html[data-theme="onepiece"] body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(45deg, rgba(58,40,18,.05) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, rgba(58,40,18,.04) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(58,40,18,.10) 100%);
  background-attachment: fixed;
}
html[data-theme="onepiece"] .intranet-hero {
  background:
    repeating-conic-gradient(from 0deg at 8% 0%, rgba(168,104,26,.2) 0deg 3deg, transparent 3deg 24deg),
    linear-gradient(135deg, #d8c48a 0%, #ecdba6 100%);
  color: var(--text-strong);
  border: 2px solid var(--border);
  box-shadow: 6px 6px 0 rgba(58,40,18,.18);
}
html[data-theme="onepiece"] .procedure-card, html[data-theme="onepiece"] .intranet-section,
html[data-theme="onepiece"] .news-card, html[data-theme="onepiece"] .popup-content,
html[data-theme="onepiece"] .admin-table, html[data-theme="onepiece"] .login-box,
html[data-theme="onepiece"] .change-pwd-card, html[data-theme="onepiece"] .dash-kpi,
html[data-theme="onepiece"] .kpi-card, html[data-theme="onepiece"] .dash-panel,
html[data-theme="onepiece"] .error-box, html[data-theme="onepiece"] #session-warning-box,
html[data-theme="onepiece"] .team-card, html[data-theme="onepiece"] .contributor-card,
html[data-theme="onepiece"] .search-result-card, html[data-theme="onepiece"] .faq-card,
html[data-theme="onepiece"] .faq-ask-box, html[data-theme="onepiece"] .birthday-widget-col,
html[data-theme="onepiece"] .annuaire-card, html[data-theme="onepiece"] .link-item,
html[data-theme="onepiece"] .poll-card, html[data-theme="onepiece"] .poll-manage-card,
html[data-theme="onepiece"] .add-user-box, html[data-theme="onepiece"] .cat-add-section,
html[data-theme="onepiece"] .quill-split-wrap {
  border: 2px solid var(--border);
  border-radius: 3px;
  box-shadow: 4px 4px 0 rgba(58,40,18,.15);
}
/* Badges façon tampon de cire, légèrement inclinés — même idée que le thème
   BD (rotation des badges) mais teintée cachet/parchemin plutôt que comique. */
html[data-theme="onepiece"] .log-badge,
html[data-theme="onepiece"] .news-category-badge,
html[data-theme="onepiece"] .cat-slug { transform: rotate(-1.5deg); display: inline-block; }
html[data-theme="onepiece"] .sidebar-link.active,
html[data-theme="onepiece"] .sidebar-link:hover { box-shadow: inset 3px 0 0 var(--accent); }
html[data-theme="onepiece"] .site-title::before { content: "☠️ "; }

/* ═══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE THÈME — bouton flottant + menu déroulant
   Injecté par session.js sur toutes les pages qui le chargent (donc pas sur
   connexion / 404 / 500, qui gardent le thème Professionnel).
   ═══════════════════════════════════════════════════════════════════════════ */
#theme-switcher {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 900;
  font-family: Arial, sans-serif;
}
#theme-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px 10px 14px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
#theme-switcher-btn:hover { background: var(--surface-hover); }
#theme-switcher-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
#theme-switcher-menu {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
  padding: 6px;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
}
#theme-switcher-menu.open { display: block; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.theme-option:hover { background: var(--surface-hover); }
.theme-option.active { background: var(--surface-hover); font-weight: bold; color: var(--accent); }
.theme-option-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  #theme-switcher { left: 10px; bottom: 10px; }
  #theme-switcher-btn span.theme-switcher-label { display: none; }
  #theme-switcher-menu { min-width: 210px; }
}

/* ─── Cloche de notifications flottante ─────────────────────────────────────
   Même principe que le sélecteur de thème juste au-dessus, en miroir à
   droite plutôt qu'à gauche (voir public/js/session.js pour l'injection). */
#notif-bell {
  position: fixed;
  right: 18px;
  /* Empilée au-dessus du bouton "retour en haut" (.top-btn, bottom:20px sur
     les pages qui l'ont — actualités, newsletters, accueil intranet, site
     Notes et Bonnes Pratiques) plutôt que superposée dessus. */
  bottom: 74px;
  z-index: 900;
  font-family: Arial, sans-serif;
}
#notif-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
#notif-bell-btn:hover { background: var(--surface-hover); }
.notif-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 10.5px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
}
#notif-bell-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 300px;
  max-width: calc(100vw - 36px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
  padding: 6px;
}
#notif-bell-panel.open { display: block; }
.notif-bell-title {
  padding: 8px 10px 6px;
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted, #888);
}
.notif-bell-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
}
.notif-bell-item:hover { background: var(--surface-hover); }
.notif-bell-item-icon { flex-shrink: 0; font-size: 15px; }
.notif-bell-empty {
  padding: 16px 10px;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #888);
  text-align: center;
}
@media (max-width: 480px) {
  #notif-bell { right: 10px; bottom: 64px; }
  #notif-bell-panel { width: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PENSE-BÊTES — bouton rond flottant + page dédiée
   Même principe d'injection que la cloche de notifications juste au-dessus
   (bouton ajouté en JS par session.js, présent sur toutes les pages), empilé
   plus haut pour ne pas se superposer à la cloche (bottom:74px). Le rendu
   des post-its (grille, formulaire d'ajout/édition) est partagé entre ce
   panneau flottant et la page /intranet/pense-betes — voir mountPenseBetes()
   dans public/js/session.js.
   ═══════════════════════════════════════════════════════════════════════════ */
#pb-fab {
  position: fixed;
  right: 18px;
  bottom: 130px;
  z-index: 900;
  font-family: Arial, sans-serif;
}
#pb-fab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
#pb-fab-btn:hover { background: var(--surface-hover); }
@keyframes pb-fab-pulse {
  0%   { box-shadow: 0 4px 14px rgba(0,0,0,.15), 0 0 0 0 rgba(0,0,0,.28); }
  70%  { box-shadow: 0 4px 14px rgba(0,0,0,.15), 0 0 0 14px rgba(0,0,0,0); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.15), 0 0 0 0 rgba(0,0,0,0); }
}
.pb-fab-pulse { animation: pb-fab-pulse .7s ease-out; }

/* Panneau : reste en display:block pendant toute l'animation de repli (la
   classe .open n'est retirée qu'à la fin, par JS) pour que le post-it
   "rétrécisse visiblement vers le bouton" plutôt que de disparaître d'un
   coup — demande explicite de l'utilisateur. */
/* IMPORTANT : #pb-fab-panel reste en overflow:visible. Le défilement du
   contenu vit uniquement sur .pb-fab-scroll, à l'intérieur (voir plus bas)
   — un élément en overflow:auto/hidden/scroll DÉCOUPE tout ce qui dépasse
   de sa propre boîte, y compris ses enfants positionnés « en dehors » avec
   des décalages négatifs : c'est ce qui rendait les poignées de
   redimensionnement invisibles (bug rapporté : « ça ne s'affiche pas »),
   quelle que soit leur taille ou leur couleur. */
#pb-fab-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 320px;
  min-width: 240px;
  min-height: 180px;
  max-width: calc(100vw - 36px);
  max-height: 85vh;
  overflow: visible;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
  transform-origin: bottom right;
}
#pb-fab-panel.open { display: flex; }

/* flex:1 + min-height:0 : LE pattern robuste pour qu'un conteneur flex
   (le panneau) garde une hauteur libre (auto, plafonnée par max-height —
   ou fixée en px par le redimensionnement, voir session.js) tout en
   laissant son contenu défiler proprement à l'intérieur, sans jamais
   pousser le panneau à s'agrandir au-delà. */
.pb-fab-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Empêche le scroll du panneau de « déborder » sur la page de l'intranet
     derrière une fois arrivé en haut/bas du contenu — demande explicite. */
  overscroll-behavior: contain;
  padding: 10px;
  border-radius: 12px;
  /* Barre de défilement fine : la classique (~15-17px) était encombrante
     dans un panneau aussi compact. */
  scrollbar-width: thin; /* Firefox + Chromium récents */
  scrollbar-color: var(--border) transparent;
}
.pb-fab-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.pb-fab-scroll::-webkit-scrollbar-track { background: transparent; }
.pb-fab-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.pb-fab-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #888); }

/* Redimensionnement depuis les 4 côtés ET les 4 coins (voir
   attachResizeHandle dans session.js) : une fine bande cliquable-glissable
   sur chaque bord/coin, avec un petit trait qui devient visible au survol
   pour indiquer où saisir.
   Entièrement EN DEHORS de la boîte du panneau (jamais à cheval dessus,
   contrairement à la première version) : la barre de défilement de
   #pb-fab-panel (overflow:auto) vit, elle, entièrement À L'INTÉRIEUR de sa
   bordure — dès qu'une poignée empiétait ne serait-ce que de quelques
   pixels vers l'intérieur, le navigateur donnait la main à la barre de
   défilement plutôt qu'à la poignée, qui ne réagissait plus (bug rapporté
   sur les côtés droit et bas). */
.pb-resize-handle { position: absolute; touch-action: none; }
.pb-resize-handle::after {
  content: '';
  position: absolute;
  background: var(--border);
  opacity: 0;
  transition: opacity .15s ease;
  border-radius: 2px;
}
.pb-resize-handle:hover::after { opacity: 1; }

.pb-resize-handle-top, .pb-resize-handle-bottom {
  left: 14px;
  right: 14px;
  height: 8px;
  cursor: ns-resize;
  z-index: 2;
}
.pb-resize-handle-top    { top: -8px; }
.pb-resize-handle-bottom { bottom: -8px; }
.pb-resize-handle-top::after, .pb-resize-handle-bottom::after {
  left: 50%; top: 50%; width: 26px; height: 3px; transform: translate(-50%, -50%);
}

.pb-resize-handle-left, .pb-resize-handle-right {
  top: 14px;
  bottom: 14px;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}
.pb-resize-handle-left  { left: -8px; }
.pb-resize-handle-right { right: -8px; }
.pb-resize-handle-left::after, .pb-resize-handle-right::after {
  top: 50%; left: 50%; height: 26px; width: 3px; transform: translate(-50%, -50%);
}

/* Coins : redimensionnement en diagonale — même traitement discret que les
   bords ci-dessus (rien de visible en permanence, juste le curseur qui
   change et un petit repère en équerre au survol). Les badges ronds
   toujours visibles ont été retirés : jugés inesthétiques — demande
   explicite. Le fond de #pb-fab-panel n'est plus découpé par sa propre
   barre de défilement (voir .pb-fab-scroll un peu plus haut), donc ces
   zones fonctionnent bien qu'elles soient discrètes. */
.pb-resize-handle-corner-tl, .pb-resize-handle-corner-tr,
.pb-resize-handle-corner-bl, .pb-resize-handle-corner-br {
  width: 16px;
  height: 16px;
  z-index: 3;
}
.pb-resize-handle-corner-tl { top: -8px; left: -8px;   cursor: nwse-resize; }
.pb-resize-handle-corner-br { bottom: -8px; right: -8px; cursor: nwse-resize; }
.pb-resize-handle-corner-tr { top: -8px; right: -8px;  cursor: nesw-resize; }
.pb-resize-handle-corner-bl { bottom: -8px; left: -8px;  cursor: nesw-resize; }
/* Repère en équerre (deux petits traits perpendiculaires) plutôt que le
   trait unique des bords, pour suggérer une diagonale plutôt qu'un axe. */
.pb-resize-handle-corner-tl::after, .pb-resize-handle-corner-tr::after,
.pb-resize-handle-corner-bl::after, .pb-resize-handle-corner-br::after {
  width: 8px;
  height: 8px;
  background: none;
  border-radius: 0;
}
.pb-resize-handle-corner-tl::after { top: 4px; left: 4px;    border-top: 2px solid var(--border); border-left: 2px solid var(--border); }
.pb-resize-handle-corner-tr::after { top: 4px; right: 4px;   border-top: 2px solid var(--border); border-right: 2px solid var(--border); }
.pb-resize-handle-corner-bl::after { bottom: 4px; left: 4px;  border-bottom: 2px solid var(--border); border-left: 2px solid var(--border); }
.pb-resize-handle-corner-br::after { bottom: 4px; right: 4px; border-bottom: 2px solid var(--border); border-right: 2px solid var(--border); }
#pb-fab-panel.pb-expanding { animation: pb-panel-expand .25s ease-out; }
#pb-fab-panel.pb-collapsing { animation: pb-panel-collapse .32s ease-in forwards; }
@keyframes pb-panel-expand {
  from { opacity: 0; transform: scale(.3) translate(35%, 45%); }
  to   { opacity: 1; transform: scale(1) translate(0,0); }
}
@keyframes pb-panel-collapse {
  from { opacity: 1; transform: scale(1) translate(0,0); }
  to   { opacity: 0; transform: scale(.3) translate(35%, 45%); }
}
.pb-fab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
/* Titre = poignée de glisser-déposer : permet de repositionner le panneau
   n'importe où sur l'écran (voir le glisser en pointerdown/move/up dans
   buildFab, session.js). touch-action:none empêche le défilement de la page
   de "voler" le geste sur mobile/tablette pendant le glisser. Le bouton
   Réduire reste à côté, HORS de cette poignée, pour rester cliquable
   normalement (voir pb-fab-header ci-dessus, dans session.js). */
.pb-fab-title {
  margin: 0;
  padding: 0 2px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted, #888);
  cursor: move;
  user-select: none;
  touch-action: none;
  flex: 1;
}
.pb-fab-reduce-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.pb-fab-reduce-btn:hover { background: var(--border); }
@media (max-width: 480px) {
  #pb-fab { right: 10px; bottom: 118px; }
  #pb-fab-panel { width: 260px; }
}

/* ── Page dédiée (/intranet/pense-betes) : bandeau titre — le bouton rond
   flottant (#pb-fab, toujours visible en bas de l'écran) sert déjà à
   réduire/rouvrir, pas besoin d'un second bouton propre à cette page. */
.pb-page-header { margin-bottom: 20px; }

/* ── Barre d'actions + boutons (communs page dédiée / widget flottant) ──── */
.pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.pb-btn:hover { background: var(--surface-hover); }
.pb-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* .pb-btn:hover et .pb-btn-primary:hover ont la même spécificité (une
   classe + :hover chacune) : sans cette règle qui fixe "background" (et pas
   seulement "filter", trop subtil et parfois presque invisible selon le
   thème), .pb-btn:hover l'emportait pour le bouton "Enregistrer" et le
   repassait à var(--surface-hover) — un fond clair avec un texte resté
   blanc (--accent-ink), donc illisible. Même variable --accent-hover que
   tous les autres boutons d'accent du site (voir ex. .login-form button:hover). */
.pb-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pb-btn-ghost { background: transparent; }

/* Bouton « + » rond, épuré, aligné à droite — remplace l'ancien bouton texte
   « Nouveau pense-bête » (demande explicite : un site épuré, un bouton "+"
   stylé plutôt qu'un bouton texte à gauche). */
.pb-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.pb-add-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pb-add-btn:hover { transform: scale(1.08) rotate(90deg); box-shadow: 0 6px 18px rgba(0,0,0,.28); }

/* ── Popup de création/édition : un post-it lui-même, jamais inséré
   directement dans la page (voir pbBuildModal dans session.js) ────────── */
.pb-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 950;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pb-modal-overlay.open { display: flex; }
/* Sélecteur combiné .pb-modal-postit.postit-card (et non .pb-modal-postit
   seul) pour l'emporter sur les règles .postit-card / .postit-card:hover
   (même spécificité qu'une classe seule, définies plus loin dans ce
   fichier) : la popup de saisie ne doit jamais être inclinée, contrairement
   aux cartes affichées dans la grille. */
.pb-modal-postit.postit-card {
  width: 320px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: rotate(0deg);
  animation: pb-modal-pop .18s ease-out;
}
/* !important : même spécificité que .postit-card:hover/.postit-card.editing
   défini plus loin dans ce fichier (deux classes chacun) — sans ça, l'ordre
   d'apparition dans le fichier déciderait et la popup se mettrait à "flotter"
   comme une carte de la grille au survol, ce qui n'a pas de sens ici. */
.pb-modal-postit.postit-card:hover { transform: none !important; box-shadow: 3px 4px 10px rgba(0,0,0,.18) !important; }
@keyframes pb-modal-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.pb-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.pb-modal-close:hover { background: rgba(255,255,255,.9); }
.pb-form-title, .pb-form-content {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-display); /* même police que le thème actif — voir .postit-card */
  font-size: 14.5px;
  background: rgba(255,255,255,.6);
  color: #3a3a2c;
  resize: vertical;
}
.pb-form-title { margin-top: 18px; font-weight: 700; }
.pb-form-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.pb-color-swatch.active { border-color: #3a3a2c; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.pb-form-actions { display: flex; gap: 8px; }
/* Sur téléphone, la popup reste CENTRÉE dans la zone visible (et non plus
   collée en bas d'écran : une fois le clavier refermé, elle restait tout en
   bas). Quand le clavier virtuel s'ouvre, pbFollowKeyboard() (session.js)
   ajoute à l'overlay un padding-bottom égal à la hauteur couverte (mesurée
   via window.visualViewport) : le post-it se recentre alors dans l'espace
   restant au-dessus du clavier — champs ET bouton Enregistrer visibles — puis
   revient au milieu de l'écran dès que le clavier se ferme. */
@media (max-width: 480px) {
  .pb-modal-overlay { align-items: center; padding: 12px; }
  .pb-modal-postit { width: 100%; }
  .pb-modal-postit.postit-card {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
  }
}

/* ── Grille de post-its ──────────────────────────────────────────────────
   Une seule colonne dans le panneau flottant (plus étroit), en grille
   responsive dans la page dédiée. */
.pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.pb-floating .pb-grid { grid-template-columns: 1fr; gap: 10px; }
.pb-empty {
  grid-column: 1 / -1;
  color: var(--text-muted, #888);
  font-size: 13.5px;
  text-align: center;
  padding: 20px 8px;
}

/* Couleurs fixes (pas liées au thème du site) : un post-it garde la même
   teinte quel que soit le thème visuel choisi, comme un vrai papier.
   Design « fun » : épingle décorative en haut, coin corné en bas à droite,
   petit envol au survol — pour donner envie d'en écrire un. La police, elle,
   SUIT le thème visuel de l'intranet (var(--font-display), redéfinie par
   thème dans les blocs html[data-theme="..."] plus bas dans ce fichier —
   demande explicite : le même thème doit se retrouver jusque dans les
   post-its, pas une police fixe indépendante du thème choisi). */
.postit-card {
  --postit-rot: -1.5deg; /* survolée séparément du reste du transform (voir plus bas) : évite un conflit de spécificité avec :hover sur la propriété "transform" elle-même */
  position: relative;
  min-height: 130px;
  padding: 28px 30px 14px 14px;
  border-radius: 2px 12px 2px 12px;
  box-shadow: 4px 6px 14px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.5) inset;
  color: #3a3a2c;
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.4;
  word-break: break-word;
  transform: rotate(var(--postit-rot));
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Ces deux règles ne touchent QUE la variable --postit-rot, jamais la
   propriété "transform" elle-même : avec .pb-grid en plus dans le
   sélecteur, elles seraient plus spécifiques que .postit-card:hover et
   l'emporteraient sur lui pour la moitié des cartes (pairs / multiples de
   3) si elles fixaient transform directement — c'est exactement le bug
   rapporté ("seuls le premier et le dernier post-it se soulèvent"). */
.pb-grid .postit-card:nth-child(even) { --postit-rot: 1.5deg; }
.pb-grid .postit-card:nth-child(3n)   { --postit-rot: -.8deg; }
.postit-card:hover,
.postit-card.editing {
  transform: rotate(0deg) translateY(-4px) scale(1.03);
  box-shadow: 6px 12px 24px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.5) inset;
  z-index: 1;
}
/* Coin corné, façon page qu'on s'apprête à tourner. */
.postit-card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 18px 18px;
  border-color: transparent transparent rgba(0,0,0,.16) transparent;
  transition: border-width .2s ease;
}
.postit-card:hover::after, .postit-card.editing::after { border-width: 0 0 22px 22px; }
/* Épingle décorative (purement visuelle, aria-hidden) qui "plante" le
   post-it en haut de la carte. */
.postit-pin {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  font-size: 22px;
  filter: drop-shadow(1px 3px 2px rgba(0,0,0,.4));
  pointer-events: none;
}
.postit-pin::before { content: '📌'; }

.postit-jaune  { background: #fff59d; }
.postit-rose   { background: #f8bbd0; }
.postit-bleu   { background: #bbdefb; }
.postit-vert   { background: #c8e6c9; }
.postit-orange { background: #ffe0b2; }
.postit-violet { background: #e1bee7; }

.postit-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255,255,255,.55);
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.postit-delete-btn:hover { background: rgba(255,255,255,.9); }
.postit-card:hover .postit-delete-btn,
.postit-card:focus-within .postit-delete-btn,
.postit-card.editing .postit-delete-btn { opacity: 1; }
/* Pas de survol fiable au doigt : le bouton reste visible en permanence sur
   tactile / petit écran plutôt que de nécessiter un appui prolongé. */
@media (hover: none), (max-width: 640px) {
  .postit-delete-btn { opacity: 1; }
}

/* Titre et texte sont directement éditables au clic (contentEditable, voir
   session.js) : pas de bouton crayon, pas de bouton « Enregistrer » — la
   sauvegarde se fait automatiquement après une pause de frappe. */
.postit-title, .postit-content {
  cursor: text;
  outline: none;
  border-radius: 3px;
}
.postit-title:focus, .postit-content:focus { background: rgba(255,255,255,.35); }
.postit-title {
  margin: 0 20px 6px 0;
  font-weight: 700;
  font-size: 20px;
}
.postit-content {
  margin: 0;
  white-space: pre-wrap;
  min-height: 1.4em;
}
.postit-title:empty::before, .postit-content:empty::before {
  content: attr(data-placeholder);
  opacity: .55;
  pointer-events: none;
}

/* Pastilles de couleur, visibles seulement pendant l'édition de la carte. */
.postit-inline-colors {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.postit-card.editing .postit-inline-colors { display: flex; }

/* Petite confirmation éphémère après une sauvegarde automatique. */
.postit-saved-flash {
  position: absolute;
  bottom: 6px;
  left: 14px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #2e7d32;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.postit-saved-flash.show { opacity: 1; transform: translateY(0); }

/* ─── Rattrapages thème Professionnel ───────────────────────────────────────
   Quelques éléments avaient, avant la mise en place des thèmes, une teinte
   très proche mais PAS identique à --border/--text-strong (ex. bordure
   #c5d9f5 au lieu du bleu-gris standard #e0e8f5) : les avoir fait suivre la
   variable partagée a très légèrement changé leur rendu par défaut. On
   restaure ici la valeur d'origine exacte UNIQUEMENT pour le thème
   Professionnel (html sans data-theme) ; les autres thèmes continuent de
   suivre la variable normalement. */
html:not([data-theme]) .procedure-card { color: black; }
html:not([data-theme]) .log-export-bar,
html:not([data-theme]) .log-filter-bar { border-color: #c5d9f5; }
html:not([data-theme]) .dash-panel-title { border-bottom-color: #dce8f7; }
html:not([data-theme]) .newsletter-item { border-color: #e8eef8; }
html:not([data-theme]) .cat-add-section { border-color: #dce3ef; }