/* =====================================================================
   APOR HUB — Feuille de style consolidée
   Source : extrait des maquettes HTML (designSystem, tableaux,
   statistiques, statistiquesGlobales).
   Naming d'origine conservé (pas de BEM).
   ===================================================================== */

/* ========== Fonts (Google Fonts) ========== */
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Geist:wght@100..900&family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Overpass+Mono:wght@300..700&family=Overpass:ital,wght@0,100..900;1,100..900&family=Stack+Sans+Headline:wght@200..700&family=Yellowtail&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========== Variables CSS racine ========== */
:root {
  /* Core Colors */
  /* --a: #E2006E; */
  --a: #5a55f0;
  --b: #8b2cff;
  --a-rgb: 90,85,240;
  /* --a1: #FFF0F6; */
  --a1: #f6f6fd;
  /* --a2: #FDDAED; */
  --a2: #f1f1fe;

  /* Neutral Colors */
  --t1: #111827;
  --t2: #4B5563;
  --t3: #9CA3AF;
  --bd: #E5E7EB;
  --bd-dark: #D1D5DB;
  --bg: #F3F4F6;
  /* --ps: #F7F8FA; */
  --ps: #ffffff;
  --row-hover: #F9FAFB;

  /* Semantic Colors */
  --c-success: #059669;
  --c-success-bg: #ECFDF5;

  /* Sidebar / Reporting colors */
  --sb-dark: #13041c;
  --sb-rep: #0A032D;

  /* Sizes & Radius */
  --sw: 220px;
  --ch: 36px;
  --r: 8px;
  --rl: 12px;

  /* System Transitions */
  --trans: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --card-width: clamp(190px, 12.395vw, 16%);
  --card-icon-width: clamp(40px, 5vw, 66px);
}

/* ========== Reset ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--t1);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ─── Liens : pas de soulignement par défaut (réinitialisation globale) ─── */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Exceptions : liens "texte" dans help-block ou contenu éditorial */
.help-block a,
.tile-desc a,
.auth-subtitle a {
  color: var(--a);
  text-decoration: underline;
}

/* ========== Topbar (barre supérieure) ========== */
.topbar {
  height: 56px;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: var(--sw);
  width: calc(100% - var(--sw));
  z-index: 100;
}

.sb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  flex-shrink: 0;
}

.sb-logo-img {
  height: 52px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.tb-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid var(--bd);
}

.tb-store {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
  flex-shrink: 0;
}

.tb-cw {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 32px;
}

.tb-cl {
  font-size: 12px;
  color: var(--t3);
  width: 100%;
}

.tb-sel {
  height: var(--ch);
  padding: 0 28px 0 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  color: var(--t2);
  cursor: pointer;
  outline: none;
  min-width: 160px;
}

.tb-sel:focus {
  border-color: var(--a);
  box-shadow: 0 0 0 2px var(--a1);
}

.tb-ics {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1px;
}

.tbi {
  width: var(--ch);
  height: var(--ch);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  border: none;
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s;
  position: relative;
}

.tbi:hover {
  background: var(--ps);
  color: var(--t1);
}

.tbi svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tbi.red {
  color: #DC2626;
}

.tbi.red:hover {
  background: #FEF2F2;
}

.tbsep {
  width: 1px;
  height: 20px;
  background: var(--bd);
  margin: 0 4px;
  flex-shrink: 0;
}

.tb-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--a1);
  color: var(--a);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--a2);
  margin-left: 4px;
}

/* ========== Dropdown applications (topbar) ========== */
.apps-wrap {
  position: relative;
}

.apps-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  min-width: 230px;
  z-index: 500;
  padding: 8px;
}

.apps-drop.oo {
  display: block;
}

.apps-hd {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 8px 6px;
}

.app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .1s;
}

.app-row:hover {
  background: var(--ps);
}

.app-ic {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-ic svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.app-nm {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
}

.app-sub {
  font-size: 11.5px;
  color: var(--t3);
}

/* ========== Layout principal + Sidebar ========== */
.layout {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100vh;
}

.sidebar {
  width: var(--sw);
  background-color: var(--sb-dark);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.sb-s {
  margin: 10px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 7px 10px;
}

.sb-s svg {
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.sb-s span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.sb-s kbd {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: inherit;
}

.sb-toggle {
  margin: 0 12px 10px;
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 4px;
}

.sbt-btn {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.nav {
  padding: 8px 0;
  flex: 1;
}

.ni-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  padding: 14px 16px 4px;
}

.ni {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 1px 8px;
  border-radius: var(--r);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  text-decoration: none;
  transition: background .1s, color .1s;
}

.ni:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ni.act {
  background: var(--a);
  color: #fff;
  font-weight: 500;
}

.ni svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

.nb {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 8px;
}

/* ── User card in sidebar bottom ── */
.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
  transition: background .1s;
}

.sb-user:hover {
  background: rgba(255, 255, 255, 0.07);
}

.sb-user.act {
  background: rgba(255, 255, 255, 0.07);
}

.sb-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--a);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.sb-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sb-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-user-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Sous-menus latéraux (ni-group / sub-nav) ── */
.ni-group .chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.2s;
  opacity: 0.5;
}

.ni-group.open .chevron {
  transform: rotate(180deg);
}

.sub-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding-left: 42px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.ni-group.open .sub-nav {
  display: flex;
}

.ni-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.ni-sub:hover,
.ni-sub.act {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* ========== Main / Content ========== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
  padding-top: 50px;
}

.content {
  padding: 24px 32px;
  flex: 1;
}

/* ========== Fil d'Ariane (breadcrumb) ========== */
.bc-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.bc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--t2);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}

.bc-item:hover {
  color: var(--t1);
}

.bc-item svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  color: var(--t3);
  transition: color .15s;
}

.bc-item:hover svg {
  color: var(--t2);
}

.bc-sep {
  display: flex;
  align-items: center;
  color: var(--t3);
}

.bc-sep svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.bc-cur {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--t1);
  font-weight: 600;
  cursor: default;
}

.bc-cur svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--t1);
}

/* ========== Page header (.ph + .page-head) ========== */
.ph {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ph-l {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ph-title {
  font-family: Geist;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ph-ct {
  font-size: 13.5px;
  color: var(--t3);
}

.ph-ct strong {
  color: var(--t1);
  font-weight: 600;
}

/* Variante page header utilisée par statistiques */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-head h1 {
  font-family: Geist;
  font-size: 22px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.01em;
}

.page-head p {
  font-size: 12.5px;
  color: var(--t3);
  margin-top: 2px;
}

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

/* ========== Boutons ========== */

.btn
/* .btn.primary, */
/* .btn.ghost  */
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ch);
  padding: 0 20px;
  border: 0;
  border-radius: var(--r); /* 11*/
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  color: var(--t2);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn.primary {
  background: linear-gradient(95deg, var(--a), var(--b));
  color: #fff;
  box-shadow: 0 8px 20px rgba(var(--a-rgb), .32);
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(90, 85, 240, .4);
}

.btn.primary:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.btn.ghost {
  color: #3a4490;
  background: #ffffff;
}

.btn.ghost:hover {
  background: rgba(34, 44, 110, .12);
}

.btn.primary svg,
.btn.ghost svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.btn-icon {
  width: 42px;
  padding: 0;
}

.btn-sm {
  height: 34px;
  min-width: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
}

.btn-sm.btn-icon {
  width: 34px;
  padding: 0;
}

.btn-sm svg {
  width: 16px;
  height: 16px;
}

.btn.ghost.danger {
  color: #dc2626;
  background: rgba(220, 38, 38, .09);
}

.btn.ghost.danger:hover {
  background: rgba(220, 38, 38, .16);
}

.btn.ghost.warning {
  color: #b45309;
  background: rgba(245, 158, 11, .13);
}

.btn.ghost.warning:hover {
  background: rgba(245, 158, 11, .22);
}

.btn.ghost.success {
  color: #047857;
  background: rgba(5, 150, 105, .11);
}

.btn.ghost.success:hover {
  background: rgba(5, 150, 105, .18);
}

/* .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ch);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--t2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
} */
/*
.btn:hover {
  background: var(--ps);
} */

/* .btn.primary {
  background: var(--a);
  color: #fff;
  border-color: transparent;
  height: 40px;
  padding: 0 20px;
}

.btn.primary:hover {
  background: #C80062;
  color: #fff;
} */

.btn svg {
  width: 16px;
  height: 16px;
}

/* Bouton download foncé (header statistiques) */
.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--t1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}

.btn-dl svg {
  width: 14px;
  height: 14px;
}

/* Bouton compact carré dans header */
.tbc {
  width: var(--ch);
  height: var(--ch);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: #fff;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.tbc:hover {
  background: var(--ps);
}

.tbc.on {
  background: var(--t1);
  color: #fff;
  border-color: var(--t1);
}

.tbc svg {
  width: 15px;
  height: 15px;
}

/* Bouton "Enregistrer" en tab section header */
.btn-save {
  height: 34px;
  padding: 0 18px;
  background: var(--a);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  opacity: .5;
  cursor: not-allowed;
}

/* Variante "btn-primary" utilisée dans statistiquesGlobales */
.btn-primary {
  background: var(--a);
  border-color: var(--a);
  color: #fff;
}

.btn-primary:hover {
  background: #BE005A;
}

/* ========== Badges ========== */
.pbadge {
  height: 24px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.pbadge.filled {
  background: var(--a);
  color: #fff;
}

.pbadge.outline {
  background: transparent;
  border: 1.5px solid var(--a);
  color: var(--a);
}

.pbadge.gray {
  background: var(--bg);
  color: var(--t2);
  border: 1px solid var(--bd);
}

.pbadge.green {
  background: var(--c-success-bg);
  color: var(--c-success);
  border: 1px solid #A7F3D0;
}

.npill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 7px;
  background: var(--a1);
  color: var(--a);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 500;
}

/* ========== Cartes (.pcard, .fs-block, .fs-card, .scard) ========== */
.pcard {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  padding: 24px 28px;
  margin-bottom: 24px;
  position: relative;
}

.pcard-inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.pav-wrap {
  position: relative;
  flex-shrink: 0;
}

.pav {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--bd);
}

