/* =====================================================================
   KONELI — Portail d'accès sécurisé
   Feuille de style unique, fidèle à la maquette fournie.
   ===================================================================== */

:root {
  --cream:         #fbf2e3;
  --cream-soft:    #fdf7ee;
  --cream-light:   #fefbf8;
  --card:          #ffffff;
  --green-water:   #2da59a;
  --navy:          #21243b;
  --navy-soft:     #3a3d57;
  --orange-blue:   #3f2a36;
  --orange:        #f2a93b;
  --orange-dark:   #e8923a;
  --orange-soft:   #fdeacb;
  --text-muted:    #7c7a8a;
  --border:        #efe6d8;
  --border-soft:   #f1ece0;
  --green:         #2fbf71;
  --lavender-bg:   #ece7fb;
  --lavender-text: #6a4fd6;
  --mint-bg:       #dff3e6;
  --mint-text:     #1f8f52;
  --amber-bg:      #fdecc8;
  --amber-text:    #b4741a;
  --blue-bg:       #dceafd;
  --blue-text:     #2f6fd0;
  --rose-bg:       #fbe3e6;
  --rose-text:     #c94f63;
  --gray-bg:       #e8e8ee;
  --gray-text:     #565873;
  --text:          #21243b;
  /* Toujours sombre, y compris en mode sombre : pour du texte posé sur un
     fond pastel (orange-soft, etc.) qui, lui, ne change pas entre les deux
     thèmes — voir .user-row.selected ci-dessous. */
  --muted-on-light: #6f6d82;
  /* Idem, mais pour du texte qui doit rester bien plus foncé (titre, statut)
     posé sur ces mêmes fonds pastel fixes — voir .service-card.has-color. */
  --ink-on-pastel: #21243b;
  /* Pendants clairs des deux variables ci-dessus, pour le cas où l'admin
     choisit une couleur de service sombre (le fond de carte est alors
     exactement cette couleur, plus de fond pastel automatique — voir
     includes/service_options.php) : le texte doit alors passer en clair.
     Posées en variable CSS ici pour cohérence, mais la valeur réellement
     utilisée est calculée par service et posée en style inline
     (--card-ink / --card-muted), ces deux-ci ne servent que de repli. */
  --ink-on-dark-pastel: #ffffff;
  --muted-on-dark-pastel: #c9c7da;
  /* Toujours cette même teinte foncée, y compris en mode sombre : le fond
     de la sidebar admin (.sidebar-admin) doit rester sombre dans les deux
     thèmes. --navy ne convient pas ici : il devient teal en mode sombre
     (voir plus bas), ce qui est voulu pour les boutons/accents mais pas
     pour tout le fond de la sidebar. */
  --sidebar-admin-bg: #21243b;
  /* Texte de cette même sidebar admin : comme son fond est désormais fixe
     (toujours sombre), son texte doit lui aussi rester fixe (toujours
     clair) plutôt que de suivre var(--cream-soft)/var(--text-muted), qui
     s'assombrissent en mode sombre et deviendraient illisibles ici. */
  --sidebar-admin-text: #fdf7ee;
  --sidebar-admin-text-muted: #9b98ae;
  /* Toujours blanc, y compris en mode sombre : l'encadré du statut ("Actif")
     sur les cartes services doit se détacher nettement du fond de la carte
     (pastel ou sombre selon le thème/la couleur du service), pas s'y fondre. */
  --status-chip-bg: #ffffff;
  --status-chip-border: rgba(33, 36, 59, 0.08);
  /* Palette d'avatars (page Profil) : volontairement plus vive et plus
     fournie que la palette pastel des services, pour rester distincte —
     fond saturé fixe (même rendu clair/sombre) + texte blanc, toujours
     lisible (voir sql/migration_006_avatar_color.sql, users.avatar_color). */
  --avatar-indigo:    #5b5fef;
  --avatar-violet:    #8b5cf6;
  --avatar-rose:      #ec4899;
  --avatar-rouge:     #ef4444;
  --avatar-orange:    #d2610a;
  --avatar-ambre:     #b8690a;
  --avatar-vert:      #0e9764;
  --avatar-turquoise: #0891b2;
  --radius-lg:     22px;
  --radius-md:     16px;
  --radius-sm:     10px;
  --shadow-card:   0 10px 30px -18px rgba(33, 36, 59, 0.25);
  --shadow-soft:   0 4px 14px -8px rgba(33, 36, 59, 0.18);
  font-size: 16px;
}

