@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ===================== VARIABLES — reprises telles quelles de l'application TVA ===================== */
:root {
  --gray-30: #14161f;
  --gray-90: rgb(90, 90, 90);
  --gray-200: rgb(200, 200, 200);
  --gray-245: #f0ece5;
  --grey: rgb(99, 102, 106);
  --red: rgb(239, 83, 80);
  --orange: rgb(255, 160, 0);
  --yellow: #6fa8a0;
  --green: rgb(42, 252, 152);
  --blue: #e8a65c;
  --indigo: rgb(57, 73, 171);
  --violet: rgb(103, 58, 183);

  --accent-amber: #e8a65c;
  --accent-amber-dim: rgba(232, 166, 92, 0.16);
  --accent-teal: #6fa8a0;
  --accent-teal-dim: rgba(111, 168, 160, 0.16);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text-rgb: 255, 255, 255;
  --surface-rgb: 255, 255, 255;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--gray-30);
  color: rgba(var(--text-rgb), 0.85);
  font-family: var(--font-body);
  margin: 0;
  min-height: 100vh;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--gray-245); margin: 0 0 12px; }
a { color: var(--accent-amber); text-decoration: none; }
a:hover { text-decoration: underline; }
p { line-height: 1.6; }
.muted { color: rgba(var(--text-rgb), 0.5); font-size: 0.88em; }
code { font-family: var(--font-mono); background: var(--glass-bg); padding: 2px 6px; border-radius: 4px; }

/* Numéros de téléphone de l'annuaire (annuaire.php) : texte simple sur
   ordinateur, cliquables (tel:) uniquement en mode smartphone -- même
   règle dupliquée dans assets/dashboard.css pour dashboard.php. */
.tel-link { color: inherit; cursor: default; pointer-events: none; }
@media (max-width: 700px) {
  .tel-link { color: var(--accent-amber); cursor: pointer; pointer-events: auto; }
}

/* ---------- Boutons — repris de .auth-button / .admin-btn ---------- */
.btn, button[type="submit"], .auth-button {
  align-items: center;
  background-color: var(--accent-amber);
  border: none;
  border-radius: 8px;
  color: var(--gray-30);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1em;
  gap: 8px;
  padding: 12px 22px;
  text-decoration: none;
  transition: filter 200ms, transform 150ms;
}
.btn:hover, button[type="submit"]:hover, .auth-button:hover { filter: brightness(1.1); text-decoration: none; }
.btn:active, button[type="submit"]:active, .auth-button:active { transform: scale(0.98); }
.btn-small, button[type="submit"].btn-small {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-weight: 600;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.85em;
  text-decoration: none;
  transition: filter 200ms, transform 150ms;
}
.btn-small:hover, button[type="submit"].btn-small:hover { filter: brightness(1.1); text-decoration: none; }
/* .btn-secondary / .btn-danger / .btn-small, en plus de leur sélecteur "nu"
   (liens, boutons sans type), répétés ici avec un sélecteur
   button[type="submit"].xxx -- nécessaire car button[type="submit"] (règle
   générale ambre plus haut) a une spécificité CSS légèrement supérieure à
   .btn-danger/.btn-secondary/.btn-small seuls (un sélecteur d'attribut + un
   sélecteur de type, contre une seule classe) : sans ce doublon, TOUT
   <button type="submit" class="btn-danger"> ou "btn-secondary" (~120
   occurrences dans admin/) retombait silencieusement sur le fond ambre par
   défaut au lieu du rouge/gris attendu, quel que soit l'ordre des règles
   dans la feuille de style -- et TOUT <button type="submit" class="btn-small
   ...">  (ex. "Suppr." à côté d'un "Modifier" en <a class="btn-small">)
   retombait sur le padding/font-size DU GRAND bouton (.btn, 12px 22px) au
   lieu du petit (8px 14px), d'où la différence de hauteur constatée entre
   boutons d'une même ligne (Visible / Modifier / Suppr.). */
.btn-secondary, button[type="submit"].btn-secondary { background-color: rgba(var(--surface-rgb), 0.08); color: var(--gray-245); border: 1px solid var(--glass-border); }
.btn-danger, button[type="submit"].btn-danger { background-color: var(--red); color: white; border: none; }
/* Un lien seul (sans .btn-small à côté) prend l'apparence par défaut du bouton amber. */
a.btn-secondary:not(.btn-small), a.btn-danger:not(.btn-small) {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-weight: 600;
  gap: 6px;
  padding: 12px 22px;
  text-decoration: none;
}

/* ---------- Formulaires — repris tel quel du bloc partagé de l'admin TVA ---------- */
label { display: block; margin-bottom: 16px; }
label span { display: block; color: rgba(var(--text-rgb), 0.5); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
label span[title] { border-bottom: 1px dotted rgba(var(--text-rgb), 0.3); cursor: help; display: inline-block; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="url"], textarea, select {
  width: 100%;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--gray-245);
  font-family: var(--font-body);
  font-size: 1em;
  outline: none;
  padding: 12px 14px;
  transition: border-color 200ms, background-color 200ms;
}
input:focus, textarea:focus, select:focus { background-color: rgba(var(--surface-rgb), 0.12); border-color: var(--accent-amber); }
textarea { resize: vertical; }

/* Menu déroulant (<select>) : la flèche par défaut du navigateur (chrome OS,
   grise, carrée) ne suit ni la police ni les couleurs du thème -- on la
   remplace par un chevron dessiné en CSS (SVG en data URI, même dégradé de
   gris que label span : rgba(var(--text-rgb),0.45)) tout en gardant le
   fond/bordure/rayon déjà posés par la règle input/textarea/select ci-dessus
   (seul padding-right change, en propriété isolée, pour laisser la place au
   chevron sans casser le padding commun). */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 11px 7px;
  cursor: pointer;
  padding-right: 38px;
}
select:hover { border-color: rgba(232,166,92,0.4); }
select:disabled { cursor: not-allowed; opacity: 0.6; }
select option { background-color: var(--gray-30); color: var(--gray-245); }
/* Menus déroulants volontairement "en ligne" ailleurs sur le site (ex.
   .homepanel-button-row select, style: width:auto posé en inline) gardent
   leur propre largeur -- seule l'apparence (chevron/appearance) est globale. */

/* Case à cocher : par défaut, la case native garde la forme et le liseré du
   navigateur/OS même avec accent-color (rendu très inégal selon le
   navigateur) -- ici on la redessine entièrement (carré arrondi, fond verre
   au repos, ambre + coche blanche une fois cochée) pour qu'elle suive le
   même langage visuel que le reste de l'admin (cartes, boutons). */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
  margin: 0;
  position: relative;
  transition: background-color 150ms, border-color 150ms;
  vertical-align: middle;
}
input[type="checkbox"]:hover { border-color: rgba(232,166,92,0.5); }
input[type="checkbox"]:checked { background-color: var(--accent-amber); border-color: var(--accent-amber); }
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--gray-30);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }

/* ===================== SCROLLBAR PERSONNALISÉE ===================== */
/* Reprise à l'identique de assets/dashboard.css (site public) -- non
   chargée sur les pages admin/ jusqu'ici (dashboard.css n'y est presque
   jamais inclus, voir plus haut), d'où les ascenseurs "à l'ancienne"
   (gris, natifs) sur tout le panneau d'administration. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-amber) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--accent-amber); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-teal); }
::-webkit-scrollbar-track { background: transparent; border-radius: 10px; box-shadow: inset 0 0 2px rgba(232, 166, 92, 0.4); }

/* ---------- Alertes ---------- */
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 0.92em; }
.alert-success { background: var(--accent-teal-dim); border: 1px solid rgba(111,168,160,0.3); color: var(--accent-teal); }
.alert-error { background: rgba(239,83,80,0.15); border: 1px solid rgba(239,83,80,0.3); color: var(--red); }
.alert-info { background: var(--accent-amber-dim); border: 1px solid rgba(232,166,92,0.3); color: var(--accent-amber); }