.pav-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.pav-dot.on { background: #10B981; }
.pav-dot.off { background: var(--t3); }

.pinfo {
  flex: 1;
  min-width: 0;
}

.pname-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.pname {
  font-size: 22px;
  font-weight: 600;
  color: var(--t1);
}

.pverif {
  color: #10B981;
}

.pverif svg {
  width: 20px;
  height: 20px;
}

.pbadges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pmeta {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pmeta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--t3);
}

.pmeta-item svg {
  width: 13px;
  height: 13px;
}

.p3dot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--t2);
  border: 1px solid var(--bd);
  background: #fff;
  transition: background .1s;
}

.p3dot:hover {
  background: var(--ps);
}

.p3dot svg {
  width: 16px;
  height: 16px;
}

/* Bloc fs-block "verre dépoli" + carte interne */
.fs-block {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fs-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fs-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #E0F8EF;
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fs-title {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
}

.fs-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 24px 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Settings card */
.scard {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.scard-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.scard-hd::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bg);
}

/* ========== Formulaires ========== */
.form-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: transparent;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.form-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-grid.col-full {
  grid-template-columns: 1fr;
}

.form-grid + .form-grid {
  margin-top: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: #64748B;
  text-align: left;
}

.form-input {
  width: 100%;
  /* height: 38px; */
  height: 44px;
  /* padding: 0 12px; */
  /* font-size: 13.5px; */
  font-family: inherit;
  /* border: 1px solid #E2E8F0; */
  /* border-radius: 8px; */
  /* background: #fff; */
  /* color: #0F172A; */
  outline: none;
  /* transition: all 0.15s; */

      padding: 0 14px;
    border: 1px solid rgba(34, 44, 110, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .9);
    color: #172063;
    font: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-input:focus {
  /* border-color: #3B82F6; */
  border-color: color-mix(in srgb, #5a55f0 55%, #fff);
  /* box-shadow: 0 0 0 3px #EFF6FF; */
  box-shadow: 0 0 0 3px rgba(90, 85, 240, .16);
}

.person-last-name {
  text-transform: uppercase;
}

.person-first-name {
  text-transform: capitalize;
}

.form-input.ro {
  border-color: #E2E8F0;
  color: #0F172A;
  font-weight: 500;
  cursor: text;
}

/* Champ mot de passe avec bouton afficher/masquer */
.password-field {
  position: relative;
}

.password-field .form-input,
.password-field .dash-input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(34, 44, 110, .45);
  cursor: pointer;
  transition: color .15s ease;
}

.password-toggle:hover {
  color: #5a55f0;
}

.password-toggle svg {
  width: 19px;
  height: 19px;
}

.password-toggle .eye-off {
  display: none;
}

.password-field.is-visible .password-toggle .eye-on {
  display: none;
}

.password-field.is-visible .password-toggle .eye-off {
  display: block;
}

/* Indicateur de correspondance des mots de passe */
.password-match {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.password-match::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.password-match.is-match {
  color: #15803d;
}

.password-match.is-match::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.password-match.is-mismatch {
  color: #d4145a;
}

.password-match.is-mismatch::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4145a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.form-input.is-match,
.dash-input.is-match {
  border-color: color-mix(in srgb, #15803d 55%, #fff);
}

.form-input.is-match:focus,
.dash-input.is-match:focus {
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .16);
}

.form-input.is-mismatch,
.dash-input.is-mismatch {
  border-color: color-mix(in srgb, #d4145a 55%, #fff);
}

.form-input.is-mismatch:focus,
.dash-input.is-mismatch:focus {
  box-shadow: 0 0 0 3px rgba(212, 20, 90, .16);
}

.form-select {
  width: 100%;
  height: 38px;
  padding: 0 32px 0 12px;
  font-size: 13.5px;
  font-family: inherit;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230F172A'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  color: #0F172A;
  cursor: default;
  outline: none;
}

.form-select:disabled {
  background-color: #fff;
  color: #0F172A;
  font-weight: 500;
}

.form-check-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.form-check-row label.lbl {
  width: 155px;
  flex-shrink: 0;
  font-size: 13.5px;
  color: var(--t2);
  text-align: right;
}

.form-check-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--a);
  cursor: default;
}

/* Champ libre fg */
.fg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.fg label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
}

.fg .req,
.req {
  color: var(--a);
  margin-left: 3px;
}

.fg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

/* Card de saisie option ("form-card-check") */
.form-card-check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  background: #fff;
  position: relative;
}

.form-card-check:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.form-card-check input {
  display: none;
}

.form-card-check .check-circle {
  width: 22px;
  height: 22px;
  border: 1.5px solid #D1D5DB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: #fff;
}

.form-card-check.active {
  border-color: var(--a);
  background: #FFF1F7;
}

.form-card-check.active .check-circle {
  border-color: var(--a);
  border-width: 2px;
}

.form-card-check.active .check-circle::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--a);
  border-radius: 50%;
}

.form-card-check .check-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
}

/* Toggle Switch */
.form-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.form-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D1D5DB;
  transition: .3s;
  border-radius: 34px;
}

.form-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-switch input:checked + .slider {
  background-color: var(--a);
}

.form-switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* Side form + pwd-card */
.side-form {
  margin-top: 16px;
  background: var(--ps);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 16px;
}

.side-form .form-field {
  gap: 12px;
}

.side-form .form-field label {
  width: 110px;
}

.side-form .form-input,
.side-form .form-select {
  min-width: 0;
}

.pwd-card {
  background: var(--ps);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwd-info { flex: 1; }
.pwd-info h4 { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.pwd-info p { font-size: 12px; color: var(--t3); margin-top: 2px; }

.pwd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: #fff;
  color: var(--t2);
  cursor: pointer;
  white-space: nowrap;
}

.pwd-btn:hover { background: var(--ps); }
.pwd-btn svg { width: 14px; height: 14px; }

.form-divider { display: none; }

.set-nav-item {
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
  border-radius: var(--r);
  cursor: pointer;
  transition: all 0.15s;
}

.set-nav-item:hover {
  background: var(--ps);
  color: var(--t1);
}

.set-nav-item.act {
  background: var(--a1);
  color: var(--a);
  font-weight: 600;
}

/* Upload photo */
.photo-up {
  width: 130px;
  height: 130px;
  border-radius: var(--r);
  background: var(--ps);
  border: 2px dashed var(--bd);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .15s;
  margin: 0 auto;
  color: var(--t3);
}

.photo-up:hover {
  border-color: var(--a);
  color: var(--a);
  background: var(--a1);
}

/* Menu drag items (settings) */
.m-drag-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  margin-bottom: 8px;
  cursor: grab;
  font-size: 14px;
  color: var(--t1);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: background 0.15s;
}

.m-drag-item:hover { background: #F8FAFC; }
.m-drag-item:active { cursor: grabbing; }
.m-drag-item.dg { opacity: 0.4; background: #F1F5F9; }

/* ========== Tableau (table card + thead + tbody + colonnes) ========== */
.tcard {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  overflow: visible;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.tw {
  overflow: hidden;
  border-radius: var(--rl);
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

thead tr {
  background: var(--ps);
}

thead th {
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t2);
  text-align: left;
  white-space: nowrap;
  position: relative;
  user-select: none;
  letter-spacing: .01em;
}

#thr th {
  padding-bottom: 6px;
  border-bottom: none;
}

#thr-filter th {
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}

.th-search {
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
  width: 100%;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--t1);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}

.th-search:focus {
  border-color: var(--a);
  box-shadow: 0 0 0 2px var(--a1);
}

.th-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center center;
  background-size: 100%;
  cursor: pointer;
  opacity: 0.7;
}

.th-search::-webkit-search-cancel-button:hover { opacity: 1; }

select.th-search {
  cursor: pointer;
  padding-right: 24px;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E") no-repeat right 8px center;
}

thead th.srt { cursor: pointer; }
thead th.srt:hover { color: var(--t1); }

.rez {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rez::after {
  content: '';
  width: 2px;
  height: 40%;
  background: var(--bd);
  border-radius: 2px;
  transition: background .15s, height .15s;
}

.rez:hover::after,
.rez.rz::after {
  background: var(--a);
  height: 65%;
}

.gsth {
  width: 44px;
  text-align: center !important;
  padding: 0 !important;
}

.gbtn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--t3);
  background: transparent;
  border: none;
  margin: 0 auto;
  transition: all .12s;
}

.gbtn:hover,
.gbtn.on {
  background: var(--a1);
  color: var(--a);
}

.gbtn svg { width: 20px; height: 20px; }

tbody tr {
  border-bottom: 1px solid var(--bg);
  transition: background .08s;
  cursor: pointer;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: #FAFBFD; }

tbody tr:hover {
  background: var(--a1) !important;
}

tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--a);
}

tbody tr:active {
  background: var(--a2) !important;
}