/* --------------------------------------------------------------- */
/* Mode sombre — activé via <html data-theme="sombre">, posé par     */
/* includes/auth.php selon la préférence enregistrée pour le user   */
/* connecté (page Paramètres). La page de connexion n'a pas cet     */
/* attribut : elle reste toujours claire.                           */
/* --------------------------------------------------------------- */
html[data-theme="sombre"] {
  --cream:         #15161f;
  --cream-soft:    #242637;
  --cream-light:   #242637;
  --card:          #1c1e2c;
  --text:          #ece9f5;
  --green-water:   #21243b;
  --navy:          #2da59a;
  --navy-soft:     #b3b0c7;
  --text-muted:    #9b98ae;
  --border:        #5c6088;
  --border-soft:   #454a68;
}
html[data-theme="sombre"] .sidebar-mascot {
  background: linear-gradient(160deg, #262234, #2c2440);
}
html[data-theme="sombre"] .switch .track {
  background: #363954;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--cream-light);
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------- */
/* Boutons & champs génériques                                     */
/* --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #2da59a;  /*############################*/
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--navy);
  color: #fff;
}
.btn-primary:hover { background: var(--green-water); } /*############################*/

.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--cream-soft); }

.btn-accent {
  background: var(--orange);
  color: #fff;
}
.btn-accent:hover { background: var(--orange-dark); }

.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-block { width: 100%; }

.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.input-wrap:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.2);
}
.input-wrap .icon { color: var(--text-muted); }
.input-wrap input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  width: 100%;
  color: var(--text);
}
/* Champ grisé, ex: statut d'un utilisateur qui est le dernier
   administrateur (admin/user_form.php) — ne peut pas être modifié. */
.input-wrap select:disabled,
.input-wrap input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}
.input-wrap:has(select:disabled),
.input-wrap:has(input:disabled) {
  background: var(--border-soft);
  opacity: 0.75;
}
.input-wrap button.toggle-visibility {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
}

.alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
  font-weight: 500;
}
.alert-error {
  background: var(--rose-bg);
  color: var(--rose-text);
}
.alert-success {
  background: var(--mint-bg);
  color: var(--mint-text);
}

/* --------------------------------------------------------------- */
/* Page de connexion                                                */
/* --------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: url('../images/background_login_page.png') center / cover no-repeat; /*############################*/	
}

.login-visual {
  /* background: linear-gradient(160deg, #fdf3e3 0%, #fbe9cf 100%); */ /*############################*/
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;   /* centre horizontalement le logo, le mascot-placeholder et les badges */
  padding: 56px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
}

.login-visual .brand {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--navy);
  margin-bottom: 6px;
}
.login-visual .brand .dot { color: var(--orange); }
.login-visual .tagline {
  color: var(--orange-dark);
  font-weight: 600;
  margin-bottom: 48px;
}
.login-visual .tagline .muted { color: var(--navy-soft); font-weight: 500; }

.login-visual .brand-logo {
  width: 350px;
  height: 350px;
  max-width: 100%;
  margin-bottom: 28px;
  display: flex;
  align-items: center;     /* centre verticalement */
  justify-content: center; /* centre horizontalement */
}
.login-visual .brand-logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  /* Si ton image est plus petite que 350x350, elle garde sa taille réelle
     et reste centrée dans le cadre (pas d'agrandissement forcé). */
}

.mascot-placeholder {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  background: url('../images/icon_login_page.png') center / cover no-repeat; /*############################*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--orange-dark);
  text-align: center;
  padding: 24px;
}
.mascot-placeholder .icon { width: 64px; height: 64px; }
.mascot-placeholder span { font-size: 0.85rem; font-weight: 600; max-width: 260px; }

.login-visual .badges {
  display: flex;
  gap: 18px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.login-visual .badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-soft);
}
.login-visual .badges .icon { width: 16px; height: 16px; }

.login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.login-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
}
.login-card .icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.login-card h1 {
  text-align: center;
  font-size: 1.3rem;
  margin: 0 0 4px;
}
.login-card p.subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 26px;
}
.login-card .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  margin: -6px 0 20px;
}
.login-card .row-between a { color: var(--orange-dark); font-weight: 600; }
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 18px 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-note {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  background: var(--cream-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  align-items: flex-start;
}
.login-note .icon { color: var(--orange-dark); }
.login-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 22px;
}
.login-footer .links { display: flex; justify-content: center; gap: 16px; margin-bottom: 6px; }

/* --------------------------------------------------------------- */
/* Layout applicatif (dashboard + admin)                            */
/* --------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--cream);
  border-right: 1px solid var(--border-soft);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
}

.sidebar-admin {
  background: var(--sidebar-admin-bg);
  border-right: 1px solid var(--border-soft);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------- */
/* Menu latéral responsive (mobile/tablette) : un bouton ☰ fixe,     */
/* visible seulement sous 860px, ouvre la sidebar en tiroir          */
/* coulissant par-dessus le contenu avec un fond assombri derrière.  */
/* Piloté par assets/js/sidebar.js via la classe .sidebar-open       */
/* posée sur <body>. Au-dessus de 860px, tout ceci reste invisible   */
/* et la sidebar garde son comportement normal (colonne fixe).       */
/* --------------------------------------------------------------- */
.sidebar-toggle {
  display: none;
  position: absolute; /* fixed : le bouton du menu descend en même temps qu'on scolle */
  top: 16px;
  left: 16px;
  z-index: 110;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  color: var(--text);
  cursor: pointer;
}
.sidebar-toggle .icon-close { display: none; }
body.sidebar-open .sidebar-toggle .icon-menu { display: none; }
body.sidebar-open .sidebar-toggle .icon-close { display: block; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 32, 0.5);
  z-index: 90;
}