/* ---------- Pages d'authentification — reprises de .auth-card / .auth-button ---------- */
.auth-body { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; }
.auth-card {
  backdrop-filter: blur(10px);
  background-color: rgba(30, 30, 30, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.35);
  max-width: 400px;
  width: 100%;
  padding: 40px;
}
.auth-card-wide { max-width: 640px; }
.auth-brand { font-family: var(--font-display); font-weight: 700; color: var(--accent-amber); font-size: 1.3em; margin-bottom: 24px; text-align: center; letter-spacing: 0.3px; }
.auth-error { color: var(--red); font-size: 0.85em; min-height: 1em; }
.auth-success { color: var(--green); font-size: 0.85em; min-height: 1em; }

/* Grilles de formulaire "2/3/4 colonnes" (admin/directory-edit.php, admin/menus.php,
   admin/icon-menu.php, admin/infos-plus.php, admin/page-cards.php, admin/page-tabs.php,
   admin/settings.php, admin/widget-reminders.php, admin/news-edit.php…) -- portées ici
   depuis dashboard.css (jamais chargé par le panneau admin, voir plus haut) ; les champs
   eux-mêmes sont déjà stylés par les règles génériques label/input/select/textarea ci-dessus. */
.dirform-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.dirform-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.dirform-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .dirform-row-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- En-tête du site ---------- */
.site-header { background-color: rgba(20,22,31,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; z-index: 50; }
.site-header-inner { display: flex; align-items: center; gap: 24px; width: 100%; margin: 0; padding: 14px 32px; }
.site-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.25em; color: var(--gray-245); letter-spacing: 0.3px; display: flex; align-items: center; }
.site-logo-img { max-height: 36px; max-width: 160px; }
.site-nav { display: flex; gap: 22px; flex: 1; }
.site-nav a { color: rgba(var(--text-rgb), 0.65); font-weight: 600; font-size: 0.9em; letter-spacing: 0.2px; }
.site-nav a:hover { color: var(--accent-amber); text-decoration: none; }
.site-header-account { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.site-header-account a { color: rgba(var(--text-rgb), 0.65); font-size: 1.05em; }
.site-header-account a:hover { color: var(--accent-amber); }
.site-header-username { color: var(--accent-amber); font-weight: 600; font-size: 0.88em; font-family: var(--font-mono); }
.site-nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 4px; }
.site-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--gray-245); }

@media (max-width: 860px) {
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--gray-30); flex-direction: column; padding: 16px 24px; display: none; border-bottom: 1px solid var(--glass-border); }
  .site-nav.open { display: flex; }
  .site-nav-toggle { display: flex; }
}

/* ---------- Contenu principal ---------- */
.site-main { width: 100%; margin: 0; padding: 32px 32px; }

/* ---------- Cartes / panneaux — repris de .ops-panel ---------- */
.dash-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 32px; }
.dash-card {
  backdrop-filter: blur(10px);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 22px;
  transition: box-shadow 200ms, border-color 200ms;
}
.dash-card:hover { border-color: rgba(232,166,92,0.3); box-shadow: 0 4px 24px rgba(232,166,92,0.12); }
.dash-card-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; color: var(--gray-245); margin-bottom: 16px; }
.dash-card-title i { color: var(--accent-amber); }

.search-box { display: flex; gap: 10px; margin-bottom: 32px; }
.search-box input { flex: 1; }
.search-box button { padding: 12px 18px; }

.news-card {
  backdrop-filter: blur(10px);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow 200ms, border-color 200ms;
}
.news-card:hover { border-color: rgba(232,166,92,0.3); }
.news-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.news-card-body { padding: 22px; }
.news-card-date { color: rgba(var(--text-rgb), 0.4); font-size: 0.8em; font-family: var(--font-mono); }

/* ===================== ACTUALITÉS — MISE EN PAGE MASONRY ===================== */
/* Colonnes fluides façon Pinterest : chaque carte garde sa propre
   hauteur naturelle, pas d'alignement forcé en grille rigide. */
.news-masonry {
  column-count: 1;
  column-gap: 20px;
}
@media (min-width: 700px) { .news-masonry { column-count: 2; } }
@media (min-width: 1100px) { .news-masonry { column-count: 3; } }
.news-masonry-item {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
}

/* ---------- Tableaux — repris de .admin-table ---------- */
.admin-table, .directory-table { border-collapse: collapse; width: 100%; margin-bottom: 24px; }
.admin-table th, .admin-table td, .directory-table th, .directory-table td {
  border-bottom: 1px solid rgba(var(--surface-rgb), 0.1);
  color: rgba(var(--text-rgb), 0.8);
  font-size: 0.9em;
  padding: 12px 16px;
  text-align: left;
}
.admin-table th, .directory-table th { color: rgba(var(--text-rgb), 0.45); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }

/* Sur smartphone, un tableau large devient un conteneur défilant
   horizontalement plutôt que de déborder hors de l'écran -- le
   tableau lui-même reste un vrai tableau (alignement des colonnes
   inchangé), seul son mode d'affichage devient "bloc défilant". */
@media (max-width: 760px) {
  .admin-table, .directory-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ---------- Commentaires ---------- */
.comment { border-top: 1px solid var(--glass-border); padding: 14px 0; }
.comment-author { color: var(--accent-amber); font-weight: 600; font-size: 0.9em; font-family: var(--font-mono); }
.comment-date { color: rgba(var(--text-rgb), 0.35); font-size: 0.78em; margin-left: 8px; }

/* ---------- Pied de page ---------- */
.site-footer { background-color: var(--glass-bg); border-top: 1px solid var(--glass-border); margin-top: 40px; }
.site-footer-inner { width: 100%; margin: 0; padding: 26px 32px; text-align: center; color: rgba(var(--text-rgb), 0.45); font-size: 0.85em; }
.site-footer-inner p { margin: 4px 0; }
.site-footer-logo { max-height: 40px; margin-bottom: 10px; }

/* ---------- Statuts (brouillon/publié/en attente) — repris des status-pill TVA ---------- */
.status-pill { border-radius: 20px; padding: 3px 12px; font-size: 0.75em; font-weight: 700; font-family: var(--font-mono); }
.status-published { background: var(--accent-teal-dim); color: var(--accent-teal); }
.status-draft { background: rgba(255,255,255,0.08); color: rgba(var(--text-rgb), 0.6); }
.status-pending { background: var(--accent-amber-dim); color: var(--accent-amber); }

/* ---------- Admin : mise en page ---------- */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; flex-shrink: 0; background: rgba(20,22,31,0.6); backdrop-filter: blur(10px); border-right: 1px solid var(--glass-border); padding: 20px 0; }
.admin-sidebar a { display: flex; align-items: center; gap: 10px; padding: 11px 22px; color: rgba(var(--text-rgb), 0.65); font-weight: 600; font-size: 0.9em; position: relative; }
.admin-sidebar a:hover, .admin-sidebar a.active { color: var(--accent-amber); text-decoration: none; background: rgba(255,255,255,0.03); }
.admin-sidebar-brand { padding: 0 22px 18px; font-family: var(--font-display); font-weight: 700; color: var(--gray-245); }
.admin-content { flex: 1; padding: 28px 32px; width: 100%; }
.admin-notif-dot { background: var(--red); border-radius: 50%; width: 8px; height: 8px; margin-left: auto; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

/* ===================== VERROUILLAGE PIN ===================== */

#lock-button {
  background: none;
  border: none;
  color: rgba(var(--text-rgb), 0.65);
  cursor: pointer;
  font-size: 1.05em;
  padding: 0;
}
#lock-button:hover { color: var(--accent-amber); }