td {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--t1);
  vertical-align: middle;
}

td.catd {
  width: 44px;
  padding: 0;
  text-align: center;
  position: relative;
}

/* Mode compact */
body.cmp .ava { display: none; }
body.cmp .nsub { display: none; }
body.cmp td { padding: 5px 14px; }

.cn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--bd);
}

.nmain { font-size: 13px; font-weight: 500; }
.nsub { font-size: 11.5px; color: var(--t3); margin-top: 2px; }

.stb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
}

.stdon { width: 7px; height: 7px; border-radius: 50%; background: #10B981; flex-shrink: 0; }
.stdoff { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); flex-shrink: 0; }
.ston { color: #059669; }
.stoff { color: var(--t3); }

.status-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.status-switch-label {
  font-size: 12.5px;
  font-weight: 500;
}

.status-switch.is-readonly {
  opacity: .55;
}

.status-switch.is-readonly .form-switch,
.status-switch.is-readonly .form-switch .slider {
  cursor: not-allowed;
}

.cv {
  color: var(--t2);
  font-size: 13px;
}

.mwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mwrap:hover .mtip { display: block; }

.mtip {
  display: none;
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  background: var(--t1);
  border-radius: 9px;
  padding: 9px 13px;
  min-width: 180px;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  pointer-events: none;
  white-space: nowrap;
}

.mtip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: var(--t1);
}

.mtit {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 7px;
}

.mit {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: 12px;
  color: #fff;
}

.mdt {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a);
  flex-shrink: 0;
}

.dc {
  font-size: 12.5px;
  color: var(--t3);
  white-space: nowrap;
}

.mcel {
  font-family: monospace;
  font-size: 11.5px;
  color: var(--t3);
  background: var(--ps);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Row dot-menu */
.rdots {
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--t2);
  border: 1px solid var(--bd);
  background: #fff;
  margin: 0 auto;
}

.rdots:hover { background: var(--ps); }
.rdots svg { width: 14px; height: 14px; }

tbody tr:hover .rdots { display: flex; }

.rmenu {
  display: none;
  position: absolute;
  right: 4px;
  top: 100%;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  min-width: 220px;
  z-index: 400;
  overflow: hidden;
  margin-top: 2px;
}

.rmenu.oo { display: block; }

.rmi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--t1);
  cursor: pointer;
  transition: background .08s;
}

.rmi:hover { background: var(--ps); }

.rmi svg {
  width: 17px;
  height: 17px;
  color: var(--t2);
  flex-shrink: 0;
}

.rmi.dn { color: #DC2626; }
.rmi.dn svg { color: #DC2626; }

.rmdiv {
  height: 1px;
  background: var(--bg);
  margin: 3px 0;
}

/* Panneau colonnes (.cpanel) */
.cpanel {
  display: none;
  position: absolute;
  top: 42px;
  right: 0;
  width: 248px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .11);
  z-index: 500;
  overflow: hidden;
}

.cpanel.oo { display: block; }

.cph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--bg);
}

.cpt {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cprst {
  font-size: 12px;
  color: var(--a);
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: none;
  font-family: inherit;
}

.cprst:hover { text-decoration: underline; }

.cplist { padding: 4px 0 8px; }

.crow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: grab;
  transition: background .08s;
  user-select: none;
}

.crow:hover { background: var(--ps); }
.crow.dg { background: var(--a1); opacity: .7; }

.cdg svg {
  width: 13px;
  height: 13px;
  color: var(--bd);
}

.cck {
  width: 14px;
  height: 14px;
  accent-color: var(--a);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.clbl {
  font-size: 13px;
  flex: 1;
}

.crow.lk .cdg svg { opacity: .3; }
.crow.lk .cck { opacity: .4; cursor: not-allowed; }

/* Footer tableau + pagination */
.tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--bg);
  background: var(--ps);
  flex-wrap: wrap;
  gap: 8px;
}

.fi {
  font-size: 12.5px;
  color: var(--t3);
}

.pgn {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pb {
  height: 28px;
  min-width: 28px;
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s;
}

.pb:hover { background: var(--ps); }
.pb.on { background: var(--t1); color: #fff; border-color: var(--t1); }
.pb:disabled { opacity: .4; cursor: not-allowed; }

.lpp-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
}

.lpp-lbl {
  font-size: 12.5px;
  color: var(--t3);
}

.lpp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s;
}

.lpp-btn:hover { background: var(--ps); }
.lpp-btn svg { width: 10px; height: 10px; }

.lpp-drop {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .1);
  min-width: 160px;
  z-index: 300;
  padding: 4px 0;
}

.lpp-drop.oo { display: block; }

.lpp-opt {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--t1);
  cursor: pointer;
  transition: background .08s;
  gap: 8px;
}

.lpp-opt:hover { background: var(--ps); }
.lpp-opt.on { color: var(--a); font-weight: 500; }

.lpp-opt .lpp-bar {
  width: 3px;
  height: 16px;
  background: var(--a);
  border-radius: 2px;
  opacity: 0;
  flex-shrink: 0;
}

.lpp-opt.on .lpp-bar { opacity: 1; }

/* Onglets de page détail */
.tabs-nav {
  background: #fff;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
  white-space: nowrap;
}

.tabs-nav::-webkit-scrollbar { display: none; }

.tab-list { display: flex; }

.tl-item {
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--t2);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.tl-item:hover { color: var(--t1); }
.tl-item.act {
  color: var(--a);
  font-weight: 600;
  border-bottom-color: var(--a);
}

.tab-content {
  background: transparent;
  padding: 0;
}

.tab-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--bg);
}

.tab-section-ttl {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t2);
}

/* Petit tableau réutilisable d'onglet */
.tab-table-wrap { padding: 0; }

.tab-table {
  width: 100%;
  border-collapse: collapse;
}

.tab-table th {
  padding: 10px 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t2);
  text-align: left;
  background: var(--ps);
  border-bottom: 1px solid var(--bd);
}

.tab-table td {
  padding: 12px 20px;
  font-size: 13.5px;
  color: var(--t1);
  border-bottom: 1px solid var(--bg);
}

.tab-table tr:last-child td { border-bottom: none; }
.tab-table tr:hover td { background: var(--a1); }

/* ========== Onglet "Niveau d'accès" (cartes acc-card) ========== */
.access-grid {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.acc-card {
  background: var(--ps);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 16px;
}

.acc-card h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.acc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd);
}

.acc-row:last-child { border-bottom: none; }

.acc-lbl { font-size: 13.5px; color: var(--t2); }
.acc-val { font-size: 13.5px; color: var(--t1); font-weight: 500; }

.perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd);
}

.perm-row:last-child { border-bottom: none; }

.perm-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  position: relative;
  cursor: default;
  flex-shrink: 0;
}

.perm-toggle.on { background: var(--a); }
.perm-toggle.off { background: var(--bd); }

.perm-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}

.perm-toggle.on::after { left: 18px; }
.perm-toggle.off::after { left: 2px; }

.perm-lbl {
  flex: 1;
  font-size: 13.5px;
  color: var(--t1);
}

/* Empty state inscription */
.ins-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--t3);
}

.ins-empty svg {
  width: 40px;
  height: 40px;
  color: var(--bd);
  margin: 0 auto 10px;
  display: block;
}

/* ========== Widgets statistiques (.w + dropdown w-dd-*) ========== */
.w {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.w-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}

.w-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.w-ico svg {
  width: 15px;
  height: 15px;
}

.w-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
  flex: 1;
}

.w-info {
  color: var(--t3);
  display: flex;
  align-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.w-info svg {
  width: 15px;
  height: 15px;
}

.w-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.w-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  background: #2563EB;
  color: #fff;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

.w-ctrl-btn,
.w-filter-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--t2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.w-ctrl-btn:hover,
.w-filter-btn:hover {
  background: var(--ps);
}

.w-ctrl-btn svg,
.w-filter-btn svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.w-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bd);
}

.w-filter-sep { margin-left: auto; }

.w-dots {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: linear-gradient(0deg, #fbfbfb 0, #fff 100%);
  box-shadow: 0 1px 3px 0 #0000000a, inset 0 0 0 1px #efefef !important;
  cursor: pointer;
  color: var(--t2);
  transition: background 0.2s;
}

.w-dots:hover { background: #F8FAFC; }
.w-dots svg { width: 16px; height: 16px; }

/* ── Dropdown widgets (w-dd-*) ── */
.w-dd-wrap {
  position: relative;
  display: inline-block;
}

.w-dd-btn {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(0deg, #fbfbfb 0, #fff 100%);
  box-shadow: 0 1px 3px 0 #0000000a, inset 0 0 0 1px #efefef !important;
  color: #334155;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
  white-space: nowrap;
}

.w-dd-btn:hover { background: #F8FAFC; }

.w-dd-btn svg.chev {
  width: 14px;
  height: 14px;
  color: #475569;
  transition: transform 0.2s ease;
}

.w-dd-wrap.open .w-dd-btn svg.chev {
  transform: rotate(180deg);
}

.w-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 160px;
  z-index: 200;
  padding: 6px 0;
  flex-direction: column;
}

.w-dd-wrap.open .w-dd-menu {
  display: flex;
}

.w-dd-item {
  padding: 8px 16px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
}

.w-dd-item:hover { background: #F8FAFC; }

.w-dd-item.active {
  background: #EFF6FF;
  color: #334155;
}

.w-dd-item input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: var(--a);
  flex-shrink: 0;
}

/* ── Empty state widget ── */
.w-body {
  flex: 1;
  min-height: 280px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
}

.empty-icon { color: #D1D5DB; }

.empty-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  opacity: 0.22;
}

.empty-bar {
  background: var(--t3);
  border-radius: 3px 3px 0 0;
  width: 10px;
}

.empty-msg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--t3);
}

.empty-msg svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ========== Icônes (.icon-box) ========== */
.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.icon-box svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  color: var(--t2);
}