/* Bouton "remonter en haut" (mobile/tablette uniquement, voir
   assets/js/sidebar.js) : fixe en bas à droite, masqué tant qu'on n'a pas
   assez défilé (.visible ajoutée en JS), indépendant du bouton ☰ et du
   bandeau cloche/menu utilisateur — n'agit sur aucun des deux. */
.back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 105;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-card);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
@media (max-width: 860px) {
  .back-to-top { display: flex; }
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar-toggle { display: flex; }

  .sidebar,
  .sidebar-admin {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    z-index: 100;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  body.sidebar-open .sidebar,
  body.sidebar-open .sidebar-admin {
    transform: translateX(0);
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
}

.sidebar .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 30px;
  text-align: center;
}

.sidebar-admin .brand-admin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 30px;
  text-align: center;
}

.sidebar .brand-logo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  /* background-color: var(--cream-soft); */ /*############################*/
  background-image: url('../images/logo_grand.png'); /*############################*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar-admin .brand-logo-admin {
  width: 100%;
  aspect-ratio: 1 / 1;			 
  border-radius: 14px;			  
  background-image: url('../images/logo_grand_admin.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
}
.sidebar .nav-list a { color: var(--navy); }
.sidebar-admin .nav-list a { color: var(--sidebar-admin-text); }
.sidebar .nav-list a:hover { background: var(--cream-soft); }
.sidebar-admin .nav-list a:hover { background: var(--orange-blue); }
.sidebar .nav-list a.active { background: var(--navy); color: var(--cream-soft); }
.sidebar-admin .nav-list a.active { background: var(--orange-blue); color: var(--orange); }

.sidebar .nav-list .divider-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 18px 0 6px 14px;
}

.sidebar-admin .nav-list .divider-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-admin-text-muted);
  margin: 18px 0 6px 14px;
}

.sidebar-spacer { flex: 1; }

.sidebar-mascot {
  background: linear-gradient(160deg, #fdf3e3, #fbe9cf);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
}
.sidebar-mascot .mascot-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  margin: 0 auto 10px;
  padding: 0;
}
.sidebar-mascot .mascot-placeholder .icon { width: 34px; height: 34px; }
.sidebar-mascot strong { display: block; font-size: 0.85rem; }
.sidebar-mascot span { font-size: 0.75rem; color: var(--text-muted); }
.sidebar-mascot .tag { color: var(--orange-dark); font-weight: 700; }

.main-area {
  padding: 26px 34px 50px;
}
/* Sous 860px, le bouton ☰ (fixe, 44px de haut, posé à top:16px) a besoin
   d'une marge au-dessus du contenu pour ne pas chevaucher le titre de page. */
