/* =========================================================================
   Naturo Solutions — Backoffice (maquette statique)
   Feuille de style unique : design tokens + composants.
   Aucune dépendance externe, aucun build.
   ========================================================================= */

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Couleurs — surfaces & texte */
  --bg:            #f3f5f1;   /* fond application */
  --surface:       #ffffff;   /* cartes, topbar, footer */
  --surface-alt:   #f7faf5;   /* fond d'en-tête de tableau */
  --surface-soft:  #f3f7f1;   /* blocs verts très clairs (actions rapides…) */
  --ink:           #1c2b20;   /* texte principal / titres */
  --muted:         #5a685d;   /* texte secondaire */
  --faint:         #8a978c;   /* texte tertiaire, placeholders, breadcrumb */
  --soft:          #3d4a40;   /* texte des chips/pills/pagination */

  /* Couleurs — bordures */
  --border:        #e2e8e0;   /* bordure standard cartes */
  --border-strong: #d5ded3;   /* bordure boutons secondaires / champs / pills */
  --divider:       #eef2ed;   /* séparateurs fins internes */

  /* Couleurs — marque (verts) */
  --brand:         #2a6b3f;   /* vert texte / liens / accents */
  --accent:        #449c24;   /* vert bouton d'action */
  --accent-hover:  #3a8a1e;   /* survol bouton primaire */
  --green-dark:    #1d3b26;   /* sidebar, pills/pagination actifs, avatar foncé */
  --green-bright:  #7fd15a;   /* bordure active nav, focus, hover carte-ligne */
  --tint:          #e8f4e3;   /* fond badges / avatars clairs */
  --sidebar-link:  #a9c4ae;   /* liens sidebar inactifs */
  --on-dark-soft:  #cfe6c6;   /* texte/lien clair sur fond vert foncé */

  /* Couleurs — statuts / catégories */
  --danger:        #b4574e;
  --warn-bg:       #fdf3e2;   --warn-ink:  #9a6b1f;
  --blue-bg:       #e3ecf7;   --blue-ink:  #2b4e91;
  --purple-bg:     #f2e8f4;   --purple-ink:#7a3f8a;

  /* Rayons */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  24px;
  --r-pill:20px;

  /* Typographie */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-xs:   11.5px;
  --fs-sm:   12px;
  --fs-13:   12.5px;
  --fs-body: 13px;
  --fs-nav:  13.5px;
  --fs-14:   14px;
  --fs-15:   15px;
  --fs-h2:   20px;
  --fs-stat: 26px;
  --fw-normal:   400;
  --fw-semibold: 600;
  --fw-heading:  650;
  --fw-bold:     700;

  /* Espacements récurrents */
  --pad-topbar: 18px 32px;
  --pad-page:   24px 32px;
  --pad-card:   20px 24px;
  --pad-card-md:22px 24px;
  --pad-btn:    9px 16px;
  --pad-chip:   6px 14px;
  --pad-badge:  3px 10px;
}

/* -------------------------------------------------------------- Reset/base */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.45;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-heading); }

input, textarea, select, button { font-family: inherit; font-size: 100%; }

img { max-width: 100%; }

/* ------------------------------------------------------------------ Layout */
.app { display: flex; min-height: 100vh; }

.app__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Topbar (en-tête de page — reste propre à chaque écran) */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--pad-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar__left  { display: flex; align-items: center; gap: 14px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }

/* Interrupteur « Montants » — inclus en tête des actions de chaque topbar
   (.topbar__actions), donc juste à gauche des boutons. Un <button> qui soumet le
   formulaire (pas d'AJAX). Vert = affichés ; aucune couleur nouvelle, tout aux
   tokens existants. */
.montants-toggle { display: flex; align-items: center; }
.montants-toggle .switch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  font: inherit; font-size: var(--fs-sm); color: var(--faint);
  background: none; border: 0; border-radius: var(--r-sm);
  white-space: nowrap; cursor: pointer;
}
.switch__track {
  position: relative; width: 34px; height: 18px;
  background: var(--border-strong); border-radius: 999px;
  transition: background .15s ease;
}
.switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transition: transform .15s ease;
}
.switch--on { color: var(--ink); }
.switch--on .switch__track { background: var(--green-dark); }
.switch--on .switch__knob { transform: translateX(16px); }
.switch:hover .switch__track { filter: brightness(1.05); }
.switch:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }

.page-title { font-size: var(--fs-h2); color: var(--ink); }
.page-title small { font-size: var(--fs-body); font-weight: var(--fw-normal); color: var(--faint); }
.page-subtitle { margin: 3px 0 0; font-size: var(--fs-13); color: var(--faint); }

.breadcrumb { margin: 0 0 2px; font-size: var(--fs-sm); color: var(--faint); }

/* Zone de contenu de page */
.page { padding: var(--pad-page); }
.page--wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* Layout multi-colonnes (s'effondre en 1 colonne sous 900px — voir media queries) */
.split         { display: grid; gap: 16px; align-items: start; }
.split--main   { grid-template-columns: 1.6fr 1fr; }  /* contenu large + rail latéral */
.split--aside  { grid-template-columns: 1fr 1.4fr; }  /* rail étroit + contenu large */
.split--3      { grid-template-columns: 1fr 2fr 1fr; }/* triptyque (rangée de champs) */

/* ---------------------------------------------------------------- Sidebar  */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  /* Collée à la fenêtre : sur une page longue, la sidebar est un enfant flex de
     .app qui s'étirerait à la hauteur du contenu, reléguant le bloc utilisateur
     (margin-top: auto) en bas de page, hors écran. En sticky bornée à 100vh, le
     nom et la déconnexion restent toujours visibles ; overflow-y interne pour un
     écran très court. En mobile, la media query 900px repasse en position: fixed. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  background: var(--green-dark);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.sidebar__logo { padding: 26px 20px 20px; display: flex; justify-content: center; }
.sidebar__logo span {
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 16px;
}
.sidebar__logo img { width: 112px; display: block; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-nav);
  color: var(--sidebar-link);
  font-weight: var(--fw-normal);
  border-left: 3px solid transparent;
}
.nav-link:hover { color: #ffffff; }
.nav-link.is-active {
  color: #ffffff;
  background: rgba(255,255,255,.14);
  font-weight: var(--fw-semibold);
  border-left-color: var(--green-bright);
}

.sidebar__user {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar__user .avatar { background: var(--green-bright); color: var(--green-dark); }
.sidebar__user-name { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: #fff; }
.sidebar__user-link { font-size: var(--fs-xs); color: var(--sidebar-link); }
.sidebar__user-link:hover { color: #fff; }

/* ------------------------------------------------------------------ Footer */
.footer {
  margin-top: auto;
  padding: 14px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--faint);
}
.footer--center { justify-content: center; gap: 6px; text-align: center; }

/* ------------------------------------------------------------------- Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--pad-card);
}
.card--md   { padding: var(--pad-card-md); }
.card--sm   { padding: 16px 20px; }
.card--flush { padding: 0; overflow: hidden; }
.card--dark { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
/* Carte d'action destructrice (suppression d'une fiche client) : bordure rouge
   franche (2px) pour attirer l'œil. Réutilise le token --danger, aucune couleur
   nouvelle. */