/* ========== Custom Dropdown System (.cdd-*) ========== */
.cdd-wrap {
  position: relative;
}

.cdd-wrap.cdd-block {
  display: block;
  width: 100%;
}

.cdd-wrap:not(.cdd-block) {
  display: inline-flex;
  vertical-align: middle;
}

.cdd-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px 0 12px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: linear-gradient(0deg, #fbfbfb 0%, #fff 100%);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .04), inset 0 0 1px #efefef;
  color: var(--t1);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
  text-align: left;
}

.cdd-btn:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .07), inset 0 0 1px #efefef;
}

.cdd-btn.open {
  border-color: var(--a);
  box-shadow: 0 0 0 2px var(--a1), inset 0 0 1px #efefef;
}

.cdd-btn.ro {
  cursor: default;
  pointer-events: none;
  opacity: .8;
  background: linear-gradient(0deg, #f7f8fa 0%, #fafbfc 100%);
}

.cdd-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--t1);
}

.cdd-chevron {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform .2s;
  color: var(--t3);
}

.cdd-btn.open .cdd-chevron {
  transform: rotate(180deg);
}

.cdd-list {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
  z-index: 700;
  padding: 4px 0;
}

.cdd-list.oo { display: block; }
.cdd-list.up {
  top: auto;
  bottom: calc(100% + 5px);
}

.cdd-opt {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--t1);
  cursor: pointer;
  transition: background .08s;
  white-space: nowrap;
}

.cdd-opt:hover { background: var(--ps); }

.cdd-opt.on {
  color: var(--a);
  font-weight: 500;
  background: var(--a1);
}

.cdd-sm .cdd-btn {
  height: 30px;
  font-size: 12.5px;
  padding: 0 7px 0 9px;
  border-radius: 6px;
}

.cdd-sm .cdd-chevron {
  width: 9px;
  height: 9px;
}

.cdd-sm .cdd-opt {
  padding: 7px 10px;
  font-size: 13px;
}

.cdd-minimal .cdd-btn {
  height: 28px;
  font-size: 11.5px;
  padding: 0 8px 0 10px;
  border-radius: 6px;
  color: var(--t2);
}

.cdd-minimal .cdd-chevron {
  width: 9px;
  height: 9px;
}

.cdd-minimal .cdd-opt {
  padding: 7px 12px;
  font-size: 13px;
}

form .cdd-minimal .cdd-btn {
    height: 38px;
    font-size: 13.5px;
}

/* =====================================================================
   PAGE — TABLEAUX (apprenants : liste + détail + settings)
   ===================================================================== */
/* Vues principales tableaux : list-view, detail-view, settings-view */
#detail-view { display: none; }
#settings-view { display: none; }

/* =====================================================================
   PAGE — DROITS (modifier les droits : maze style + rights editor)
   ===================================================================== */
.maze-pcard {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  gap: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.maze-left {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.maze-step {
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 12px;
  border-radius: 12px;
}

.maze-step .num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  transition: all 0.2s;
}

.maze-step .lbl {
  font-size: 15px;
  font-weight: 600;
  color: var(--t3);
  transition: all 0.2s;
}

.maze-step:hover {
  background: var(--ps);
}

.maze-step.act .num {
  background: var(--a1);
  border-color: var(--a);
  color: var(--a);
}

.maze-step.act .lbl {
  color: var(--a);
  font-weight: 700;
}

.maze-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.maze-intro {
  max-width: 400px;
}

.maze-intro h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 12px;
}

.maze-intro p {
  font-size: 14.5px;
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 24px;
}

.maze-btn {
  height: 44px;
  padding: 0 24px;
  background: #2563EB;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.maze-collage {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 350px;
  background-size: cover;
  background-position: left center;
  border-left: 1px solid var(--bd);
  opacity: 0.9;
}

.rights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 20px;
}

.col-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

.acc-block {
  margin-bottom: 12px;
}

.acc-head {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.acc-head:hover { background: var(--ps); }

.acc-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}

.acc-body {
  display: none;
  padding: 10px 18px;
  border: 1px solid var(--bd);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #fff;
}

.acc-head.open + .acc-body { display: block; }
.acc-head.open { border-radius: 10px 10px 0 0; }

.rt-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.rt-label {
  flex: 1;
  font-size: 13.5px;
  color: var(--t1);
}

.rt-ops {
  display: flex;
  gap: 20px;
}

.rt-op {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
}

.rt-op input {
  width: 16px;
  height: 16px;
  accent-color: var(--a);
  cursor: pointer;
}

.op-lbl {
  font-size: 8px;
  font-weight: 800;
  color: var(--t3);
  margin-top: 2px;
}

.nest-acc {
  margin-top: 10px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  overflow: hidden;
}

.nest-head {
  padding: 8px 12px;
  background: #f8fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}

.nest-body {
  display: none;
  padding: 8px 12px;
  background: #fff;
}

.nest-head.open + .nest-body { display: block; }

/* =====================================================================
   PAGE — STATISTIQUES (statistiques pré-formatées : widgets, charts)
   ===================================================================== */
.wgrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.wfull { grid-column: span 2; }

.wrow3 {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* ── Lemlist-style bar chart (widget body) ── */
.lemlist-w-body {
  padding: 24px 24px 16px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 300px;
}

.ll-chart {
  display: flex;
  flex: 1;
  position: relative;
}

.ll-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 16px;
  width: 45px;
  color: #6B7280;
  font-size: 12px;
  z-index: 2;
}

.ll-chart-area {
  flex: 1;
  position: relative;
}

.ll-grid {
  position: absolute;
  top: 7px;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 0;
}

.ll-grid-line {
  width: 100%;
  border-top: 1px dashed #E5E7EB;
}

.ll-bars-container {
  position: absolute;
  top: 7px;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  z-index: 1;
}

.ll-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.ll-bar {
  width: 10px;
  border-radius: 999px 999px 0 0;
  transition: height 0.4s ease;
}

.ll-x-axis {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}

.ll-x-label {
  color: #6B7280;
  font-size: 12px;
  text-align: center;
}

/* ── Line chart (Activité par heure) ── */
.w-body-line {
  padding: 24px 24px 32px 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lc-container {
  position: relative;
  width: 100%;
  height: 240px;
  min-height: 240px;
}

.lc-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.lc-grid-line {
  width: 100%;
  border-top: 1px dashed #E2E8F0;
}

.lc-grid-line:last-child {
  border-top: 1px solid #CBD5E1;
}

.lc-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 24px);
  overflow: visible;
  z-index: 10;
}

.lc-x-axis {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #64748B;
}

/* ── Horizontal bars (Par sous-thème) ── */
.hbar-body {
  padding: 20px 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
  justify-content: center;
  min-height: 280px;
}

.hbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hbar-label {
  width: 148px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: #4B5563;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar-track {
  flex: 1;
  height: 7px;
  background: #F0F1F3;
  border-radius: 999px;
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  border-radius: 999px;
}

.hbar-val {
  width: 48px;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
  text-align: right;
}

/* ── Donut chart ── */
.donut-body {
  padding: 16px 20px;
  background: #fff;
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 280px;
}

.donut-svg-wrap {
  flex-shrink: 0;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.donut-li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}

.donut-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-name {
  flex: 1;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.donut-pct {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  background: #F3F4F6;
  padding: 1px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* ── Date range picker ── */
.dr-wrap { position: relative; }

.dr-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(0deg, #fbfbfb 0, #fff 100%);
  box-shadow: 0 1px 3px 0 #0000000a, inset 0 0 0 1px #efefef !important;
  font-size: 13px;
  color: var(--t1);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 500;
}

.dr-trigger:hover { background: #F8FAFC; }

.dr-trigger .dr-ico {
  color: var(--a);
  width: 15px;
  height: 15px;
}

.dr-trigger .dr-chev {
  color: var(--t3);
  width: 12px;
  height: 12px;
}

.dr-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  z-index: 500;
  width: 620px;
}

.dr-panel.open {
  display: flex;
  flex-direction: column;
}

.dr-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd);
}

.dr-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dr-input {
  padding: 6px 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--t1);
  width: 148px;
  outline: none;
}

.dr-input:focus { border-color: var(--a); }

.dr-arr {
  color: var(--t3);
  font-size: 16px;
}

.dr-content {
  display: flex;
  min-height: 300px;
}

.dr-cal {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--bd);
}

/* =====================================================================
   ========== APOR HUB - Styles spécifiques (login, flash, tuiles) =====
   ===================================================================== */

/* ─── Sidebar : appliquer l'image de fond + couleurs ──── */
.sidebar {
  background-color: var(--sb-dark);
  background-image: var(--sb-bg-img, none);
  background-size: cover;
  background-position: center;
}