@media (max-width: 860px) {
  .main-area { padding-top: 84px; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar h1 {
  font-size: 1.55rem;
  margin: 0 0 4px;
}
.topbar .subtitle { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bell-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bell-btn .badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--orange);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
/* Menu utilisateur (cliquable, voir includes/partials/topbar_actions.php) :
   .user-menu est juste l'ancre positionnée pour le menu déroulant,
   .user-menu-trigger porte le flex (avatar + nom/rôle + flèche) — c'est
   un <button> (accessibilité clavier), remis à plat visuellement pour
   garder l'apparence d'avant. */
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
/* Couleur d'avatar choisie sur la page Profil (users.avatar_color) : la
   palette est gérée depuis l'admin (Paramètres système), donc le fond et
   la couleur du texte sont calculés côté PHP et posés en style inline
   (voir includes/avatar.php) plutôt que par des classes fixes ici. */
.avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; }
/* Avatar avec une photo envoyée par l'utilisateur (à la place de la
   couleur+initiales) : la photo remplit tout le rond, quelle que soit sa
   taille — même principe que .service-icon.has-image. Le rond reste
   rond : border-radius vient de .avatar ci-dessus, inchangé. */
.avatar.has-image { padding: 0; overflow: hidden; }
.avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-menu-trigger .name { font-weight: 700; font-size: 0.92rem; }
.user-menu-trigger .role { font-size: 0.75rem; color: var(--text-muted); }
.user-menu-chevron { transition: transform 0.15s ease; }
.user-menu-trigger[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }

/* Panneau du menu utilisateur, ancré au bouton (voir .user-menu ci-dessus) —
   mêmes tokens que .panel pour rester cohérent visuellement. */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 8px;
  z-index: 30;
}
.user-menu-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
}
.user-menu-dropdown a .icon { width: 17px; height: 17px; flex-shrink: 0; }
.user-menu-dropdown a:hover { background: var(--cream-soft); }
.user-menu-dropdown a.danger { color: var(--rose-text); }
.user-menu-dropdown hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 6px 2px;
}

/* Sous 860px, la cloche + le menu utilisateur rejoignent le bouton ☰
   (lui aussi fixe à cette largeur, voir .sidebar-toggle plus haut) sur la
   même ligne, à droite — plutôt que de rester dans le fil du titre où ils
   passeraient à la ligne en dessous une fois la place manquante. Même
   z-index que .sidebar-toggle pour rester sur le même plan. */
@media (max-width: 860px) {
  .topbar-actions {
    position: absolute; /* fixed : le bouton du menu descend en même temps qu'on scolle */
    top: 16px;
    right: 16px;
    z-index: 110;
  }
}
/* Sur les très petits écrans, le nom/rôle du menu utilisateur ferait
   dépasser le bandeau fixe ci-dessus : on ne garde que l'avatar et la
   flèche, le nom/rôle restent visibles une fois le menu ouvert. */
@media (max-width: 480px) {
  .user-menu-trigger .name,
  .user-menu-trigger .role {
    display: none;
  }
}

/* Cards & grid de services */
.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 16px;
}

.services-grid {
  display: grid;
  /* Colonnes de largeur FIXE (220px, la même valeur que le max-width de
     .service-card ci-dessous) : autant de colonnes de 220px que la largeur
     dispo le permet, sans laisser de vide caché à l'intérieur de chaque
     colonne. C'est ce qui fait que "gap" ci-dessous correspond vraiment à
     l'espace visible entre deux cartes — avec un grid-template en 1fr,
     chaque colonne peut être bien plus large que la carte (surtout sur un
     grand écran), et le vide entre les cartes vient alors de cet espace
     inutilisé dans la colonne, pas de gap. */
  grid-template-columns: repeat(auto-fill, 205px);
  gap: 18px;
}
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  width: 100%;
  /* Empêche la carte de devenir énorme sur un écran très large ou quand il
     n'y a pas assez de services pour remplir toutes les colonnes. */
  max-width: 205px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

/* Sur le dashboard, la vignette du service occupe tout le haut de la carte
   (grand carré), au lieu du petit icône rond d'avant — l'icône seule ou
   l'image envoyée depuis l'admin remplit ce carré de la même façon.
   Ces règles sont volontairement scopées à .service-card pour ne pas
   toucher .service-icon utilisé ailleurs (ex. .service-toggle-row, 40px). */
.service-card .service-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
}
.service-card .service-icon .icon { width: 40%; height: 40%; }

/* La couleur choisie pour un service teinte toute la carte (dashboard),
   pas seulement le carré icône/image — image comprise : le fond pastel
   reste visible autour et sous elle. "Aucune" (pas de classe "has-color")
   ne change rien, la carte garde le fond neutre habituel de .service-card.
   Le fond est EXACTEMENT la couleur choisie par l'admin (aucun recalcul —
   voir includes/service_options.php) ; seuls l'accent (glyphe de l'icône)
   et l'encre du texte (--card-ink / --card-muted) sont dérivés, en visant
   toujours le meilleur contraste possible avec ce fond précis, qu'il soit
   clair ou sombre. Le tout est posé en style inline plutôt que par des
   classes fixes ici, car la palette est désormais gérée depuis l'admin
   (Paramètres système) et peut contenir n'importe quelle teinte. Ces fonds
   restent fixes (identiques en clair/sombre, voir plus haut), donc le
   titre/texte/statut qui y sont posés utilisent les couleurs calculées par
   service (avec repli sur --ink-on-pastel / --muted-on-light) plutôt que
   les variables thémées var(--text)/var(--text-muted), qui deviendraient
   illisibles en mode sombre sur un fond qui, lui, ne s'assombrit pas. */