.lock-overlay {
  align-items: center;
  background-color: rgba(20, 22, 31, 0.75);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 500;
}
.lock-box {
  background-color: rgba(30, 30, 30, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 4px 4px 24px rgba(0,0,0,0.4);
  max-width: 340px;
  padding: 40px;
  text-align: center;
  width: 100%;
}
.lock-box-icon { color: var(--accent-amber); font-size: 2em; margin-bottom: 12px; }
.lock-box h2 { margin-bottom: 6px; }
.lock-pin-digits { cursor: pointer; display: flex; gap: 14px; justify-content: center; margin: 26px 0; }
.lock-pin-dot {
  background-color: rgba(var(--surface-rgb), 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  height: 16px;
  width: 16px;
  transition: background-color 150ms, border-color 150ms;
}
.lock-pin-dot.filled { background-color: var(--accent-amber); border-color: var(--accent-amber); }
.lock-pin-dot.error { border-color: var(--red); background-color: var(--red); }
#lock-pin-hidden-input {
  height: 1px; width: 1px; opacity: 0; position: absolute; pointer-events: none;
}

/* ===================== ÉDITEUR DE TEXTE ENRICHI ===================== */

.richtext-wrapper { margin-bottom: 16px; }
.richtext-toolbar {
  align-items: center;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  position: relative;
}
.richtext-toolbar button {
  background: none;
  border: none;
  border-radius: 6px;
  color: rgba(var(--text-rgb), 0.7);
  cursor: pointer;
  font-size: 0.9em;
  padding: 7px 9px;
}
.richtext-toolbar button:hover { background-color: rgba(var(--surface-rgb), 0.1); color: var(--accent-amber); }
.rt-sep { background-color: var(--glass-border); height: 20px; width: 1px; margin: 0 2px; }

.richtext-editor {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: var(--gray-245);
  min-height: 260px;
  padding: 16px;
}
.richtext-editor:focus { outline: none; border-color: var(--accent-amber); }
.richtext-editor table { border-collapse: collapse; margin: 10px 0; }
.richtext-editor img { max-width: 100%; border-radius: 8px; }
.richtext-editor blockquote { border-left: 3px solid var(--accent-amber); color: rgba(var(--text-rgb), 0.6); margin: 10px 0; padding-left: 14px; }

.rt-more-toggle { margin-left: auto; }
.rt-more-menu {
  background-color: rgba(20, 22, 31, 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  position: absolute;
  right: 8px;
  top: 100%;
  width: 260px;
  z-index: 30;
}
.rt-more-menu button { text-align: left; width: 100%; }

.rt-emoji-panel {
  background-color: rgba(20, 22, 31, 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.4);
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(8, 1fr);
  padding: 10px;
  position: absolute;
  right: 8px;
  top: 100%;
  width: 280px;
  z-index: 30;
}
.rt-emoji-btn { font-size: 1.2em; padding: 4px !important; }

/* ===================== CHAMP FICHIER STYLÉ ===================== */

.file-upload-field {
  align-items: center;
  background-color: var(--glass-bg);
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  transition: border-color 200ms, background-color 200ms;
}
.file-upload-field:hover { border-color: var(--accent-amber); background-color: rgba(var(--surface-rgb), 0.08); }
.file-upload-field i { color: var(--accent-amber); }
.file-upload-field input[type="file"] { display: none; }
.file-upload-field-label { color: rgba(var(--text-rgb), 0.6); font-size: 0.9em; }
.file-upload-field-name { color: var(--gray-245); font-weight: 600; }

/* ===================== BASCULE VUE LISTE / CARTE ===================== */

.admin-view-toggle { display: flex; gap: 4px; }
.admin-view-btn {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: rgba(var(--text-rgb), 0.6);
  cursor: pointer;
  padding: 8px 12px;
}
.admin-view-btn:hover { color: var(--accent-amber); }
.admin-view-btn.active { background-color: var(--accent-amber); border-color: var(--accent-amber); color: var(--gray-30); }
.admin-row-actions { display: flex; gap: 6px; }

/* ===================== POST-IT ===================== */

.postit-board { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 20px; }
.postit-note {
  border-radius: 4px;
  box-shadow: 3px 4px 10px rgba(0,0,0,0.3);
  min-height: 150px;
  padding: 16px;
  position: relative;
  transform: rotate(-1deg);
  transition: transform 150ms;
}
.postit-note:nth-child(3n+2) { transform: rotate(1.5deg); }
.postit-note:nth-child(3n) { transform: rotate(-0.5deg); }
.postit-note:hover { transform: rotate(0deg) scale(1.03); }
.postit-note.postit-yellow { background-color: #fdd835; }
.postit-note.postit-blue { background-color: #90caf9; }
.postit-note.postit-green { background-color: #a5d6a7; }
.postit-note.postit-pink { background-color: #f48fb1; }
.postit-note-text { color: #14161f; font-size: 0.92em; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.postit-note-date { color: rgba(20,22,31,0.5); font-size: 0.72em; margin-top: 10px; }
.postit-common-ribbon {
  align-items: center;
  background-color: rgba(20,22,31,0.85);
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  font-size: 0.65em;
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  padding: 3px 8px;
  text-transform: uppercase;
}
.postit-note-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.postit-edit-textarea {
  background-color: rgba(20,22,31,0.08);
  border: 1px solid rgba(20,22,31,0.2);
  border-radius: 6px;
  color: #14161f;
  font-family: var(--font-body);
  font-size: 0.92em;
  padding: 8px;
  resize: vertical;
  width: 100%;
}
.postit-note-actions button {
  background: rgba(20,22,31,0.12);
  border: none;
  border-radius: 6px;
  color: #14161f;
  cursor: pointer;
  padding: 5px 8px;
}
.postit-note-actions button:hover { background: rgba(20,22,31,0.25); }

.postit-color-choice { display: flex; gap: 10px; margin: 10px 0 20px; }
.postit-color-choice label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.postit-color-choice input[type="radio"] { width: auto; accent-color: var(--accent-amber); }
.postit-color-dot { border-radius: 50%; display: inline-block; height: 18px; width: 18px; }
.postit-color-dot.postit-yellow { background-color: #fdd835; }
.postit-color-dot.postit-blue { background-color: #90caf9; }
.postit-color-dot.postit-green { background-color: #a5d6a7; }
.postit-color-dot.postit-pink { background-color: #f48fb1; }

/* ===================== SOUS-MENU DÉROULANT (Mes Widgets) ===================== */

.site-nav-dropdown { position: relative; }
.site-nav-dropdown-toggle {
  background: none;
  border: none;
  color: rgba(var(--text-rgb), 0.65);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 0;
}
.site-nav-dropdown-toggle:hover { color: var(--accent-amber); }
.site-nav-dropdown-toggle i { font-size: 0.75em; margin-left: 4px; transition: transform 150ms; }
.site-nav-dropdown.open .site-nav-dropdown-toggle i { transform: rotate(180deg); }

.site-nav-dropdown-menu {
  background-color: rgba(20, 22, 31, 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.4);
  display: none;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 40;
}
.site-nav-dropdown.open .site-nav-dropdown-menu { display: flex; }
.site-nav-dropdown-menu a {
  border-radius: 6px;
  color: rgba(var(--text-rgb), 0.75) !important;
  font-size: 0.9em;
  padding: 9px 10px;
}
.site-nav-dropdown-menu a:hover { background-color: rgba(255,255,255,0.06); color: var(--accent-amber) !important; text-decoration: none; }

@media (max-width: 860px) {
  .site-nav-dropdown-menu { position: static; box-shadow: none; margin-top: 4px; margin-left: 12px; }
  .site-nav-dropdown.open .site-nav-dropdown-menu { display: flex; }
}

/* ===================== MES RAPPELS ===================== */

.reminder-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.reminder-tab {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: rgba(var(--text-rgb), 0.6);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 10px 18px;
}
.reminder-tab.active { background-color: var(--accent-amber-dim); border-color: var(--accent-amber); color: var(--accent-amber); }
.reminder-panel { display: none; }
.reminder-panel.active { display: block; }

.reminder-section-title { color: rgba(var(--text-rgb), 0.45); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.4px; margin: 18px 0 8px; }
.reminder-row {
  align-items: center;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 16px;
}
.reminder-row-common { border-color: var(--accent-amber); }
.reminder-row-icon { color: var(--accent-amber); font-size: 1.1em; }
.reminder-row-main { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.reminder-row-title { color: var(--gray-245); font-weight: 600; }
.reminder-row-meta { color: rgba(var(--text-rgb), 0.5); font-size: 0.82em; }
.reminder-row-delete { background: none; border: none; color: rgba(var(--text-rgb), 0.4); cursor: pointer; padding: 6px; }
.reminder-row-delete:hover { color: var(--red); }
.reminder-row-edit { background: none; border: none; color: rgba(var(--text-rgb), 0.4); cursor: pointer; padding: 6px; }
.reminder-row-edit:hover { color: var(--accent-amber); }

/* ===================== CHAMPS DATE / HEURE (natifs, thème sombre forcé) ===================== */

input[type="date"], input[type="time"] {
  color-scheme: dark;
  font-family: var(--font-mono);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(72%) sepia(24%) saturate(638%) hue-rotate(345deg); /* teinte ambre */
  opacity: 0.85;
}
/* Les flèches internes (heures/minutes) d'un champ heure ont un rendu
   différent du champ date par défaut -- masquées pour un aspect
   identique aux deux champs. */
input[type="time"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ===================== BARRE "ANNULER LA SUPPRESSION" ===================== */

#undo-toast-container {
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  z-index: 600;
}
.undo-toast {
  align-items: center;
  background-color: rgba(20, 22, 31, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 4px 4px 24px rgba(0,0,0,0.4);
  display: flex;
  gap: 16px;
  min-width: 320px;
  overflow: hidden;
  padding: 14px 18px;
  position: relative;
}
.undo-toast-text { color: var(--gray-245); flex: 1; font-size: 0.9em; }
.undo-toast-cancel {
  background-color: var(--accent-amber);
  border: none;
  border-radius: 6px;
  color: var(--gray-30);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85em;
  padding: 6px 14px;
}
.undo-toast-cancel:hover { filter: brightness(1.1); }
.undo-toast-bar { background-color: rgba(255,255,255,0.08); bottom: 0; height: 3px; left: 0; position: absolute; width: 100%; }
.undo-toast-bar-fill {
  background-color: var(--red);
  height: 100%;
  transform-origin: left;
  transition: transform 5s linear;
  width: 100%;
}

/* ===================== BULLES DE NOTIFICATION (rappels / minuteurs) ===================== */

.notif-bubble {
  align-items: center;
  /* Deux animations distinctes, sur des propriétés différentes, tournent en
     parallèle sans se marcher dessus : notifBubbleBounce (entrée, une seule
     fois) sur transform/opacity, notifBubblePulse (halo respirant, en boucle
     -- demande explicite, en plus du tremblement de la cloche ci-dessous)
     sur box-shadow, démarrée après les 900ms de l'entrée pour ne pas se
     superposer visuellement au rebond. */
  animation: notifBubbleBounce 900ms cubic-bezier(0.28, 1.9, 0.53, 0.87),
             notifBubblePulse 2.2s ease-in-out 900ms infinite;
  background: linear-gradient(135deg, var(--accent-amber), #c97f2f);
  border-radius: 50%;
  bottom: 26px;
  box-shadow: 0 8px 26px rgba(232,166,92,0.5);
  cursor: pointer;
  display: flex;
  height: 54px;
  justify-content: center;
  position: fixed;
  right: 26px;
  transition: bottom 200ms ease;
  width: 54px;
  z-index: 550;
}
.notif-bubble i { animation: notifBellRing 1.4s ease-in-out infinite; color: var(--gray-30); font-size: 1.4em; transform-origin: top center; }
/* Rebond d'apparition -- identique à reminderBubbleBounce du site statique
   (garder le même système de notification, à l'identique). */
@keyframes notifBubbleBounce {
  0% { transform: translateY(120px) scale(0.4); opacity: 0; }
  55% { transform: translateY(-16px) scale(1.08); opacity: 1; }
  75% { transform: translateY(6px) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes notifBubblePulse {
  0%, 100% { box-shadow: 0 8px 26px rgba(232,166,92,0.5), 0 0 0 0 rgba(232,166,92,0.45); }
  50% { box-shadow: 0 8px 26px rgba(232,166,92,0.5), 0 0 0 12px rgba(232,166,92,0); }
}
@keyframes notifBellRing {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-12deg); }
  20%, 40% { transform: rotate(12deg); }
  50% { transform: rotate(0); }
}

.notif-bubble-panel {
  background-color: rgba(20, 22, 31, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  bottom: 96px;
  box-shadow: 4px 4px 24px rgba(0,0,0,0.4);
  position: fixed;
  right: 26px;
  transition: bottom 200ms ease;
  width: 300px;
  z-index: 550;
}
.notif-bubble-panel-header {
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  color: var(--gray-245);
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  padding: 12px 14px;
}
.notif-bubble-close { background: none; border: none; color: rgba(var(--text-rgb), 0.5); cursor: pointer; padding: 4px; }
.notif-bubble-close:hover { color: var(--red); }
.notif-bubble-delete { background: none; border: none; color: rgba(var(--text-rgb), 0.5); cursor: pointer; padding: 4px; }
.notif-bubble-delete:hover { color: var(--red); }
.notif-bubble-panel-body { align-items: center; color: rgba(var(--text-rgb), 0.85); display: flex; font-size: 0.9em; gap: 10px; justify-content: space-between; padding: 14px; }
.notif-bubble-panel-body-text { flex: 1; }

@media (max-width: 700px) {
  .notif-bubble { bottom: 90px; }
  .notif-bubble-panel { bottom: 160px; right: 12px; width: calc(100vw - 24px); }
}

/* ===================== EFFET DE MISE À JOUR ("PUSH") DES CARTES DASHBOARD ===================== */

@keyframes dashCardPulse {
  0% { box-shadow: 0 0 0 0 rgba(232,166,92,0.5); }
  100% { box-shadow: 0 0 0 14px rgba(232,166,92,0); }
}
.dash-card-pulse { animation: dashCardPulse 900ms ease-out; }

/* ===================== PAGE TEST — ONGLETS SECONDAIRES + IFRAME ===================== */

.secondary-tab-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.secondary-tab-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: rgba(var(--text-rgb), 0.65);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 10px 16px;
}
.secondary-tab-btn.active { background-color: var(--accent-amber-dim); border-color: var(--accent-amber); color: var(--accent-amber); }
.secondary-tab-panel { position: relative; }
.secondary-tab-panel iframe { border: 1px solid var(--glass-border); border-radius: 10px; width: 100%; }
.iframe-reload-btn {
  background-color: rgba(20, 22, 31, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--accent-amber);
  cursor: pointer;
  padding: 8px 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
}
.iframe-reload-btn:hover { filter: brightness(1.15); }

/* ===================== MODALE IFRAME (petit / moyen / grand / plein écran) ===================== */

.modal-overlay {
  align-items: center;
  background-color: rgba(20, 22, 31, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 400;
}
.modal-box {
  background-color: var(--gray-30);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 4px 4px 30px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
}
.modal-box iframe { border: none; display: block; height: 100%; width: 100%; }
.modal-close-btn {
  background-color: rgba(20, 22, 31, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--gray-245);
  cursor: pointer;
  height: 34px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  z-index: 10;
}
.modal-close-btn:hover { color: var(--red); }

.modal-size-small { width: 480px; height: 60vh; max-width: 92vw; }
.modal-size-medium { width: 900px; height: 78vh; max-width: 94vw; }
.modal-size-large { width: 1300px; height: 88vh; max-width: 96vw; }
.modal-size-fullscreen { width: 100vw; height: 100vh; border-radius: 0; }

/* ===================== SÉLECTEUR D'ICÔNES ===================== */

.icon-picker-wrapper { position: relative; }
.icon-picker-input { padding-right: 44px !important; }
.icon-picker-preview {
  color: var(--accent-amber);
  font-size: 1.1em;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.icon-picker-results {
  background-color: rgba(20, 22, 31, 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.4);
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 30;
}
.icon-picker-item {
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(var(--text-rgb), 0.75);
  cursor: pointer;
  display: flex;
  font-size: 1.1em;
  height: 36px;
  justify-content: center;
}
.icon-picker-item:hover { background: var(--accent-amber-dim); border-color: var(--accent-amber); color: var(--accent-amber); }
.icon-picker-empty { color: rgba(var(--text-rgb), 0.4); font-size: 0.85em; grid-column: 1 / -1; margin: 0; padding: 6px; }

/* ===================== WIDGETS DÉROULANTS D'ICÔNES ===================== */

.icon-widget-wrapper { position: relative; }
.icon-widget-trigger { background: none; border: none; color: rgba(var(--text-rgb), 0.65); cursor: pointer; font-size: 1.05em; padding: 0; }
.icon-widget-trigger:hover { color: var(--accent-amber); }
.icon-widget-dropdown {
  background-color: rgba(20, 22, 31, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 4px 4px 24px rgba(0,0,0,0.4);
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: 300px;
  z-index: 60;
}
.icon-widget-dropdown-header { border-bottom: 1px solid var(--glass-border); color: var(--gray-245); font-weight: 600; padding: 12px 14px; }
.icon-widget-dropdown-body { max-height: 320px; overflow-y: auto; padding: 14px; }
.icon-widget-dropdown-footer { border-top: 1px solid var(--glass-border); color: var(--accent-amber); display: block; font-size: 0.85em; font-weight: 600; padding: 10px 14px; text-align: center; }
.icon-widget-dropdown-footer:hover { text-decoration: none; background: rgba(255,255,255,0.03); }

@media (max-width: 700px) {
  .icon-widget-dropdown { position: fixed; right: 12px; left: 12px; width: auto; top: 64px; }
}

/* ===================== WIDGET POST-IT (grille type postit-board) ===================== */

.icon-widget-dropdown-postits, .icon-widget-dropdown-annuaire { width: 380px; }
.widget-postit-board {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  max-height: 330px; /* environ 3 lignes de 2 colonnes avant ascenseur */
  overflow-y: auto;
  padding-right: 4px;
}
.widget-postit-note { min-height: 90px; padding: 10px; }
.widget-postit-note .postit-note-text { font-size: 0.82em; }

/* ===================== WIDGET RAPPELS / MINUTEURS (avec suppression) ===================== */

.widget-reminder-row {
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--accent-amber);
  display: flex;
  gap: 10px;
  padding: 8px 0;
  transition: opacity 200ms;
}
.widget-reminder-row:last-child { border-bottom: none; }
.widget-reminder-row-main { display: flex; flex-direction: column; flex: 1; gap: 1px; min-width: 0; }
.widget-reminder-row-title { color: var(--gray-245); font-size: 0.88em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-reminder-row-meta { color: rgba(var(--text-rgb), 0.5); font-size: 0.76em; }
.widget-reminder-delete { background: none; border: none; color: rgba(var(--text-rgb), 0.35); cursor: pointer; flex-shrink: 0; padding: 4px; }
.widget-reminder-delete:hover { color: var(--red); }

/* ===================== WIDGET ANNUAIRE (recherche live) ===================== */

.icon-widget-search {
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  gap: 8px;
  padding: 10px 14px;
}
.icon-widget-search i { color: rgba(var(--text-rgb), 0.4); }
.icon-widget-search-input { background: none; border: none; color: var(--gray-245); font-size: 0.88em; padding: 4px 0; }
.icon-widget-search-input:focus { background: none; }

.contact-card { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 10px 0; }
.contact-card:last-child { border-bottom: none; }
.contact-card-title { color: var(--gray-245); display: block; font-size: 0.9em; font-weight: 700; }
.contact-card-sub { color: rgba(var(--text-rgb), 0.5); display: block; font-size: 0.76em; margin-top: 1px; }
.contact-card-body { margin-top: 4px; }
.contact-card-num { color: var(--accent-amber); display: block; font-size: 0.82em; margin-top: 2px; }
.contact-card-num i { margin-right: 5px; width: 12px; }
.contact-card-extra { color: rgba(var(--text-rgb), 0.55); font-size: 0.78em; margin-top: 2px; }
.contact-card-note { color: rgba(var(--text-rgb), 0.4); font-size: 0.75em; font-style: italic; margin-top: 3px; }

/* ===================== WIDGET MON PROFIL ===================== */

.widget-profile-greeting { color: var(--gray-245); font-size: 0.98em; margin: 0 0 14px; }
.widget-profile-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.widget-profile-stat {
  background: var(--glass-bg);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.widget-profile-stat i { color: var(--accent-amber); font-size: 1.1em; }
.widget-profile-stat span { color: var(--gray-245); display: block; font-family: var(--font-display); font-size: 1.3em; font-weight: 700; margin: 4px 0 2px; }
.widget-profile-stat small { color: rgba(var(--text-rgb), 0.5); font-size: 0.72em; }

/* ===================== TABLEAU DE BORD ADMIN ===================== */

.admin-stat-card { color: inherit; display: block; text-decoration: none; transition: transform 150ms, border-color 150ms; }
.admin-stat-card:hover { text-decoration: none; transform: translateY(-2px); border-color: rgba(232,166,92,0.4); }
.admin-stat-number { color: var(--accent-amber); font-family: var(--font-display); font-size: 2em; font-weight: 700; margin: 0; }
.admin-stat-sub { margin: 2px 0 0; }

.admin-config-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.admin-config-card { background-color: var(--surface, var(--glass-bg)); border: 1px solid var(--glass-border); border-radius: 14px; overflow: hidden; }

/* Sous-grid pour deux cartes .admin-config-card explicitement côte à côte
   (demande explicite : "Actualités" et "Documents PDF" sur admin/index.php,
   qui prenaient chacune une ligne pleine largeur alors que leur contenu
   tient largement dans une demi-largeur en desktop). Occupe lui-même toute
   la largeur de .admin-config-grid (grid-column:1/-1) puis répartit ses
   propres enfants en 1fr 1fr, indépendamment du nombre de colonnes que
   l'auto-fit du parent aurait choisi. */
.admin-config-row-2col { display: grid; gap: 18px; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
  .admin-config-row-2col { grid-template-columns: 1fr; }
}
.admin-config-card-header {
  align-items: center;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--glass-border);
  color: var(--gray-245);
  display: flex;
  font-family: var(--font-display);
  font-weight: 700;
  gap: 10px;
  padding: 14px 16px;
}
.admin-config-card-header i { color: var(--accent-amber); }
.admin-config-edit { color: var(--accent-amber); font-size: 0.78em; font-weight: 600; margin-left: auto; }
.admin-config-list { list-style: none; margin: 0; padding: 12px 16px; }
.admin-config-list li { align-items: center; display: flex; font-size: 0.86em; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.admin-config-list li:last-child { border-bottom: none; }
.admin-config-list li span:first-child { color: rgba(var(--text-rgb), 0.5); }
.admin-config-list li strong { color: var(--gray-245); font-weight: 600; text-align: right; }
.admin-config-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================== SIDEBAR ADMIN — GROUPES DÉROULANTS ===================== */

.admin-sidebar-group-toggle {
  align-items: center;
  background: none;
  border: none;
  color: rgba(var(--text-rgb), 0.7);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 600;
  gap: 10px;
  padding: 11px 22px;
  width: 100%;
}
.admin-sidebar-group-toggle:hover, .admin-sidebar-group-toggle.open { color: var(--accent-amber); }
.admin-sidebar-group-chevron { font-size: 0.75em; margin-left: auto; transition: transform 150ms; }
.admin-sidebar-group-toggle.open .admin-sidebar-group-chevron { transform: rotate(180deg); }
.admin-sidebar-group-items { display: none; flex-direction: column; }
.admin-sidebar-group-items.open { display: flex; }
.admin-sidebar-group-items a { font-size: 0.86em; padding: 9px 22px 9px 46px; }

/* ===================== LECTEUR MUSICAL — BARRE FLOTTANTE ===================== */

.music-player-bar {
  align-items: center;
  background-color: rgba(20, 22, 31, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--glass-border);
  bottom: 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
  display: flex;
  gap: 14px;
  left: 0;
  padding: 10px 20px;
  position: fixed;
  width: 100%;
  z-index: 500;
}
#music-player-toggle, #music-player-close {
  background: none;
  border: none;
  color: var(--accent-amber);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.2em;
  padding: 6px;
}
#music-player-close { color: rgba(var(--text-rgb), 0.4); font-size: 1em; }
#music-player-close:hover { color: var(--red); }
.music-player-bar-info { display: flex; flex-direction: column; min-width: 120px; overflow: hidden; }
.music-player-bar-info strong { color: var(--gray-245); font-size: 0.88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-player-bar-info small { color: rgba(var(--text-rgb), 0.5); font-size: 0.75em; }
.music-player-seek { flex: 1; accent-color: var(--accent-amber); }
.music-player-time { color: rgba(var(--text-rgb), 0.5); font-family: var(--font-mono); font-size: 0.78em; min-width: 40px; }

@media (max-width: 700px) {
  .music-player-bar-info { display: none; }
}

/* ===================== WIDGET MUSIQUE (liste déroulante) ===================== */

.widget-music-list { display: flex; flex-direction: column; gap: 4px; }
.widget-music-track {
  align-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: rgba(var(--text-rgb), 0.8);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 8px;
  text-align: left;
  width: 100%;
}
.widget-music-track:hover { background: rgba(255,255,255,0.05); color: var(--accent-amber); }
.widget-music-track i { color: var(--accent-amber); flex-shrink: 0; }
.widget-music-track-info { display: flex; flex-direction: column; min-width: 0; }
.widget-music-track-info strong { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-music-track-info small { color: rgba(var(--text-rgb), 0.45); font-size: 0.72em; }

/* ===================== INFOS+ (SCR / PASTILLE / DIALYSE) ===================== */
/* Reprise fidèle du CSS du site statique d'origine. */

.scr-motif-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent-amber);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.scr-motif-toggle {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  width: 100%;
}
.scr-motif-toggle-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.scr-motif-title { color: var(--gray-245); font-family: var(--font-display); font-size: 1.05em; font-weight: 700; }
.scr-motif-sub { color: rgba(var(--text-rgb),0.45); font-size: 0.78em; font-style: italic; margin-top: 2px; }
.scr-motif-note {
  color: rgba(var(--text-rgb),0.5);
  flex-shrink: 0;
  font-size: 0.78em;
  font-style: italic;
  max-width: 240px;
  text-align: right;
}
.scr-motif-arrow { color: rgba(var(--text-rgb),0.35); flex-shrink: 0; transition: transform 200ms; }
.scr-motif-toggle.open .scr-motif-arrow { transform: rotate(180deg); }

.scr-motif-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease;
}
.scr-motif-body.open { grid-template-rows: 1fr; }
.scr-motif-body-inner { overflow: hidden; }
.scr-motif-body.open .scr-motif-body-inner { border-top: 1px solid var(--glass-border); padding: 14px 16px 18px; }

.scr-motif-row {
  align-items: baseline;
  display: grid;
  gap: 4px 14px;
  grid-template-columns: 160px 1fr;
  padding: 7px 0;
}
.scr-motif-row + .scr-motif-row { border-top: 1px solid rgba(var(--surface-rgb),0.06); }
.scr-motif-label { color: rgba(var(--text-rgb),0.4); font-size: 0.72em; letter-spacing: 0.03em; text-align: right; text-transform: uppercase; }
.scr-motif-value { color: var(--gray-245); font-size: 0.85em; }
.scr-motif-value-fill { color: var(--accent-amber); font-weight: 600; }
.scr-motif-value-outline { color: rgba(var(--text-rgb),0.75); }
.scr-motif-lib { color: rgba(var(--text-rgb),0.4); font-size: 0.78em; grid-column: 2; }
.scr-motif-row-notes .scr-motif-notes p { color: rgba(var(--text-rgb),0.75); font-size: 0.85em; margin: 0 0 4px; }
.scr-motif-row-notes .scr-motif-notes p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .scr-motif-row { grid-template-columns: 1fr; }
  .scr-motif-label { text-align: left; }
  .scr-motif-lib { grid-column: 1; }
}

.ops-search-input {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--gray-245);
  font-size: 0.95em;
  padding: 12px 16px;
  width: 100%;
}
.scr-search-count { color: rgba(var(--text-rgb),0.4); font-size: 0.78em; margin: 10px 0; }

.infosplus-logo { color: var(--gray-245); font-family: var(--font-display); font-size: 1.3em; font-weight: 800; margin: 0; }
.infosplus-tabs { display: flex; flex-shrink: 0; gap: 24px; margin: 10px 0 12px; }
.infosplus-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(var(--text-rgb),0.5);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.04em;
  padding: 8px 0;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
}
.infosplus-tab.active { border-bottom-color: var(--accent-amber); color: var(--accent-amber); }
.infosplus-panel-title { color: var(--gray-245); font-family: var(--font-display); font-size: 1.1em; margin: 0 0 20px; }

/* Timeline PASTILLE */
.infosplus-timeline { border-left: 2px solid var(--glass-border); margin-left: 8px; padding-left: 24px; margin-top: 20px; }
.infosplus-timeline-item { align-items: center; display: flex; gap: 14px; margin-bottom: 22px; position: relative; }
.infosplus-timeline-dot {
  background-color: rgba(var(--text-rgb),0.25);
  border-radius: 50%;
  height: 8px;
  left: -31px;
  position: absolute;
  width: 8px;
}
.infosplus-pastille-icon {
  align-items: center;
  border-width: 2px;
  border-style: solid;
  display: flex;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.9em;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.infosplus-pastille-circle { border-radius: 50%; }
.infosplus-pastille-square { border-radius: 4px; }
.infosplus-timeline-label { color: rgba(var(--text-rgb),0.85); font-size: 0.9em; }

/* DIALYSE */
.infosplus-richtext-display { color: rgba(var(--text-rgb),0.8); font-size: 0.88em; line-height: 1.7; }
.infosplus-richtext-display p { margin: 0 0 6px; }
.infosplus-dialyse-contacts { margin: 18px 0; }
.infosplus-dialyse-row {
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
}
.infosplus-dialyse-ville { color: var(--gray-245); font-weight: 600; }
.infosplus-dialyse-tel {
  background-color: rgba(var(--surface-rgb),0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 6px 12px;
}
.infosplus-dialyse-tel-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ============================================================================
   PANNEAU ACCUEIL — composants d'admin manquants
   Ces pages (Contenu > Panneau Accueil) utilisaient des classes qui n'existent
   que dans assets/dashboard.css (chargé uniquement par le tableau de bord
   public, jamais par l'admin) : elles s'affichaient donc sans mise en forme.
   Ajoutées ici à l'identique (ou adaptées pour les cas propres à l'admin),
   sans toucher à une seule règle existante ci-dessus.
   ============================================================================ */

.admin-panel-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }

/* admin/ctrlc-texts.php -- formulaire "Nouvelle phrase à copier" : champ
   texte, choix du site et bouton alignés sur une même ligne, le champ texte
   prenant toute la largeur restante (select et bouton gardent leur largeur
   naturelle). Repli en colonne wrap (hérité de .admin-panel-toolbar)
   si la largeur manque. */
.ctrlctexts-add-form input[name="text"] { flex: 1 1 220px; min-width: 0; }
/* `width: 100%` vient de la règle générique input/select (ligne ~126
   ci-dessus) -- avec flex-basis: auto (le "auto" du raccourci flex
   ci-dessous), c'est justement cette largeur qui sert de base au calcul
   flex, donc select/bouton s'étalaient quand même sur toute la ligne sans
   ce `width: auto` explicite pour la neutraliser ici. */
.ctrlctexts-add-form select[name="site"] { flex: 0 0 auto; width: auto; }
.ctrlctexts-add-form button[type="submit"] { flex: 0 0 auto; width: auto; white-space: nowrap; }

.admin-table-wrap { backdrop-filter: blur(3px); background-color: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; overflow-x: auto; }
.admin-table-wrap .admin-table { margin-bottom: 0; }
.admin-table-wrap .admin-table th, .admin-table-wrap .admin-table td { white-space: nowrap; }

.admin-row-btn {
  align-items: center;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--gray-245);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  width: 36px;
  justify-content: center;
  text-decoration: none;
  transition: background-color 150ms;
}
.admin-row-btn:hover { background-color: rgba(var(--surface-rgb),0.2); text-decoration: none; }
.admin-row-btn.danger:hover { background-color: rgba(239,83,80,0.3); }
.admin-row-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

.admin-cards-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.admin-card { backdrop-filter: blur(3px); background-color: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; }
.admin-card-body { padding: 16px; }
.admin-card-title { color: var(--gray-245); display: block; font-size: 1.05em; }
.admin-card-meta { color: rgba(var(--text-rgb),0.5); display: block; font-size: 0.75em; margin-top: 4px; }
.admin-card-meta a { font-weight: 600; }
.admin-card-text { color: rgba(var(--text-rgb),0.7); font-size: 0.85em; margin-top: 8px; max-height: 4em; overflow: hidden; }
.admin-card-text table { border-collapse: collapse; width: 100%; }
.admin-card-text table td { border: 1px solid var(--glass-border); padding: 4px 8px; }
.admin-card-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Carrousel SCR / Bloc-note (admin/scrcarousel.php) */
.admin-scrcarousel-slide { background-color: rgba(var(--surface-rgb),0.03); border: 1px solid var(--glass-border); border-radius: 12px; margin-bottom: 20px; padding: 16px; }
.admin-scrcarousel-slide-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 14px; }
.admin-scrcarousel-slide-title { background-color: rgba(var(--surface-rgb),0.05); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--gray-245); font-family: var(--font-display); font-size: 1.1em; font-weight: 700; padding: 8px 12px; width: 100%; }

/* SCR : A80 CSA — vue cartes (admin/a80-codes.php) */
.admin-taxi-tariff-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }
.admin-taxi-tariff-card { background-color: rgba(var(--surface-rgb),0.04); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; position: relative; }
.admin-taxi-tariff-letter { color: var(--accent-amber); font-family: var(--font-display); font-size: 1.4em; font-weight: 800; display: block; margin-bottom: 10px; }

/* Bloc-note : CTRL+C — liste des phrases (admin/ctrlc-texts.php) */
.reminder-list-item { align-items: center; background-color: rgba(var(--surface-rgb),0.04); border: 1px solid var(--glass-border); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; padding: 10px 12px; }
.reminder-list-icon { color: var(--accent-amber); flex-shrink: 0; }
.reminder-list-actions { align-items: center; display: flex; flex-shrink: 0; gap: 4px; }
.reminder-list-actions button {
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(var(--text-rgb),0.5);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  width: 36px;
  justify-content: center;
}
.reminder-list-actions button:hover { background-color: rgba(var(--surface-rgb),0.15); color: var(--accent-amber); }
.reminder-list-actions .reminder-delete-btn:hover { background-color: rgba(239,83,80,0.15); color: #e35b5b; }

/* Bandeau défilant — éditeurs de phrases (admin/widget-marquee.php) */
.admin-headermarquee-phrase { margin-bottom: 22px; }
.admin-headermarquee-phrase > label { display: block; margin-bottom: 8px; }
.admin-headermarquee-phrase > label span { color: rgba(var(--text-rgb),0.5); font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.05em; text-transform: uppercase; }

/* Formulaires 3 cartes — lignes de bouton (admin/home-panel-edit.php) */
.homepanel-buttons-list { display: flex; flex-direction: column; gap: 10px; }
.homepanel-button-row {
  align-items: center;
  background-color: rgba(var(--surface-rgb),0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1.2fr 0.85fr auto auto;
  padding: 10px;
}
.homepanel-button-row input, .homepanel-button-row select {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--gray-245);
  font-family: var(--font-body);
  font-size: 0.85em;
  outline: none;
  padding: 9px 12px;
  transition: border-color 200ms, background-color 200ms;
  width: 100%;
}
.homepanel-button-row input:focus, .homepanel-button-row select:focus { background-color: rgba(232,166,92,0.08); border-color: var(--accent-amber); }
.homepanel-button-row label { align-items: center; display: flex; flex-wrap: nowrap; font-size: 0.85em; gap: 6px; white-space: nowrap; }
.homepanel-btn-iframe-opts { grid-column: 1 / -1; }
.homepanel-btn-iframe-opts { align-items: center; border-top: 1px dashed var(--glass-border); display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.homepanel-btn-iframe-opts select { width: auto; }
.homepanel-btn-iframe-opts input[type="number"] { width: 70px; }
.homepanel-btn-visibility select { width: auto; }

/* ============================================================================
   MOBILE — sidebar en tiroir, cibles tactiles agrandies, grilles resserrées
   Priorité : navigation (le panneau admin était inutilisable sous ~880px, la
   barre latérale fixe de 220px ne laissait presque plus de place au contenu),
   puis taille des boutons (icônes d'action trop petites au doigt), puis
   resserrement des grilles/listes des nouvelles pages Panneau Accueil.
   ============================================================================ */
.admin-sidebar-backdrop { display: none; }
.admin-nav-toggle { display: none; }
@media (max-width: 880px) {
  /* Barre latérale : passe d'une colonne fixe à un tiroir plein écran,
     ouvert/fermé par le bouton ☰ ajouté en haut de .admin-content. */
  .admin-layout { display: block; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, 300px);
    z-index: 40;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 8px 0 24px rgba(0,0,0,0.35);
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 39;
  }
  .admin-sidebar-backdrop.open { display: block; }
  .admin-content { padding: 18px 16px 32px; }
  .admin-nav-toggle {
    align-items: center;
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--gray-245);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    font-weight: 600;
    height: 44px;
    padding: 0 16px;
    margin-bottom: 18px;
  }
  /* Cibles tactiles : la recommandation courante est ~44px minimum. */
  .admin-row-btn, .reminder-list-actions button, .btn-small { min-height: 40px; }
  .admin-row-btn, .reminder-list-actions button { height: 40px; width: 40px; }
  .admin-view-btn { height: 44px; width: 44px; }
  .btn-small { padding: 10px 16px; }
  .btn, button[type="submit"], .auth-button { min-height: 46px; }

  /* Grilles/listes des nouvelles pages Panneau Accueil : un seul niveau de
     lecture par ligne plutôt que plusieurs colonnes étroites. */
  .admin-taxi-tariff-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-cards-grid { grid-template-columns: 1fr; }
  .homepanel-button-row { grid-template-columns: 1fr; }
  .admin-scrcarousel-slide-head { flex-direction: column; align-items: stretch; }
  .admin-scrcarousel-slide-head .admin-row-actions { justify-content: flex-end; }
  .reminder-list-item { flex-wrap: nowrap; }
  .reminder-list-item form { flex-basis: 100%; }
  /* Formulaires 2/3/4 colonnes des pages *-edit.php, menus.php, icon-menu.php,
     infos-plus.php, page-cards.php, page-tabs.php, settings.php, etc. */
  .dirform-row, .dirform-row-3, .dirform-row-4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .admin-taxi-tariff-grid { grid-template-columns: 1fr; }
  .dash-grid, .admin-config-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   RECHERCHE INTERNE (search-results.php) — reprises telles quelles depuis
   dashboard.css / le site statique (assets/style.css n'est pas rechargé avec
   dashboard.css sur les pages publiques, voir templates/header.php).
   ============================================================================ */
.searchresults-title { color: var(--gray-245); font-family: var(--font-display); font-size: 1.4em; margin: 0 0 4px; }
.searchresults-title i { color: var(--accent-amber); margin-right: 8px; }
.searchresults-count { color: rgba(var(--text-rgb),0.5); font-size: 0.85em; margin: 0 0 24px; }
.searchresult-block {
  align-items: center;
  background-color: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  padding: 14px 18px;
  text-align: left;
  text-decoration: none;
  transition: background-color 150ms, border-color 150ms;
  width: 100%;
}
.searchresult-block:hover { background-color: var(--accent-amber-dim); border-color: rgba(232,166,92,0.4); }
.searchresult-icon {
  align-items: center;
  background-color: var(--accent-amber-dim);
  border-radius: 10px;
  color: var(--accent-amber);
  display: flex;
  flex-shrink: 0;
  font-size: 1.1em;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.searchresult-body { display: flex; flex-direction: column; flex: 1; gap: 3px; min-width: 0; }
.searchresult-category { color: var(--accent-amber); font-family: var(--font-mono); font-size: 0.66em; letter-spacing: 0.05em; text-transform: uppercase; }
.searchresult-title { color: var(--gray-245); font-weight: 600; }
.searchresult-snippet { color: rgba(var(--text-rgb),0.55); font-size: 0.82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchresult-arrow { color: rgba(var(--text-rgb),0.3); flex-shrink: 0; }

/* Terme recherché surligné dans les titres/aperçus (searchHighlight() côté PHP). */
mark { background-color: rgba(232,166,92,0.35); border-radius: 3px; color: inherit; padding: 0 2px; }

/* Bref pulse pour indiquer où atterrit un clic sur un résultat de
   recherche (ex. actu-news.php#news-xxx) -- demande explicite : "la souris
   va pointer ou afficher en surbrillance le résultat". Même animation que
   assets/dashboard.css (#dash-search-overlay), dupliquée ici pour les
   pages qui utilisent cette feuille de styles (templates/header.php). */
@keyframes searchHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,166,92,0); }
  15%, 55% { box-shadow: 0 0 0 6px rgba(232,166,92,0.45); }
  35% { box-shadow: 0 0 0 3px rgba(232,166,92,0.25); }
}
.search-highlight-flash {
  animation: searchHighlightPulse 1.6s ease-in-out 2;
  border-radius: 12px;
}

/* Barre de filtre par catégorie -- au-delà du prototype, qui ne filtrait pas
   les résultats. Réutilise .scr-carousel-tab (même langage visuel que les
   onglets du carrousel SCR / Bloc-note dans dashboard.css) plutôt qu'un
   nouveau style de puce -- ces deux classes de base n'existaient pas encore
   ici (assets/style.css), le carrousel n'étant affiché que sur dashboard.php. */
.scr-carousel-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.scr-carousel-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  color: rgba(var(--text-rgb),0.55);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.66em;
  letter-spacing: 0.03em;
  line-height: 1.3;
  padding: 6px 11px;
  text-align: center;
  transition: background-color 150ms, color 150ms;
}
.scr-carousel-tab:hover { color: var(--gray-245); }
.scr-carousel-tab.active { background-color: var(--accent-amber-dim); color: var(--accent-amber); }
.searchresults-filterbar { flex-wrap: wrap; }
.searchfilter-count { color: rgba(var(--text-rgb),0.45); font-size: 0.85em; margin-left: 4px; }
.scr-carousel-tab.active .searchfilter-count { color: var(--accent-amber); }

/* INFOS+ / DIALYSE -- au-delà du site statique : dès qu'un contact a 2
   numéros ou plus, ils s'affichent empilés (l'un en dessous de l'autre) au
   lieu de côte à côte, pour rester lisibles même à 3 numéros. Classes
   modificatrices additives posées par renderInfosDialyseContactsHtml()
   (includes/functions.php), utilisées par infos-plus.php et dashboard.php. */
.infosplus-dialyse-row--stacked { align-items: flex-start; }
.infosplus-dialyse-tel-group--stacked { align-items: flex-end; flex-direction: column; justify-content: flex-start; }

/* Recherche d'icônes FontAwesome (assets/icon-picker.js) -- petite liste de
   suggestions sous tout champ <input name="icon"> de l'admin. */
.icon-picker-wrap { position: relative; }
.icon-picker-list {
  background-color: rgba(20,20,20,0.97);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.35);
  left: 0;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
}
.icon-picker-item {
  align-items: center;
  background: none;
  border: none;
  color: var(--gray-245);
  cursor: pointer;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.82em;
  gap: 10px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}
.icon-picker-item i { color: var(--accent-amber); flex-shrink: 0; width: 1.1em; text-align: center; }
.icon-picker-item:hover { background-color: rgba(232,166,92,0.15); }

/* ===================== BOUTON RETOUR EN HAUT DE PAGE (admin/) =====================
   Repris à l'identique de dashboard.php / assets/dashboard.css -- manquait
   dans /admin/, demande explicite. Voir admin/_footer.php pour le markup et
   le script (page longue -> bouton utile ici aussi). */
#scroll-top-btn {
  align-items: center;
  backdrop-filter: blur(10px);
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  bottom: 26px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  color: var(--accent-amber);
  cursor: pointer;
  display: flex;
  font-size: 1.1em;
  height: 48px;
  justify-content: center;
  position: fixed;
  right: 26px;
  transition: background-color 150ms, border-color 150ms, opacity 200ms, transform 200ms;
  width: 48px;
  z-index: 25;
}
#scroll-top-btn:hover {
  background-color: var(--accent-amber-dim);
  border-color: rgba(232,166,92,0.4);
  transform: translateY(-3px);
}

/* ===================== SOMMAIRE DE SECTIONS (admin/menus.php) ===================== */

.admin-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 24px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--gray-30);
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--glass-border);
}
.admin-quicknav a.active {
  background-color: var(--accent-amber-dim);
  border-color: var(--accent-amber);
  color: var(--accent-amber);
}

/* Onglets des longues pages d'admin (ex. admin/menus.php) : chaque section
   est un panneau masqué par défaut (évite le flash-de-tout-affiché avant
   que le JS ne détermine l'onglet actif depuis l'ancre #... de l'URL), un
   seul visible à la fois -- voir .admin-quicknav ci-dessus pour la barre
   d'onglets elle-même. */
.admin-tab-panel { display: none; }
.admin-tab-panel.active-panel { display: block; }

/* ===================== MINI ANNUAIRE GIE (admin/widget-gie-annuaire.php) ===================== */

/* Choix demandé explicitement entre la vue "liste" (tout affiché, comportement
   historique -- ne rien changer) et la vue "cartes" (chaque fiche partenaire
   repliée par défaut, ne montrant que son en-tête -- nom/département/actions
   -- un clic sur le chevron l'ouvre pour lire/modifier ses contacts et
   villes/secteurs). Un seul et même balisage sert aux deux vues (pas de
   duplication de fiche) : c'est la classe .gpa-cards-mode sur le conteneur
   #gpa-partners-list qui active le repliage -- voir le <script> de la page. */
.gpa-card-toggle { display: none; }
#gpa-partners-list.gpa-cards-mode .gpa-card-toggle { display: inline-flex; }
#gpa-partners-list.gpa-cards-mode .gpa-card-body { display: none; }
#gpa-partners-list.gpa-cards-mode .gpa-partner-card.gpa-expanded .gpa-card-body { display: block; }
/* Chevron : même principe que .admin-sidebar-group-chevron (rotation 180deg
   à l'ouverture) pour rester cohérent avec le reste de l'admin. */
.gpa-card-toggle i { transition: transform 150ms; }
.gpa-card-toggle.open i { transform: rotate(180deg); }