/* ─── Flash messages ─── */
.flash {
  padding: 12px 16px;
  border-radius: var(--r);
  margin-bottom: 16px;
  border: 1px solid;
  font-size: 13.5px;
  font-weight: 500;
}
.flash-success { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.flash-error,
.flash-danger { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.flash-info { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.flash-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.flash-reset_password_error { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }

/* ─── Pages d'authentification (login, reset password) ─── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: linear-gradient(135deg, var(--a1) 0%, #fff 50%, var(--ps) 100%); */
  padding: 24px;
  overflow: auto;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 36px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.auth-logo .logo-square {
  width: 36px;
  height: 36px;
  background: var(--a);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}

.auth-logo .logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
}

.auth-logo .logo-text .accent {
  color: var(--a);
}

.auth-logo .logo-img {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
}

.auth-card h1 {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin: 16px 0 6px;
  color: var(--t1);
}

.auth-subtitle {
  text-align: center;
  color: var(--t3);
  font-size: 13.5px;
  margin-bottom: 24px;
}

.auth-card .form-field { margin-bottom: 16px; }

.auth-card .btn.primary {
  width: 100%;
  height: 44px;
  font-size: 14.5px;
}

.auth-links {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
}

.auth-links a {
  color: var(--a);
  text-decoration: none;
  font-weight: 500;
}

.auth-links a:hover { text-decoration: underline; }

/* ─── Page-header générique (pour réutiliser .ph hors maquette) ─── */
.ph-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Dashboard utilisateur : grille de tuiles ─── */
.dash-section-title {
    margin: 30px 0 10px;
}

.dash-greeting {
  margin-bottom: 24px;
}

.dash-greeting h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--t1);
  margin: 0;
}

.dash-greeting p {
  color: var(--t3);
  margin: 4px 0 0;
  font-size: 14px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.tile {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 22px;
  text-decoration: none;
  color: var(--t1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  transition: var(--trans);
}

.tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tile-color, var(--a));
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
  border-color: var(--tile-color, var(--a));
}

.tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--tile-color, var(--a));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.tile-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.tile-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--t1);
  margin-top: 6px;
}

.tile-desc {
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.4;
}

.tile-badges {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.tile-badges .pbadge {
  height: 20px;
  padding: 0 8px;
  font-size: 10px;
}

.tile-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  color: var(--t3);
  background: #fff;
  border: 1px dashed var(--bd);
  border-radius: var(--rl);
}

/* ─── Admin layout : sidebar interne (legacy) ─── */
.admin-sublayout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}

.admin-sublayout aside.card {
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 24px;
}

/* ─── Tableaux génériques (héritent de .tcard/.tw du design) ─── */
.actions-cell {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.actions-cell form { display: inline; }

tr[data-modal-open] {
  cursor: pointer;
}

/* ─── Toolbar de page (recherche, etc.) ─── */
.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar .form-input { max-width: 360px; }

/* ─── Stat cards ─── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.stat-card .stat-label {
  color: var(--t3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--t1);
}

.stat-card .stat-sub {
  color: var(--t3);
  font-size: 12.5px;
  margin-top: 2px;
}

/* ─── Form helpers ─── */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-half {
  max-width: 50%;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

.form-checkboxes-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* ─── Vertical spacing between consecutive form rows in a card ─── */
.pcard > .form-field + .form-field,
.pcard > .form-field + .form-grid-2,
.pcard > .form-field + .form-grid-3,
.pcard > .form-field + .form-half,
.pcard > .form-grid-2 + .form-field,
.pcard > .form-grid-2 + .form-half,
.pcard > .form-grid-2 + .form-grid-2,
.pcard > .form-grid-3 + .form-field,
.pcard > .form-half + .form-field,
.pcard > .form-field + .form-checkboxes-row,
.pcard > .form-grid-2 + .form-checkboxes-row,
.pcard > .form-half + .form-checkboxes-row,
.pcard > .form-checkboxes-row + .form-field,
.pcard > .form-checkboxes-row + .form-grid-2 {
  margin-top: 16px;
}

.form-section-divider {
  height: 1px;
  /* background: var(--bd); */
  background: none;
  margin: 28px 0 24px;
  border: none;
}

/* ─── Boutons spéciaux (warning, danger) en plus de .btn / .btn.primary ─── */
.btn.danger {
  background: #DC2626;
  color: #fff;
  border-color: #DC2626;
}

.btn.danger:hover { background: #B91C1C; }

.btn.warning {
  background: #F59E0B;
  color: #fff;
  border-color: #F59E0B;
}

.btn.warning:hover { background: #D97706; }

.btn.sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.btn.icon {
  background: transparent;
  border-color: transparent;
  padding: 0;
  width: 30px;
  justify-content: center;
  color: var(--t3);
}

.btn.icon:hover {
  background: var(--ps);
  border-color: transparent;
}

.btn.icon.danger {
  background: transparent;
  border-color: transparent;
  color: #DC2626;
}

.btn.icon.danger:hover {
  background: #FEE2E2;
  border-color: transparent;
}

.btn.icon.warning {
  background: transparent;
  border-color: transparent;
  color: #F59E0B;
}

.btn.icon.warning:hover {
  background: #FEF3C7;
  border-color: transparent;
}

.btn.icon.success {
  background: transparent;
  border-color: transparent;
  color: #16A34A;
}

.btn.icon.success:hover {
  background: #DCFCE7;
  border-color: transparent;
}

/* ─── Tile : option couleur via style inline ─── */
.tile[style*="--tile-color"] {
  /* La couleur est appliquée via la CSS var --tile-color injectée par l'attribut style */
}

/* ─── Dashboard APOR dédié ─── */
.dashboard-page {
  background: #eef4ff;
}

.dashboard-page .topbar,
.dashboard-page .layout {
  display: none;
}

.dashboard-shell {
  min-height: 100vh;
  width: 100%;
  overflow: auto;
  padding: 25px 40px;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 88% 18%, rgba(216, 232, 255, .9) 0, rgba(216, 232, 255, 0) 32%),
    radial-gradient(circle at 88% 86%, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, 0) 20%),
    linear-gradient(135deg, #fff9fc 0%, #f3f7ff 44%, #eaf3ff 100%);
  color: #11154d;
}

.dashboard-shell [hidden] {
  display: none !important;
}

.dashboard-header {
  display: grid;
  grid-template-columns: minmax(310px, 1fr) minmax(360px, 590px) minmax(250px, 1fr);
  align-items: center;
  gap: 28px;
  margin-bottom: 20px;
}

.dashboard-brand {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  color: #11154d;
  text-decoration: none;
  min-width: 0;
}

.dashboard-brand-mark {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  background: linear-gradient(95deg, #ff5a36 0%, #ff3d6e 52%, #d62bd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff4f40;
}

.dashboard-brand-img {
  height: 42px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.dashboard-brand-line {
  color: #1d2b7a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-brand-line::before {
  /* content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: #f72585; */
}

.dashboard-search {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border: 1px solid rgba(20, 28, 98, .12);
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 50px rgba(51, 71, 140, .08), inset 0 1px 0 rgba(255, 255, 255, .85);
  backdrop-filter: blur(16px);
}

.dashboard-search-icon {
  width: 22px;
  height: 22px;
  color: #0b2499;
  flex: 0 0 auto;
}

.dashboard-search-icon svg {
  width: 100%;
  height: 100%;
}

.dashboard-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172063;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}

.dashboard-search input::placeholder {
  color: #2f3c86;
  opacity: .92;
}

.dashboard-user {
  position: relative;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dashboard-user-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 5px 8px 5px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.dashboard-user-trigger:hover,
.dashboard-user-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 26px rgba(34, 44, 110, .12);
}

.dashboard-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #182061, #ff6c4a);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(20, 28, 98, .18);
  flex: 0 0 auto;
}

.dashboard-user-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-user-text strong,
.dashboard-user-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-user-text strong {
  color: #0b1459;
  font-size: 13.5px;
  font-weight: 800;
}

.dashboard-user-text span {
  color: #273284;
  font-size: 13px;
  font-weight: 500;
}

.dashboard-user-caret {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #5b67a8;
  flex: 0 0 auto;
}

.dashboard-user-caret svg {
  width: 16px;
  height: 16px;
}

.dashboard-user-caret {
  transition: transform .18s ease;
}

.dashboard-user-trigger[aria-expanded="true"] .dashboard-user-caret {
  transform: rotate(180deg);
}

.dashboard-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 246px;
  padding: 8px;
  border: 1px solid rgba(34, 44, 110, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 26px 60px rgba(34, 44, 110, .22);
  backdrop-filter: blur(18px);
}

.dashboard-user-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #1b2566;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}

.dashboard-user-item:hover {
  background: rgba(90, 85, 240, .1);
  color: #3a2cff;
}

.dashboard-user-item-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #5b67a8;
  transition: color .14s ease;
}

.dashboard-user-item:hover .dashboard-user-item-icon {
  color: inherit;
}

.dashboard-user-item-icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-user-item-danger {
  color: #d4145a;
}

.dashboard-user-item-danger:hover {
  background: rgba(212, 20, 90, .1);
  color: #d4145a;
}

.dashboard-user-sep {
  height: 1px;
  margin: 6px 8px;
  background: rgba(34, 44, 110, .1);
}

/* Bouton-déclencheur dans le menu compte (mêmes styles que les liens) */
button.dashboard-user-item {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ─── Modal dashboard (réutilisable) ─── */
.dash-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.dash-modal[hidden] {
  display: none;
}

.dash-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 21, 77, .42);
  backdrop-filter: blur(4px);
}

.dash-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 26px 26px 24px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 40px 90px rgba(34, 44, 110, .32);
  animation: dash-modal-in .18s ease;
}

.dash-modal-dialog:has(.dashboard-user-form-modal) {
  max-width: clamp(980px, 90%, calc(100vw - 32px));
}