.service-card.has-color h3 {
  color: var(--card-ink, var(--ink-on-pastel));
}
.service-card.has-color p {
  color: var(--card-muted, var(--muted-on-light));
}
.service-card.has-color .status-line:not(.off) {
  color: var(--card-ink, var(--ink-on-pastel));
}
.service-card.has-color .status-line.off {
  color: var(--card-muted, var(--muted-on-light));
}

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon .icon { width: 26px; height: 26px; }
/* "Aucune" couleur choisie (pas de classe "has-color", et pas de style
   inline posé) : carré neutre, sans fond, juste l'icône dans la couleur
   de texte atténuée. Utilisé aussi tel quel (hors contexte service) pour
   les icônes neutres de la page Paramètres personnelle. */
.service-icon.none   { background: transparent; color: var(--text-muted); }
/* .gray : utilisé ailleurs dans l'interface (page Paramètres
   personnelle, "Autres réglages") pour un carré neutre légèrement teinté. */
.service-icon.gray   { background: var(--gray-bg);   color: var(--gray-text); }

/* Service avec une image envoyée depuis l'admin (à la place de l'icône) :
   l'image remplit tout le carré, quelle que soit sa taille (52px par
   défaut, 40px dans .service-toggle-row). */
.service-icon.has-image { padding: 0; overflow: hidden; }
.service-icon.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card h3 { margin: 0 0 4px; font-size: 1.02rem; }
.service-card p  { margin: 0; font-size: 0.83rem; color: var(--text-muted); line-height: 1.4; }

