/* =====================================================================
   SeriCalc — Design system
   Un seul fichier, une seule source de vérité visuelle pour toute l'appli.
   Palette : ambre Serical en accent unique, encre chaude neutre, fond papier.
   Échelles : espacement / rayon / ombre / typo définies une fois, réutilisées
   partout — plus d'ajout de valeurs ad hoc au fil des fonctionnalités.
   ===================================================================== */

:root{
  /* Couleur — palette resserrée, nommée par rôle plutôt que par lot */
  --ink:       #1e2126;   /* texte principal */
  --ink-soft:  #4b515b;   /* texte secondaire */
  --muted:     #767d88;   /* texte tertiaire / légendes */
  --paper:     #f6f5f2;   /* fond de page */
  --surface:   #ffffff;   /* cartes, champs */
  --line:      #e6e4de;   /* bordures */
  --line-soft: #f0efe9;   /* séparateurs internes (lignes de tableau) */

  --accent:    #e0900c;   /* ambre Serical — unique accent de l'appli */
  --accent-d:  #c07a09;   /* ambre, état hover/pressed */
  --accent-lt: #fdf1de;   /* ambre très clair — fonds de mise en avant */

  --ok:        #1e8e5a;
  --ok-bg:     #e7f6ee;
  --err:       #c0392b;
  --err-bg:    #fdecea;

  --brand-dark:#22262c;   /* barre de navigation */
  --brand-dark-2:#2c313a;

  --link: var(--accent-d);

  /* Rayons */
  --r-sm: 7px;
  --r:    11px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Ombres — deux paliers seulement, jamais plus */
  --shadow-1: 0 1px 2px rgba(20,20,15,.05), 0 1px 1px rgba(20,20,15,.04);
  --shadow-2: 0 8px 24px rgba(20,20,15,.10);

  /* Espacement (multiples de 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px;

  /* Typo — légèrement agrandie par rapport à une appli web classique : lisibilité avant tout */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 16.5px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.5;
  background:var(--paper);
  color:var(--ink);
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ===== Couleurs de module — une couleur = une famille de pages, jamais décoratif ===== */
.c-blue   { --mod: #2f6fd6; --mod-d: #24589f; --mod-bg: #eaf1fc; }
.c-coral  { --mod: #d9642f; --mod-d: #b34f22; --mod-bg: #fbeee6; }
.c-teal   { --mod: #128a72; --mod-d: #0d6c58; --mod-bg: #e5f4f1; }
.c-amber  { --mod: var(--accent); --mod-d: var(--accent-d); --mod-bg: var(--accent-lt); }
.c-pink   { --mod: #c1447a; --mod-d: #9c3562; --mod-bg: #fbeaf1; }
.c-purple { --mod: #6c56c2; --mod-d: #55429b; --mod-bg: #efecfa; }
.c-gray   { --mod: #5f6570; --mod-d: #454a53; --mod-bg: #eceef0; }
.c-slate  { --mod: #3d6b7d; --mod-d: #2e5261; --mod-bg: #e7eff2; }

/* ===== Barre latérale ===== */
.sidebar{
  background:var(--brand-dark);color:#e9ebee;
  display:flex;flex-direction:column;
  width:260px;flex-shrink:0;
  border-right:1px solid #14171b;
}
.sidebar-brand{padding:18px 18px 14px;font-size:var(--fs-lg);font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand .brand-logo{height:32px;width:32px;border-radius:8px;object-fit:cover}

.sidebar-scroll{flex:1;overflow-y:auto;padding:12px 10px}

.nav-item,.nav-group-t{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 12px;margin-bottom:2px;
  border:0;background:none;cursor:pointer;text-align:left;
  color:#cfd4dc;font-size:var(--fs-md);font-family:inherit;font-weight:500;
  border-radius:var(--r-sm);
}
.nav-item:hover,.nav-group-t:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav-item.active{background:var(--mod-bg,var(--accent-lt));color:var(--mod-d,var(--accent-d));font-weight:700}
.nav-item svg,.nav-group-t svg{flex-shrink:0}
.nav-item.active svg{color:var(--mod-d,var(--accent-d))}

.nav-group-t.active{background:rgba(255,255,255,.06);color:#fff}
.nav-group .nav-group-t svg:first-child{color:var(--mod,#cfd4dc)}
.nav-group-t .nav-chevron{margin-left:auto;display:flex;transition:transform .15s ease}
.nav-group.open .nav-group-t .nav-chevron{transform:rotate(180deg)}

.nav-group-items{padding:2px 0 6px 20px;display:flex;flex-direction:column;gap:1px}
.nav-group-items[hidden]{display:none}
.nav-group-items a{
  display:block;padding:10px 12px;color:#b7bcc6;font-size:var(--fs-base);
  border-left:2px solid rgba(255,255,255,.10);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.nav-group-items a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-group-items a.active{border-left-color:var(--mod,var(--accent));color:#fff;font-weight:700;background:rgba(255,255,255,.05)}

/* Sous-tiroir imbriqué (ex. RH > Saisie des absences) — même principe, un cran plus discret. */
.nav-subgroup-t{
  display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;
  border:0;background:none;cursor:pointer;text-align:left;
  color:#9aa0ab;font-size:var(--fs-sm);font-weight:600;text-transform:uppercase;letter-spacing:.3px;
  font-family:inherit;border-radius:var(--r-sm);
}
.nav-subgroup-t:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-subgroup-t.active{color:#e9ebee}
.nav-subgroup-t .nav-chevron{margin-left:auto;display:flex;transition:transform .15s ease}
.nav-subgroup.open .nav-subgroup-t .nav-chevron{transform:rotate(180deg)}
.nav-subgroup-items{padding:1px 0 4px 14px;display:flex;flex-direction:column;gap:1px}
.nav-subgroup-items[hidden]{display:none}
.nav-subgroup-items a{
  display:block;padding:9px 12px;color:#a5abb5;font-size:var(--fs-sm);
  border-left:2px solid rgba(255,255,255,.08);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.nav-subgroup-items a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-subgroup-items a.active{border-left-color:var(--mod,var(--accent));color:#fff;font-weight:700;background:rgba(255,255,255,.05)}

.sidebar-user{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-user-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.sidebar-user-name{font-size:var(--fs-base);font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:var(--fs-xs);color:#9aa0ab}
.sidebar-user .btn{background:rgba(255,255,255,.08);color:#e9ebee}
.sidebar-user .btn:hover{background:rgba(255,255,255,.16)}

.brand-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-link:hover{opacity:.88;text-decoration:none}

.mobile-menu-btn{
  display:none;position:fixed;top:12px;left:12px;z-index:70;
  background:var(--brand-dark);color:#fff;border:0;border-radius:var(--r-sm);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;
}
.sidebar-overlay{display:none}

/* Grille générale : barre latérale + contenu, pied de page aligné sous le contenu */
body.has-sidebar{display:grid;grid-template-columns:260px 1fr;grid-template-rows:1fr auto;min-height:100vh}
body.has-sidebar .sidebar{grid-row:1 / 3;position:sticky;top:0;height:100vh}
body.has-sidebar .wrap-sidebar{grid-column:2;grid-row:1}
body.has-sidebar .foot-sidebar{grid-column:2;grid-row:2}

/* ===== Structure de page ===== */
.wrap{max-width:1120px;margin:var(--sp-6) auto;padding:0 18px}
/* À côté de la barre latérale, la largeur disponible varie avec l'écran : on l'utilise plutôt
   que de laisser un grand vide à droite (le plafond à 1120px datait de l'ancienne barre du haut). */
.wrap-sidebar{max-width:1500px;margin:var(--sp-6) 32px}
@media(min-width:1820px){.wrap-sidebar{margin:var(--sp-6) auto}}
.foot{max-width:1120px;margin:30px auto;padding:0 18px 24px;color:var(--muted);font-size:var(--fs-sm)}
.foot-sidebar{max-width:1500px;margin:16px 32px 24px}
@media(min-width:1820px){.foot-sidebar{margin:16px auto 24px}}

h1{font-size:var(--fs-xl);font-weight:700;margin:4px 0 var(--sp-5);color:var(--ink)}
h3{font-size:var(--fs-md);font-weight:700;margin:0 0 var(--sp-3);color:var(--ink)}
h4{margin:0;font-size:var(--fs-base);font-weight:700}
.muted{color:var(--muted)}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.page-head h1{margin:0}
.head-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3)}

/* ===== Cartes ===== */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;margin-bottom:var(--sp-5);box-shadow:var(--shadow-1);
  transition:box-shadow .15s ease;
}
.card:hover{box-shadow:var(--shadow-2)}
.card.auth{max-width:380px;margin:60px auto}
/* Repère structurel : un liseré d'accent devant chaque titre de carte — signale
   systématiquement "ceci est une section", jamais utilisé pour autre chose. */
.card h3{position:relative;padding-left:13px}
.card h3::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:3px;background:var(--accent)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* ===== Formulaires ===== */
label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);margin-bottom:var(--sp-3)}
input,select,textarea{
  width:100%;margin-top:5px;padding:11px 12px;border:1px solid #d3d1c9;border-radius:var(--r-sm);
  font-size:var(--fs-base);font-family:inherit;background:var(--surface);color:var(--ink);min-height:42px;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-lt);outline-offset:0}
.row{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap}
.row label{flex:1;min-width:150px;margin-bottom:0}
.row .btn{margin-bottom:1px}
.reset input{width:150px;display:inline-block;margin:0 4px 0 0;vertical-align:middle}
.chk{display:inline-flex;align-items:center;gap:6px;margin:0 12px 0 4px;font-weight:500;font-size:var(--fs-sm);color:var(--ink-soft)}
.chk input{width:auto;margin:0}

/* ===== Boutons — une seule échelle, quatre variantes ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:var(--r-sm);padding:11px 18px;min-height:42px;
  font-size:var(--fs-base);font-weight:600;font-family:inherit;cursor:pointer;
  background:#edece7;color:var(--ink);transition:filter .12s ease,background .12s ease;
}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#e9ebee}
.btn.ghost-dark{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.btn.danger{background:var(--err-bg);color:var(--err)}
.btn.danger:hover{background:#f8d7d3}
.btn.small{padding:6px 11px;font-size:var(--fs-sm)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linklike{background:none;border:0;color:var(--link);cursor:pointer;text-decoration:underline;font:inherit;padding:0}

.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;white-space:nowrap}
.inline{display:inline}

/* ===== Messages ===== */
.flash{padding:11px 14px;border-radius:var(--r-sm);margin-bottom:var(--sp-4);font-size:var(--fs-base);font-weight:500}
.flash.ok{background:var(--ok-bg);color:#146c43;border:1px solid #bfe6cf}
.flash.err{background:var(--err-bg);color:#a12a1e;border:1px solid #f5c6c0}
.flash.warn{background:#fff3cd;color:#8a6100;border:1px solid #ffe08a}

/* ===== Tableaux ===== */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 11px;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm);vertical-align:middle}
tbody tr{transition:background .1s ease}
th{background:var(--accent-lt);color:#8a5a09;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.35px}
th.num{text-align:right}
tr.inactive{opacity:.55}
tbody tr:hover, .form-table tbody tr:hover{background:var(--accent-lt)}
tr.inactive:hover{background:#eee}
/* Colonne "collante" (ex. nom du salarié dans les calendriers d'absences) : doit suivre la
   surbrillance de la ligne au survol, pas garder un fond blanc figé qui la masquerait. */
.sticky-col{position:sticky;left:0;background:#fff;z-index:1}
tbody tr:hover .sticky-col{background:var(--accent-lt)}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table tfoot td{padding:9px 11px;border-top:2px solid var(--line);font-weight:700}
.table-scroll{overflow:auto}

.form-table{width:100%;border-collapse:collapse}
.form-table th{background:var(--accent-lt);color:#8a5a09;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:8px 9px;text-align:left}
.form-table td{padding:6px 7px;border-bottom:1px solid var(--line-soft)}
.form-table input{margin:0}

.best-row td{background:var(--accent-lt)}
.best-row td b{color:var(--accent-d)}
.muted-row td{color:var(--muted);font-style:italic}

/* ===== Badges de statut — pastilles pleines, pas juste du texte coloré ===== */
.ok-dot,.off-dot{
  display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:var(--fs-xs);
  padding:2px 9px;border-radius:var(--r-pill);
}
.ok-dot{color:#146c43;background:var(--ok-bg)}
.off-dot{color:#a12a1e;background:var(--err-bg)}
.tag{background:var(--accent-lt);color:var(--accent-d);border-radius:var(--r-pill);padding:2px 9px;font-size:var(--fs-xs);font-weight:600;margin-left:4px}

/* ===== En-tête de section coloré par module — icône dans un jeton + titre ===== */
.mod-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.mod-head .mod-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;border-radius:var(--r);background:var(--mod-bg);color:var(--mod-d);
}
.mod-head h3{margin:0;padding-left:0}
.mod-head h3::before{display:none}
.mod-head-sub{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:1px}

.stat.mod{background:var(--mod-bg);border-color:transparent}
.stat.mod b{color:var(--mod-d)}
.stat.mod span{color:var(--mod-d);opacity:.75}

.alert-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--err);border-left:5px solid var(--err);background:var(--err-bg);
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:var(--sp-5);
}
.alert-banner-txt{display:flex;align-items:center;gap:14px}
.alert-banner-icon{color:var(--err);flex-shrink:0}
.alert-banner b{font-size:var(--fs-md);color:#7a1f1f}


/* ===== Pagination — évite les longues listes à ascenseur ===== */
/* Centre toutes les colonnes d'un tableau sauf la première (ex. tableaux de valeurs par personne). */
.center-cols th:not(:first-child),.center-cols td:not(:first-child){text-align:center}

.pagination{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px}
.pagination .btn[aria-disabled]{opacity:.4;cursor:default;pointer-events:none}
.page-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 6px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);
}
.page-num:hover{background:#edece7;text-decoration:none}
.page-num.active{background:var(--accent);color:#fff}
.page-ellipsis{padding:0 4px;color:var(--muted)}
.page-info{margin-left:auto;font-size:var(--fs-xs)}
@media(max-width:650px){.page-info{width:100%;order:10;margin-left:0;text-align:center}}

.roadmap{list-style:none;padding:0;margin:0}
.roadmap li{padding:6px 0 6px 22px;position:relative;color:var(--muted);font-size:var(--fs-base);border-bottom:1px solid var(--line-soft)}
.roadmap li::before{content:"○";position:absolute;left:0;color:#c7c4ba}
.roadmap li.done{color:var(--ink);font-weight:600}
.roadmap li.done::before{content:"●";color:var(--accent)}

/* ===== Statistiques clé (dashboard) — un seul accent, pas un arc-en-ciel ===== */
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.kv div span{display:block;font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.kv div b{font-size:var(--fs-md);color:var(--ink)}

.cards6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3);margin-bottom:var(--sp-5)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px;border-top:3px solid var(--line)}
.stat span{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.stat b{display:block;margin-top:5px;font-size:var(--fs-lg);color:var(--ink)}
/* Une seule carte peut être mise en avant à la fois : c'est un signal, pas une décoration */
.stat.hl{background:var(--accent-lt);border-color:var(--accent);border-top-color:var(--accent)}
@media(max-width:1000px){.cards6{grid-template-columns:repeat(2,1fr)}.kv{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.cards6,.kv{grid-template-columns:1fr}}

/* ===== Récapitulatifs chiffrés ===== */
.recap{width:100%;border-collapse:collapse;max-width:560px}
.recap td{padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.recap td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.recap tr.total td{border-top:2px solid var(--line);font-weight:700}
.recap tr.hl td{background:var(--accent-lt);font-size:var(--fs-md)}

.barwrap{display:flex;align-items:center;gap:8px}
.bar{flex:1;background:#eeece5;border-radius:6px;height:10px;overflow:hidden;min-width:60px}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:6px}
.barwrap b{font-variant-numeric:tabular-nums;min-width:48px;text-align:right}

.fx-hint{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--fs-sm)}
.fx-hint .btn.small{padding:4px 8px}

/* ===== Création rapide (article, référence...) ===== */
.newart{background:var(--accent-lt);border:1px solid #f2e0bd;border-radius:var(--r);padding:var(--sp-3);margin-bottom:var(--sp-3)}

/* ===== Le signal fort de l'appli : la bannière "chiffre héros" =====
   Un seul type d'élément a le droit à un traitement graphique fort — le
   coefficient d'approche d'une commande, la donnée la plus regardée de
   l'appli. Tout le reste reste sobre. */
.coef-hero{
  margin:0 0 var(--sp-5);padding:20px 24px;border-radius:var(--r-lg);color:#fff;
  background:linear-gradient(120deg,var(--accent) 0%,var(--accent-d) 100%);
  box-shadow:0 10px 28px rgba(192,122,9,.30);display:flex;flex-direction:column;gap:4px;
}
.coef-hero-main{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.coef-hero-label{font-size:var(--fs-md);font-weight:600;opacity:.95;text-transform:uppercase;letter-spacing:.05em}
.coef-hero-val{font-size:46px;font-weight:800;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.coef-hero-sub{font-size:var(--fs-sm);opacity:.92}
.coef-hero-sub b{color:#fff}
.coef-badge{display:inline-block;min-width:58px;text-align:center;padding:4px 12px;border-radius:var(--r-pill);font-weight:800;font-size:var(--fs-base);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* ===== Sélecteur + bouton d'ajout rapide ===== */
.pick{display:flex;gap:6px;align-items:stretch}
.pick select{flex:1;min-width:0}
.pick .addref{flex:0 0 auto;padding:0 12px;font-size:var(--fs-lg);font-weight:700;line-height:1}

/* ===== Dépôt de fichiers (drag & drop) ===== */
.dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:22px;text-align:center;cursor:pointer;transition:.15s;background:#fbfaf7}
.dropzone:hover{border-color:var(--accent)}
.dropzone.over{border-color:var(--accent);background:var(--accent-lt)}
.dropzone.has{border-style:solid;border-color:var(--accent);background:var(--accent-lt)}
.dz-icon{font-size:26px;color:var(--accent);line-height:1}
.dz-inner{display:flex;flex-direction:column;gap:6px;align-items:center;color:var(--ink-soft)}

/* ===== Colonne % frais (ventilation manuelle) ===== */
#lignes.vent-auto .col-frais{display:none}
.ligne-fraispct{max-width:90px}

/* =====================================================================
   RESPONSIVE — tablette / téléphone : la barre latérale devient un tiroir
   ===================================================================== */
@media(max-width:900px){
  .wrap,.foot{padding:0 12px}
  .mobile-menu-btn{display:flex}
  body.has-sidebar{display:block}
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;z-index:80;
    transform:translateX(-100%);transition:transform .2s ease;
  }
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-2)}
  .sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(15,15,12,.45);z-index:75}
  .wrap-sidebar{padding-top:64px}
  .kv{grid-template-columns:1fr 1fr}
}

@media(max-width:650px){
  h1{font-size:var(--fs-lg)}
  .card{padding:14px}
  .sidebar{width:82vw;max-width:300px}
  .page-head{flex-direction:column;align-items:stretch}
  .page-head .actions{width:100%}
  .page-head .actions .btn{flex:1;text-align:center}
  .row{flex-direction:column;align-items:stretch}
  .row label{min-width:0}
  .row>.btn{width:100%}
  .kv{grid-template-columns:1fr}
  .actions{width:100%}
  .card{overflow-x:auto}
  table{min-width:560px}
  .form-table{min-width:480px}
  .recap{min-width:0}
  .reset input{width:100%;display:block;margin:6px 0}
  .pick{flex-direction:column}
  .pick .addref{width:100%}
}


/* Interrupteurs (toggles) — page Profils & droits */
.toggle{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle .slider{position:absolute;cursor:pointer;inset:0;background:#cfcabd;border-radius:24px;transition:background .18s}
.toggle .slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.toggle input:checked + .slider{background:var(--accent)}
.toggle input:checked + .slider::before{transform:translateX(20px)}
.toggle input:focus-visible + .slider{outline:2px solid var(--accent-d);outline-offset:2px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid #f0ede5;gap:12px}
.toggle-row:last-child{border-bottom:none}
.toggle-row .lbl{font-size:14px}
.toggle-group-title{text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:#9a9384;margin:18px 0 4px;font-weight:600}

/* Bouton "Exporter" avec menu déroulant PDF/Excel — réutilisable sur toute page de liste */
.export-menu{position:relative;display:inline-block}
.export-menu-list{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line, #e3ddce);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.14);min-width:140px;z-index:20;overflow:hidden}
.export-menu-list.open{display:block}
.export-menu-list a{display:block;padding:9px 14px;font-size:13px;color:var(--text,#2c2f34);text-decoration:none}
.export-menu-list a:hover{background:var(--accent-lt)}