@keyframes dash-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.dash-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dash-modal-head h2 {
  margin: 0;
  color: #101657;
  font-size: 18px;
  font-weight: 850;
}

.dash-modal-close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(34, 44, 110, .06);
  color: #3a4490;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.dash-modal-close:hover {
  background: rgba(212, 20, 90, .12);
  color: #d4145a;
}

.dash-modal-close svg {
  width: 16px;
  height: 16px;
}

.dash-modal-loading,
.dash-modal-error {
  padding: 24px 0;
  text-align: center;
  color: #5a6694;
  font-size: 14px;
}

/* ─── Formulaire dashboard (dans modal) ─── */
.dash-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-field-label {
  color: #1b2566;
  font-size: 13px;
  font-weight: 700;
}

.dash-field-hint {
  margin: 0;
  color: #5a6694;
  font-size: 12px;
}

.dash-file {
  height: auto;
  padding: 10px 12px;
  font-size: 13px;
}

.dash-file::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: rgba(90, 85, 240, .12);
  color: #4b46e0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.dash-avatar-form {
  align-items: center;
}

.dash-avatar-editor {
  position: relative;
  width: 168px;
  margin: 2px auto 0;
}

.dash-avatar-dropzone {
  position: relative;
  display: flex;
  min-height: 156px;
  padding: 14px 12px 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px dashed rgba(90, 85, 240, .42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(90, 85, 240, .07), rgba(255, 255, 255, .95));
  color: #3a4490;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dash-avatar-dropzone:hover,
.dash-avatar-dropzone:focus-within,
.dash-avatar-dropzone.is-dragover {
  border-color: #5a55f0;
  background: linear-gradient(180deg, rgba(90, 85, 240, .12), #fff);
  box-shadow: 0 0 0 4px rgba(90, 85, 240, .11);
}

.dash-avatar-dropzone.is-dragover {
  transform: translateY(-1px);
}

.dash-avatar-preview {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #182061, #ff6c4a);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(20, 28, 98, .22);
}

.dash-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-avatar-dropzone-text {
  color: #2d3a86;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.dash-avatar-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dash-avatar-hint {
  width: 100%;
  text-align: center;
}

.dash-avatar-delete {
  position: absolute;
  z-index: 4;
  top: 71px;
  right: 22px;
  margin: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d4145a;
  color: #fff;
  box-shadow: 0 8px 20px rgba(212, 20, 90, .32);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.dash-avatar-delete:hover {
  background: #b70f4c;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(212, 20, 90, .38);
}

.dash-avatar-delete svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-avatar-img {
  padding: 0;
  overflow: hidden;
  background: none;
}

.dashboard-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(34, 44, 110, .16);
  border-radius: 11px;
  background: rgba(255, 255, 255, .9);
  color: #172063;
  font: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dash-input:focus {
  outline: 0;
  border-color: color-mix(in srgb, #5a55f0 55%, #fff);
  box-shadow: 0 0 0 3px rgba(90, 85, 240, .16);
}

.dash-form .dash-field ul,
.dash-form > ul {
  margin: 2px 0 0;
  padding-left: 16px;
  color: #d4145a;
  font-size: 12.5px;
  font-weight: 600;
}

.dash-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}


/* ─── Toast ─── */
.dash-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 300;
  transform: translate(-50%, 16px);
  padding: 13px 22px;
  border-radius: 12px;
  background: #11154d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 20px 44px rgba(17, 21, 77, .38);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.dash-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dashboard-logout {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0b2499;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.dashboard-logout:hover {
  background: rgba(255, 255, 255, .78);
  color: #e2006e;
}

.dashboard-logout svg {
  width: 19px;
  height: 19px;
}

.dashboard-main {
  /* max-width: 1780px; */
  margin: 0 auto;
}

.dashboard-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 32px;
  align-items: start;
}

.dashboard-content-full {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-admin-rail {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-admin-rail .dashboard-admin-panel {
  margin-top: 0;
}

.dashboard-sections {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.dashboard-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
}

.dashboard-section-heading h2,
.dashboard-admin-heading h2 {
  margin: 0;
  color: #101657;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.1;
}

.dashboard-section-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d21ff, #ef30ff);
  box-shadow: 0 6px 16px rgba(109, 33, 255, .35);
}

.dashboard-section-ai_pedagogy .dashboard-section-dot {
  border-radius: 5px;
  background: linear-gradient(135deg, #7c2cff, #4f8dff);
}

.dashboard-section-partners .dashboard-section-dot {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(135deg, #8d39ff, #16b987);
  transform: rotate(45deg);
}

.dashboard-section-glyph {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
    justify-content: center;
    align-content: center;
  /* display: none; */
}

.dashboard-section-glyph svg {
  width: 100%;
  height: 100%;
}

.dashboard-section-glyph-ai {
  color: #14b8a0;
  filter: drop-shadow(0 4px 9px rgba(20, 184, 160, .4));
}

.dashboard-section-glyph-partners {
  color: #e2299a;
  filter: drop-shadow(0 4px 9px rgba(226, 41, 154, .32));
}

.dashboard-carousel {
  position: relative;
}

.dashboard-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #16238f;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 35, 143, .2);
  z-index: 3;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.dashboard-carousel-prev {
  left: -16px;
}

.dashboard-carousel-next {
  right: -16px;
}

.dashboard-carousel-nav svg {
  width: 18px;
  height: 18px;
}

.dashboard-carousel-nav:hover {
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 16px 32px rgba(22, 35, 143, .26);
}

.dashboard-carousel-nav:disabled {
  opacity: 0;
  /* cursor: default; */
  /* box-shadow: 0 6px 14px rgba(22, 35, 143, .1); */
}

.dashboard-carousel-nav:disabled:hover {
  transform: translateY(-50%);
}

.dashboard-grid {
  display: grid;
  gap: 18px;
}

.dashboard-grid[data-carousel-track] {
  padding-top: 25px ;
  padding-bottom: 25px ;
  margin-top: -25px ;
  margin-bottom: -25px ;
}

.dashboard-grid-training_devices {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.dashboard-grid-training_devices::-webkit-scrollbar {
  display: none;
}

.dashboard-grid-ai_pedagogy,
.dashboard-grid-partners {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.dashboard-grid-ai_pedagogy::-webkit-scrollbar,
.dashboard-grid-partners::-webkit-scrollbar {
  display: none;
}

.dashboard-card,
.dashboard-admin-item {
  --dashboard-accent: #5a55f0;
  position: relative;
  text-decoration: none;
  color: #101657;
  border: 1px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 5px 20px rgba(34, 44, 110, .12);
  /* box-shadow: 0 18px 42px rgba(34, 44, 110, .12); */
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dashboard-card:hover,
.dashboard-admin-item:hover {
  transform: translateY(3px);
  border-color: color-mix(in srgb, var(--dashboard-accent) 42%, #fff);
  /* box-shadow: 0 24px 52px rgba(34, 44, 110, .18); */
  box-shadow: 0 4px 10px rgba(34, 44, 110, .18);
}

.dashboard-card-training_devices {
  flex: 0 0 auto;
  /* width: clamp(186px, 14vw, 230px); */
  width: var(--card-width);
  scroll-snap-align: start;
  min-height: 228px;
  padding: calc(var(--card-width) * 0.35) 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
/*   background:
    linear-gradient(180deg, rgba(15, 19, 91, .08), rgba(15, 19, 91, .72)),
    radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--dashboard-accent) 36%, #fff) 0, rgba(255, 255, 255, 0) 32%),
    linear-gradient(145deg, var(--dashboard-accent), #071369 76%); */
    background: var(--dashboard-accent) /* radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--dashboard-accent) 45%, #fff) 0, rgba(255, 255, 255, 0) 75%)  */;
}
.dashboard-card-training_devices[href*=daq] .dashboard-card-body strong{
  opacity: 0;
}

/* .dashboard-card-training_devices::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
} */

.dashboard-card-media {
  position: absolute;
  inset: 0;
  background-image: var(--dashboard-image);
  background-size: cover;
  background-position: center;
  /* opacity: .76; */
  /* mix-blend-mode: screen; */
}

.dashboard-card-logo {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  opacity: .92;
  mix-blend-mode: normal;
}

.dashboard-card-logo img {
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
}

.dashboard-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dashboard-card-body strong {
  font-size: 28px;
  font-weight: 900;
  line-height: .95;
  overflow-wrap: anywhere;
}

.dashboard-card-training_devices .dashboard-card-body strong {
  font-size: 42px;
  letter-spacing: 0;
  margin-bottom: 17px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);

}
.dashboard-card-training_devices[href*=clea] .dashboard-card-body strong {
  font-size: 30px;
  line-height: 42px;
}

.dashboard-card-training_devices .dashboard-card-body span {
  max-width: 160px;
  color: rgba(255, 255, 255, .96);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.dashboard-card-body span {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.dashboard-card-action,
.dashboard-admin-item-arrow {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #16238f;
  box-shadow: 0 10px 24px rgba(22, 35, 143, .14);
}

.dashboard-card-action {
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;

  display: none;
}

.dashboard-card-action svg,
.dashboard-admin-item-arrow svg {
  width: 17px;
  height: 17px;
}

.dashboard-card-ai_pedagogy,
.dashboard-card-partners {
  flex: 0 0 auto;
  width: var(--card-width);
  scroll-snap-align: start;
  min-height: 146px;
  border-radius: 12px;
  overflow: hidden;
}

.dashboard-card-ai_pedagogy {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  background:
    radial-gradient(circle at 86% 68%, color-mix(in srgb, var(--dashboard-accent) 28%, #fff) 0, rgba(255, 255, 255, 0) 36%),
    rgba(255, 255, 255, .78);
}

.dashboard-card-ai_pedagogy .dashboard-card-icon:has(img) {
  width: var(--card-icon-width);
  height: var(--card-icon-width);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-card-ai_pedagogy .dashboard-card-icon:has(img) img {
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--dashboard-accent) 28%, transparent));
}

.dashboard-card-ai_pedagogy .dashboard-card-icon {
  position: absolute;
  right: 16px;
  top: 57%;
  transform: translateY(-54%);
  z-index: 0;
}

.dashboard-card-ai_pedagogy .dashboard-card-body {
  position: relative;
  z-index: 1;
  gap: 7px;
}

.dashboard-card-ai_pedagogy .dashboard-card-body strong {
  font-size: 15.5px;
  line-height: 1.1;
  overflow-wrap: normal;
  word-break: normal;
}

.dashboard-card-ai_pedagogy .dashboard-card-body span {
  max-width: 60%;
  font-size: 12px;
  line-height: 1.4;
}

.dashboard-card-partners {
  min-height: 176px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  padding: 22px 18px 46px;
  text-align: center;
  background: rgba(255, 255, 255, .92);
  /* box-shadow: 0 18px 34px rgba(49, 61, 137, .08), inset 0 1px 0 rgba(255, 255, 255, .95); */
}

.dashboard-card-ai_pedagogy .dashboard-card-body strong,
.dashboard-card-partners .dashboard-card-body strong {
  color: var(--dashboard-accent);
  font-size: 18px;
  line-height: 1.02;
}

.dashboard-card-ai_pedagogy .dashboard-card-body span,
.dashboard-card-partners .dashboard-card-body span {
  color: #273284;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.dashboard-card-icon {
  width: 58px;
  height: 58px;
  align-self: end;
  justify-self: end;
  display: flex;
  justify-content: center;
  align-items: center;
  /* place-items: center; */
  border-radius: 16px;
  background: color-mix(in srgb, var(--dashboard-accent) 16%, #fff);
  color: var(--dashboard-accent);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--dashboard-accent) 20%, transparent);
}

.dashboard-card-partners .dashboard-card-icon {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 158px;
  height: 56px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  justify-content: initial;
  /* align-items: initial; */
}

.dashboard-card-partners .dashboard-card-icon img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56px;
}

.dashboard-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dashboard-card-partners .dashboard-card-body {
  align-items: center;
  width: 100%;
  gap: 8px;
}

.dashboard-card-partners.dashboard-card-has-logo .dashboard-card-body strong {
  display: none;
}

.dashboard-card-partners .dashboard-card-body span {
  max-width: 152px;
  margin: 0 auto;
  /* color: #5a6694; */
  /* font-size: 12.5px; */
  /* font-weight: 500; */
  /* line-height: 1.45; */
  /* letter-spacing: .004em; */


      color: #273284;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

.dashboard-card-ai_pedagogy .dashboard-card-action,
.dashboard-card-partners .dashboard-card-action {
  right: 14px;
  bottom: 14px;
  width: 30px;
  height: 30px;
}

.dashboard-admin-panel {
  position: sticky;
  top: 28px;
  margin-top: 44px;
  padding: 26px 20px 24px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 22px 60px rgba(34, 44, 110, .13);
  backdrop-filter: blur(18px);
}

.dashboard-admin-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(34, 44, 110, .08);
}

.dashboard-admin-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #842cff;

  display: none;
}

.dashboard-admin-icon svg {
  width: 23px;
  height: 23px;
}

.dashboard-admin-list {
  display: flex;
  flex-direction: column;
}

.dashboard-admin-item {
  min-height: 86px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid rgba(34, 44, 110, .08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-admin-item:hover {
  transform: translateX(2px);
  box-shadow: none;
}

.dashboard-admin-item.is-active {
  /* border-color: color-mix(in srgb, var(--dashboard-accent) 38%, #fff); */
  /* background: color-mix(in srgb, var(--dashboard-accent) 10%, #fff); */
  --admin-item-color: var(--dashboard-accent);
}

.dashboard-admin-item:last-child {
  border-bottom: 0;
}

.dashboard-admin-item-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--dashboard-accent) 16%, #fff);
  color: var(--dashboard-accent);
  font-weight: 850;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--dashboard-accent) 18%, transparent);


}

.dashboard-admin-item-icon img {
  width: 100%;
  height: 100%;
  /* max-width: 68%; */
  /* max-height: 68%; */
  object-fit: contain;
  object-position: center center;
}

.dashboard-admin-item-icon svg {
  width: 24px;
  height: 24px;
}

.dashboard-panel-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-panel-back svg {
  width: 18px;
  height: 18px;
}

.dashboard-admin-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-admin-item-body strong {
  /* color: #11185c; */
  color :  var(--admin-item-color, #11185c);
  font-size: 13px;
  font-weight: 850;
}

.dashboard-admin-item-body span,
.dashboard-admin-empty {
  color: #2d3a86;
  /* font-size: 11px; */
  font-weight: 500;
  line-height: 1.35;
  /* text-align: center; */
}

.dashboard-admin-item-body strong,
.dashboard-admin-item-body span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-admin-item-arrow {
  position: static;
  width: 18px;
  height: 18px;
  background: transparent;
  box-shadow: none;
}

.dashboard-admin-empty {
  margin: 18px 0 0;
}

.dashboard-empty,
.dashboard-no-results {
  padding: 48px 32px;
  /* border: 1px solid rgba(255, 255, 255, .86); */
  /* border-radius: 18px; */
  /* background: rgba(255, 255, 255, .78); */
  /* box-shadow: 0 18px 42px rgba(34, 44, 110, .1); */
  text-align: center;
}

.dashboard-empty h1,
.dashboard-no-results h2 {
  margin: 0 0 8px;
  color: #101657;
  font-size: 24px;
}

.dashboard-empty p,
.dashboard-no-results p {
  margin: 0;
  color: #2d3a86;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px) {
  .dashboard-shell {
    padding: 24px;
  }

  .dashboard-header {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .dashboard-search {
    order: 3;
  }

  .dashboard-user {
    justify-self: start;
  }

  .dashboard-content {
    grid-template-columns: 1fr;
  }

  .dashboard-admin-panel {
    position: static;
    margin-top: 0;
  }

  .dashboard-admin-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 720px) {
  .dashboard-shell {
    padding: 20px 14px 32px;
  }

  .dashboard-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dashboard-brand-mark {
    font-size: 30px;
  }

  .dashboard-brand-line {
    font-size: 10px;
    letter-spacing: .18em;
    white-space: normal;
  }

  .dashboard-search {
    height: 52px;
    border-radius: 22px;
    padding: 0 16px;
  }

  .dashboard-user {
    width: 100%;
  }

  .dashboard-user-text {
    flex: 1;
  }

  .dashboard-grid-training_devices,
  .dashboard-grid-ai_pedagogy,
  .dashboard-grid-partners {
    grid-template-columns: 1fr;
  }

  .dashboard-card-training_devices {
    min-height: 210px;
  }

  .dashboard-card-body strong {
    font-size: 24px;
  }

  .dashboard-card-ai_pedagogy,
  .dashboard-card-partners {
    min-height: 132px;
  }

  .dashboard-admin-panel {
    padding: 22px 18px 18px;
  }
}

/* ─── Code inline ─── */
code {
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 12.5px;
  background: var(--ps);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--t1);
}

/* ─── Bloc info pour configuration SSO ─── */
.help-block {
  background: var(--ps);
  border-left: 3px solid var(--a);
  padding: 12px 16px;
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--t2);
  margin-top: -4px;
  margin-bottom: 16px;
}

/* ─── Erreurs et help (formulaires) ─── */
.form-errors {
  list-style: none;
  padding: 8px 12px;
  margin: 6px 0 0;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--r);
  color: #B91C1C;
  font-size: 12.5px;
  font-weight: 500;
}

.form-errors li {
  margin: 0;
  padding: 0;
}

.form-errors li + li {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #FECACA;
}

.form-help {
  display: block;
  font-size: 12px;
  color: var(--t3);
  margin-top: 6px;
  line-height: 1.45;
}

/* ─── Form switch row (toggle + label aligné) ─── */
.switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ps);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  flex: 1;
  min-width: 220px;
  cursor: pointer;
  user-select: none;
  transition: var(--trans);
}

.switch-row:hover {
  border-color: var(--bd-dark);
  background: #fff;
}

.switch-row .form-switch {
  flex-shrink: 0;
}

.switch-row .switch-text {
  flex: 1;
  cursor: pointer;
  display: block;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.switch-row .switch-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.3;
}

.switch-row .switch-help {
  font-size: 11.5px;
  color: var(--t3);
  font-weight: 400;
  margin-top: 3px;
  line-height: 1.4;
}

.switch-row:has(input:checked) {
  border-color: var(--a);
  /*background: var(--a1);*/
}

.switch-row:has(input:checked) .switch-label {
  /*color: var(--a);*/
}

/* ─── Color picker stylé ─── */
.form-field input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 38px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  cursor: pointer;
  padding: 4px;
  background: #fff;
}