.status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mint-text);
}
.service-card .status-line {
  justify-content: center;
  align-self: center;
  background: var(--status-chip-bg);
  border: 1px solid var(--status-chip-border);
  border-radius: 999px;
  padding: 5px 14px;
  box-shadow: 0 2px 6px -3px rgba(33, 36, 59, 0.2);
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.status-dot.off { background: #c6c4d1; }
.status-line.off { color: var(--text-muted); }
/* Le fond de l'encadré est toujours blanc (voir --status-chip-bg) : le texte
   "Indisponible" doit donc rester fixe lui aussi, sinon var(--text-muted)
   devient trop clair en mode sombre et illisible sur ce fond blanc. */
.service-card .status-line.off { color: var(--muted-on-light); }

/* Sur mobile uniquement (aperçu validé avec l'utilisateur) : carte pleine
   largeur, en ligne plutôt qu'empilée — icône/image à gauche (40% de la
   largeur), titre + description + statut à droite (60%). Desktop/tablette :
   layout inchangé (voir règles .service-card plus haut).
   Ce bloc est volontairement placé APRÈS les règles .service-card
   ci-dessus : à spécificité CSS égale, c'est l'ordre dans la feuille de
   style qui décide, donc un bloc @media placé avant elles serait écrasé
   par elles même quand la media query correspond — c'est ce qui se
   passait avec ".service-card { max-width: none; }" plus haut avant ce
   correctif (jamais appliqué en pratique, l'écran restait plafonné à
   205px sur mobile malgré la grille en une colonne). */
@media (max-width: 480px) {
  .service-card {
    max-width: none;
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    text-align: left;
    padding: 14px;
  }
  .service-card .service-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  /* Le bloc titre + description (div sans classe) prend la première ligne
     de la colonne de droite, le statut la seconde — au lieu du badge centré
     en pastille du desktop, un simple texte aligné à gauche sous la
     description. Le :not(.status-line) est nécessaire : sans lui, ce
     sélecteur cible AUSSI la div .status-line (c'est aussi une div directe
     non ".service-icon"), et comme il est plus spécifique que la règle
     ".service-card .status-line" ci-dessous (un sélecteur de type "div" en
     plus), son grid-row: 1 l'emporterait et ferait chevaucher le statut sur
     le titre/description. */
  .service-card > div:not(.service-icon):not(.status-line) {
    grid-column: 2;
    grid-row: 1;
  }
  .service-card .status-line {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    align-self: start;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

.empty-state {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

.tip-banner {
  margin-top: 26px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tip-banner .tip-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--navy-soft);
}
.tip-banner .icon { color: var(--orange-dark); }

/* --------------------------------------------------------------- */
/* Admin                                                            */
/* --------------------------------------------------------------- */
.admin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.admin-header .icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-header h1 { font-size: 1.25rem; margin: 0; }
.admin-header p { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.admin-header > div:nth-child(2) { flex: 1; min-width: 0; }
.admin-header .topbar-actions { flex-shrink: 0; }

.admin-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1100px) { .admin-grid { grid-template-columns: 1fr; } }

/* Page Paramètres : une seule liste continue (un seul panel), chaque
   réglage sur sa ligne — icône, libellé + description, contrôle à droite —
   plutôt que des cartes/panneaux séparés. Ajouter un réglage plus tard,
   c'est juste ajouter une ligne. */
.settings-list {
  display: flex;
  flex-direction: column;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.settings-list > .settings-row:last-child,
.settings-list > .settings-block:last-child { border-bottom: none; }
.settings-row .service-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.settings-row .service-icon .icon { width: 20px; height: 20px; }
.settings-row .info { flex: 1; }
.settings-row .info strong { display: block; font-size: 0.92rem; }
.settings-row .info span { font-size: 0.8rem; color: var(--text-muted); }

/* "Ordre des services" : un réglage qui déplie une sous-liste de services
   (au lieu d'un simple contrôle à droite) — reste dans le même bloc
   continu que les autres lignes, juste plus haut. */
.settings-block {
  border-bottom: 1px solid var(--border-soft);
  padding: 4px 0;
}
.settings-block .settings-row { border-bottom: none; padding: 10px 4px; }
.settings-order-list {
  margin: 0 4px 12px 56px;
  border-top: 1px solid var(--border-soft);
}
.settings-order-list .service-toggle-row:first-child { padding-top: 12px; }
@media (max-width: 480px) {
  .settings-order-list { margin-left: 4px; }
}

/* Page Profil : avatar + nom en tête, puis le choix de couleur de l'avatar. */
.profile-identity {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.profile-name-field {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.profile-name-field .field { flex: 1; margin: 0; }

.avatar-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.avatar-color-option { display: block; cursor: pointer; }
.avatar-color-input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-color-swatch {
  width: 38px;
  height: 38px;
  font-size: 0.8rem;
  border: 2px solid transparent;
  transition: transform .1s ease, border-color .15s ease;
}
.avatar-color-input:checked + .avatar-color-swatch {
  border-color: var(--text);
  transform: scale(1.1);
}
.avatar-color-input:focus-visible + .avatar-color-swatch {
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.35);
}

.panel {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 20px;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.panel-header h2 { font-size: 1.02rem; margin: 0; }
.panel-header p { font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 0; }
/* Pour les en-têtes dont le bloc de texte peut changer de hauteur (message
   d'aide affiché/masqué au clic, voir .info-detail) : on ancre le bouton
   d'action en haut plutôt que de le centrer, sinon il se déplace visuellement
   à chaque ouverture/fermeture du message. */
.panel-header.align-top { align-items: flex-start; }
/* Le message d'aide peut être une phrase longue : sans cette contrainte, le
   bloc de texte s'élargit pour l'accueillir sur une seule ligne et pousse le
   bouton d'action sur une nouvelle ligne quand le message s'affiche. On force
   le bloc à rester dans la largeur disponible pour que seule sa hauteur
   change (le message se met sur plusieurs lignes), jamais sa largeur. */
.panel-header.align-top > div { flex: 1 1 0%; min-width: 0; }
.panel-header.align-top > .btn { flex-shrink: 0; }
/* Sur mobile, partager la ligne entre le bouton et le bloc titre/description/
   message d'aide donne trop de lignes étroites. On empile plutôt : le bouton
   passe au-dessus (order: -1) et le bloc de texte prend toute la largeur. */
@media (max-width: 480px) {
  .panel-header.align-top {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-header.align-top > .btn {
    order: -1;
    align-self: flex-start;
  }
  .panel-header.align-top > div { width: 100%; }
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-bottom: 14px;
}
.search-box input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 0.88rem;
  color: var(--text-muted); /*#####################*/
}
.search-box .icon { color: var(--text-muted); }

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.user-row:hover { background: var(--cream-soft); }
.user-row.selected { background: var(--cream-soft); border-color: var(--orange-soft); } /*#####################*/
/* --cream-soft est un fond thémé (il s'assombrit déjà avec le mode sombre),
   donc seul le nom garde un accent fixe (teal en sombre) ; l'e-mail suit le
   --text-muted normal — sur --cream-soft il reste lisible dans les deux
   thèmes, pas besoin de le figer comme avant. */
.user-row.selected .info strong { color: var(--navy); }
.user-row .avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.user-row .info { flex: 1; min-width: 0; }
.user-row .info strong { display: block; font-size: 0.9rem; }
.user-row .info span { font-size: 0.76rem; color: var(--text-muted); }
.user-row .meta { display: flex; align-items: center; gap: 10px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.badge-admin   { background: var(--lavender-bg); color: var(--lavender-text); }
.badge-famille { background: var(--mint-bg);     color: var(--mint-text); }
.badge-invite  { background: var(--amber-bg);    color: var(--amber-text); }

/* Couleurs de badge pour les rôles gérés depuis l'admin (voir
   includes/roles.php, koneli_role_badge_tones() — un rôle personnalisé
   choisit l'une de ces teintes plutôt qu'une couleur libre). */
.badge-tone-lavender { background: var(--lavender-bg); color: var(--lavender-text); }
.badge-tone-mint     { background: var(--mint-bg);     color: var(--mint-text); }
.badge-tone-amber    { background: var(--amber-bg);    color: var(--amber-text); }
.badge-tone-blue     { background: var(--blue-bg);     color: var(--blue-text); }
.badge-tone-rose     { background: var(--rose-bg);     color: var(--rose-text); }
.badge-tone-gray     { background: var(--gray-bg);     color: var(--gray-text); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--mint-text);
}
.status-pill.inactif { color: var(--rose-text); }

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy-soft);
}
.icon-btn:hover { background: var(--cream-soft); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn:disabled:hover { background: var(--card); }

.user-count { text-align: right; font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; }

/* Services list with toggle */
.service-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.service-toggle-row:last-child { border-bottom: none; }
.service-toggle-row .service-icon { width: 40px; height: 40px; border-radius: 12px; }
.service-toggle-row .service-icon .icon { width: 20px; height: 20px; }
.service-toggle-row .info { flex: 1; }
.service-toggle-row .info strong { display: block; font-size: 0.88rem; }
/* Enfant direct uniquement (le petit texte de description sous le nom) :
   un sélecteur descendant générique attraperait aussi un badge de rôle
   placé dans le <strong> (admin/roles.php), écrasant sa couleur avec ce
   gris alors qu'il doit garder sa teinte (.badge-tone-*). */
.service-toggle-row .info > span { font-size: 0.76rem; color: var(--text-muted); }

/* Sommaire ancré en haut de Paramètres système (admin/parametres.php) :
   accès direct à chaque section sans devoir tout faire défiler — surtout
   utile pour "Icônes des services", tout en bas de page. Simples liens
   texte séparés par un point médian, pas des boutons/puces — un vrai
   sommaire de page plutôt qu'une barre d'actions. scroll-margin-top sur
   les sections ciblées pour ne pas coller le titre en haut de fenêtre au
   clic. */
.settings-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 24px;
  font-size: 0.86rem;
}
.settings-toc a {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
}
.settings-toc a:hover,
.settings-toc a:focus-visible {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.settings-toc .toc-label { color: var(--text-muted); font-weight: 400; }
.settings-toc .sep { color: var(--text-muted); opacity: 0.5; }
#avatar-colors, #service-colors, #service-icons { scroll-margin-top: 20px; }

/* Grille compacte des icônes de service (admin/parametres.php) : une
   mignonnette par icône (glyphe + nom + interrupteur) plutôt qu'une ligne
   pleine largeur — avec les 26 icônes du catalogue, ça évite une liste
   qui pousse le reste de la page très bas. Le détail (nombre de services,
   pourquoi l'interrupteur est grisé) passe en infobulle (title) plutôt
   qu'en texte visible. Le nom peut passer sur deux lignes (min-height sur
   la mignonnette pour garder des rangées alignées) plutôt que d'être
   tronqué avec "..." : plus lisible en un coup d'œil sur une page de
   réglages qu'on scanne, sans avoir à survoler chaque icône. */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.icon-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.icon-tile .service-icon { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; }
.icon-tile .service-icon .icon { width: 16px; height: 16px; }
.icon-tile strong {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Version réduite de .switch, pour tenir dans une mignonnette .icon-tile
   sans l'agrandir inutilement. */
.switch-sm { width: 34px; height: 20px; }
.switch-sm .track::before { width: 14px; height: 14px; }
.switch-sm input:checked + .track::before { transform: translateX(14px); }

/* Bandeau d'aide réduit en icône d'info à côté du titre de section
   (admin/parametres.php) : au clic sur l'icône (pas au survol — ça ne
   marcherait pas au doigt sur tablette/téléphone), l'explication
   apparaît juste au-dessus du titre, dans la même couleur que l'icône
   active. Un second clic la referme. */
.info-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  vertical-align: middle;
}
.info-hint .icon { width: 15px; height: 15px; }
.info-hint:hover,
.info-hint:focus-visible,
.info-hint[aria-expanded="true"] { color: var(--orange-dark); background: var(--cream-soft); }

.panel-header p.info-detail {
  display: none;
  color: var(--orange-dark);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 4px 0 6px;
}
.panel-header p.info-detail.show { display: block; }
.info-detail a { color: inherit; text-decoration: underline; }

/* Page Paramètres, "Ordre des services" : deux flèches à la place de
   l'interrupteur habituel de .service-toggle-row. */
.order-controls { display: flex; gap: 6px; flex-shrink: 0; }
.order-controls .icon-btn { width: 30px; height: 30px; }
.order-controls .icon { width: 16px; height: 16px; }

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute;
  inset: 0;
  background: #dcd9e6;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
}
.switch .track::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background: #fff;
  transition: transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked + .track { background: var(--navy); }
.switch input:checked + .track::before { transform: translateX(20px); }
.switch input:disabled + .track { opacity: 0.5; cursor: not-allowed; }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.35); }

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
.info-list .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}
.info-list .row span.label { color: var(--text-muted); }
.info-list .row span.value { font-weight: 600; }

.panel-footer-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* Aide & Support (espace personnel) : bloc de contact — pas de forme de
   panneau imbriqué, juste une icône + le texte, pour rester épuré. */
.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-card p { margin: 2px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.contact-card a.btn { margin-left: auto; flex-shrink: 0; }

/* Questions fréquentes en accordéon natif (<details>/<summary>), sans
   JavaScript : repliées par défaut, une seule ouverte à la fois n'est pas
   forcée (chacune est indépendante) — reste volontairement simple pour
   une page "facilement lisible et épurée". */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0 16px;
}
.faq-item[open] { background: var(--cream-soft); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateY(0); }

.two-col-stack { display: flex; flex-direction: column; gap: 22px; }

/* --------------------------------------------------------------- */
/* Page Activité (activite.php) : filtres, regroupement par         */
/* catégorie, pagination.                                           */
/* --------------------------------------------------------------- */
.activity-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.activity-filters .field { margin-bottom: 0; min-width: 180px; }
/* Champs "Du" / "Au" masqués tant que la période n'est pas "Personnalisée"
   (affichés par défaut sans JS si elle l'est déjà au chargement — voir le
   ternaire "show" dans activite.php — puis basculés en JS au changement du
   select période). */
.activity-date-range { display: none; min-width: 150px; }
.activity-date-range.show { display: block; }
/* Même hauteur que .input-wrap (46px : padding 12px + bordure 1px + ligne
   de contenu) pour que le bouton s'aligne visuellement avec les selectbox,
   pas seulement avec leur bas. Uniquement en desktop : sur mobile, le
   bouton garde sa hauteur normale (voir override plus bas). */
.activity-filter-submit { align-self: flex-end; height: 46px; }

.activity-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.activity-group-title .icon { width: 16px; height: 16px; }

.activity-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.activity-pagination-info { font-size: 0.82rem; color: var(--text-muted); }
.btn.disabled { opacity: 0.4; pointer-events: none; cursor: default; }

/* Horodatage d'un événement du journal : volontairement neutre (pas la
   couleur verte de .status-pill, qui ailleurs signifie "actif"/"réussi" —
   une date n'est ni un succès ni un échec). */
.activity-timestamp {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Notifications (notifications.php) : petit point devant le titre d'une
   notification qui était encore non lue à l'ouverture de la page (elles
   sont ensuite toutes marquées lues — voir includes/notifications.php,
   koneli_mark_all_notifications_read()). */
.notif-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  margin-right: 6px;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .activity-filters { flex-direction: column; align-items: stretch; }
  .activity-filters .field,
  .activity-date-range { min-width: 0; width: 100%; }
  .activity-filter-submit { width: 100%; height: auto; }

  /* Sur 3 colonnes (Précédent / info / Suivant), les boutons n'ont pas la
     place de garder leur texte sur une ligne à 390px — on empile plutôt,
     boutons pleine largeur. */
  .activity-pagination { flex-direction: column; }
  .activity-pagination .btn { width: 100%; }
  .activity-pagination-info { order: -1; }
}