.card--danger { border: 2px solid var(--danger); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-head--flush {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
}
.card-title  { font-size: var(--fs-15); color: var(--ink); }
.card-action { font-size: var(--fs-13); color: var(--brand); font-weight: var(--fw-semibold); }

/* ----------------------------------------------------------------- Buttons */
.btn {
  display: inline-block;
  padding: var(--pad-btn);
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.btn--primary   { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--brand); }
.btn--secondary:hover { border-color: var(--green-bright); color: var(--brand); }
.btn--muted     { background: var(--surface); border-color: var(--border-strong); color: var(--muted); }
.btn--danger    { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(0.93); color: #fff; }
.btn--block     { display: block; width: 100%; padding: 12px 16px; border-radius: var(--r-lg); font-size: var(--fs-14); }

/* Petits liens d'action (Modifier / PDF / Suppr.) */
.actions { display: flex; gap: 10px; justify-content: flex-end; font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.actions--left { justify-content: flex-start; }
.link-action { color: var(--brand); }
.link-muted  { color: var(--muted); }
.link-danger { color: var(--danger); }

/* -------------------------------------------------------- Badges & pills   */
.badge {
  display: inline-block;
  background: var(--tint);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  padding: var(--pad-badge);
  border-radius: var(--r-pill);
}
.badge--sm   { font-size: var(--fs-xs); padding: 2px 8px; margin-left: 6px; }
.badge--soft { font-weight: var(--fw-semibold); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn-ink); font-weight: var(--fw-semibold); }
.badge--blue   { background: var(--blue-bg);   color: var(--blue-ink); font-weight: var(--fw-semibold); }
.badge--purple { background: var(--purple-bg); color: var(--purple-ink); font-weight: var(--fw-semibold); }

/* Chip (mots-clés / intitulés de bilan) */
.chip {
  display: inline-block;
  background: var(--tint);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Chip-lien "ressource" (renvoi vers une section) */
.chip-link {
  display: inline-block;
  background: var(--surface-soft);
  color: var(--brand);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  padding: 8px 14px;
  border-radius: var(--r-pill);
}

/* Pills de filtre + pagination + segmented (même famille) */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 22px 32px 0; }
.pill {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--soft);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  padding: var(--pad-chip);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.pill.is-active { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.filters__spacer { margin-left: auto; }

/* Segmented control (onglets Informations / Utilisateurs) */
.segment { display: inline-flex; gap: 8px; background: var(--bg); border-radius: var(--r-pill); padding: 4px; }
.segment > * { font-size: var(--fs-13); font-weight: var(--fw-semibold); padding: 7px 16px; border-radius: 16px; color: var(--soft); }
.segment > .is-active { background: var(--green-dark); color: #fff; }

/* Variante formulaire : le même contrôle porté par des <label><input radio>.
   L'état initial vient du serveur (.is-active, ci-dessus) ; :has() prend le
   relais au clic. Sur un navigateur sans :has(), la sélection reste correcte —
   seul son reflet visuel attend le rechargement. */
.segment > label { cursor: pointer; }
.segment > label > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.segment > label:has(input[type="radio"]:checked) { background: var(--green-dark); color: #fff; }

/* ---------------------------------------------------------------- Search   */
.search {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  font-size: var(--fs-body);
  color: var(--ink);
  width: 300px;
  max-width: 100%;
}
.search::placeholder { color: var(--faint); }

/* ---------------------------------------------------------------- Forms    */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid--label { grid-template-columns: 1fr 2fr; }   /* champ étroit + champ large */
.form-grid--3     { grid-template-columns: 1fr 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--muted); }
.input, .textarea, select.input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: var(--fs-nav);
  color: var(--ink);
  background: var(--surface);
  width: 100%;
}
.input:focus, .textarea:focus, select.input:focus { outline: none; border-color: var(--green-bright); }
.textarea { resize: vertical; line-height: 1.6; }

/* ---------------------------------------------------------------- Tables   */
.grid-head {
  display: grid;
  gap: 12px;
  padding: 10px 20px;
  background: var(--surface-alt);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.grid-row {
  display: grid;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-body);
  align-items: center;
}
.grid-row:last-child { border-bottom: 0; }
.grid-row a { color: var(--ink); font-weight: var(--fw-heading); }
.grid-row a:hover { color: var(--brand); }

/* Gabarits de colonnes par écran */
.grid--consultations { grid-template-columns: 1fr 1.8fr 70px 130px; }
.grid--dashboard     { grid-template-columns: 1fr 1.6fr 1.6fr 70px; }
/* Colonne « Prix » masquée (interrupteur des montants) : la grille retombe à
   une colonne de moins, pour que les restantes récupèrent la largeur — plutôt
   qu'une colonne vide qui décalerait l'alignement. */
.grid--consultations.grid--sans-montant { grid-template-columns: 1fr 1.8fr 130px; }
.grid--dashboard.grid--sans-montant     { grid-template-columns: 1fr 1.6fr 1.6fr; }
.grid--users         { grid-template-columns: 40px 1.5fr 0.9fr 110px; }
.grid--droits        { grid-template-columns: 1fr 90px 90px 90px; }
.grid--patho         { grid-template-columns: 140px 1fr 130px; }
.grid--ordo          { grid-template-columns: 1fr 1.4fr 1.4fr 90px; }
.grid--categorie     { grid-template-columns: 1fr 100px 130px; }  /* listes catégories */
.grid--mini          { grid-template-columns: 1fr auto; }         /* mini-liste (nom + tag) */
.grid--media         { grid-template-columns: 56px 1fr auto; }    /* vignette + libellé + action */

/* Carte-ligne cliquable (liste clients) */
.rows { display: flex; flex-direction: column; gap: 10px; }
.row-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 44px 2fr 1.2fr 1.4fr 100px;
  gap: 14px;
  align-items: center;
  color: inherit;
}
.row-card:hover { border-color: var(--green-bright); }
.row-card .primary { font-weight: var(--fw-heading); font-size: var(--fs-14); color: var(--ink); }
.row-card .meta    { font-size: var(--fs-sm); color: var(--faint); }
.row-open { text-align: right; color: var(--accent); font-size: var(--fs-13); font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------- Avatars   */
.avatar {
  border-radius: 50%;
  background: var(--tint);
  color: var(--brand);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--md { width: 34px; height: 34px; font-size: var(--fs-sm); }
.avatar--lg { width: 40px; height: 40px; font-size: var(--fs-body); }
.avatar--xl { width: 46px; height: 46px; font-size: var(--fs-15); }
.avatar--dark { background: var(--green-dark); color: #fff; }

/* ------------------------------------------------------------- Pagination  */
.pagination { display: flex; justify-content: center; align-items: center; padding: 16px 32px; gap: 6px; font-size: var(--fs-13); }
.page-num { padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-strong); color: var(--soft); }
.page-num.is-active { background: var(--green-dark); color: #fff; border-color: var(--green-dark); font-weight: var(--fw-bold); }
.page-ellipsis { padding: 6px 12px; color: var(--faint); }

/* --------------------------------------------------------------- Gallery   */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.photo-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.photo-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.photo-img[data-zoom] { cursor: zoom-in; }
.photo-foot { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.photo-foot .title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.photo-foot .cat   { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--faint); }

/* Tuiles « document » (PDF, tableur, texte…) : même boîte que .photo-img, mais
   une icône teintée par type au lieu d'une vignette. La Librairie n'héberge pas
   que des images (le legacy y pointait un .docx « Fiche Patient »). Couleurs
   prises dans les tokens existants — aucune couleur nouvelle. */
.photo-doc { width: 100%; aspect-ratio: 4/3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; background: var(--surface-alt); color: var(--faint); }
.photo-doc svg { width: 52px; height: 52px; }
.photo-doc__ext { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.photo-doc--pdf { color: var(--danger); }
.photo-doc--doc { color: var(--blue-ink); }
.photo-doc--xls { color: var(--green-dark); }

/* Lightbox : agrandissement d'une image au clic. Injectée une fois par app.js
   (setupLightbox), pilotée par la classe `is-open`. Absente de la maquette —
   étendue avec les tokens existants, sans dépendance. */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 32px; background: rgba(28, 43, 32, .82); opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; }
.lightbox__img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.lightbox__cap { text-align: center; color: #fff; font-size: var(--fs-14); }
.lightbox__cap .cat { display: block; margin-top: 2px; font-size: var(--fs-13); color: rgba(255, 255, 255, .7); }
.lightbox__close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }
body.lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------- Dashboard */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.stat__value { font-size: var(--fs-stat); font-weight: var(--fw-bold); color: var(--ink); }
.card--dark .stat__label { color: var(--sidebar-link); }
.card--dark .stat__value { color: #fff; }

/* --------------------------------------------------------------- Login     */
.login-wrap {
  min-height: 100vh;
  /* Fond photo (cover) des écrans d'authentification et de changement de mot de
     passe. Voile vert foncé par-dessus (rgba de --green-dark, léger dégradé plus
     sombre en bas pour le texte du pied) : l'image est très claire, sans voile la
     carte et le texte clair deviendraient illisibles. --green-dark reste en repli
     si l'image ne charge pas — aucune couleur nouvelle. */
  background-color: var(--green-dark);
  background-image:
    linear-gradient(rgba(29, 59, 38, .70), rgba(29, 59, 38, .80)),
    url("../images/background-naturo-solutions.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px;
}
.login-card {
  width: 380px;
  max-width: 100%;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 36px 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.login-card img { width: 150px; margin: 0 auto; display: block; }

/* --------------------------------------------------------------- Portal (index) */
.portal { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 24px; }
.portal__inner { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 24px; }
.portal__head { display: flex; align-items: center; gap: 20px; }
.portal__logo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 18px; }
.portal__logo img { width: 110px; display: block; }
.portal__title { font-size: 24px; font-weight: var(--fw-bold); color: var(--ink); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.section-title { margin: 0 0 12px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }
.section-title--bright { color: var(--green-bright); }
.link-list { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-14); }

/* --------------------------------------------------------------- Utilities */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.text-accent { color: var(--accent); }
.text-bright { color: var(--green-bright); }
.text-danger { color: var(--danger); }
.on-dark { color: var(--on-dark-soft); }
.on-dark:hover { color: #fff; }
.strong { font-weight: var(--fw-heading); }
.text-right { text-align: right; }
.mono-meta { font-size: var(--fs-13); color: var(--muted); }
.hint { font-size: var(--fs-xs); color: var(--faint); }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; }
.row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }
.is-hidden { display: none !important; }   /* masquage par les filtres JS */

/* ------------------------------------------------ Alertes & états vides     */
/* Absents de la maquette, qui ne montre que des écrans nominaux : un
   formulaire doit pouvoir afficher ses erreurs, et une recherche ne rien
   trouver. Construits sur les tokens existants — aucune couleur nouvelle. */
.alert {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.alert--succes { background: var(--tint);    color: var(--brand); }
.alert--erreur { background: var(--warn-bg); color: var(--warn-ink); }
.alert__liste  { margin: 6px 0 0; padding-left: 18px; font-weight: var(--fw-normal); }

/* État vide : « aucun client ne correspond ». Reprend la carte, en plus discret. */
.empty {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-body);
}
.empty__titre { color: var(--ink); font-weight: var(--fw-heading); margin-bottom: 4px; }

/* Champ en erreur : bordure de rappel sur .input / .textarea. */
.input.is-invalid,
.textarea.is-invalid { border-color: var(--danger); }
.field__erreur { font-size: var(--fs-xs); color: var(--danger); }

/* ------------------------------------------------- Navigation mobile (base) */
/* Bouton hamburger + fond d'écran : injectés par app.js, masqués en desktop. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 4px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { border-color: var(--green-bright); }
.sidebar-backdrop { display: none; }

/* ============================================================= Responsive == */

/* Tablette large : les 4 tuiles stats passent en 2 colonnes. */
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* Tablette / seuil du tiroir : sidebar off-canvas + effondrement des layouts. */
@media (max-width: 900px) {
  /* Sidebar en tiroir : sort du flux → .app__main occupe toute la largeur */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100%;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60;
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 50;
  }
  body.nav-open .sidebar-backdrop { opacity: 1; visibility: visible; }

  .nav-toggle { display: inline-flex; }

  /* Layouts multi-colonnes → une seule colonne */
  .split     { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .grid-2    { grid-template-columns: 1fr; }

  /* Topbar : hamburger + titre à gauche, actions sur la ligne suivante */
  .topbar { flex-wrap: wrap; justify-content: flex-start; padding: 14px 16px; }
  .topbar__left { flex: 1; min-width: 0; }
  .topbar__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .search { width: 100%; }

  /* Tableaux de données : défilement horizontal interne plutôt que compression */
  .card--flush { overflow-x: auto; }
  .grid-head, .grid-row { min-width: 520px; }
  /* ...sauf les listes simples à 2 colonnes, qui restent fluides */
  .grid--mini, .grid--media { min-width: 0; }

  /* Paddings resserrés */
  .page       { padding: 16px; }
  .filters    { padding: 16px 16px 0; }
  .footer     { padding: 14px 16px; }
  .pagination { padding: 14px 16px; flex-wrap: wrap; }
}

/* Mobile : empilement complet. */
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .portal__head { flex-direction: column; align-items: flex-start; }

  /* Carte-ligne client : on garde avatar + nom/ville + badge, on masque le reste */
  .row-card { grid-template-columns: 40px 1fr auto; }
  .row-card .mono-meta,
  .row-card .row-open { display: none; }

  .footer { flex-direction: column; gap: 4px; text-align: center; }
}