.form-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}

.form-field input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.form-field input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

/* ─── Textarea avec rows ─── */
.form-field textarea.form-input {
  height: auto;
  min-height: 38px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

.form-field textarea.form-input.font-mono {
  font-family: SFMono-Regular, Consolas, Monaco, monospace;
  font-size: 12.5px;
  min-height: 140px;
}

/* ─── Listes de choix multiples (checkboxes plateformes) ─── */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.choice-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t1);
  transition: var(--trans);
}

.choice-grid label:hover {
  border-color: var(--bd-dark);
  background: var(--ps);
}

.choice-grid label:has(input:checked) {
  border-color: var(--a);
  /*background: var(--a1);*/
  /*color: var(--a);*/
}

.choice-grid input[type="checkbox"],
.choice-grid input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--a);
  flex-shrink: 0;
  margin: 0;
}

/* ─── Plateformes groupées par catégorie ─── */
.platforms-group {
  margin-top: 18px;
}

.platforms-group:first-child {
  margin-top: 4px;
}

.platforms-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  margin-bottom: 8px;
}

/* ─── Étiquette "Vous" dans liste users admin ─── */
.u-self-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 7px;
  background: var(--a1);
  color: var(--a);
  border: 1px solid var(--a2);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 5px;
}

.self-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--a1);
  color: var(--a);
  font-size: 12px;
  font-weight: 600;
  cursor: help;
  border: 1px solid var(--a2);
}

.self-label svg {
  width: 14px;
  height: 14px;
}

/* ─── Onglets de page (Mon compte, etc.) ─── */
.account-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 24px;
}

.account-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: var(--trans);
}

.account-tab:hover {
  color: var(--t1);
}

.account-tab.act {
  color: var(--a);
  border-bottom-color: var(--a);
}

.account-tab svg {
  width: 16px;
  height: 16px;
}

/* ─── Section title dans formulaire ─── */
.form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t3);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd);
}

.pcard > .form-section-title:first-child {
  margin-top: 0;
}

/* ─── Color swatch dans la liste plateformes ─── */
.color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ─── Image de fond du menu (priorité via data-attr) ─── */
body[data-bg-menu] .sidebar {
  background-image: url(attr(data-bg-menu, url, none));
}

.dr-cal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dr-cal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}

.dr-cal-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.dr-cal-nav svg {
  width: 14px;
  height: 14px;
  color: var(--t2);
}

.dr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.dr-dow {
  text-align: center;
  font-size: 11px;
  color: var(--t3);
  font-weight: 500;
  padding: 4px 0 8px;
}

.dr-day {
  text-align: center;
  font-size: 13px;
  color: var(--t1);
  padding: 17px 2px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.dr-day:hover {
  background: var(--a1);
  color: var(--a);
}

.dr-day.today { font-weight: 700; }

.dr-day.other { color: var(--t3); }

.dr-day.other:hover {
  background: transparent;
  color: var(--t3);
  cursor: default;
}

.dr-day.rstart,
.dr-day.rend {
  background: var(--a);
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
}

.dr-day.rinside {
  background: var(--a1);
  color: var(--a);
  border-radius: 0;
}

.dr-sugg {
  width: 210px;
  padding: 16px 14px;
}

/* ─── Vue trombinoscope (grille de cartes utilisateurs) ─── */
.users-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 20px;
}

.dashboard-panel-users.grid-view .tcard { display: none; }
.dashboard-panel-users.grid-view .users-grid { display: grid; }

.ucard {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 24px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .15s;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.ucard:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: var(--a2);
  transform: translateY(-2px);
}

.ucard-ava {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--bd);
  overflow: hidden;
}

.ucard-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ucard-name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  color: var(--t1);
  /* 2 lignes fixes */
  height: calc(13px * 1.35 * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ucard-email {
  font-size: 11px;
  color: var(--t3);
  text-align: center;
  word-break: break-all;
  line-height: 1.4;
  /* 2 lignes fixes */
  height: calc(11px * 1.4 * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ucard-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

.ucard-inactive .ucard-ava {
  opacity: .5;
  filter: grayscale(1);
}

.ucard-inactive .ucard-name {
  color: var(--t3);
}

.ucard .u-self-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.dr-sugg-ttl {
  font-size: 12px;
  font-weight: 600;
  color: var(--a);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.dr-sugg-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
}

.dr-sugg-item:hover {
  background: var(--ps);
}

.dr-sugg-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
}

.dr-sugg-range {
  font-size: 11px;
  color: var(--t3);
}

.dr-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--bd);
}

.dr-btn-cancel {
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 7px;
  font-size: 13px;
  color: var(--t2);
  cursor: pointer;
  font-family: inherit;
}

.dr-btn-apply {
  height: 32px;
  padding: 0 16px;
  background: var(--a);
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

/* ── KPI cards / charts page (autres patterns stats) ── */
.stats-page {
  padding: 40px 48px;
}

.stats-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.kpi-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.kpi-shimmer {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background: linear-gradient(135deg, var(--a) 0%, transparent 60%);
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.kpi-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.03em;
}

.kpi-label {
  font-size: 12px;
  color: var(--t3);
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: 20px;
}

.kpi-delta.up { background: #ECFDF5; color: #059669; }
.kpi-delta.dn { background: #FEF2F2; color: #DC2626; }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.chart-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 28px;
}

.chart-card.span-8 { grid-column: span 8; }
.chart-card.span-4 { grid-column: span 4; }
.chart-card.span-6 { grid-column: span 6; }
.chart-card.span-12 { grid-column: span 12; }

.chart-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.chart-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}

.chart-sub {
  font-size: 12px;
  color: var(--t3);
  margin-top: 3px;
}

.chart-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--t2);
}

.bar-h {
  transition: opacity 0.15s;
  cursor: pointer;
}

.bar-h:hover { opacity: 0.75; }

/* =====================================================================
   PAGE — STATISTIQUES GLOBALES (mode grille Airtable)
   Sélecteurs très spécifiques scopés via .stats-globales pour éviter
   d'écraser le tableau standard CRUD.
   ===================================================================== */
.stats-globales {
  /* Wrapper de page : passe en mode "Airtable" */
}

.stats-globales .header-area {
  padding: 16px 24px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.stats-globales .page-title {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.stats-globales .controls-bar {
  display: flex;
  gap: 12px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--bd);
  background: #FAFAFA;
  align-items: center;
}

.stats-globales .search-input {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--bd-dark);
  border-radius: 6px;
  font-size: 12px;
  width: 250px;
}

.stats-globales .grid-container {
  flex: 1;
  overflow: auto;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F1F5F9;
}

.stats-globales .grid-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.stats-globales .grid-container::-webkit-scrollbar-track {
  background: #F1F5F9;
}

.stats-globales .grid-container::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.stats-globales table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max-content;
  width: 100%;
}

.stats-globales thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

.stats-globales th {
  background: #F3F4F6;
  border-bottom: 2px solid var(--bd-dark);
  border-right: 1px solid var(--bd);
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.stats-globales .search-row th {
  background: #fff;
  padding: 4px 8px;
  border-bottom: 1px solid var(--bd-dark);
}

.stats-globales .col-search {
  width: 100%;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--bd);
  border-radius: 4px;
  font-size: 11.5px;
  background: #FAFAFA;
}

.stats-globales .col-search:focus {
  outline: none;
  border-color: var(--a);
  background: #fff;
}

.stats-globales td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--bd);
  border-right: 1px solid var(--bd);
  white-space: nowrap;
  color: var(--t1);
  vertical-align: middle;
  height: 36px;
}

.stats-globales tbody tr:hover td {
  background: var(--row-hover);
}

.stats-globales th:first-child,
.stats-globales td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 10;
  border-right: 2px solid var(--bd-dark);
  width: 320px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-globales thead th:first-child {
  background: #F3F4F6;
  z-index: 21;
}

.stats-globales .search-row th:first-child {
  background: #fff;
  z-index: 21;
}

.stats-globales tbody tr:hover td:first-child {
  background: var(--row-hover);
}

.stats-globales .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats-globales th.num {
  text-align: right;
}

.stats-globales .chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
  color: var(--t3);
  margin-right: 6px;
  border-radius: 3px;
}

.stats-globales .chevron:hover {
  background: var(--bd);
  color: var(--t1);
}

.stats-globales .row-expand.open .chevron {
  transform: rotate(90deg);
}

.stats-globales .group-label {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.stats-globales .sub-row { display: none; }
.stats-globales .sub-row.open { display: table-row; }

.stats-globales .sub-row td {
  background: #FAFAFA;
  color: var(--t2);
}

.stats-globales .sub-row td:first-child {
  padding-left: 36px;
  background: #FAFAFA;
}

.stats-globales .zero {
  color: var(--t3);
}

/* ========== Modales (alert / confirm / prompt) ========== */
#modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
}

#modal-overlay.open {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: var(--rl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 420px;
  margin: 16px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: modal-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.4;
  white-space: pre-wrap;
}

.modal-input {
  width: 100%;
  height: var(--ch);
  padding: 0 12px;
  border: 1px solid var(--bd-dark);
  border-radius: var(--r);
  font-size: 14px;
  font-family: inherit;
  color: var(--t1);
  outline: none;
  transition: border-color 0.15s;
}

.modal-input:focus {
  border-color: var(--a);
  box-shadow: 0 0 0 3px rgba(var(--a-rgb), 0.12);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.modal-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--bd-dark);
  background: #fff;
  color: var(--t1);
  transition: var(--trans);
}

.modal-btn:hover {
  background: var(--bg);
}

.modal-btn.primary {
  background: var(--a);
  border-color: var(--a);
  color: #fff;
}

.modal-btn.primary:hover {
  opacity: 0.88;
}

/* ========== Responsive ========== */
@media (max-width: 1179px) {
  .form-body {
    grid-template-columns: 1fr;
  }
}