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

/* ─── Utility ───────────────────────────────────────── */
.hidden { display: none !important; }

:root {
  --font:      'Figtree', "Segoe UI", system-ui, -apple-system, sans-serif;
  --sidebar-w: 280px;

  /* Direction « canvas clair » (Notion) : le contenu vit sur une surface claire,
     le gris chaud est rétrogradé à la sidebar / au survol / aux champs creusés.
     Surfaces aplaties (cartes sans ombre — l'élévation reste sur --shadow-lg). */
  --bg:       #F7F4EF;   /* canvas — crème léger */
  --surface:  #FBF9F4;   /* surfaces (recherche, carte de fiche, modales) : blanc chaud très proche du crème → pop très subtil */
  --panel:    #EAE8E4;   /* gris rétrogradé : sidebar, survol de ligne, champs creusés */
  --hover:    #EFEDE9;   /* survol/sélection de ligne (gris très doux) */
  --border:   #DEDBD4;   /* bordures de cartes */
  --hairline: #E6E3DD;   /* filets / séparateurs très légers */
  --text:    var(--accent);
  --muted:   #6E6560;
  --shadow:  none;       /* cartes plates ; modales/dropdowns → --shadow-lg */

  --blue-light:   #DBEEFE;  --blue-mid:   #3B82F6;  --blue-dark:   #1D4ED8;
  --green-light:  #D1FAE5;  --green-mid:  #10B981;  --green-dark:  #047857;
  --orange-light: #FFEDD5;  --orange-mid: #F97316;  --orange-dark: #C2410C;
  --indigo-light: #E0E7FF;  --indigo-mid: #6366F1;  --indigo-dark: #4338CA;
  --rental-bg:   #E0F2FE;
  --rental-text: #0369A1;
  --teal-light:   #CCFBF1;  --teal-mid:   #14B8A6;  --teal-dark:   #0F766E;
  --pink-light:   #FCE7F3;  --pink-dark:   #BE185D;
  --purple-light: #EDE9FE;  --purple-dark: #6D28D9;

  --ok-bg:   #D1FAE5;  --ok-text:   #047857;
  --warn-bg: #FEF3C7;  --warn-text: #92400E;
  --err-bg:  #FEE2E2;  --err-text:  #991B1B;
  --gry-bg:  #E8E4DF;  --gry-text:  var(--accent);

  /* Bordures sémantiques */
  --ok-border:     #A7F3D0;
  --warn-border:   #FCD34D;
  --err-border:    #FCA5A5;
  --rental-border: #7DD3FC;
  --member-border: #5EEAD4;
  --blue-border:   #BFDBFE;

  /* Thème Comptoir */
  --comptoir-bg:     #F0FDF4;
  --comptoir-icon:   #0D9488;
  --comptoir-text:   #134E4A;
  --comptoir-border: #BBF7D0;

  /* Thème Membres */
  --membres-bg:     #F8FAFC;
  --membres-icon:   #475569;
  --membres-text:   #0F172A;
  --membres-border: #CBD5E1;
  --membres-pastel: #E2E8F0;   /* slate-200 : pastilles d'icône, onglets actifs */

  /* Thème Catalogue */
  --catalogue-bg:     #FFF7ED;
  --catalogue-icon:   #EA580C;
  --catalogue-text:   #431407;
  --catalogue-border: #FED7AA;
  --catalogue-muted:  #92400E;

  /* Pages secondaires : réutilisation des 3 palettes principales
     (pas de nouvelles teintes — identité visuelle resserrée) */

  /* Thème Historique = palette Membres (ardoise) */
  --rentals-bg:     var(--membres-bg);
  --rentals-icon:   var(--membres-icon);
  --rentals-text:   var(--membres-text);
  --rentals-border: var(--membres-border);

  /* Thème Dashboard = palette Comptoir (vert) */
  --dashboard-bg:     var(--comptoir-bg);
  --dashboard-icon:   var(--comptoir-icon);
  --dashboard-text:   var(--comptoir-text);
  --dashboard-border: var(--comptoir-border);

  /* Thème Finance = palette Catalogue (orange) */
  --finance-bg:     var(--catalogue-bg);
  --finance-icon:   var(--catalogue-icon);
  --finance-text:   var(--catalogue-text);
  --finance-border: var(--catalogue-border);

  --color-text-tertiary:        #9E9690;
  --color-accent:               var(--accent);

  /* Primaire neutre sombre (boutons d'action) + son survol */
  --accent:        #2C2620;
  --accent-hover:  #3D3530;

  /* ── Échelle d'ESPACEMENT ────────────────────────────────────────────────
     Base 2 px, calée sur l'existant (12 · 8 · 14 · 10 · 16 dominent, les
     paliers 6 et 10 sont trop répandus pour disparaître). Toute nouvelle
     règle pioche ici : c'est l'absence d'échelle qui produisait 160 valeurs
     de padding distinctes et cette impression de flottement entre écrans. */
  --space-1:   2px;   /* micro-écart (badge, pastille) */
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;   /* écart standard entre éléments liés */
  --space-5:  10px;
  --space-6:  12px;   /* padding standard d'un contrôle */
  --space-7:  14px;   /* padding standard d'une carte */
  --space-8:  16px;
  --space-9:  20px;
  --space-10: 24px;
  --space-12: 32px;   /* respiration entre sections */

  /* ── Échelle TYPOGRAPHIQUE ───────────────────────────────────────────────
     Huit niveaux couvrant l'existant. Les valeurs orphelines (11.5 · 12.5 ·
     14 · 16 · 18 · 20 px) se replient sur le palier voisin au fil des
     retouches de composants — ne pas en réintroduire. */
  --text-2xs:  10px;  /* mentions, compteurs minuscules */
  --text-xs:   11px;  /* méta d'une carte */
  --text-sm:   12px;  /* libellés, texte secondaire */
  --text-md:   13px;  /* corps dense (listes, tableaux) */
  --text-base: 15px;  /* corps courant, champs */
  --text-lg:   17px;  /* titre de section */
  --text-xl:   22px;  /* titre d'écran */
  --text-3xl:  30px;  /* chiffre mis en avant (KPI) */

  /* Échelle de rayons : xs (barres/puces fines) · sm (champs) · md (cartes) · lg · pill */
  --radius-xs:        5px;
  --radius-sm:        8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill:      20px;   /* très arrondi (chip, carte) */
  --radius-round:     999px;  /* parfaitement rond (badge, avatar) — les 999px
                                 encore en dur sont à replier ici (lot B) */

  /* Échelle d'empilement — du contenu vers le sommet */
  --z-dropdown: 700;
  --z-modal:    1000;
  --z-tour:     1500;
  --z-toast:    2000;

  /* Élévation & focus */
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);    /* modales, dropdowns */
  --ring:      0 0 0 3px rgba(44, 38, 32, .12);  /* anneau de focus neutre */

  /* Durées d'animation : 2 vitesses */
  --t-fast: .15s;
  --t-med:  .25s;

  /* Shared left-block width: counter-header-left === .btn-add-game */
  --header-left-w: 210px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}
/* Forcer l'héritage Figtree sur tous les éléments interactifs */
button, input, select, textarea { font-family: var(--font); }

/* ─── App shell ─────────────────────────────────────── */
.app {
  display: flex;
  height: 100vh;
}

/* ─── Sidebar ───────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg);   /* suit le canvas crème — séparée par le seul filet de droite, sans ressortir */
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 14px 20px;
  gap: 28px;
  overflow: hidden;
  transition: width .22s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}

/* Pendant l'animation de largeur, le contenu garde sa mise en page
   "ouverte" (largeur figée + nowrap) et se fait rogner par l'overflow
   hidden de la sidebar — sinon les textes re-wrappent à chaque frame */
.sidebar-header,
.nav,
.sidebar-footer {
  min-width: calc(var(--sidebar-w) - 28px);
}
.logo-title, .logo-sub, .nav-item span { white-space: nowrap; }

.logo-icon  { font-size: 30px; line-height: 1; }
.logo-title { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.logo-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Nav */
.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { background: var(--bg); color: var(--text); }

.nav-item.active { font-weight: 700; }
.nav-item[data-section="members"].active   { background: var(--membres-bg); color: var(--membres-text); }
.nav-item[data-section="volunteers"].active{ background: var(--green-light);  color: var(--green-dark); }
.nav-item[data-section="games"].active     { background: var(--catalogue-bg); color: var(--catalogue-text); }
.nav-item[data-section="dashboard"].active { background: var(--dashboard-bg); color: var(--dashboard-text); }
.nav-item[data-section="rentals"].active   { background: var(--rentals-bg); color: var(--rentals-text); }
.nav-item[data-section="groups"].active    { background: var(--teal-light);   color: var(--teal-dark); }
.nav-item[data-section="finance"].active   { background: var(--finance-bg);   color: var(--finance-text); }
.nav-item[data-section="my-rentals"].active{ background: var(--rentals-bg); color: var(--rentals-text); }
.nav-item[data-section="counter"].active   { background: var(--comptoir-bg); color: var(--comptoir-text); }
.nav-item[data-section="settings"].active  { background: var(--comptoir-bg); color: var(--comptoir-text); }
.nav-item[data-section="settings"].active .nav-icon { color: var(--comptoir-icon); }
.nav-item[data-section="inventory"].active { background: var(--teal-light);   color: var(--teal-dark); }
.nav-item[data-section="administration"].active   { background: var(--membres-bg); color: var(--membres-text); }
.nav-item[data-section="administration"].active .nav-icon { color: var(--membres-icon); }
.nav-item[data-section="catalogue-global"].active  { background: var(--catalogue-bg);   color: var(--catalogue-text); }
.nav-item[data-section="catalogue-global"].active .nav-icon { color: var(--catalogue-icon); }
.nav-item[data-section="counter"].active .nav-icon  { color: var(--comptoir-icon); }
.nav-item[data-section="members"].active .nav-icon  { color: var(--membres-icon); }
.nav-item[data-section="games"].active .nav-icon    { color: var(--catalogue-icon); }
.nav-item[data-section="dashboard"].active .nav-icon  { color: var(--dashboard-icon); }
.nav-item[data-section="rentals"].active .nav-icon    { color: var(--rentals-icon); }
.nav-item[data-section="my-rentals"].active .nav-icon { color: var(--rentals-icon); }
.nav-item[data-section="finance"].active .nav-icon    { color: var(--finance-icon); }

.nav-icon { font-size: 17px; width: 22px; text-align: center; }

.nav-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* Toggle button */
.sidebar-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background var(--t-fast), color var(--t-fast);
  padding: 0;
}
.sidebar-toggle:hover { background: var(--bg); color: var(--text); }
.sidebar-toggle i { transition: transform .22s ease; }

/* ─── Sidebar collapsed ──────────────────────────────────── */
.sidebar--collapsed {
  width: 52px;
  flex: 0 0 52px;   /* flex-basis explicite : sinon l'item ne descend pas sous son min-content */
  padding: 20px 6px 20px;
  gap: 20px;
}

/* Replié : libérer la largeur figée du contenu */
.sidebar--collapsed .sidebar-header,
.sidebar--collapsed .nav,
.sidebar--collapsed .sidebar-footer {
  min-width: 0;
}

/* Header : logo icon + toggle en colonne centrée */
.sidebar--collapsed .sidebar-header {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.sidebar--collapsed .logo-text-wrap { display: none; }
.sidebar--collapsed .sidebar-toggle { margin-left: 0; }
.sidebar--collapsed .sidebar-toggle i { transform: rotate(180deg); }

/* Nav items : icône centrée, label masqué */
.sidebar--collapsed .nav-item {
  padding: 9px;
  justify-content: center;
  gap: 0;
}
.sidebar--collapsed .nav-item span { display: none; }
.sidebar--collapsed .nav-sep { margin: 4px 2px; }

/* Footer : tout masqué sauf séparateur */
.sidebar--collapsed .sidebar-footer {
  padding: 10px 0 0;
}
.sidebar--collapsed .lang-switcher { display: none; }
.sidebar--collapsed .assoc-pill,
.sidebar--collapsed .assoc-select  { display: none !important; }
.sidebar--collapsed .user-pill     { display: none !important; }

/* Footer */
.sidebar-footer { padding: 12px 6px 0; border-top: 1px solid var(--border); }

.lang-switcher {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.lang-btn {
  flex: 1;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-btn:hover { background: var(--bg); color: var(--text); }
.lang-btn.active { background: var(--purple-light); color: var(--purple-dark); border-color: transparent; }

.assoc-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  word-break: break-word;
  line-height: 1.4;
}

.assoc-select {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.assoc-select:hover { color: var(--text); }

/* ─── Main ──────────────────────────────────────────── */
.main {
  flex: 1;
  overflow-y: auto;
  padding: 12px 40px 48px;
}

/* ─── Sections ──────────────────────────────────────── */
.section         { display: none; }
.section.active  { display: block; }

/* ─── Tête de page unifiée (ultra-légère) ───────────────
   Icône colorée + titre discret + filet fin. Hauteur calée
   sur la topbar Comptoir (49px). Remplace les bannières
   .section-header. L'identité couleur vient de la nav active. */
.page-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  margin-bottom: 20px;
  /* Reste collée en haut du scroll, comme la barre de Claude. Le contenu
     défile dessous (fond opaque). Le ::before masque la bande de padding
     au-dessus pour que rien ne dépasse quand la frise est épinglée. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}
.page-head::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -24px;
  height: 24px;
  background: var(--bg);
}
.page-head-title {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  align-self: stretch;                                   /* pleine hauteur de frise */
  border-bottom: 2px solid var(--page-accent, transparent);  /* repère de page (façon onglet actif) */
  margin-bottom: -1px;                                   /* recouvre le filet de la frise */
}
.page-head-title i { font-size: 16px; flex-shrink: 0; }
.page-head-title span {
  font-size: 13px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bouton plein écran — poussé à droite de la frise, discret */
.page-head-fs {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: none; border-radius: var(--radius-sm);
  background: none; color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.page-head-fs:hover { background: var(--bg); color: var(--text); }
.page-head-fs i { font-size: 17px; }

/* Bouton d'aide « ? » — visite guidée de la page. Discret, jumelé au plein écran. */
.page-head-help {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: none; border-radius: var(--radius-sm);
  background: none; color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.page-head-help:hover { background: var(--bg); color: var(--text); }
.page-head-help i { font-size: 17px; }

/* Raccourci ouverture de séance dans la frise — ambre « non démarrée » ⇄ vert « en cours » */
.page-head-session {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; font-family: var(--font);
  padding: 4px 9px; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; color: var(--warn-text);
  border: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.page-head-session:hover { background: var(--warn-bg); }
.page-head-session i { font-size: 15px; }
/* Ouverture de séance + visite guidée + plein écran : regroupés à droite. Seul
   le raccourci d'ouverture garde margin-left:auto (pousse le groupe) ; on annule
   celui du plein écran quand il précède, pour éviter un second écart. */
.page-head-session ~ .page-head-fs { margin-left: 0; }
.page-head-session--open {
  background: transparent; color: var(--ok-text);
}
.page-head-session--open:hover { background: var(--ok-bg); }

/* ─── Visite guidée (onboarding par page) ───────────────────────────────────
   Découpe « projecteur » : un seul élément posé sur la cible, dont l'ombre
   géante assombrit tout le reste — robuste, sans bagarre de z-index. L'accent
   suit la palette de la page via --tour-accent (posé en JS), comme la pastille
   d'icône des modales ; le bouton primaire reste neutre sombre. */
.tour-catcher { position: fixed; inset: 0; z-index: var(--z-tour); }
.tour-cutout {
  position: fixed; z-index: calc(var(--z-tour) + 1); pointer-events: none;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(20, 18, 15, .45),
              0 0 0 3px var(--tour-accent, var(--comptoir-icon));
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-bubble {
  position: fixed; z-index: calc(var(--z-tour) + 2); width: 270px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 16px; animation: modalSlideIn .18s ease;
}
.tour-pointer {
  position: fixed; z-index: calc(var(--z-tour) + 2); width: 12px; height: 12px;
  background: var(--surface); border: 1px solid var(--border);
  transform: rotate(45deg);
}
.tour-bubble-top { display: flex; align-items: center; justify-content: space-between; }
.tour-step {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--tour-accent, var(--comptoir-icon));
}
.tour-dots { display: flex; gap: 5px; }
.tour-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.tour-dot--on { background: var(--tour-accent, var(--comptoir-icon)); }
.tour-title { font-weight: 700; font-size: 14px; color: var(--text); margin: 8px 0 4px; }
.tour-text  { font-size: 12px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
.tour-ft    { display: flex; align-items: center; gap: 8px; }
.tour-skip  {
  background: none; border: none; color: var(--color-text-tertiary);
  font-size: 12px; cursor: pointer; padding: 4px 0; font-family: var(--font);
}
.tour-skip:hover { color: var(--text); }
.tour-prev  {
  margin-left: auto;
  padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  font-size: 12px; font-family: var(--font); cursor: pointer;
}
.tour-prev:hover { filter: brightness(.97); }
.tour-next  {
  padding: 7px 15px; border-radius: var(--radius-sm); border: none;
  background: var(--accent); color: #FAF8F5;
  font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer;
  transition: background var(--t-fast);
}
.tour-next:hover { background: var(--accent-hover); }

/* ─── Paramètres — frise d'onboarding ───────────────────────────────────────
   Navigation directionnelle à états dérivés. Accent teal (palette Comptoir) ;
   « fait » reste vert (sens universel de succès), primaire neutre sombre. */
.setup-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.setup-head-title { font-weight: 700; font-size: 15px; color: var(--text); }
.setup-head-count { font-size: 12px; color: var(--muted); }
.setup-progress { height: 6px; background: var(--gry-bg); border-radius: var(--radius-xs); overflow: hidden; margin-bottom: 22px; }
.setup-progress-bar { height: 100%; background: var(--comptoir-icon); border-radius: var(--radius-xs); transition: width var(--t-med) ease; }
.setup-frise { display: flex; align-items: flex-start; gap: 2px; margin-bottom: 22px; }
.setup-step {
  flex: 1; background: none; border: none; cursor: pointer; font-family: var(--font);
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 2px;
}
.setup-step-ic {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent; transition: box-shadow var(--t-fast);
}
.setup-step-ic i { font-size: 18px; }
.setup-step-lbl { font-size: 11px; line-height: 1.25; text-align: center; color: var(--muted); }
.setup-step--done .setup-step-ic    { background: var(--ok-bg);        color: var(--ok-text); }
.setup-step--current .setup-step-ic { background: var(--comptoir-icon); color: #fff; }
.setup-step--todo .setup-step-ic    { background: var(--surface); border-color: var(--membres-border); color: var(--color-text-tertiary); }
.setup-step--active .setup-step-lbl { color: var(--comptoir-text); font-weight: 600; }
.setup-step--active .setup-step-ic  { box-shadow: 0 0 0 4px rgba(13, 148, 136, .18); }
.setup-chev { color: var(--border); font-size: 15px; margin-top: 11px; flex: 0 0 auto; }
.setup-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
}
.setup-panel-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.setup-panel-title { font-weight: 700; font-size: 15px; color: var(--text); }
.setup-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill); }
.setup-badge--done    { background: var(--ok-bg);        color: var(--ok-text); }
.setup-badge--current { background: var(--comptoir-bg);  color: var(--comptoir-text); }
.setup-badge--todo    { background: var(--gry-bg);       color: var(--muted); }
.setup-panel-desc { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
.setup-panel-ft { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setup-cta { padding: 9px 16px; font-size: 13px; }
.setup-btn-soft {
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
  background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm);
}
.setup-btn-soft:hover { filter: brightness(.97); }
.setup-panel-hint { font-size: 11px; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 5px; }
.setup-panel-hint i { font-size: 14px; }
/* Résumé lecture seule d'une étape (ex. infos association) */
.setup-summary { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.setup-sum-row { display: flex; gap: 12px; font-size: 13px; }
.setup-sum-k { flex: 0 0 90px; color: var(--muted); }
.setup-sum-v { color: var(--text); min-width: 0; word-break: break-word; }
.setup-sum-empty { color: var(--color-text-tertiary); font-style: italic; }

/* ─── Assistant de migration du catalogue ───────────────────────────────────── */
#mig-body { display: contents; }
.mig-tabs {
  display: inline-flex; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px; gap: 3px; margin-bottom: 16px;
}
.mig-tab {
  border: none; border-radius: var(--radius-xs); padding: 6px 14px; font-size: 12px;
  cursor: pointer; font-family: var(--font); background: none; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.mig-tab i { font-size: 14px; }
.mig-tab.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(44, 38, 32, .08); }
.mig-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 26px; border: 1.5px dashed var(--border); border-radius: var(--radius-md);
  background: var(--bg); cursor: pointer; text-align: center; color: var(--muted);
  font-size: 12px; transition: border-color var(--t-fast), background var(--t-fast);
}
.mig-dropzone:hover { border-color: var(--catalogue-icon); background: var(--catalogue-bg); }
.mig-dropzone i { font-size: 26px; color: var(--catalogue-icon); }
.mig-dropzone strong { color: var(--text); }
.mig-map-row {
  display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--border);
}
.mig-map-row:first-of-type { border-top: none; }
.mig-map-row i { text-align: center; }
.mig-callout {
  margin-top: 16px; padding: 13px 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-md);
}
.mig-rc-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.mig-chip { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); }
.mig-rc-table { width: 100%; border-collapse: collapse; }
.mig-rc-table th { font-size: 11px; font-weight: 600; color: var(--muted); text-align: left; padding: 6px 8px; }
.mig-rc-table td { padding: 11px 8px; vertical-align: top; border-top: 1px solid var(--border); font-size: 12px; }
.mig-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.mig-badge i { font-size: 12px; }
.mig-sub { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
.mig-rc-select {
  width: 100%; margin-top: 6px; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font-family: var(--font); color: var(--text); cursor: pointer;
}

/* ─── States ────────────────────────────────────────── */
.loading-state,
.empty-state {
  padding: 52px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .55; }
.error-state {
  padding: 20px 24px;
  text-align: center;
  background: var(--err-bg);
  color: var(--err-text);
  border-radius: var(--radius-lg);
  font-size: 14px;
}

/* ─── Table ─────────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;          /* tablette : défilement plutôt que colonnes coupées */
  overflow-y: hidden;
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover      { background: var(--gry-bg); }

tbody td { padding: 12px 16px; vertical-align: middle; }

/* Clickable rows */
.tr-clickable { cursor: pointer; }
.tr-clickable:hover td { background: var(--gry-bg); }

/* ─── Member detail modal sections ──────────────────── */
.member-detail-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.member-detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 10px;
}
.member-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 20px;
  font-size: 13px;
}
.member-detail-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 3px;
}

/* ─── Person cell ───────────────────────────────────── */
.person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.av-blue   { background: var(--blue-light);   color: var(--blue-dark); }
.av-slate  { background: var(--membres-bg); color: var(--membres-text); border: 1px solid var(--membres-border); }
.av-green  { background: var(--green-light);  color: var(--green-dark); }
.av-purple { background: var(--purple-light); color: var(--purple-dark); }
.av-indigo { background: var(--indigo-light); color: var(--indigo-dark); }
.av-err    { background: var(--err-bg);       color: var(--err-text); }

.person-name  { font-weight: 600; }
.person-email { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ─── Badges ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.b-ok      { background: var(--ok-bg);     color: var(--ok-text); }
.b-warn    { background: var(--warn-bg);   color: var(--warn-text); }
.b-err     { background: var(--err-bg);    color: var(--err-text); }
.b-default { background: var(--gry-bg);    color: var(--gry-text); }
.b-rental  { background: var(--rental-bg); color: var(--rental-text); }
.b-orange  { background: var(--orange-light); color: var(--orange-dark); }
.b-teal    { background: var(--teal-light);   color: var(--teal-dark); }
.b-purple  { background: var(--purple-light); color: var(--purple-dark); }

/* Stock chip overlay */
.stock-chip {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.stock-chip--ok    { background: var(--ok-bg);   color: var(--ok-text); }
.stock-chip--zero  { background: var(--warn-bg);  color: var(--warn-text); }
.stock-chip--empty { background: var(--gry-bg);   color: var(--muted); }

/* ─── Modal ─────────────────────────────────────────── */
/* ── Keyframes communs aux overlays ─────────────────────────────────────── */
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes overlayFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(.97) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes modalSlideOut {
  from { opacity: 1; transform: scale(1)   translateY(0); }
  to   { opacity: 0; transform: scale(.97) translateY(10px); }
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
  animation: overlayFadeIn var(--t-fast) ease;
}
.modal-overlay.open .modal {
  animation: modalSlideIn .18s ease;
}
.modal-overlay.closing {
  animation: overlayFadeOut var(--t-fast) ease forwards;
}
.modal-overlay.closing .modal {
  animation: modalSlideOut var(--t-fast) ease forwards;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-pill);
  max-width: 520px;
  width: 90%;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted);
}

/* ══ Gabarit de modale harmonisé (référence : modale d'ouverture de séance) ══
   Structure : .modal--banded > .modal-hd (bandeau) / .modal-body / .modal-ft.
   Le bandeau d'en-tête porte une pastille d'icône colorée par contexte ;
   le bouton primaire reste neutre sombre partout (rouge = destructif). */
/* Flex column : en-tête + pied fixes, corps scrollable (modale haute < 85vh) */
.modal--banded { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal--banded > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#session-body { display: contents; }   /* la modale de séance remplit ce wrapper en JS */

.modal-hd {
  display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--border);
}
.modal-hd-icon {
  width: 38px; height: 38px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--comptoir-bg); color: var(--comptoir-icon);   /* défaut : teal */
}
.modal-hd-icon i { font-size: 20px; }
.modal-hd-icon--membres   { background: var(--membres-pastel);             color: var(--membres-icon); }
.modal-hd-icon--catalogue { background: var(--catalogue-bg); color: var(--catalogue-icon); }
.modal-hd-icon--ok        { background: var(--ok-bg);        color: var(--ok-text); }
.modal-hd-icon--warn      { background: var(--warn-bg);      color: var(--warn-text); }
.modal-hd-icon--danger    { background: var(--err-bg);       color: var(--err-text); }
.modal-hd-text  { flex: 1; min-width: 0; }
.modal-hd-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text); }
.modal-hd-sub   { font-size: 12px; color: var(--muted); margin-top: 3px; }
.modal-close-btn {
  width: 28px; height: 28px; flex-shrink: 0; border: none; background: none;
  color: var(--muted); cursor: pointer; border-radius: var(--radius-sm);
}
.modal-close-btn:hover { background: var(--bg); color: var(--text); }

/* Boutons-icones : sans font-size, un <button> herite de la taille par defaut
   du navigateur (13.3333px) — un accident, pas une decision. Les fixer sur
   l'echelle supprime cette valeur fantome des ecrans. */
.page-head-help, .page-head-fs, .modal-close-btn { font-size: var(--text-md); }

.modal-close-btn i { font-size: 17px; }

.modal-body  { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-lbl   { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: block; }
.modal-sep   { border-top: 1px solid var(--border); padding-top: 14px; }
.modal-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-hint  { font-size: 11px; color: var(--color-text-tertiary); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.modal-hint i { font-size: 13px; }
.modal-ft {
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.modal-ft .btn-primary { display: inline-flex; align-items: center; gap: 6px; }

/* Spécifique séance : cartes d'aperçu du jour */
.modal--session { max-width: 440px; }
.session-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.session-metric {
  background: var(--gry-bg); border-radius: var(--radius-md); padding: 9px 10px;
}
.session-metric-n { font-size: 20px; font-weight: 700; line-height: 1; color: var(--text); }
.session-metric-l { font-size: 11px; color: var(--muted); margin-top: 3px; }
.session-metric--info { background: var(--comptoir-bg); }
.session-metric--info .session-metric-n, .session-metric--info .session-metric-l { color: var(--comptoir-text); }
.session-metric--warn { background: var(--warn-bg); }
.session-metric--warn .session-metric-n, .session-metric--warn .session-metric-l { color: var(--warn-text); }

/* Clôture : lignes de bilan (recettes par moyen, recompte caisse) */
.session-bal { display: flex; flex-direction: column; }
.session-bal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: 5px 0; color: var(--text);
}
.session-bal-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.session-bal-row--muted { color: var(--muted); }
.session-bal-row--muted span:last-child { font-weight: 500; }
.session-bal-row--total {
  border-top: 1px solid var(--border); margin-top: 3px; padding-top: 8px; font-weight: 700;
}
.session-bal-row--total span:last-child { font-weight: 800; }

.lang-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  color: var(--muted);
  flex-shrink: 0;
}
.lang-badge--local {
  background: var(--orange-light);
  color: var(--orange-dark);
  border-color: var(--orange-light);
}

.copy-ref {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  min-width: 68px;
}

.copy-health {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.copy-health--ok         { background: var(--ok-bg);   color: var(--ok-text); }
.copy-health--incomplete { background: var(--warn-bg);  color: var(--warn-text); }
.copy-health--broken     { background: var(--err-bg);   color: var(--err-text); }

.copy-status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  margin-left: auto;
}

/* ─── Section tabs ─────────────────────────────────── */
.section-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px;
  width: fit-content;
  box-shadow: var(--shadow);
}

/* ─── Members search bar ────────────────────────────── */
.members-search-wrap {
  position: relative;
  margin-bottom: 16px;
  max-width: 380px;
}
.members-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
  opacity: .7;
}
.members-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.members-search-input:focus  { outline: none; }
.members-search-input:focus-visible {
  border-color: var(--membres-icon);
  box-shadow: 0 0 0 3px rgba(71,85,105,.12);
}
.members-search-input[data-focus-silent]:focus,
.members-search-input[data-focus-silent]:focus-visible {
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.members-search-input::placeholder { color: var(--muted); }

/* ─── Historique — chips de filtre + recherche ──────── */
.rentals-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.ghc-fchip.ghc-fchip--rentals-active {
  background: var(--rentals-bg);
  border-color: var(--rentals-icon);
  color: var(--rentals-text);
}
.ghc-fchip-count {
  font-size: 11px;
  font-weight: 700;
  opacity: .75;
}
/* Cellules de tableau — hiérarchie titre/sous-texte */
.cell-main { font-weight: 600; }
.cell-sub  { font-size: 11px; color: var(--muted); }
.cell-late { color: var(--err-text); font-weight: 700; }

.section-tab {
  padding: 8px 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t-fast), color var(--t-fast);
}
.section-tab:hover { background: var(--bg); color: var(--text); }
.section-tab.active {
  background: var(--membres-pastel);   /* palette Administration (ardoise) */
  color: var(--membres-text);
  font-weight: 700;
}
.section-tab-volunteers.active {
  background: var(--green-light);
  color: var(--green-dark);
}
.section-tab-groups.active {
  background: var(--teal-light);
  color: var(--teal-dark);
}
.section-tab-overdue.active {
  background: var(--orange-light);
  color: var(--orange-dark);
}
.section-tab-returned.active {
  background: var(--teal-light);
  color: var(--teal-dark);
}
.section-tab-lost.active {
  background: var(--gry-bg);
  color: var(--gry-text);
}
.section-tab-all.active {
  background: var(--purple-light);
  color: var(--purple-dark);
}

/* ─── Small action buttons (table rows) ──────────── */
.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t-fast);
  white-space: nowrap;
}
/* Petits boutons d'action — intentions (la géométrie vient de .btn-sm).
   Bordure + texte teinté au repos, remplissage pastel au survol/activation. */
.btn-sm-green,
.btn-sm-orange,
.btn-sm-red    { background: transparent; border: 1px solid var(--hairline); }
.btn-sm-green  { color: var(--green-dark); }
.btn-sm-orange { color: var(--orange-dark); }
.btn-sm-red    { color: var(--err-text); }
.btn-sm-green:hover,  .btn-sm-green:active  { background: var(--green-light);  border-color: var(--green-light); }
.btn-sm-orange:hover, .btn-sm-orange:active { background: var(--orange-light); border-color: var(--orange-light); }
.btn-sm-red:hover,    .btn-sm-red:active    { background: var(--err-bg);       border-color: var(--err-bg); }
.b-indigo { background: var(--rental-bg); color: var(--rental-text); }

/* ─── Finance ───────────────────────────────────────── */
.sub-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 12px;
}
.sub-title:first-child { margin-top: 0; }

.amount-in  { color: var(--ok-text);   font-weight: 600; }
.amount-out { color: var(--err-text);  font-weight: 600; }

/* ─── Finance — filtres période + répartition par moyen ── */
.finance-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.ghc-fchip.ghc-fchip--finance-active {
  background: var(--finance-bg);
  border-color: var(--finance-icon);
  color: var(--finance-text);
}
.finance-search-input:focus-visible {
  border-color: var(--finance-icon);
  box-shadow: 0 0 0 3px rgba(234,88,12,.14);
}

.finance-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.finance-method-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  min-width: 130px;
}
.finance-method-icon {
  font-size: 18px;
  color: var(--finance-icon);
  flex-shrink: 0;
}
.finance-method-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-tertiary);
}
.finance-method-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-top: 1px;
}

/* ─── Buttons ───────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #FAF8F5;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
  white-space: nowrap;
}
.btn-primary:hover  { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
}
.btn-secondary:hover { background: var(--hover); }

/* ─── Form ──────────────────────────────────────────── */
.form-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 10px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Variante trois colonnes (volet Règlement : montant / unité / plafond). */
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.form-required { color: var(--err-text); }
.form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.form-textarea {
  resize: vertical;
  min-height: 72px;
}
.form-error {
  font-size: 13px;
  color: var(--err-text);
  background: var(--err-bg, #fef2f2);
  border: 1px solid var(--err-border, #fecaca);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 4px;
}

/* ─── Dashboard ─────────────────────────────────────── */

/* Stat row */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Chaque stat porte une des 3 palettes : prêts = Comptoir (vert),
   membres = Membres (ardoise), jeux = Catalogue (orange) */
.stat-card-comptoir  { border-left-color: var(--comptoir-icon); }
.stat-card-members   { border-left-color: var(--membres-icon); }
.stat-card-catalogue { border-left-color: var(--catalogue-icon); }
.stat-card-receivable { border-left-color: var(--warn-border); }
/* Encaisser une créance depuis le journal : le sélecteur tient dans la
   cellule et ressemble à l'étiquette qu'il remplace, l'action en plus. */
.fin-settle-sel {
  font-family: var(--font); font-size: var(--text-sm); color: var(--warn-text);
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: 8px; padding: 4px 8px; cursor: pointer; max-width: 190px;
}
.fin-settle-sel:disabled { opacity: .5; cursor: wait; }

/* Contre-passation : bouton discret dans la cellule montant, visible au
   survol de la ligne ; armé = rouge avec libellé « Confirmer ? ». */
.fin-reverse-btn {
  margin-left: 6px; padding: 2px 6px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-tertiary);
  font: inherit; font-size: 12px; cursor: pointer; opacity: 0; vertical-align: middle;
}
tr:hover .fin-reverse-btn, .fin-reverse-btn--armed { opacity: 1; }
.fin-reverse-btn:hover { background: var(--hover); color: var(--text); }
.fin-reverse-btn--armed { background: var(--err-bg); color: var(--err-text); font-weight: 600; }
.fin-reverse-btn:disabled { opacity: .5; cursor: wait; }
.fin-row-reversed td { opacity: .55; }

/* ── Ligne d'action ────────────────────────────────────────────────────────
   Un seul composant pour tous les « encarts avec icône, texte et action » :
   exports, lien de planning, adresse du catalogue public, offre au catalogue
   commun, interrupteur de publication. Ils existaient en trois copies presque
   identiques (.exports-row · .share-card · .pubcat-switch) qui divergeaient
   au fil des ajouts — d'où l'impression de flottement entre encarts voisins. */
.exports-list { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-8); }
.action-row {
  display: flex; align-items: center; gap: var(--space-7);
  padding: var(--space-7) var(--space-8); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.action-row--spaced { margin-top: var(--space-9); }   /* détaché de ce qui précède */
.action-row--check  { font-weight: 500; cursor: pointer; }
.action-row--check input {
  width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer;
}
.action-row-icon { font-size: var(--text-xl); color: var(--muted); flex: none; }
.action-row-txt  { flex: 1; min-width: 0; }
.action-row-t    { font-weight: 600; }
.action-row-d    { font-size: var(--text-md); color: var(--muted); margin-top: var(--space-1); }
.action-row-btn  { flex: none; white-space: nowrap; }

/* Catalogue global : bouton de pagination en pied de liste. */
.cg-load-more { display: block; width: calc(100% - 16px); margin: 8px; }

/* « Qui est au comptoir ? » : marque les bénévoles inscrits sur la
   permanence du jour (planning Teepli). */

.enr-srow-img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: none; }

.op-shift-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--green-light); color: var(--green-dark);
  font-size: 11px; font-weight: 600;
}

/* Épuré : chiffre KPI neutre (le repère de catégorie reste sur le liseré gauche) */
.stat-value {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.4px;
  line-height: 1;
  color: var(--text);
}

.stat-label {
  /* Aligné sur les headers de liste (.ghc-left-all-lbl) : casse-phrase, 12px */
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Widget grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.widget {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Hauteur alignée sur les headers de liste membre/catalogue (.ghc-left-hd) */
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 10px;
}

.widget-title {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Headers thématiques — même langage que les colonnes session du Comptoir :
   fond neutre + touche colorée de 2px, titre neutre, comptage en tag léger. */
.widget-header--returns { border-bottom: 2px solid var(--rental-text); }
.widget-header--overdue { border-bottom: 2px solid var(--err-text); }
.widget-header--returns .widget-count { background: var(--rental-bg); color: var(--rental-text); }
.widget-header--overdue .widget-count { background: var(--err-bg);    color: var(--err-text); }

.widget-count {
  font-size: 13px;
  font-weight: 700;
  background: var(--gry-bg);
  color: var(--muted);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.widget-count-warn { background: var(--warn-bg); color: var(--warn-text); }
.widget-count-err  { background: var(--err-bg);  color: var(--err-text); }

.widget-body {
  padding: 4px 0;
}

.widget-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Action list */
.action-list { display: flex; flex-direction: column; }

.action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.action-item:last-child { border-bottom: none; }
.action-item:hover { background: var(--bg); }

.action-item-body {
  flex: 1;
  min-width: 0;
}

.action-item-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-item-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-item-meta {
  flex-shrink: 0;
}

/* ─── Login overlay ─────────────────────────────────── */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #F0EDE8 0%, var(--gry-bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 40px 44px;
  width: 100%;
  max-width: 400px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.login-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--text);
}

.login-btn {
  width: 100%;
  margin-top: 22px;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 700;
}

.login-error {
  margin-top: 12px;
  padding: 9px 14px;
  background: var(--err-bg);
  color: var(--err-text);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ─── User pill (sidebar footer) ────────────────────── */
.user-pill {
  margin-top: 10px;
  padding: 8px 11px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-pill-role {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
}
.role-superadmin { background: var(--purple-light); color: var(--purple-dark); }
.role-admin      { background: var(--indigo-light); color: var(--indigo-dark); }
.role-volunteer  { background: var(--green-light);  color: var(--green-dark); }
.role-member     { background: var(--membres-bg); color: var(--membres-text); border: 1px solid var(--membres-border); }

.btn-logout {
  border: none;
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: underline;
}
.btn-logout:hover { color: var(--err-text); }

/* ─── Counter Mode ───────────────────────────────────── */

/* ── Shell ── */
.main.counter-active {
  padding: 12px 40px 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.counter-section {
  flex: 1;
  min-height: 0;
  display: none;        /* JS applique display:flex via navigate() */
  flex-direction: column;
  /* gap:0 → la barre de scan s'aligne au même niveau que les barres de
     recherche master-détail (seuls les 20px de marge de la frise comptent,
     comme .ghc-wrapper). L'espace barre↔colonnes est repris en margin-top. */
  gap: 0;
}

/* ══ A. HEADER ══ */
.counter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.counter-header-left {
  width: var(--header-left-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
/* Bouton "+" icône seule */
.counter-new-session-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  align-self: stretch;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}
.counter-new-session-btn:hover {
  background: var(--comptoir-bg);
  color: var(--comptoir-text);
  border-color: var(--comptoir-icon);
}
/* Centre : zone scan encre */
.counter-scan-zone {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Sessions en cours button */
.counter-sessions-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex: 1;
  min-width: 0;
}
.counter-sessions-btn:hover {
  background: var(--comptoir-bg);
  color: var(--comptoir-text);
  border-color: var(--comptoir-icon);
}
.counter-sessions-btn--has-sessions {
  background: var(--comptoir-bg);
  color: var(--comptoir-text);
  border-color: var(--comptoir-icon);
}

.counter-sessions-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--green-dark);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Sessions dropdown */
.counter-sessions-dd {
  position: fixed;
  z-index: var(--z-dropdown);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  max-width: 300px;
  overflow: hidden;
  animation: feedEnter .18s cubic-bezier(.34,1.4,.64,1) both;
}

.counter-sessions-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.counter-sessions-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.counter-sessions-item:last-child { border-bottom: none; }
.counter-sessions-item:hover { background: var(--bg); }

.counter-sessions-item--active { background: var(--comptoir-bg); }
.counter-sessions-item--active:hover { background: var(--comptoir-bg); }

.counter-sessions-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.counter-sessions-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.counter-sessions-item-current {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--comptoir-text);
  background: var(--comptoir-bg);
  border: 1px solid var(--comptoir-icon);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

/* The universal scan input */
.counter-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.counter-input-icon {
  position: absolute;
  left: 14px;
  font-size: 16px;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}

.counter-input {
  width: 100%;
  padding: 13px 52px 13px 44px;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font);
  transition: border-color .4s ease, box-shadow .4s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.counter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.counter-input::placeholder { color: var(--muted); font-weight: 400; }

.counter-input-kbd {
  position: absolute;
  right: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 3px 7px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font);
  pointer-events: none;
}

/* ── FEED TOASTS — flux normal dans la colonne membre ── */
.counter-feed {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  min-height: 50px;  /* espace réservé pour un toast — évite le déplacement de la section prêts */
}

/* Carte de base */
.counter-feed-card {
  position: relative;          /* ancrage de la barre timer */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 12px;
  overflow: hidden;            /* clip la barre timer */
  flex-shrink: 0;
  animation: feedEnter .22s cubic-bezier(.34,1.4,.64,1) both;
  pointer-events: all;
}

@keyframes feedEnter {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Flash overlay pleine carte — pseudo-élément ::after ── */

/* Entrée douce des nouvelles cartes session */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.session-item-card--enter {
  animation: cardEnter .22s cubic-bezier(.34,1.4,.64,1) both;
}

/* Couleurs par type */
.counter-feed-card--ok     { background: var(--ok-bg);        border-color: var(--ok-border);           color: var(--ok-text); }
.counter-feed-card--return { background: var(--rental-bg); border-color: var(--rental-border); color: var(--rental-text); }
.counter-feed-card--warn   { background: var(--warn-bg);       border-color: var(--warn-border);           color: var(--warn-text); }
.counter-feed-card--err    { background: var(--err-bg);        border-color: var(--err-border);           color: var(--err-text); }
.counter-feed-card--member { background: var(--comptoir-bg); border-color: var(--member-border); color: var(--comptoir-text); }

/* Bouton fermer (×) */
.counter-feed-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  color: currentColor;
  opacity: .45;
  transition: opacity var(--t-fast);
  font-family: var(--font);
  align-self: flex-start;
}
.counter-feed-dismiss:hover { opacity: 1; }

/* Contenu texte */
.counter-feed-icon  { font-size: 14px; flex-shrink: 0; line-height: 1; }
.counter-feed-body  { flex: 1; min-width: 0; }
.counter-feed-title { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.counter-feed-sub   { font-size: 11px;  margin-top: 1px;  opacity: .8;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Member panel (right column) ── */
.counter-member-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.counter-panel-idle {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: 0 16px 0;
}
.counter-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 18px;
  gap: 12px;
}

.counter-panel-member-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Sélecteur de compte d'emprunt (privé / foyer / groupe) */
.counter-ctx {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
  padding: 8px 10px; margin-top: 2px;
  background: var(--teal-light); border: 1px solid var(--teal-mid);
  border-radius: var(--radius-md);
}
.counter-ctx-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--teal-dark);
}
.counter-ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.counter-ctx-chip {
  padding: 5px 12px; border-radius: 20px; font-size: var(--text-sm); font-weight: 600;
  border: 1px solid var(--teal-mid); background: var(--surface); color: var(--teal-dark);
  cursor: pointer;
}
.counter-ctx-chip--on { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }

.counter-panel-member-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.counter-panel-member-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.counter-panel-membership-line {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.counter-panel-membership-line--expired {
  color: var(--err-text);
  font-weight: 600;
}

/* Direction A — la liste des prêts précédents n'est plus une carte dans la carte
   du panneau : dé-boîtée, séparée de l'identité membre par un simple filet. */
.counter-panel-section {
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
  overflow: hidden;
  flex-shrink: 0;
}

.counter-panel-section--loans {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.counter-panel-loans-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Étiquette de sous-section — aligne sur « EXEMPLAIRES » de la fiche Catalogue
   (.gmd-copies-section-lbl/count). Hauteur figée : le badge peut apparaître /
   disparaître sans décaler l'en-tête. */
.counter-panel-section-hd {
  padding: 0 12px;
  min-height: 34px;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
/* Badge numérique dans l'en-tête de section du panneau membre */
.counter-section-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--muted);
  flex-shrink: 0;
}

.counter-panel-loan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  transition: background var(--t-fast);
}
.counter-panel-loan-row:last-child { border-bottom: none; }
.counter-panel-loan-row:hover { background: var(--comptoir-bg); }  /* survol coloré = identité Comptoir */

.counter-panel-btn {
  padding: 5px 10px;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Actions de ligne récessives : icône seule, teinte sémantique au survol. */
.counter-panel-btn--return {
  background: transparent;
  color: var(--rental-text);
  border: none;
}
.counter-panel-btn--return:hover  { background: var(--rental-bg); }
.counter-panel-btn--return:active { background: var(--rental-bg); }

.counter-panel-btn--extend {
  background: transparent;
  color: var(--orange-dark);
  border: none;
}
.counter-panel-btn--extend:hover  { background: var(--orange-light); }
.counter-panel-btn--extend:active { background: var(--orange-light); }
.counter-panel-btn--renew {
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-mid);
  font-size: 10px;
  padding: 3px 8px;
}
.counter-panel-btn--renew:hover { background: var(--green-mid); color: #fff; }

/* ── Toast inline dans les colonnes session ── */
.counter-inline-toast {
  /* Même base que .counter-feed-card mais dans le flux de la colonne */
  margin-top: 4px;
  animation: feedEnter .22s cubic-bezier(.34,1.4,.64,1) both;
}

/* ── Bouton "Rendre tous les jeux" ── */
.counter-panel-return-all-wrap {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--hairline);
}
.counter-panel-return-all-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;          /* hauteur figée : le badge "2" → vide ne décale plus la ligne */
  box-sizing: border-box;
  padding: 9px 14px;
  background: var(--rental-bg);
  color: var(--rental-text);
  border: 1px solid var(--rental-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t-fast), border-color var(--t-fast);
  text-align: left;
}
.counter-panel-return-all-btn:hover:not(:disabled) {
  background: var(--rental-bg);
  border-color: var(--rental-text);
}
.counter-panel-return-all-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.counter-panel-return-all-count {
  margin-left: auto;
  min-width: 22px;
  text-align: center;
  background: var(--rental-text);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.5;
}

/* ── Dropdown (position: fixed, coordinates set by JS) ── */
.counter-dropdown {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 280px;
  overflow-y: auto;
}

.counter-dd-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.counter-dd-section-label .ti { font-size: 13px; }

.counter-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--t-fast);
  border-bottom: 1px solid var(--border);
}
.counter-dd-item:last-child { border-bottom: none; }
.counter-dd-item:hover,
.counter-dd-item.focused { background: var(--bg); }

.counter-dd-icon  { font-size: 18px; flex-shrink: 0; }
.counter-dd-main  { font-size: 13px; font-weight: 600; }
.counter-dd-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }
.counter-dd-badge { flex-shrink: 0; }

/* ── B/C/D. Colonnes 3x ── */
.counter-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 30fr 35fr 35fr;
  grid-template-rows: 1fr;
  gap: 12px;
  margin-top: 24px;   /* reprend l'espace barre↔colonnes (ancien gap de section) */
  transition: opacity var(--t-med) ease;
}
.counter-columns--dimmed {
  opacity: .4;
  pointer-events: none;
}
.counter-col {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Col membre */
.counter-col--member .counter-member-panel {
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-lg);
}
/* Cols session */
.counter-col--returns .session-col,
.counter-col--loans   .session-col {
  flex: 1;
  min-height: 0;
}
/* Footer fixe col prêts */
.session-col--with-footer {
  display: flex;
  flex-direction: column;
}
.session-col-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--bg);   /* suit le canvas crème (ne ressort pas) */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
}
/* Colonne étroite (tablette) : le CTA passe sous le total au lieu d'être tronqué. */
.session-col-footer .session-col-total      { flex-shrink: 0; }
.session-col-footer .counter-bar-btn--finish { flex: 1 1 auto; justify-content: center; }
.session-col-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.session-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.session-sep {
  display: none;
}

.session-col-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Hauteur alignée sur les headers de liste membre/catalogue (.ghc-left-hd) */
  padding: 6px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

/* Direction A — en-têtes de colonne épurés : fond neutre + touche colorée
   (vert = nouveaux prêts, bleu = retours), même langage que les en-têtes de
   liste Catalogue/Membres. Le comptage coloré (badge) porte le sens. */
.session-col-hd--loans   { background: transparent; border-bottom: 2px solid var(--green-mid); }
.session-col-hd--returns { background: transparent; border-bottom: 2px solid var(--rental-text); }

.session-col-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.session-col-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.session-col-badge--green  { background: var(--green-light);  color: var(--green-dark); }
.session-col-badge--indigo { background: var(--rental-bg); color: var(--rental-text); }

.session-col-clear-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.session-col-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--muted);
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: color var(--t-fast), background var(--t-fast);
}
.session-col-clear-btn:hover {
  color: var(--err-text);
  background: var(--err-bg);
}

.session-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.session-col-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 32px 16px;
}

/* ── Empty states iconiques ── */
.counter-empty-state {
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  text-align: center;
  width: 100%;
}
.counter-empty-icon {
  font-size: 30px;
  line-height: 1;
  opacity: .3;
}
.counter-empty-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
/* Empty state aligné en haut — pas de centrage vertical */

/* ── Empty states iconiques colonnes session + panel idle ── */
.session-col-empty-state {
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px 0;
  text-align: center;
  width: 100%;
}
.session-col-empty-icon {
  font-size: 28px;
  color: var(--border);
  line-height: 1;
  display: block;
}
.session-col-empty-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  opacity: .65;
}
.session-col-empty-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 200px;
}

/* Session item cards */
/* Direction A — cartes de session aplaties : pas d'ombre, filet léger,
   l'accent coloré à gauche porte le type (prêt / retour / prolongation). */
.session-item-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: none;
  font-family: var(--font);
}

.session-item-card--loan      { border-left: 2px solid var(--green-mid); }
.session-item-card--return    { border-left: 2px solid var(--rental-text); }
.session-item-card--extension { border-left: 2px solid var(--orange-mid); }

.session-item-card--late .gcu-meta { color: var(--warn-text); font-weight: 600; }

.session-item-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.session-item-title { font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-item-ref   { font-size: 10px; color: var(--muted); margin-top: 0; }

.session-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--t-fast);
}
.session-item-remove:hover { color: var(--err-text); }

.session-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-family: var(--font);
}

.session-item-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-weight: 600;
  font-family: var(--font);
}
.session-item-pill--green  { background: var(--green-light);  color: var(--green-dark); }
.session-item-pill--indigo { background: var(--rental-bg); color: var(--rental-text); }
.session-item-pill--warn       { background: var(--warn-bg);  color: var(--warn-text); }
.session-item-pill--muted      { background: var(--gry-bg);   color: var(--gry-text); }
.session-item-pill--quarantine { background: var(--warn-bg);   color: var(--warn-text); font-weight: 700; }
.session-item-pill--lost       { background: var(--err-bg);    color: var(--err-text);  font-weight: 700; }
.session-item-pill--extend { background: var(--orange-light);  color: var(--orange-dark); font-weight: 600; }

/* Date retour dans les lignes du panneau membre */
.counter-panel-loan-row {
  align-items: center;
  min-width: 0;
}
.counter-panel-loan-row .gcu-thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.counter-panel-loan-row .gcu-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.counter-panel-loan-row .gcu-title,
.counter-panel-loan-row .gcu-pub,
.counter-panel-loan-row .gcu-ref {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.counter-rental-actions { display: flex; gap: 5px; flex-shrink: 0; }

.session-item-actions {
  display: none;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.session-item-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: background var(--t-fast), color var(--t-fast);
  user-select: none;
}
.session-item-toggle:hover { background: var(--bg); color: var(--text); }
.session-item-toggle input { cursor: pointer; accent-color: var(--accent); }

.session-item-damage-note {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  resize: none;
  transition: border-color var(--t-fast);
  min-height: 52px;
}
.session-item-damage-note:focus {
  outline: none;
  border-color: var(--orange-dark);
  box-shadow: 0 0 0 2px rgba(194,65,12,.1);
}

/* ── Expand button ─────────────────────────────────────────────────────────── */
.session-item-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.session-item-expand-btn:hover { background: var(--bg); color: var(--text); }
.session-item-expand-btn.active { background: var(--bg); color: var(--text); }

/* ── Volet avancé ──────────────────────────────────────────────────────────── */
.session-item-advanced {
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  margin: 6px -10px -7px;
  padding: 9px 12px 10px;
  border-radius: 0 0 7px 7px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.session-item-advanced-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.session-item-advanced-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  min-width: 56px;
}

/* ── Inputs dans le volet ──────────────────────────────────────────────────── */
.session-item-date-input,
.session-item-price-input {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.session-item-date-input:focus,
.session-item-price-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ── Quick-buttons (semaines, annuler amende) ──────────────────────────────── */
.session-item-quick-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.session-item-quick-btn:hover { background: var(--comptoir-bg); color: var(--comptoir-text); border-color: transparent; }
.session-item-quick-btn--cancel {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}
.session-item-quick-btn--cancel:hover { background: var(--warn-bg); }

/* ── Note textarea (prêt) ──────────────────────────────────────────────────── */
.session-item-loan-note {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  resize: none;
  transition: border-color var(--t-fast);
  min-height: 44px;
  box-sizing: border-box;
}
.session-item-loan-note:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ── Groupe condition ──────────────────────────────────────────────────────── */
.session-item-condition-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.session-item-condition-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t-fast);
}
.session-item-condition-btn:hover { border-color: var(--accent); color: var(--text); }
.session-item-condition-btn--ok         { border-color: var(--green-mid);  background: var(--green-light);  color: var(--green-dark); }
.session-item-condition-btn--incomplete { border-color: var(--warn-border);            background: var(--warn-bg);      color: var(--warn-text); }
.session-item-condition-btn--broken     { border-color: var(--err-text);    background: var(--err-bg);       color: var(--err-text); }

/* ── Modificateurs état carte ──────────────────────────────────────────────── */
.session-item-card--condition-ok { border-left: 3px solid var(--green-mid); }

/* Éléments JS cachés — counter-bar-member et counter-bar-items sont dans un
   div[style="display:none"] dans le HTML pour que counterRenderBar() puisse
   y écrire sans erreur DOM. counter-bar-total et counter-bar-finish sont
   dans .session-col-footer (col 3). */

.counter-bar-member {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.counter-bar-items {
  font-size: 12px;
  color: var(--muted);
}

.counter-bar-total-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.counter-bar-total-value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text);
}

.counter-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
}
.counter-bar-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── CTA footer col 3 ── */
.counter-bar-btn--finish {
  background: var(--color-accent);
  color: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--t-fast), transform var(--t-fast);
}
.counter-bar-btn--finish:hover:not(:disabled) { background: var(--accent-hover); }
.counter-bar-btn--finish:active               { transform: scale(.98); }
.counter-bar-btn--finish:disabled             { opacity: .45; cursor: not-allowed; transform: none; }

/* ══ PAYMENT MODAL ══ */
.payment-modal {
  max-width: 460px;
  width: 100%;
}

/* Récap */
.payment-recap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.payment-recap-member {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.payment-recap-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.payment-recap-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.payment-recap-total {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text);
}
.payment-recap-currency {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}
.payment-recap-ops {
  font-size: 12px;
  color: var(--muted);
}

/* Zones */
.payment-zone { margin-bottom: 18px; }
.payment-zone:last-child { margin-bottom: 0; }
.payment-zone + .payment-zone {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.payment-zone-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.payment-zone-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Boutons direct : en ligne horizontale */
.payment-zone-btns--row { flex-direction: row; }
.payment-zone-btns--row .payment-btn {
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 10px;
}
.payment-zone-btns--row .payment-btn-icon { font-size: 22px; width: 100%; height: auto; }
.payment-zone-btns--row .payment-btn-title { font-size: 13px; }

/* Bouton de paiement — grand, tactile */
.payment-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), transform .08s, opacity var(--t-fast);
}
.payment-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--text);
}
.payment-btn:active:not(:disabled) { transform: scale(.985); }
.payment-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.payment-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: inherit;
}
.payment-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.payment-btn-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.payment-btn-sub {
  font-size: 12px;
  color: var(--muted);
}

/* Variantes couleur */
.payment-btn--skip .payment-btn-title { color: var(--muted); font-weight: 500; }

/* État loading pendant soumission */
.payment-btn--loading {
  opacity: .6;
  cursor: wait;
  pointer-events: none;
}

/* Écran succès */
.payment-success {
  text-align: center;
  padding: 20px 0 22px;
}
.payment-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--green-light);
  border-radius: 50%;
  font-size: 30px;
  color: var(--green-dark);
  margin-bottom: 14px;
}
.payment-success-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.payment-success-sub   { font-size: 13px; color: var(--muted); line-height: 1.5; }
.payment-receipt-btns  { display: flex; flex-direction: column; gap: 8px; }

/* Écran erreur */
.payment-error {
  text-align: center;
  padding: 14px 0 16px;
}
.payment-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--err-bg);
  border-radius: 50%;
  font-size: 26px;
  color: var(--err-text);
  margin-bottom: 12px;
}
.payment-error-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--err-text);
  margin-bottom: 8px;
}
.payment-error-msgs {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  text-align: left;
}
.payment-error-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.payment-error-actions .payment-btn { flex: 1; }

/* ══ ADAPTATIONS TACTILES — tablettes / postes comptoir ══ */
@media (pointer: coarse), (hover: none) {

  /* ── Session item cards ── */
  .session-item-card {
    padding: 11px 14px;
    gap: 7px;
  }

  /* Actions toujours visibles (plus de dépendance au hover) */
  .session-item-actions {
    display: flex;
  }

  /* Bouton ✕ suppression — zone tactile élargie */
  .session-item-remove {
    padding: 6px 8px;
    font-size: 15px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Pills + toggles — espacement accru */
  .session-item-toggle {
    padding: 7px 10px;
    font-size: 13px;
  }

  /* ── Panneau membre ── */
  .counter-panel-loan-row {
    padding: 12px 14px;
  }

  .counter-panel-btn {
    padding: 9px 14px;
    font-size: 13px;
    min-height: 40px;
  }

  /* ── Input recherche ── */
  .counter-input {
    padding: 16px 52px 16px 44px;
    font-size: 17px;
  }

  /* Masquer le hint clavier (Ctrl+↵) sur touch */
  .counter-input-kbd {
    display: none;
  }

  /* ── Boutons barre de validation ── */
  .counter-bar-btn,
  .counter-bar-btn--finish {
    padding: 14px 24px;
    font-size: 15px;
    min-height: 48px;
  }

  /* ── Sessions button ── */
  .counter-sessions-btn {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 44px;
  }

  /* ── Dropdown items — cibles plus grandes ── */
  .counter-dd-item {
    padding: 13px 16px;
  }

  /* ── En-têtes colonnes session ── */
  .session-col-hd {
    padding: 13px 20px;
  }

  .session-col-clear-btn {
    padding: 8px 10px;
    font-size: 13px;
    min-height: 40px;
  }

  /* ════════════════════════════════════════════════════════════════════════════
     ZONES TACTILES — Catalogue, Membres, modales
     ════════════════════════════════════════════════════════════════════════════ */

  /* ── Boutons d'action fiche exemplaire (.gmd-act) ────────────────────────── */
  /* Éléments les plus sollicités dans le panneau détail : Rendre, Quarantaine… */
  .gmd-act {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
  }

  /* ── Chips de filtre topbar (.ghc-fchip) ─────────────────────────────────── */
  .ghc-fchip {
    min-height: 36px;
    padding: 8px 14px;
  }

  /* ── Bouton réinitialiser (.ghc-topbar-reset) ────────────────────────────── */
  .ghc-topbar-reset {
    min-height: 36px;
    padding: 8px 14px;
  }

  /* ── Chips de stockbar ───────────────────────────────────────────────────── */
  .ghc-left-stock-chip,
  .mmd-stock-chip {
    min-height: 36px;
  }

  /* ── CTA footer — Catalogue & Membres ───────────────────────────────────── */
  .gmd-detail-footer-btn,
  .mmd-detail-footer-btn {
    min-height: 44px;
    padding: 12px 20px;
  }

  /* ── Onglets fiche membre ────────────────────────────────────────────────── */
  .mmd-tab {
    padding: 12px 14px;
  }

  /* ── Bouton "+ Ajouter" ──────────────────────────────────────────────────── */
  .btn-add-game {
    min-height: 36px;
  }

  /* ── Bouton fermeture modale générique (.modal-close) ────────────────────── */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Sidebar toggle ──────────────────────────────────────────────────────── */
  .sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablette (≤ 900 px)
   Cible : iPad paysage 1024 px — espace utile ~664 px après sidebar 280 px
   ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Paddings du conteneur principal ─────────────────────────────────────── */
  .main {
    padding: 12px 16px 32px;
  }
  .main.counter-active {
    padding: 12px 16px 32px;
  }
  /* Les variantes md-active n'écrasent que padding-bottom — alignement  */
  .main.games-md-active,
  .main.members-md-active {
    padding-bottom: 32px;
  }

  /* ── Comptoir — réagencement 2 colonnes (portrait / tablette étroite) ─────── */
  /* Au lieu de 3 colonnes serrées : membre en haut (pleine largeur, hauteur
     plafonnée), Retours + Nouveaux prêts côte à côte en dessous.            */
  .counter-section { gap: 0; }
  .counter-columns {
    gap: 8px; margin-top: 16px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas:
      "member member"
      "returns loans";
  }
  .counter-col--member  { grid-area: member; max-height: 42vh; }
  .counter-col--returns { grid-area: returns; }
  .counter-col--loans   { grid-area: loans; }

  /* En-tête colonne membre : libère le width fixe 210 px */
  .counter-header-left {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
  /* Bouton "+ Ajouter" : libère le width fixe, reste à sa taille naturelle */
  .btn-add-game {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Cartes exemplaire : un peu plus serrées sur petit écran. */
  #section-games .gmd-ic { padding: 9px 12px; min-height: 60px; }

  /* ── Gap section membres ─────────────────────────────────────────────────── */
  #members-content { gap: 14px; }

  /* ── Topbar filtres — 2 lignes ───────────────────────────────────────────── */
  /* Ligne 1 : btn-add (auto) + search (flex: 1) côte à côte                  */
  /* Ligne 2 : filter-row (flex-basis: 100% dans la base → force sa ligne)    */
  .ghc-topbar { gap: 6px 8px; }
  .ghc-search-wrap { flex: 1 1 auto; }
  .ghc-filter-row  { margin-top: 6px; gap: 4px; }
  /* Chips sur 2 lignes : le trait extensible créerait un filet pleine largeur */
  .ghc-filter-fill { display: none; }

}

/* ─── Add Game button ───────────────────────────────── */
.btn-add-game {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font); flex-shrink: 0; white-space: nowrap;
  width: var(--header-left-w);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
/* Hover thématique : orange sur Catalogue, bleu sur Membres */
#games-content .btn-add-game:hover {
  background: var(--orange-light);
  color: var(--orange-dark);
  border-color: var(--orange-mid);
}
#members-content .btn-add-game:hover {
  background: var(--membres-bg);
  color: var(--membres-text);
  border-color: var(--membres-border);
}
.btn-add-game:active { transform: scale(.98); }

/* ─── Add Game Modal ────────────────────────────────── */
.add-game-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.add-game-backdrop.open {
  display: flex;
  animation: overlayFadeIn var(--t-fast) ease;
}
.add-game-backdrop.open .add-game-modal {
  animation: modalSlideIn .18s ease;
}
.add-game-backdrop.closing {
  animation: overlayFadeOut var(--t-fast) ease forwards;
}
.add-game-backdrop.closing .add-game-modal {
  animation: modalSlideOut var(--t-fast) ease forwards;
}

.add-game-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  height: 80vh; max-height: 640px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}

/* En-tête migré sur le gabarit .modal--banded (.modal-hd) — voir index.html */
.agm-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.agm-breadcrumb button {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px;
  display: flex; align-items: center; gap: 3px; padding: 0;
  font-family: var(--font);
}
.agm-breadcrumb button:active { color: var(--text); }
.agm-breadcrumb-sep { font-size: 10px; }
.agm-breadcrumb-cur { color: var(--text); font-weight: 600; }

/* Screen A : flex column, la liste prend tout l'espace */
.add-game-modal-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 0;
}
/* Screen B : formulaire scrollable avec padding */
.add-game-modal-body.agm-body-form {
  overflow-y: auto;
  padding: 14px 16px;
}

/* ─── Screen A — Search (sticky) ────────────────────── */
.agm-search-area {
  flex-shrink: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.agm-search-wrap { position: relative; }
.agm-search-icon {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; color: var(--muted); pointer-events: none;
}
.agm-search-input {
  width: 100%; padding: 9px 12px 9px 34px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 13px; color: var(--text); background: var(--bg);
  font-family: var(--font); outline: none;
}
.agm-search-input:focus { border-color: var(--text); box-shadow: var(--ring); }

/* ─── Screen A — Liste catalogue ─────────────────────── */
.agm-results {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
}

.agm-result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.agm-result-row:last-child { border-bottom: none; }
.agm-result-row:hover { background: var(--bg); }
.agm-result-row:active { background: var(--border); }

.agm-result-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  flex-shrink: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; overflow: hidden;
  border: 1px solid var(--border);
}
.agm-result-thumb img { width: 100%; height: 100%; object-fit: cover; }

.agm-result-info { flex: 1; min-width: 0; }
.agm-result-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agm-result-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.agm-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  padding: 32px 16px; color: var(--muted); text-align: center;
}
.agm-empty-icon { font-size: 28px; opacity: .5; }
.agm-empty-label { font-size: 13px; }

/* Badge "déjà au catalogue" dans Screen A */
.agm-in-catalogue-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--ok-bg, #DCFCE7); color: var(--ok-text, #15803D);
  letter-spacing: .02em;
}

.agm-custom-link-wrap {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 16px 14px;
}
.agm-custom-link {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--muted); font-family: var(--font);
  text-decoration: underline; text-underline-offset: 2px;
  padding: 0;
}
.agm-custom-link:active { color: var(--text); }

/* ─── Screen B — Configuration ──────────────────────── */
.agm-game-recap {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border-radius: var(--radius-md);
  padding: 12px; margin-bottom: 16px;
}
.agm-recap-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; overflow: hidden;
}
.agm-recap-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.agm-recap-info { flex: 1; min-width: 0; }
.agm-recap-title { font-size: 14px; font-weight: 700; color: var(--text); }
.agm-recap-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.agm-recap-meta  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.agm-meta-chip   {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: var(--radius-xs);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
}

.agm-copies-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.agm-copies-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.agm-copies-count { font-size: 11px; color: var(--muted); }
.agm-add-copy-btn {
  background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 0 10px; height: 28px; font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--text); font-family: var(--font);
  display: flex; align-items: center; gap: 4px;
}
.agm-add-copy-btn:active { background: var(--bg); }

.agm-copies-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }

.agm-copy-note {
  font-size: 11px; color: var(--muted);
  margin-top: 4px; margin-bottom: 16px;
}

.agm-actions {
  display: flex; gap: 8px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--border);
}

/* ─── Form fields ───────────────────────────────────── */
.agm-field-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.agm-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.agm-input {
  width: 100%; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font-family: var(--font); outline: none;
}
.agm-input:focus { border-color: var(--text); box-shadow: var(--ring); }

/* Copy rows */
.agm-copy-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.agm-copy-scan-icon { font-size: 15px; color: var(--muted); flex-shrink: 0; }
.agm-copy-input { flex: 1; border: none; background: transparent; font-size: 13px; font-family: var(--font); font-weight: 600; color: var(--text); outline: none; min-width: 0; }
.agm-copy-del { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 2px; min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center; }
.agm-copy-del:active { color: var(--err-text); }

/* Buttons */
.agm-confirm-btn { flex: 1; height: 44px; background: var(--text); color: var(--surface); border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font); }
.agm-confirm-btn:active { background: var(--accent); }
.agm-confirm-btn:disabled { opacity: .6; pointer-events: none; }
.agm-back-btn { height: 44px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0 14px; font-size: 13px; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 6px; font-family: var(--font); }
.agm-back-btn:active { background: var(--border); }

/* Error */
.agm-form-error { display: none; font-size: 13px; color: var(--err-text); background: var(--err-bg); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 8px; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Toast ─────────────────────────────────────────── */
.lybli-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--text); color: var(--surface);
  padding: 10px 18px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transition: opacity var(--t-med), transform .3s;
  z-index: 400; white-space: nowrap; pointer-events: none;
}
.lybli-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════════
   GAMES — HYBRID CONTEXTUAL INTERFACE (GHC)
   Préfixe ghc- · Palette Orange/Ambre v5 · Trois états : idle / results / single
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 1 · Main container */
.main.games-md-active {
  overflow: hidden;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
}

/* ─── Catalogue global — master-detail re-hébergé dans la surcouche
   Administration (onglet Catalogue). Le volet passe en layout fixe. ─────── */
#ov-administration .set2-pane--cg {
  display: flex; flex-direction: column;
  overflow: hidden;
}
#stp-catalogue.active {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
/* Compression : liste de concepts plus étroite que sur l'ancienne page. */
#stp-catalogue .ghc-left { width: 280px; }
/* Écran de volet (concept / édition) ouvert dans l'onglet Catalogue : le
   panneau est en flex column overflow:hidden → l'écran scrolle lui-même. */
#stp-catalogue .adm-screen { flex: 1; min-height: 0; overflow-y: auto; }

/* ─── Enrichissement du catalogue global (onglet Administration) ────────── */
.enr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.enr-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg);
  font-family: var(--font); text-align: left; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.enr-tile:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); }
.enr-tile:disabled { opacity: .45; cursor: default; }
.enr-tile i { font-size: 18px; color: var(--muted); margin-bottom: 4px; }
.enr-tile-count { font-size: 22px; font-weight: 800; color: var(--text); }
.enr-tile-lbl { font-size: 13px; font-weight: 600; color: var(--text); }
.enr-tile-sub { font-size: 11px; color: var(--muted); }
.enr-import-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg); padding: 14px 16px;
}
.enr-import-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.enr-import-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.enr-hint { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; margin: 0 0 var(--space-7); max-width: 640px; }

/* File de complétion */
.enr-card-hd {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  background: var(--bg); border-radius: 10px; padding: 12px 14px;
}
#enr-img-preview {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
  background: var(--surface); flex-shrink: 0;
}
.enr-card-title { font-size: 16px; font-weight: 800; color: var(--text); }
.enr-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.enr-ed-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.enr-ed-table td { padding: 4px 8px 4px 0; vertical-align: middle; }
.enr-ed-table td:first-child { color: var(--muted); white-space: nowrap; }
.enr-ed-in { font-size: var(--text-sm); padding: 6px 8px; }

/* Fusion des doublons */
.enr-dup-group {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 14px; margin-bottom: 12px; background: var(--bg);
}
.enr-dup-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.enr-dup-card {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: var(--surface); min-width: 210px; flex: 1;
}
.enr-dup-card:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.enr-dup-card input { margin-top: 3px; }
.enr-dup-title { font-size: 13px; font-weight: 700; color: var(--text); display: block; }
.enr-dup-id { font-weight: 500; color: var(--muted); font-size: 11px; }
.enr-dup-meta { font-size: var(--text-xs); color: var(--muted); display: block; margin-top: 2px; }

/* Sélecteur de portée du Catalogue (public / jeux locaux d'une asso) */
.cg-scope-sel { width: auto; max-width: 260px; font-size: 12px; padding: 6px 10px; flex-shrink: 0; }

/* Recherche directe */
.enr-search-count { font-size: var(--text-xs); color: var(--muted); margin: 10px 0 6px; }
.enr-srow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; border-bottom: 1px solid var(--hairline);
  background: transparent; font-family: var(--font); cursor: pointer;
  transition: background var(--t-fast);
}
.enr-srow:hover { background: var(--hover); }
.enr-srow img, .enr-srow-dice {
  width: 36px; height: 36px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
  background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.enr-srow-body { flex: 1; min-width: 0; }
.enr-srow-title { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.enr-srow-meta { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.enr-flag {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--bg); color: var(--muted); flex-shrink: 0;
}
.enr-flag--ok { background: var(--ok-bg); color: var(--ok-text); }
.enr-flag--err { background: var(--err-bg); color: var(--err-text); }

/* Catalogue global : fiche désactivée estompée dans la liste */
.cg-item--off { opacity: .45; }

/* ─── Composants (nomenclature de pièces par édition) ───────────────────── */
.comp-list { display: flex; flex-wrap: wrap; gap: 6px; }
.comp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 12px; color: var(--text);
}
.comp-chip b { font-weight: 800; }

/* Pointage par exemplaire : chaque boîte perd ses propres pièces, on coche
   ce qui manque ici et maintenant. Cible tactile confortable au comptoir. */
.comp-chip--check {
  min-height: 34px; padding: 6px 12px; cursor: pointer;
  border-radius: 10px; text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.comp-chip--check i { color: var(--muted); font-size: 15px; }
.comp-chip--check:hover { background: var(--hover); }
.comp-chip--ko {
  border-color: var(--err-border); color: var(--err-text); background: var(--err-bg);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.comp-chip--ko:hover { background: var(--err-bg); filter: brightness(.97); }
.comp-chip--ko i { color: var(--err-text); text-decoration: none; }
/* Pointage partiel : 1 dé perdu sur 3 — la pièce n'a pas disparu, elle est
   entamée. Ni le vert du complet ni le rouge barré du tout-manquant. */
.comp-chip--part {
  border-color: var(--warn-border); color: var(--warn-text); background: var(--warn-bg);
}
.comp-chip--part i { color: var(--warn-text); }
.comp-chip-miss {
  font-size: 11px; font-weight: 700; opacity: .85;
  padding-left: 6px; margin-left: 2px; border-left: 1px solid currentColor;
}
/* Compteur d'unités manquantes, ouvert dans la puce elle-même. */
.comp-chip--step {
  cursor: default; background: var(--surface); border-color: var(--border);
  color: var(--text); text-decoration: none; gap: 8px;
}
.comp-step { display: inline-flex; align-items: center; gap: 2px; }
.comp-step-lbl { font-weight: 600; }
.comp-step-tot { color: var(--muted); font-size: 11px; margin-right: 4px; }
.comp-step-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); font-size: 14px; line-height: 1;
}
.comp-step-btn:hover { background: var(--hover); }
.comp-step-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.comp-step b { min-width: 16px; text-align: center; font-weight: 800; }
.ret-comp-badge { margin-left: auto; padding-left: 10px; font-size: var(--text-xs); }
.ret-comp-panel .comp-list { margin-top: 4px; }
#section-games .gmd-comp-state { float: right; text-transform: none; letter-spacing: 0; font-size: var(--text-xs); }
.gmd-comp-state--ok { color: var(--ok-text); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.gmd-comp-state--ko { color: var(--err-text); font-weight: 700; }
.gmd-comp-help {
  margin: 0 0 8px; font-size: var(--text-xs); color: var(--muted);
}
.ghc-comp-wrap { padding: 4px 0; }
.ghc-comp-hd { font-size: var(--text-xs); font-weight: 700; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.ret-comp-panel { margin: 6px 0 2px; padding: 10px 12px; background: var(--bg); border-radius: 10px; }
/* Déclaration de perte : bandeau rouge doux, l'action d'annulation à droite. */
.ret-lost-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--err-bg); color: var(--err-text);
}
.ret-lost-row > i { font-size: 18px; flex-shrink: 0; }
.ret-lost-txt { flex: 1 1 auto; font-size: var(--text-sm); line-height: 1.4; }
.ret-lost-row .ret-act-btn { flex-shrink: 0; }

/* Import en masse */
.enr-imp-maprow { display: flex; flex-wrap: wrap; gap: 10px; }
.enr-imp-col { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); min-width: 130px; }
.enr-imp-col .form-input { font-size: 12px; padding: 6px 8px; }

#catalogue-global-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Identité banner thème Catalogue global (même couleurs que Catalogue) */
.cg-identity {
  background: var(--catalogue-bg);
  border-bottom: 1px solid var(--catalogue-border);
  padding: 16px 18px 14px;
  min-height: 116px;
}
.cg-identity .gmd-identity-title   { color: var(--catalogue-text); }
.cg-identity .gmd-identity-publisher { color: var(--catalogue-muted); font-size: 12px; }

/* Chip catégorie ESAR */
.cg-cat-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  background: var(--catalogue-bg); color: var(--catalogue-text);
  border: 1px solid var(--catalogue-border);
}

/* Liste éditions */
.cg-editions-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.cg-edition-row {
  display: grid;
  grid-template-columns: 36px 1fr 64px 80px 64px 32px;
  gap: 8px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--border);
  font-size: 12px;
}
.cg-edition-row:first-child { border-top: none; }
.cg-edition-hd {
  display: grid;
  grid-template-columns: 36px 1fr 64px 80px 64px 32px;
  gap: 8px; align-items: center;
  padding: 7px 14px;
  background: var(--bg); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.cg-edition-flag { font-size: 11px; font-weight: 700; color: var(--muted); }
.cg-edition-title { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-edition-meta  { color: var(--muted); text-align: center; }
.cg-edition-edit-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  background: none; border: 1px solid transparent;
  color: var(--muted); cursor: pointer; font-size: 13px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cg-edition-edit-btn:hover { background: var(--bg); border-color: var(--hairline); color: var(--text); }

/* Idle detail panel */
/* .cg-detail-empty* : fusionné dans le groupe partagé des placeholders master-detail */

#section-games.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#games-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Wrapper principal ──────────────────────────────────────────────────────── */
.ghc-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}

/* Utilitaire masquage */
.ghc-hidden { display: none !important; }

/* ── Topbar : barre de recherche ────────────────────────────────────────────── */
.ghc-topbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.ghc-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.ghc-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 18px; pointer-events: none; z-index: 1;
}
.ghc-search-input,
.mmd-topbar-input {
  width: 100%; padding: 13px 48px 13px 50px;
  border: 2px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); font-family: var(--font);
  font-size: 15px; font-weight: 500; outline: none; box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.ghc-search-input:focus-visible {
  border-color: var(--catalogue-icon);
  box-shadow: 0 2px 12px rgba(234,88,12,.15);
}
.ghc-search-input[data-focus-silent]:focus,
.ghc-search-input[data-focus-silent]:focus-visible {
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ghc-search-input::placeholder { color: var(--muted); font-weight: 400; }
.ghc-search-clear {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 16px; padding: 4px; line-height: 1;
  border-radius: 50%;
}
.ghc-search-clear:active { color: var(--text); }

/* ── Barre de recherche compacte ─────────────────────────────────────────────── */
.ghc-search-input--compact {
  padding: 9px 44px 9px 46px;
  font-size: 13px;
  border-radius: var(--radius-md);
  border-width: 1.5px;
  box-shadow: none;
}

/* ── Ligne de filtres unifiée ────────────────────────────────────────────────── */
.ghc-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: 14px;
  flex-shrink: 0;
  flex-basis: auto;
  padding: 2px 0;
  position: relative;
  z-index: 20;
}
.ghc-filter-sep {
  width: 1px; height: 18px;
  background: var(--border);
  flex-shrink: 0; margin: 0 12px;
}
/* Trait extensible : occupe l'espace vide à droite des chips (filet centré) */
.ghc-filter-fill {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--border);
  margin-left: 6px;
}

/* ── Chip pilulaire — base ───────────────────────────────────────────────────── */
.ghc-fchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  background: var(--bg); color: var(--muted);
  font-family: var(--font); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  line-height: 1;
}
/* Wrapper transparent — laisse les enfants participer directement au flex parent */
.ghc-fchip-row { display: contents; }
/* Grille de superposition : visible + fantôme occupent la même cellule.
   Le fantôme (invisible) réserve la largeur du texte le plus long. */
.ghc-fchip-label-wrap {
  display: grid;
}
.ghc-fchip-label-wrap > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.ghc-fchip-ghost {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.ghc-fchip:active { opacity: .8; }

/* ── Labels séparateurs dans la filter-row ───────────────────────────────── */
.ghc-filter-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); flex-shrink: 0; padding: 0 2px;
}

/* ── Chips famille inventaire (stock) ────────────────────────────────────── */
.ghc-fchip--inv          { border-color: var(--catalogue-border); color: var(--catalogue-muted); background: transparent; }
.ghc-fchip--inv:hover    { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: var(--catalogue-border); }
.ghc-fchip--inv-active   {
  background: var(--catalogue-bg); color: var(--catalogue-text);
  border-color: var(--catalogue-icon);
  box-shadow: 0 0 0 2px rgba(234,88,12,.10);
}
.ghc-fchip--inv-active:hover { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: var(--catalogue-icon); }
/* ── Chips famille recommandation (critères) ─────────────────────────────── */
.ghc-fchip--crit          { border-color: var(--border); color: var(--muted); background: transparent; }
.ghc-fchip--crit:hover    { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: var(--catalogue-border); }
.ghc-fchip--crit-active   {
  background: var(--catalogue-bg); color: var(--catalogue-text);
  border-color: var(--catalogue-icon);
  box-shadow: 0 0 0 2px rgba(234,88,12,.10);
}
.ghc-fchip--crit-active:hover { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: var(--catalogue-icon); }

/* ── Override chips actives — page Membres (thème slate) ─────────────────── */
/* Scopé à la section : les chips de filtre vivent dans #mmd-filter-row-a,
   hors de la topbar — il faut couvrir toute la page Membres. */
#section-members .ghc-fchip--crit-active {
  background: var(--membres-bg);
  color: var(--membres-text);
  border-color: var(--membres-icon);
  box-shadow: 0 0 0 2px rgba(71,85,105,.10);
}
#section-members .ghc-fchip.ghc-fchip--crit-active:hover { background: var(--membres-bg); color: var(--membres-text); border-color: var(--membres-icon); }
#section-members .ghc-fchip--crit:hover {
  background: var(--membres-bg);
  color: var(--membres-text);
  border-color: var(--membres-border);
}

/* ── Bouton réinitialiser ─────────────────────────────────────────────────── */
.ghc-topbar-reset {
  flex-shrink: 0;
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ghc-topbar-reset:hover {
  background: var(--catalogue-bg);
  color: var(--catalogue-text);
  border-color: var(--catalogue-border);
}
.ghc-topbar-reset:active {
  border-color: var(--catalogue-icon);
}
/* Reset teinté par la palette de page (le bouton membre vit hors de #mmd-topbar,
   on scope donc la section entière). */
#section-members .ghc-topbar-reset:hover {
  background: var(--membres-bg);
  color: var(--membres-text);
  border-color: var(--membres-border);
}
#section-members .ghc-topbar-reset:active {
  border-color: var(--membres-icon);
}
#section-rentals .ghc-topbar-reset:hover {
  background: var(--rentals-bg); color: var(--rentals-text); border-color: var(--rentals-icon);
}
#section-finance .ghc-topbar-reset:hover {
  background: var(--finance-bg); color: var(--finance-text); border-color: var(--finance-icon);
}

.ghc-filter-reset {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-family: var(--font);
  font-size: 11px; font-weight: 600; cursor: pointer;
  margin-left: auto; flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ghc-filter-reset:hover { background: var(--bg); color: var(--text); border-color: var(--text); }

.gmd-chip-wrap    { position: relative; }

/* ── Idle panel (rendered inside gmd-detail) ─────────────────────────────────── */
.ghc-idle-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.ghc-idle-placeholder-text {
  max-width: 340px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 400;
}

/* ── Ligne principale : master-detail permanent ──────────────────────────────── */
.ghc-main-row {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 12px;
  margin-top: 10px;
}

/* ── Colonne gauche (contextuelle) ───────────────────────────────────────────── */
.ghc-left {
  width: 32%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: opacity .3s ease;
}
.ghc-left-section {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
/* Membres & Catalogue : fond de liste raccord avec les cartes inactives (--bg)
   → l'espace vide sous les cartes ne tranche plus avec elles. */
#section-members .ghc-left-section,
#section-games   .ghc-left-section { background: var(--bg); }
.ghc-left-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ghc-left-all-lbl {
  font-size: 12px; font-weight: 700; color: var(--muted);
}

/* Headers de liste/bloc colorés par palette de page — même langage que les
   colonnes du Comptoir (retours / nouveaux prêts). Teintes pastel, badge blanc. */
#section-members .ghc-left-hd {
  background: var(--membres-pastel);   /* slate-200 pastel */
}
#section-members .ghc-left-all-lbl { color: var(--membres-text); }
#section-members .ghc-left-badge   { background: var(--surface); color: var(--membres-text); }

#section-games .ghc-left-hd,
#catalogue-global-content .ghc-left-hd {
  background: var(--catalogue-border);   /* orange-200 pastel */
}
#section-games .ghc-left-all-lbl,
#catalogue-global-content .ghc-left-all-lbl { color: var(--catalogue-text); }
#section-games .ghc-left-badge,
#catalogue-global-content .ghc-left-badge { background: var(--surface); color: var(--catalogue-text); }

/* Direction A — Catalogue dé-boîté (pilote) : liste et fiche sur le canvas,
   séparées par un filet vertical ; en-tête de liste neutre (plus de pastel). */
#section-games .ghc-left { border-right: 1px solid var(--hairline); padding-right: 14px; }
#section-games .ghc-left-section  { background: transparent; border: none; border-radius: 0; }
#section-games .ghc-left-hd       { background: transparent; border-bottom: 2px solid var(--catalogue-icon); }  /* touche colorée en haut de liste */
#section-games .ghc-left-all-lbl  { color: var(--muted); font-weight: 500; }
#section-games .ghc-left-badge    { background: transparent; color: var(--muted); }
#section-games .ghc-center-inner  { background: transparent; border: none; border-radius: 0; padding-left: 18px; }
/* En-tête de fiche jeu : on garde sa structure (carte) — c'est le cœur de la page.
   (Les exemplaires en dessous sont dé-boîtés, voir plus bas.) */
/* Exemplaires en cartes rectangulaires : une carte = un exemplaire physique.
   Grille auto-fill ; en-tête (réf + statut), corps (état / prêt), pied (actions). */
/* ── Tiroir de filtres du catalogue (replié par défaut) ──────────────────── */
#section-games #ghc-filter-row { display: none; }
#section-games #ghc-filter-row.ghc-filter-row--open { display: flex; }
/* Rôle adhérent : la carte d'exemplaire informe, elle n'ouvre rien. */
.gmd-ic--lecture { cursor: default; }
.gmd-ic--lecture:hover { transform: none; box-shadow: none; }

/* Membres : mêmes filtres repliés, mêmes règles — la couleur de page en plus. */
#section-members #mmd-filter-row-a { display: none; }
#section-members #mmd-filter-row-a.ghc-filter-row--open { display: flex; }
#section-members .ghc-filters-toggle--active { border-color: var(--membres-icon); color: var(--membres-text); }
#section-members .ghc-filters-count { background: var(--membres-icon); }
.ghc-filters-toggle { width: auto !important; }
.ghc-filters-toggle--on { background: var(--hover); }
.ghc-filters-toggle--active { border-color: var(--catalogue-icon); color: var(--catalogue-text); }
.ghc-filters-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px;
  border-radius: 999px; background: var(--catalogue-icon); color: #fff;
  font-size: 10px; font-weight: 700;
}

/* ── Liste du catalogue : densité « équilibrée » (2 lignes, ~46 px) ────────
   Titre en entier (plus d'ellipse à 2 lignes), « éditeur · langue » sur une
   seule ligne muette, vignette 30px. Reste au-dessus du seuil tactile
   confortable (~44px) — l'app tourne sur tablette au comptoir. */
#section-games .gmd-item-card { padding: 7px 10px; gap: 8px; min-height: 46px; }
#section-games .gmd-item-card .gcu-thumb { width: 30px; height: 30px; flex-shrink: 0; }
#section-games .gmd-item-card .gcu-title { font-size: var(--text-sm); line-height: 1.25; }
#section-games .gmd-item-card .gcu-title-text { white-space: normal; }
#section-games .gmd-item-card .gcu-pub { font-size: 11px; color: var(--muted); }

/* ── Fiche jeu : en-tête compact (vignette + identité + badges) ───────────
   Remplace l'ancien bloc pastel en deux colonnes : ~120 px rendus aux
   exemplaires, qui suivent immédiatement. */
#section-games .gmd-head {
  display: flex; align-items: flex-start; gap: 14px; flex-shrink: 0;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--hairline);
}
#section-games .gmd-head-cover {
  width: 90px; height: 90px; flex-shrink: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#section-games .gmd-head-cover img { width: 100%; height: 100%; object-fit: contain; }
#section-games .gmd-head-txt { flex: 1; min-width: 0; }
#section-games .gmd-head-title { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.2; }
#section-games .gmd-head-sub { font-size: var(--text-sm); color: var(--muted); margin: 2px 0 8px; }
#section-games .gmd-head-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#section-games .gmd-head-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Détails, sous les exemplaires */
#section-games .gmd-details {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
#section-games .gmd-details-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
#section-games .gmd-details .gmd-id-attr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 16px; margin-bottom: 12px;
}
#section-games .gmd-details .gmd-id-attr--full { margin-top: 10px; }

/* ── Fiche exemplaire : la bannière d'état porte la fiche ─────────────────
   Elle dit l'état, la boîte et le complément qui va avec, et loge les actions
   qui modifient cet état. Remplace l'ancien bandeau d'identité (cote géante
   répétée trois fois, pastilles redondantes). */
/* Fond neutre + liseré coloré (même langage que les cartes exemplaire) :
   l'aplat plein était trop agressif sur toute la largeur du volet. */
#section-games .gmd-copy-state {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  margin: 12px 16px 4px; padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
#section-games .gmd-copy-state-thumb {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
#section-games .gmd-copy-state-thumb img { width: 100%; height: 100%; object-fit: contain; }
#section-games .gmd-copy-state-txt { flex: 1; min-width: 0; }
#section-games .gmd-copy-state-title { font-size: 17px; font-weight: 800; line-height: 1.2; }
#section-games .gmd-copy-state-sub { font-size: var(--text-sm); margin-top: 2px; }
#section-games .gmd-copy-state-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

#section-games .gmd-copy-state--ok     { border-left-color: var(--ok-text); }
#section-games .gmd-copy-state--ok     .gmd-copy-state-title { color: var(--ok-text); }
#section-games .gmd-copy-state--rented { border-left-color: var(--rental-text); }
#section-games .gmd-copy-state--rented .gmd-copy-state-title { color: var(--rental-text); }
#section-games .gmd-copy-state--warn   { border-left-color: var(--warn-text); }
#section-games .gmd-copy-state--warn   .gmd-copy-state-title { color: var(--warn-text); }
#section-games .gmd-copy-state--err    { border-left-color: var(--err-text); }
#section-games .gmd-copy-state--err    .gmd-copy-state-title { color: var(--err-text); }
#section-games .gmd-copy-state--muted  .gmd-copy-state-title { color: var(--text); }
#section-games .gmd-copy-state-sub     { color: var(--muted); }

/* Les champs se partagent la largeur disponible : un seul champ renseigné
   occupe toute la carte au lieu de laisser une case fantôme à côté de lui. */
#section-games #ghc-fields-grid { display: flex; flex-wrap: wrap; }
#section-games #ghc-fields-grid .gmd-field { flex: 1 1 190px; min-width: 0; }
#section-games #ghc-fields-grid .gmd-field--full { flex-basis: 100%; }

/* ── Fiche exemplaire : informations et composants côte à côte ────────────
   Les colonnes se replient l'une sous l'autre quand la largeur manque
   (volet étroit, tablette en portrait). */
/* nowrap : une ligne qui peut se replier prend la hauteur de son contenu, et
   les colonnes déborderaient au lieu de défiler. */
#section-games .gmd-copy-cols {
  display: flex; flex-wrap: nowrap; gap: 16px; flex: 1 1 auto; min-height: 0;
}
#section-games .gmd-copy-col {
  flex: 1 1 240px; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
/* L'en-tête reste en place, le corps défile avec le même dégradé que la liste
   de jeux (masque appliqué par _setupListFade). */
#section-games .gmd-copy-col-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px;
}
/* La colonne de valeurs doit pouvoir rétrécir : sans min-width:0 une longue
   valeur pousse la grille et fait glisser la colonne de gauche à droite. */
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field > * { min-width: 0; }
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field-val {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field--full .gmd-field-val {
  white-space: normal; overflow-wrap: anywhere;
}
/* La grille masquait ses débordements — une note longue devenait illisible.
   C'est la colonne qui défile maintenant. */
#section-games .gmd-copy-col #ghc-fields-grid { overflow: visible; }
/* Historique : il prend les deux colonnes, avec la flèche ronde de retour. */
#section-games .gmd-copy-hist {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
#section-games .gmd-copy-hist-hd {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
#section-games .gmd-copy-hist-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#section-games .gmd-copy-col-hd--sep {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline);
}
#section-games .gmd-copy-col-hd {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
/* En colonne, les champs s'empilent (la grille horizontale n'a plus de sens). */
#section-games .gmd-copy-col #ghc-fields-grid { flex-direction: column; }
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field { flex: 0 0 auto; }

/* Barre d'actions en pied : le geste principal, puis les changements d'état.
   « Éditer » reste dans la bannière — il agit sur la fiche, pas sur la boîte. */
/* Deux moitiés égales : l'action d'état à gauche, le geste principal (noir)
   à droite — position attendue du bouton qui valide. */
#section-games .gmd-copy-actions { display: flex; align-items: stretch; gap: 8px; }
#section-games .gmd-copy-actions > button { flex: 1 1 50%; min-width: 0; }
#section-games .gmd-copy-actions .gmd-detail-footer-btn,
#section-games .gmd-copy-actions .gmd-act { min-height: 42px; height: auto; }
#section-games .gmd-copy-actions .gmd-detail-footer-btn { order: 2; }

/* Mêmes attributs que la fiche jeu : libellé 11px discret, valeur 13px, sans
   carte ni quadrillage — les cellules épaisses prenaient trop de place. */
#section-games .gmd-copy-col #ghc-fields-grid {
  background: none; border: none; box-shadow: none; padding: 0; gap: 10px;
}
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field {
  padding: 0; border: none; background: none;
}
/* Mêmes attributs que le bloc « Détails » de la fiche jeu : libellé 11 px muet
   en casse normale, valeur 13 px sans graisse. Les capitales et l'interlettrage
   sont réservés aux en-têtes de section. */
#section-games #ghc-fields-grid .gmd-field-lbl {
  font-size: 11px; font-weight: 400; color: var(--muted); margin-bottom: 0;
  text-transform: none; letter-spacing: 0; line-height: 1.35;
}
#section-games #ghc-fields-grid .gmd-field-val {
  font-size: 13px; font-weight: 400; color: var(--text); line-height: 1.3;
}
#section-games #ghc-fields-grid .gmd-field-val--mono { font-weight: 400; }
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field-sep-line { display: none; }

/* Tous les champs restent affichés (« — » quand la valeur manque) : la liste
   d'informations garde une composition prévisible d'une boîte à l'autre.

   Édition au clic : chaque champ est sa propre cible. Le crayon reste visible
   en permanence — sur tablette il n'y a pas de survol pour le révéler. */
/* Une information = une ligne. L'empilement libellé/valeur coûtait 62 px pour
   32 px de texte ; en grille le champ tient en 36 px, ce qui laisse entrer
   l'historique sous les informations sans faire défiler la colonne. 36 px et
   toute la largeur de ligne restent une cible tactile tenable au comptoir. */
#section-games .gmd-copy-col #ghc-fields-grid { gap: 0; }
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field {
  display: grid; grid-template-columns: 112px 1fr; align-items: center;
  gap: 8px; min-height: 36px;
  border-bottom: 1px solid var(--hairline);
}
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field:last-child { border-bottom: none; }
/* Tablette en portrait : les deux colonnes tombent sous 200 px, la colonne de
   libellés doit rendre de la place à la valeur. */
@media (max-width: 900px) {
  #section-games .gmd-copy-col #ghc-fields-grid .gmd-field { grid-template-columns: 88px 1fr; }
}
/* Pas de marge négative : elle débordait de la colonne et rognait le survol
   sur les largeurs de tablette. Les libellés s'alignent sur l'en-tête. */
#section-games .gmd-field--tap {
  position: relative; cursor: pointer; border-radius: 6px;
  padding: 0 26px 0 0 !important; margin: 0;
  transition: background .12s;
}
/* Les notes peuvent courir sur plusieurs lignes : le libellé s'aligne en haut. */
#section-games .gmd-copy-col #ghc-fields-grid .gmd-field--full {
  align-items: start; padding-top: 9px !important; padding-bottom: 9px !important;
}
#section-games .gmd-field--tap:hover,
#section-games .gmd-field--tap:focus-visible { background: var(--hover); outline: none; }
#section-games .gmd-field-pen {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  font-size: 13px; color: var(--muted); opacity: .5;
}
#section-games .gmd-field--tap:hover .gmd-field-pen { opacity: 1; }
#section-games .gmd-field-val--vide { color: var(--muted); }
/* La référence vit dans le sous-titre de la bannière : même mécanique
   d'édition, mais en ligne dans la phrase plutôt qu'en ligne de tableau. */
#section-games .gmd-copy-state-sub #gmd-f-ref {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 20px 1px 4px !important; margin: 0 -4px; min-height: 0;
  border: none; border-radius: 5px; position: relative;
}
#section-games .gmd-copy-state-sub #gmd-f-ref .gmd-field-val { font-size: inherit; color: inherit; }
#section-games .gmd-copy-state-sub #gmd-f-ref .gmd-field-pen { right: 3px; font-size: 11px; }
#section-games .gmd-copy-state-sub #gmd-f-ref.gmd-field--editing { padding: 1px 52px 1px 4px !important; }
#section-games .gmd-copy-state-etat { color: inherit; }
/* Champ déduit : pas de crayon, pas de survol — il n'y a rien à saisir ici. */
#section-games .gmd-field--derive { padding: 0 !important; margin: 0; }
#section-games .gmd-field-hint { font-size: 10.5px; color: var(--muted); font-style: italic; margin-left: 6px; }
/* L'ellipse qui protège la colonne du défilement horizontal coupait la mention
   « déduit du pointage » : cette ligne-là a le droit de passer à deux lignes. */
#section-games .gmd-field--derive .gmd-field-val { white-space: normal; overflow: visible; }

/* Aide sous un champ de formulaire. */
.form-hint { margin-top: 4px; font-size: var(--text-xs); color: var(--muted); line-height: 1.4; }

/* Fiche partagée présentée en lecture seule dans l'éditeur de jeu. */
.lge-shared { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.lge-shared-hd {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.lge-shared-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px; }
.lge-shared-grid > div { font-size: 13px; color: var(--text); }
.lge-shared-grid span { display: block; font-size: 11px; color: var(--muted); }
.lge-shared .form-hint { margin-top: 10px; }
/* Le champ en cours d'édition occupe exactement la place qu'il occupait en
   lecture : la saisie prend la ligne de la valeur, et les deux boutons vont
   dans la gouttière du crayon. Sans ça, ouvrir un champ poussait toute la
   colonne vers le bas. */
#section-games .gmd-field--editing {
  background: var(--surface); cursor: default; overflow: hidden;
  padding: 0 56px 0 0 !important;
}
#section-games .gmd-field-edit { display: block; }
#section-games .gmd-field-edit .gmd-field-input {
  width: 100%; font-size: 13px; font-weight: 400; line-height: 1.3;
  padding: 0; border-bottom: 1px solid var(--catalogue-icon);
}
#section-games .gmd-field-edit textarea.gmd-field-input {
  min-height: 34px; line-height: 1.35; resize: none;
}
#section-games .gmd-field-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: 13px;
}
#section-games .gmd-field-btn--ok { right: 30px; background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
#section-games .gmd-field-btn--ko { right: 4px; }
#section-games .gmd-field-btn:hover { background: var(--hover); color: var(--text); }
#section-games .gmd-field-btn--ok:hover { background: var(--ok-bg); color: var(--ok-text); filter: brightness(.97); }

/* Fiche exemplaire : fil d'Ariane + flèche ronde de retour (même geste que
   les surcouches), en remplacement du lien « Voir tous les exemplaires » du bas. */
#section-games .gmd-copy-crumb {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 14px 0;
}
.gmd-copy-crumb-txt { min-width: 0; font-size: var(--text-sm); }
.gmd-copy-crumb-game { color: var(--muted); }
.gmd-copy-crumb-sep { color: var(--border); margin: 0 4px; }
.gmd-copy-crumb-cur { color: var(--text); font-weight: 600; }

/* La fiche jeu défile en entier. Sans ça, la cascade de flex:1/min-height:0
   comprimait la section exemplaires jusqu'à des cartes de 3 px — invisibles
   et incliquables (le bandeau d'identité mangeait toute la hauteur). */
#section-games .ghc-center-inner { overflow-y: auto; }
#section-games .gmd-detail-inner-pad { flex: none; overflow: visible; }
#section-games .gmd-copies-section { flex: none; }

/* Fiche exemplaire : le pied reste ancré et ce sont les colonnes qui défilent,
   chacune pour elle-même — les informations et l'historique d'un côté, la
   nomenclature de l'autre, sans qu'une longue liste n'entraîne l'autre. */
/* La fiche jeu défile en entier ; la fiche exemplaire, elle, tient dans la
   hauteur et délègue le défilement à ses colonnes. */
#section-games #gmd-detail:has(.gmd-copy-crumb) { overflow: hidden; }
#section-games #gmd-detail:has(.gmd-copy-crumb) .gmd-detail-inner-pad {
  flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex;
}

#section-games .gmd-copies-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  align-content: start;
  overflow: visible;
}
#section-games .gmd-ic {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--muted);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 11px 14px; min-height: 66px;
  font-family: var(--font);
  transition: border-color var(--t-fast), background var(--t-fast);
}
#section-games .gmd-ic:hover { background: var(--hover); }
#section-games .gmd-ic-ref   { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.15; }
#section-games .gmd-ic-state { font-size: var(--text-xs); font-weight: 600; }
#section-games .gmd-ic-sub   { font-size: 11px; color: var(--muted); }

/* Liseré + libellé colorés par état — la couleur dit l'état, sans remplir la carte. */
#section-games .gmd-ic--ok     { border-left-color: var(--ok-text); }
#section-games .gmd-ic--ok     .gmd-ic-state { color: var(--ok-text); }
#section-games .gmd-ic--rented { border-left-color: var(--rental-text); }
#section-games .gmd-ic--rented .gmd-ic-state { color: var(--rental-text); }
#section-games .gmd-ic--warn   { border-left-color: var(--warn-text); }
#section-games .gmd-ic--warn   .gmd-ic-state { color: var(--warn-text); }
#section-games .gmd-ic--err    { border-left-color: var(--err-text); }
#section-games .gmd-ic--err    .gmd-ic-state { color: var(--err-text); }
#section-games .gmd-ic--muted  { border-left-color: var(--border); }
#section-games .gmd-ic--muted  .gmd-ic-state { color: var(--muted); }
/* Contradiction opérationnelle : « disponible » alors que la boîte est abîmée. */
#section-games .gmd-ic--alert  { border-left-color: var(--warn-text); }
#section-games .gmd-ic--alert  .gmd-ic-state { color: var(--warn-text); }

/* Chips — hiérarchie par rôle (la fiche/liste prime) :
   contrôles (filtres) = récessifs (texte + chevron, fond au survol seulement) ;
   sens (dispo / statut) = petits tags à fond très léger. */
#section-games .ghc-fchip {
  border: none; background: transparent; border-radius: var(--radius-sm);
  padding: 5px 9px; color: var(--muted); font-weight: 500;
}
#section-games .ghc-fchip:hover { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: transparent; }
#section-games .ghc-fchip--inv-active,
#section-games .ghc-fchip--crit-active {
  background: var(--catalogue-bg); color: var(--catalogue-text); border: none; box-shadow: none;
}
#section-games .gmd-stock-pill { border-radius: var(--radius-sm); font-weight: 600; }
#section-games .gmd-badge      { border-radius: var(--radius-sm); }
/* Toggles de stock en pied de liste = contrôles → récessifs comme les filtres. */
#section-games .ghc-left-stock-chip {
  border: none; background: transparent; border-radius: var(--radius-sm);
  padding: 5px 8px; color: var(--muted); font-weight: 500;
}
#section-games .ghc-left-stock-chip:hover { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: transparent; }
#section-games .ghc-left-stock-chip--active,
#section-games .ghc-left-stock-chip--active:hover {
  background: var(--catalogue-bg); color: var(--catalogue-text); border: none; box-shadow: none;
}

/* Direction A — Membres dé-boîté (palette slate) : même langage que le Catalogue.
   Liste sur le canvas, séparée par un filet vertical ; en-tête de liste neutre
   avec touche colorée slate ; chips récessives ; survol coloré (identité Lybli).
   La carte profil de la fiche reste structurée (cœur de la page). */
#section-members .ghc-left { border-right: 1px solid var(--hairline); padding-right: 14px; }
#section-members .ghc-left-section { background: transparent; border: none; border-radius: 0; }
#section-members .ghc-left-hd      { background: transparent; border-bottom: 2px solid var(--membres-icon); }  /* touche colorée en haut de liste */
#section-members .ghc-left-all-lbl { color: var(--muted); font-weight: 500; }
#section-members .ghc-left-badge   { background: transparent; color: var(--muted); }
/* Fiche dé-boîtée : plus de cadre autour du détail, sur le canvas comme le
   Catalogue ; la carte profil à l'intérieur reste la seule surface structurée. */
#section-members .ghc-center-inner { background: transparent; border: none; border-radius: 0; padding-left: 18px; }
/* Lignes de liste : survol coloré (identité) ; sélection déjà en --membres-bg. */
#section-members .mmd-item-card:hover { background: var(--membres-bg); }
/* Chips de filtre récessives : texte seul, fond slate au survol/actif seulement. */
#section-members .ghc-fchip {
  border: none; background: transparent; border-radius: var(--radius-sm);
  padding: 5px 9px; color: var(--muted); font-weight: 500;
}
#section-members .ghc-fchip:hover { background: var(--membres-bg); color: var(--membres-text); border-color: transparent; }
#section-members .ghc-fchip--crit-active,
#section-members .ghc-fchip.ghc-fchip--crit-active:hover {
  background: var(--membres-bg); color: var(--membres-text); border: none; box-shadow: none;
}
/* Toggles de stock en pied de liste = contrôles → récessifs comme le Catalogue. */
#section-members .mmd-stock-chip {
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500;
}
#section-members .mmd-stock-chip:hover { background: var(--membres-bg); color: var(--membres-text); border-color: transparent; }
#section-members .mmd-stock-chip--active-ok,
#section-members .mmd-stock-chip--active-warn,
#section-members .mmd-stock-chip--active-err,
#section-members .mmd-stock-chip--active-ok:hover,
#section-members .mmd-stock-chip--active-warn:hover,
#section-members .mmd-stock-chip--active-err:hover {
  background: var(--membres-bg); color: var(--membres-text); border: none; box-shadow: none;
}

/* Pages-rapport (tables) : en-tête neutre + touche colorée de 2px par palette,
   même langage que les en-têtes de liste. Historique + Administration = ardoise,
   Finance = orange. Lignes en filets légers, survol coloré (identité). */
#section-rentals thead th,
#section-administration thead th {
  background: transparent;
  border-bottom: 2px solid var(--membres-icon);
  color: var(--muted);
}
#section-finance thead th {
  background: transparent;
  border-bottom: 2px solid var(--catalogue-icon);
  color: var(--muted);
}
#section-rentals tbody tr, #section-finance tbody tr,
#section-administration tbody tr { border-bottom: 1px solid var(--hairline); }
#section-rentals tbody tr:hover       { background: var(--membres-bg); }
#section-administration tbody tr:hover { background: var(--membres-bg); }
#section-finance tbody tr:hover       { background: var(--catalogue-bg); }

/* Chips de filtre récessives — Historique (ardoise) et Finance (orange),
   même grammaire que Catalogue/Membres : texte seul, tint au survol/actif. */
#section-rentals .ghc-fchip,
#section-finance .ghc-fchip {
  border: none; background: transparent; border-radius: var(--radius-sm);
  padding: 5px 9px; color: var(--muted); font-weight: 500;
}
#section-rentals .ghc-fchip:hover { background: var(--rentals-bg); color: var(--rentals-text); }
#section-rentals .ghc-fchip.ghc-fchip--rentals-active {
  background: var(--rentals-bg); color: var(--rentals-text); border: none;
}
#section-finance .ghc-fchip:hover { background: var(--finance-bg); color: var(--finance-text); }
#section-finance .ghc-fchip.ghc-fchip--finance-active {
  background: var(--finance-bg); color: var(--finance-text); border: none;
}

/* Direction A — Catalogue global dé-boîté (palette orange), comme le Catalogue.
   Liste sur le canvas, filet vertical, en-tête neutre + touche orange. La fiche
   concept reste structurée (liseré de bord retiré, plus haut). */
#catalogue-global-content .ghc-left { border-right: 1px solid var(--hairline); padding-right: 14px; }
#catalogue-global-content .ghc-left-section { background: transparent; border: none; border-radius: 0; }
#catalogue-global-content .ghc-left-hd      { background: transparent; border-bottom: 2px solid var(--catalogue-icon); }
#catalogue-global-content .ghc-left-all-lbl { color: var(--muted); font-weight: 500; }
#catalogue-global-content .ghc-left-badge   { background: transparent; color: var(--muted); }
#catalogue-global-content .ghc-center-inner { background: transparent; border: none; border-radius: 0; padding-left: 18px; }

/* ── Onglet Catalogue (console) : barre d'outils harmonisée ────────────────
   Portée, boutons et recherche partagent la même hauteur et la même graisse. */
#catalogue-global-content .ghc-topbar { align-items: center; gap: 8px; }
#catalogue-global-content .cg-scope-sel,
#catalogue-global-content .btn-add-game,
#catalogue-global-content .ghc-search-input {
  height: 36px; box-sizing: border-box;
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-sm);
}
#catalogue-global-content .cg-scope-sel,
#catalogue-global-content .btn-add-game { padding: 0 12px; width: auto; }
#catalogue-global-content .btn-add-game:disabled { opacity: .45; cursor: default; }
#catalogue-global-content .ghc-search-wrap { flex: 1; min-width: 160px; }
#catalogue-global-content .ghc-search-input {
  padding: 0 36px 0 34px; border-width: 1px; font-weight: 500;
}
#catalogue-global-content .ghc-search-icon { left: 11px; font-size: 15px; }
#catalogue-global-content .ghc-search-clear { right: 8px; }

/* Colonne de droite : la fiche défile en entier (bandeau compris).
   La grille de champs rognait le contenu (overflow:hidden) — une longue
   description était purement inaccessible. */
#catalogue-global-content .ghc-center-inner { overflow-y: auto; }
#catalogue-global-content .gmd-detail-inner-pad {
  flex: none !important; overflow: visible !important;
}
#catalogue-global-content .gmd-fields-grid { overflow: visible; }
#catalogue-global-content .gmd-field-val { overflow: visible; white-space: normal; }
.ghc-left-badge {
  font-size: 11px; font-weight: 700; padding: 2px 10px;
  border-radius: var(--radius-pill); background: var(--bg); color: var(--muted);
}
/* ghc-left-list reuses gmd-list styles — the ID gmd-list is preserved */
.ghc-left-list {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column;
}

/* ── Barre stock fixe en bas de la colonne gauche ───────────────────────────── */
.ghc-left-stock-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 46px; /* aligne avec .gmd-detail-footer */
  border-top: 1px solid var(--border);
  background: var(--bg);   /* suit le canvas crème */
}
.ghc-left-stock-chip {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 4px 6px; border-radius: var(--radius-pill);
  border: 2px solid var(--border); background: transparent;
  color: var(--muted); font-family: var(--font);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.ghc-left-stock-chip:hover { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: var(--catalogue-border); }
.ghc-left-stock-chip--active {
  background: var(--catalogue-bg); color: var(--catalogue-text);
  border-color: var(--catalogue-icon);
  box-shadow: 0 0 0 2px rgba(234,88,12,.10);
}
.ghc-left-stock-chip--active:hover { background: var(--catalogue-bg); color: var(--catalogue-text); border-color: var(--catalogue-icon); }
.ghc-left-stock-ok {
  margin-left: auto;
  font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px;
}
/* ── Bouton (×) dans l'en-tête colonne gauche ────────────────────────────────── */
.ghc-left-filter-lbl {
  flex: 1; font-size: 12px; font-weight: 700; color: var(--text);
}
.ghc-left-reset-x {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background var(--t-fast), color var(--t-fast);
}
.ghc-left-reset-x:hover { background: var(--bg); color: var(--text); }

/* ── Panneau central ─────────────────────────────────────────────────────────── */
.ghc-center {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
/* Le div#gmd-detail hérite de ghc-center-inner */
.ghc-center-inner {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ghc-copy-thumb {
  width: 68px; height: 68px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ghc-copy-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.ghc-copy-info { flex: 1; min-width: 0; }
.ghc-copy-game-title {
  font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ghc-copy-ref-code {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--muted); margin-bottom: 6px;
}
.ghc-copy-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ghc-copy-loan {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--rental-bg); color: var(--rental-text);
  font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.ghc-copy-loan-date { font-weight: 400; color: var(--rental-text); opacity: .8; }

.ghc-copy-actions {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ghc-log-empty { font-size: 12px; color: var(--muted); padding: 8px 0; }

/* Lien bouton dans message vide */
.ghc-link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--catalogue-icon); font-family: var(--font); font-size: inherit;
  font-weight: 600; padding: 0; text-decoration: underline;
}

/* ── Copy list rows (copies-by-status mode) ─────────────────────────────────── */
.ghc-left-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
  user-select: none;
  flex-shrink: 0;
}
.ghc-left-item:last-child { border-bottom: none; }
.ghc-left-item:hover { background: var(--bg); }
.ghc-left-item.is-active { background: var(--catalogue-bg); }
.ghc-left-item.is-active .gcu-title { color: var(--catalogue-text); }

.ghc-left-item-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 2px;
}
.ghc-left-item-status.gmd-status--ok     { background: color-mix(in srgb, var(--ok-text)     15%, transparent); color: var(--ok-text); }
.ghc-left-item-status.gmd-status--rented { background: color-mix(in srgb, var(--rental-text) 15%, transparent); color: var(--rental-text); }
.ghc-left-item-status.gmd-status--warn   { background: color-mix(in srgb, var(--warn-text)   15%, transparent); color: var(--warn-text); }
.ghc-left-item-status.gmd-status--err    { background: color-mix(in srgb, var(--err-text)    15%, transparent); color: var(--err-text); }
.ghc-left-item-status.gmd-status--muted  { background: color-mix(in srgb, var(--muted)       15%, transparent); color: var(--muted); }

.ghc-left-item-body { flex: 1; min-width: 0; }
.ghc-copy-thumb--lg {
  width: 64px;
  height: 64px;
  font-size: 36px;
}
.ghc-copy-loan-date--overdue { color: var(--err-text); font-weight: 600; }

/* ── Topbar : recherche transversale + bouton Ajouter ───────────────────────── */
/* Occupe toute la largeur au-dessus du split-screen{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Availability bar ────────────────────────────────────────────────────── */
.gmd-avail-bar {
  display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap;
}
.gmd-filter-btn {
  flex: 1 1 calc(33.33% - 4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 5px 4px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-family: var(--font);
  cursor: pointer; min-height: 36px; transition: background var(--t-fast), color var(--t-fast);
}
.gmd-filter-btn-lbl {
  font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.gmd-filter-btn-count {
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--muted);
}
#games-content .gmd-filter-btn.active {
  background: var(--catalogue-bg); border-color: transparent;
}
#games-content .gmd-filter-btn.active .gmd-filter-btn-lbl  { color: var(--catalogue-text); }
#games-content .gmd-filter-btn.active .gmd-filter-btn-count { color: var(--catalogue-muted); }
#members-content .gmd-filter-btn.active { background: var(--membres-bg); color: var(--membres-text); border-color: transparent; }
.gmd-filter-btn:hover:not(.active) { background: var(--surface); }
.gmd-filter-btn:active { opacity: .78; }

/* Quick filter chips */

/* ── Dropdown chips (filtres critères) ───────────────────────────────────── */
.gmd-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 2px;
}
.gmd-chip-wrap { position: relative; }
.gmd-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px; border-radius: var(--radius-xs);
  border: none; background: none; color: var(--muted);
  font-family: var(--font); font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
/* Largeur fixe du label = texte le plus large possible pour chaque chip.
   Empêche tout déplacement de layout quand la valeur change. */
.gmd-chip-lbl {
  display: inline-block; overflow: hidden; text-overflow: ellipsis;
}
#chip-wrap-players  .gmd-chip-lbl { width: 46px; } /* "Joueurs" */
#chip-wrap-age      .gmd-chip-lbl { width: 22px; } /* "Âge" / "14+" */
#chip-wrap-duration .gmd-chip-lbl { width: 58px; } /* "30–60 min" */
.gmd-chip.active { color: var(--catalogue-text); }
.gmd-chip:active { opacity: .75; }
.gmd-chip-icon    { font-size: 12px; flex-shrink: 0; }
.gmd-chip-chevron { font-size: 10px; opacity: .6; transition: transform var(--t-fast); flex-shrink: 0; }
.gmd-chip.open .gmd-chip-chevron { transform: rotate(180deg); }
/* Bloc UNIQUE — il était défini deux fois avec des valeurs divergentes, sous
   un commentaire qui prétendait « mêmes règles ». Fusion à rendu identique :
   les propriétés du bloc tardif gagnaient, celles que lui seul ignorait
   (padding, gap, hover, arrondis d'item) venaient du premier. */
.gmd-chip-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow);
  min-width: 140px; overflow: hidden; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.gmd-chip-menu.hidden { display: none; }
.gmd-chip-menu-item {
  padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; text-align: left; border: none; background: none;
  font-family: var(--font); line-height: 1.3; border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.gmd-chip-menu-item:hover  { background: var(--bg); }
.gmd-chip-menu-item:active { background: var(--bg); }
.gmd-chip-menu-item.selected { color: var(--catalogue-text); font-weight: 700; background: var(--catalogue-bg); }
.gmd-chip-menu-clear { border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.gmd-ic-loan {
  font-size: 11px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px; flex-wrap: wrap;
}

/* ── Loan popover (garde-fou) ────────────────────────────────────────────── */
.gmd-loan-pop {
  position: fixed; z-index: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(44,38,32,.18), 0 1px 4px rgba(44,38,32,.10);
  padding: 14px 16px;
  min-width: 240px; max-width: 280px;
  /* top/bottom piloté par JS — aucune valeur par défaut ici */
}
.gmd-loan-pop.hidden { display: none; }
.glp-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 6px;
}
.glp-member {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 12px;
}
.glp-actions { display: flex; gap: 6px; }
.glp-btn {
  flex: 1; padding: 7px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--muted); font-family: var(--font);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.glp-btn:active { opacity: .75; }
.glp-btn--ok { background: var(--rental-bg); color: var(--rental-text); border-color: transparent; }
.glp-search-wrap {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 9px; margin-bottom: 6px;
  background: var(--bg);
}
.glp-search-input {
  border: none; background: none; outline: none;
  font-family: var(--font); font-size: 13px; color: var(--text); flex: 1;
}
.glp-result {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 7px 4px;
  border: none; background: none; border-radius: var(--radius-xs);
  font-family: var(--font); font-size: 13px; color: var(--text);
  text-align: left; cursor: pointer;
}
.glp-result:active { background: var(--bg); }
.glp-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }

/* Liste plate style prêts précédents */
.gmd-list {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column;
}

/* Direction A : lignes dé-boîtées sur le canvas, séparées par un filet ;
   le survol (gris doux) est le repère interactif, la sélection ajoute un
   liseré d'accent à gauche. */
.gmd-item-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  transition: background var(--t-fast);
}
.gmd-item-card:last-of-type { border-bottom: none; }
/* Survol/sélection teintés par la palette de page (identité Lybli) */
.gmd-item-card:hover  { background: var(--catalogue-bg); }
.gmd-item-card:active { background: var(--catalogue-bg); }
.gmd-item-card--selected {
  background: var(--catalogue-bg);
}
.gmd-item-card--selected .gcu-title { color: var(--catalogue-text); }

/* ── Universal Game Card core — shared by Catalogue + Comptoir ───────────── */
.gcu-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gcu-thumb img {
  width: 100%; height: 100%; object-fit: contain; padding: 3px;
}
.gcu-body  { flex: 1; min-width: 0; }
.gcu-title {
  display: flex; align-items: center; gap: 5px;
  /* 700 dans une colonne de quinze lignes, c'est quinze titres qui crient. La
     lecture se fait à la taille et à la couleur, pas à la graisse. */
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; margin-bottom: 1px;
}
.gcu-title-text { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcu-chips { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.gcu-pub  { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcu-meta { font-size: 11px; color: var(--color-text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcu-ref  { font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pastille stock (droite de la carte) */
.gmd-stock-pill {
  flex-shrink: 0; align-self: center;
  min-width: 46px; text-align: center;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.gmd-stock-pill--ok     { background: var(--ok-bg);   color: var(--ok-text); }
.gmd-stock-pill--rented { background: var(--rental-bg); color: var(--rental-text); }
.gmd-stock-pill--warn   { background: var(--warn-bg); color: var(--warn-text); }
.gmd-stock-pill--err    { background: var(--err-bg);  color: var(--err-text); }
.gmd-stock-pill--muted  { background: var(--gry-bg);  color: var(--muted); }
.gmd-stock-pill--zero  { background: var(--warn-bg);  color: var(--warn-text); }
.gmd-stock-pill--empty { background: var(--gry-bg);   color: var(--muted); }
/* Tout est en rayon : simple compte, sans couleur — la couleur est réservée
   aux exemplaires sortis (--part) ou à la rupture (--zero). */
.gmd-stock-pill--quiet { background: transparent; color: var(--muted); font-weight: 500; }
.gmd-stock-pill--part  { background: var(--rental-bg); color: var(--rental-text); }

.gmd-list-empty {
  padding: 40px 16px; text-align: center;
  color: var(--muted); font-size: 13px;
}

/* ══ RIGHT PANEL (Detail) ═════════════════════════════════════════════════════
   Colonne autonome style session-col : border + border-radius 16px.
   Fond crème (--bg) à l'intérieur — les cartes blanches flottent dessus.
   ══════════════════════════════════════════════════════════════════════════════ */
.gmd-detail {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* pas de padding ni gap ici — le footer sera pleine largeur (pattern Comptoir) */
}

/* ── État vide ─────────────────────────────────────────────────────────────── */
.gmd-detail-empty,
.mmd-detail-empty,
.cg-detail-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: var(--muted); padding: 40px; text-align: center;
}
.gmd-detail-empty-icon,
.mmd-detail-empty-icon,
.cg-detail-empty-icon { font-size: 40px; opacity: .3; }
.gmd-detail-empty-text,
.mmd-detail-empty-text,
.cg-detail-empty-title { font-size: 14px; font-weight: 700; color: var(--text); }
.gmd-detail-empty-sub,
.mmd-detail-empty-sub,
.cg-detail-empty-sub  { font-size: 13px; }

/* ══ Zone identité — fond orange pâle Catalogue ══════════════════════════ */
.gmd-identity {
  background: var(--catalogue-bg);
  border-bottom: 1px solid var(--catalogue-border);
  border-left: 4px solid var(--catalogue-icon);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  margin: 0;
  min-height: 116px;
}
/* ── Variante membre ─────────────────────────────────────────────────────────── */
.gmd-identity--member {
  background: var(--membres-bg);
  border-bottom: 1px solid var(--membres-border);
  border-left:   4px solid var(--membres-icon);
}
.gmd-identity--member .gmd-identity-title     { color: var(--membres-text); }
.gmd-identity--member .gmd-identity-publisher { color: var(--membres-icon); font-size: 12px; display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.gmd-identity--member .gmd-identity-img {
  border-color: var(--membres-border);
  background:   rgba(255,255,255,.7);
  font-size:    26px;
  font-weight:  800;
  color:        var(--membres-icon);
}
/* Avatar-color classes appliquées directement sur gmd-identity-img */
.gmd-identity--member .gmd-identity-img.av-blue   { background: var(--blue-light);   color: var(--blue-dark); }
.gmd-identity--member .gmd-identity-img.av-slate  { background: var(--membres-bg);   color: var(--membres-text); border-color: var(--membres-border); }
.gmd-identity--member .gmd-identity-img.av-green  { background: var(--green-light);  color: var(--green-dark); }
.gmd-identity--member .gmd-identity-img.av-purple { background: var(--purple-light); color: var(--purple-dark); }
.gmd-identity--member .gmd-identity-img.av-indigo { background: var(--indigo-light); color: var(--indigo-dark); }
.gmd-identity--member .gmd-identity-img.av-err    { background: var(--err-bg);       color: var(--err-text); }

.gmd-identity-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.gmd-identity-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.gmd-identity-img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .65);
  border: 1px solid var(--catalogue-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
  overflow: hidden;
}
.gmd-identity-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.gmd-identity-text { flex: 1; min-width: 0; }

.gmd-identity-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.gmd-identity-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--catalogue-text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmd-identity-ref {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--catalogue-text);
  line-height: 1;
  margin-bottom: 3px;
}
/* Nom du jeu sous la référence de l'exemplaire (fiche exemplaire) */
.gmd-identity-game {
  font-size: 15px;
  font-weight: 600;
  color: var(--catalogue-text);
  line-height: 1.25;
  margin-top: 1px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmd-identity-publisher {
  font-size: 13px;
  font-weight: 500;
  color: var(--catalogue-muted);
  margin-bottom: 8px;
  margin-top: 2px;
  line-height: 1.4;
}
.gmd-identity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.gmd-identity .gmd-badge {
  background: rgba(255, 255, 255, .6);
  border-color: var(--catalogue-border);
  color: var(--catalogue-text);
}
.gmd-identity .gmd-badge--ok     { background: var(--ok-bg);     color: var(--ok-text);     border-color: transparent; }
.gmd-identity .gmd-badge--rented { background: var(--rental-bg);  color: var(--rental-text); border-color: transparent; }
.gmd-identity .gmd-badge--warn   { background: var(--warn-bg);    color: var(--warn-text);   border-color: transparent; }
.gmd-identity .gmd-badge--err    { background: var(--err-bg);     color: var(--err-text);    border-color: transparent; }
.gmd-identity .gmd-badge--muted  { background: rgba(255,255,255,.5); color: var(--muted);    border-color: var(--catalogue-border); }
.gmd-identity-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  align-self: flex-start;
}
.gmd-identity .gmd-act {
  background: rgba(255, 255, 255, .65);
  border-color: var(--catalogue-border);
  color: var(--catalogue-text);
}
.gmd-identity .gmd-act:hover {
  background: rgba(255, 255, 255, .9);
  border-color: var(--catalogue-icon);
}
/* Pills statut exemplaire */
.ghc-copy-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ghc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid transparent;
}

/* Badges source — conservés inchangés */
.gmd-source-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: var(--radius-pill);
  white-space: nowrap; flex-shrink: 0;
}
.gmd-source-badge--canonical { background: var(--blue-light); color: var(--blue-dark); border: 1px solid var(--blue-border); }
.gmd-source-badge--custom    { background: var(--catalogue-bg); color: var(--catalogue-text); border: 1px solid var(--catalogue-border); }

/* ── En-tête de fiche en deux blocs : identité (gauche, pastel) + infos (droite) ── */
.gmd-header-split {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 14px;
  padding: 16px;
  flex-shrink: 0;
  /* Carte surélevée claire → la fiche passe au premier plan */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  overflow: hidden;
  margin: 10px 12px 0;
}

/* Fiche membre : hauteur d'en-tête fixe (constante d'un membre à l'autre) */
.gmd-header-split:has(.gmd-id-block--member) { min-height: 196px; }
.gmd-id-block {
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  align-self: start;
}
.gmd-id-block--game   { background: var(--orange-light); }
.gmd-id-block--member { background: var(--membres-pastel); }
/* contain : la jaquette entière s'affiche{ width: 100%; height: 100%; object-fit: contain; }

.gmd-id-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.gmd-id-member-ident { min-width: 0; }

.gmd-id-title {
  font-size: 17px; font-weight: 700; line-height: 1.2;
  color: var(--catalogue-text); word-break: break-word;
}
.gmd-id-block--member .gmd-id-title { color: var(--membres-text); }
.gmd-id-contact {
  font-size: 12px; color: var(--membres-icon);
  display: flex; align-items: center; gap: 6px; margin-top: 4px; word-break: break-word;
}
.gmd-id-contact i { font-size: 14px; flex-shrink: 0; }
.gmd-id-block .gmd-badge { background: var(--surface); }

.gmd-id-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gmd-id-info-lbl { font-size: 11px; color: var(--muted); margin-bottom: 1px; }
.gmd-id-info-prose { font-size: 13px; line-height: 1.45; color: var(--text); text-align: justify; hyphens: auto; }
/* Seuls les textes qui courent sur plusieurs lignes sont justifiés — pas les
   valeurs courtes de la grille (Année, Langue), qui n'ont qu'une ligne. */
#section-games .gmd-id-attr--full .gmd-id-attr-val {
  text-align: justify; hyphens: auto;
}
.gmd-id-attrs {
  border-top: 1px solid var(--border); padding-top: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.gmd-id-attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.gmd-id-attr-val { font-size: 13px; color: var(--text); }

.gmd-id-attrs--rows { gap: 8px; }
.gmd-id-row { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 8px; }
.gmd-id-row .gmd-id-info-lbl { margin-bottom: 0; }

.gmd-id-member-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gmd-id-formule { font-size: 15px; font-weight: 600; color: var(--membres-text); }
.gmd-id-validity {
  border-top: 1px solid var(--border); padding-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.gmd-id-validity-val { font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.gmd-id-validity-val i { font-size: 13px; }
.gmd-id-validity--ok   { color: var(--green-dark); }
.gmd-id-validity--warn { color: var(--orange-dark); }
.gmd-id-validity--err  { color: var(--err-text); }

.gmd-copies-section-actions { display: inline-flex; gap: 6px; margin-left: 8px; }

@media (max-width: 900px) {
  .gmd-header-split { grid-template-columns: 1fr; padding: 12px; }
}

.gmd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; font-family: var(--font);
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.gmd-badge--ok     { background: var(--ok-bg);     color: var(--ok-text);     border-color: transparent; }
.gmd-badge--warn   { background: var(--warn-bg);    color: var(--warn-text);   border-color: transparent; }
.gmd-badge--rented { background: var(--rental-bg);  color: var(--rental-text); border-color: transparent; }
.gmd-badge--err    { background: var(--err-bg);     color: var(--err-text);    border-color: transparent; }
.gmd-badge--muted  { background: var(--gry-bg);     color: var(--muted);       border-color: transparent; }

/* ── Section exemplaires (fiche jeu) — toujours visible ─────────────── */
.gmd-copies-section {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
/* En-tête fixe + liste des exemplaires scrollable (fondu haut/bas comme les
   listes membre/catalogue). Scopé au panneau jeu pour ne pas toucher membres/CG. */
#gmd-detail { overflow: hidden; }
#gmd-detail .gmd-detail-inner-pad { flex: 1; min-height: 0; }
#gmd-detail .gmd-copies-section   { flex: 1; min-height: 0; }
#gmd-detail .gmd-copies-section .gmd-copies-list {
  flex: 1; min-height: 0; overflow-y: auto;
}
.gmd-copies-section-hd {
  display: flex; align-items: center; gap: 8px; padding: 0 2px;
}
.gmd-copies-section-lbl {
  font-size: 12px; font-weight: 700;
  color: var(--muted); flex: 1;
}
.gmd-copies-section-count {
  font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 1px 8px; color: var(--text);
}

/* Wrapper padding autour de info-card + copies-section */
.gmd-detail-inner-pad {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}
/* Ombres renforcées pour les cartes dans le panneau de détail
   (le fond --bg #F0EDE8 est sombre,
.gmd-detail-inner-pad .gmd-ic,
.gmd-detail-inner-pad .gmd-fields-grid{
  box-shadow:
    0 1px 3px rgba(44,38,32,.10),
    0 3px 10px rgba(44,38,32,.08);
}

/* Padding bas sous la liste des exemplaires */
.gmd-copies-list { padding-bottom: 10px; }

/* En-têtes de colonnes — simples labels{
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 6px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.gmd-copies-list {
  display: flex; flex-direction: column; gap: 7px;
}
.gmd-ic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-shrink: 0;            /* garde sa hauteur dans la liste scrollable (pas d'écrasement) */
  display: flex;
  flex-direction: column;
}
.gmd-ic--alert {
  box-shadow: var(--shadow), inset 3px 0 0 var(--catalogue-icon);
  border-color: var(--warn-border);
}
.gmd-ic--selected {
  background: var(--catalogue-bg);
  box-shadow: var(--shadow), inset 3px 0 0 var(--catalogue-icon);
}
.gmd-ic--selectable .gmd-ic-row          { cursor: pointer; }
.gmd-ic--selectable .gmd-ic-row:active   { background: rgba(234,88,12,.05); }
.gmd-ic-row {
  display: grid;
  grid-template-columns: 150px 1fr 80px 170px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.gmd-ic-ref  { min-width: 0; }
.gmd-ic-stat { display: flex; flex-direction: column; gap: 2px; }
.gmd-ic-actions {
  display: flex; align-items: center; gap: 5px;
  justify-content: flex-end; flex-wrap: wrap;
}
/* Bouton fiche — isolé à droite dans .gmd-ic-actions */
.gmd-act--fiche { margin-left: auto; border-color: transparent; color: var(--muted); }
.gmd-act--fiche:hover { color: var(--text); background: var(--surface); }
.gmd-act--delete-copy { border-color: transparent; color: var(--muted); }
.gmd-act--delete-copy:hover { color: var(--err-text); background: var(--err-bg); border-color: var(--err-bg); }
.gmd-delete-confirm-label { font-size: 12px; color: var(--err-text); font-weight: 600; white-space: nowrap; }
/* ══ Grille champs fiche exemplaire — contraste fort label/valeur ════════ */
.gmd-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gmd-field {
  padding: 12px 14px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.gmd-field:nth-child(2n)         { border-right: none; }
.gmd-field:nth-last-child(-n+2)  { border-bottom: none; }
.gmd-field--full { grid-column: 1 / -1; border-right: none; border-bottom: none; }
/* Champ impair juste avant un champ pleine largeur : pas de bordure droite flottante */
.gmd-field:nth-child(odd):has(+ .gmd-field--full) { border-right: none; }
.gmd-field-sep-line { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: 0; height: 0; }
.gmd-field-lbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-tertiary); line-height: 1;
}
.gmd-field-val { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
.gmd-field-val--mono  { font-family: var(--font); font-size: 13px; font-weight: 500; }
.gmd-field-val--muted { color: var(--muted); font-weight: 400; font-style: italic; font-size: 13px; }
.gmd-field-input {
  font-size: 13px; font-weight: 500; font-family: var(--font);
  padding: 0; border: none; border-bottom: 2px solid var(--catalogue-icon);
  background: transparent; color: var(--text); outline: none; width: 100%;
}
.gmd-field-input--mono { font-family: var(--font); }
select.gmd-field-input { cursor: pointer; }
textarea.gmd-field-input { resize: vertical; min-height: 52px; line-height: 1.6; }

/* ══ Carte info jeu (description, catégorie{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.gmd-info-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-tertiary);
  min-width: 80px;
  flex-shrink: 0;
}

/* ── Fiche exemplaire (vue gmdOpenCopyDetail) ────────────────────────────── */
.ghc-copy-status-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Status pills */
.ghc-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
}
.ghc-pill-ok   { background: var(--ok-bg);   color: var(--ok-text); }
.ghc-pill-warn { background: var(--warn-bg);  color: var(--warn-text); }
.ghc-pill-err  { background: var(--err-bg);   color: var(--err-text); }
.ghc-pill-blue { background: var(--blue-light);          color: var(--blue-dark); }
.ghc-pill-gry  { background: var(--gry-bg);   color: var(--muted); }

/* .ghc-fields-card supprimé — remplacé directement par .gmd-fields-grid */
.ghc-fields-section-lbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary);
}
.ghc-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.ghc-field-item  { display: flex; flex-direction: column; gap: 3px; }
.ghc-field-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary);
}
.ghc-field-value { font-size: 13px; font-weight: 500; color: var(--text); }
.ghc-field-notes { color: var(--muted); font-style: italic; }
.ghc-field-input {
  font-size: 13px; font-weight: 500; font-family: var(--font);
  padding: 5px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg); color: var(--text); outline: none; width: 100%;
  transition: border-color var(--t-fast);
}
.ghc-field-input:focus { border-color: var(--text); box-shadow: var(--ring); }
select.ghc-field-input { cursor: pointer; }
textarea.ghc-field-input { resize: vertical; min-height: 56px; }
.ghc-edit-actions {
  display: flex; gap: 6px;
  padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px;
}
.ghc-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.ghc-hist-row:last-child { border-bottom: none; }
.ghc-hist-name  { flex: 1; font-weight: 500; color: var(--text); }
.ghc-hist-dates { font-size: 11px; color: var(--muted); }
.ghc-hist-dur   { font-size: 11px; font-weight: 600; min-width: 44px; text-align: right; }
.ghc-hist-ok    { color: var(--ok-text); }
.ghc-hist-late  { color: var(--warn-text); }
.ghc-hist-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* Vue exemplaire — scroll vertical du panel central */
.ghc-center-inner { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }

/* ── Catalogue detail footer — loan CTA ───────────────────────────────────── */
.gmd-detail-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  background: var(--bg);   /* suit le canvas crème (ne ressort pas) */
  border-radius: 0 0 16px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.gmd-detail-footer-btn {
  background: var(--color-accent);
  color: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gmd-detail-footer-btn:disabled            { opacity: .45; cursor: not-allowed; }

/* Copy log modal rows */
.copy-log-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.copy-log-row:last-child { border-bottom: none; }
.copy-log-name { flex: 1; font-weight: 600; color: var(--text); }
.copy-log-date { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.gmd-copy-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3; margin-bottom: 1px;
}
.gmd-copy-ref {
  font-weight: 600; font-family: var(--font);
  font-size: 11px; color: var(--muted); line-height: 1.2;
}
.gmd-copy-ref-sub {
  font-size: 10px; color: var(--color-text-tertiary);
  font-family: var(--font); font-weight: 400; margin-top: 2px;
}

.gmd-empty-copies {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 16px; color: var(--muted); font-size: 13px;
}

/* ── Statut inline — remplace les pastilles .badge dans les cartes copy ──────── */
/* Pas de fond coloré, pas de bordure : juste icône + texte coloré.               */
.gmd-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; font-family: var(--font); white-space: nowrap;
}
.gmd-status--ok     { color: var(--ok-text); }
.gmd-status--rented { color: var(--rental-text); }
.gmd-status--warn   { color: var(--warn-text); }
.gmd-status--err    { color: var(--err-text); }
.gmd-status--muted  { color: var(--muted); font-weight: 400; }

/* ── Boutons d'action compacts — système Comptoir ────────────────────────────── */
/* Fond crème (--bg) + bordure discrète + texte coloré sémantique.                */
/* Règle design : :active UNIQUEMENT, jamais de :hover.                           */
.gmd-act {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: transparent; color: var(--muted);
  font-family: var(--font); font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1.3;
}
.gmd-act:active { background: var(--hover); color: var(--text); }
.gmd-act--ok  { color: var(--ok-text); }
.gmd-act--ok:active  { background: var(--ok-bg);      border-color: var(--ok-bg); }
.gmd-act--warn { color: var(--orange-dark); }
.gmd-act--warn:active { background: var(--orange-light); border-color: var(--orange-light); }
/* Libérer / Réintégrer — tag pointillé vert discret */
.gmd-act--release-tag {
  color: var(--ok-text);
  border: 1.5px dashed #6EE7B7;
  background: transparent;
}
.gmd-act--release-tag:active {
  background: var(--ok-bg);
  border-style: solid;
  border-color: var(--ok-text);
}
/* Quarantaine — tag pointillé discret, subordonné au statut */
.gmd-act--quarantine-tag {
  color: var(--warn-text);
  border: 1.5px dashed var(--warn-border);
  background: transparent;
}
.gmd-act--quarantine-tag:active {
  background: var(--warn-bg);
  border-style: solid;
  border-color: var(--warn-text);
}

/* ══ Panneau avancé retour ════════════════════════════════════════════════════ */

.ret-adv-section {
  padding: 0;
  border-bottom: none;
}
.ret-adv-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* ── Dropdown état ── */
.ret-state-wrap  { position: relative; display: inline-block; }
.ret-state-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--ok-border);
  background: var(--ok-bg); color: var(--ok-text);
  font-family: var(--font); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all var(--t-fast);
}
.ret-state-trigger.warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.ret-state-trigger.err  { border-color: var(--err-border); background: var(--err-bg);  color: var(--err-text); }
.ret-state-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-ok   { background: var(--ok-text); }
.dot-warn { background: var(--warn-text); }
.dot-err  { background: var(--err-text); }
.ret-state-menu {
  position: absolute; top: calc(100% + 5px); left: 0; min-width: 150px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown, 700); overflow: hidden; flex-direction: column;
}
.ret-state-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; font-size: 12px; font-weight: 500;
  cursor: pointer; color: var(--text);
  border-bottom: 1px solid var(--hairline);
  background: transparent; border-left: none; border-right: none; border-top: none;
  font-family: var(--font); text-align: left; width: 100%;
  transition: background var(--t-fast);
}
.ret-state-opt:last-child { border-bottom: none; }
.ret-state-opt:hover      { background: var(--comptoir-bg); }
.ret-state-opt.sel        { font-weight: 700; }
.ret-state-opt.sel::after { content: "✓"; margin-left: auto; color: var(--muted); font-size: 11px; }

/* ── Dot état dans la carte retour ── */
.card-cond-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Boutons action — neutres au repos ── */
.ret-act-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all var(--t-fast);
  border: 1px solid var(--hairline);
  background: transparent; color: var(--muted);
}
.ret-act-btn:hover  { background: var(--comptoir-bg); color: var(--comptoir-text); border-color: transparent; }
.ret-act-btn.active { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.ret-missing-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--warn-text);
}
.ret-missing-sub { font-size: 11px; color: var(--muted); line-height: 1.5; max-width: 280px; }

/* ── Ligne pénalité + dépôt ── */
.ret-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0 0;
  background: transparent;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.ret-penalty-wrap { display: flex; align-items: center; gap: 6px; }
.ret-footer-lbl   { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ret-inline-input {
  font-family: var(--font); font-size: 12px;
  padding: 4px 7px; border: 1px solid var(--border);
  border-radius: var(--radius-xs); background: var(--bg); color: var(--text);
  outline: none; width: 68px;
}
.ret-inline-input:focus { border-color: var(--text); }
.ret-cancel-sm {
  font-size: 11px; padding: 3px 7px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; font-family: var(--font);
}
.ret-cancel-sm:hover { background: var(--bg); }
.ret-deposit-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ret-chk-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; cursor: pointer; color: var(--text);
}
.ret-chk-row input { accent-color: var(--text); width: 14px; height: 14px; cursor: pointer; }

.gmd-act--err  { color: var(--err-text); }
.gmd-act--err:active  { background: var(--err-bg);     border-color: var(--err-bg); }
/* Variante retour/prêt — bleu ciel */
.gmd-act--indigo        { color: var(--rental-text); }
.gmd-act--indigo:active { background: var(--rental-bg); border-color: var(--rental-bg); }

/* ═══════════════════════════════════════════════════════════════════════════════
   Members — Master-Detail (mmd-*)
   Mirror exact same layout pattern as Games (gmd-*).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 1 · Main container — mirrors .main.games-md-active */
.main.members-md-active {
  overflow: hidden;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
}

/* 2 · Section becomes a vertical flex column (ID specificity beats .section.active) */
#section-members.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 3 · Content area */
#members-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.mmd-topbar {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mmd-topbar-search {
  flex: 1;
  position: relative;
}
.mmd-topbar-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 18px; pointer-events: none; z-index: 1;
}
.mmd-topbar-input:focus-visible { border-color: var(--membres-icon); box-shadow: 0 2px 12px rgba(71,85,105,.15); }
.mmd-topbar-input[data-focus-silent]:focus,
.mmd-topbar-input[data-focus-silent]:focus-visible { border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mmd-topbar-input::placeholder { color: var(--muted); font-weight: 400; }

.mmd-list {
  flex: 1;
  overflow-y: auto;
}

/* ── Member list cards ───────────────────────────────────────────────────────── */
/* Même gabarit que la liste du Catalogue : 46 px, ligne au filet léger sur le
   canvas. La liste est un outil de parcours — c'est la fiche qui porte. */
.mmd-item-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  min-height: 46px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  transition: background var(--t-fast);
}
.mmd-item-card:last-of-type { border-bottom: none; }
.mmd-item-card:active    { background: var(--bg); }
.mmd-item-card--selected { background: var(--membres-bg); }
.mmd-item-card--selected .mmd-item-name { color: var(--membres-text); font-weight: 600; }

.mmd-avatar {
  width: 30px; height: 30px;
  font-size: 11px;
  flex-shrink: 0;
}
.mmd-item-info {
  flex: 1;
  min-width: 0;
}
.mmd-item-name {
  /* 700 dans une colonne de douze noms, c'est douze noms qui crient — même
     règle qu'au Catalogue : la sélection porte la graisse, pas la liste. */
  font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mmd-item-sub {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

.mmd-list-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Member badges (in list and detail) ──────────────────────────────────────── */
.mmd-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted);
}
.mmd-badge--ok      { background: var(--ok-bg);    color: var(--ok-text);    border-color: transparent; }
.mmd-badge--warn    { background: var(--warn-bg);   color: var(--warn-text);  border-color: transparent; }
.mmd-badge--overdue    { background: var(--err-bg);    color: var(--err-text);   border-color: transparent; }
.mmd-badge--cancelled  { background: var(--err-bg);    color: var(--err-text);   border-color: transparent; }
.mmd-badge--muted   { background: var(--gry-bg);    color: var(--muted);      border-color: transparent; }

/* ─── Groupes dans la page Membres (fiche + sélecteurs) ───────────────────── */
/* Sections de la fiche groupe (profs / contacts / prêts) */
.mmd-section { margin-top: 14px; }
.mmd-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-tertiary); margin-bottom: 6px;
}
.mmd-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); font-size: 13px; margin-bottom: 6px;
}
.mmd-empty-line { font-size: var(--text-sm); color: var(--muted); font-style: italic; padding: 6px 2px; }
.mmd-x {
  border: none; background: none; cursor: pointer; color: var(--err-text);
  font-size: 16px; line-height: 1; padding: 0 6px; opacity: .6; flex-shrink: 0;
}
.mmd-x:hover { opacity: 1; }

/* Sélecteur de personne / chooser (options cliquables) */
.mmd-pick { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.mmd-pick-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.mmd-pick-opt:hover { background: var(--teal-light); border-color: var(--teal-mid); }
.mmd-pick-av {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--teal-light); color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

/* Couverture cumulée (onglet Foyer/Comptes de la fiche membre) */
.mmd-coverage {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px;
}
.mmd-coverage-line {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text); padding: 4px 0;
}
.mmd-coverage-line i { color: var(--teal-dark); font-size: 15px; flex-shrink: 0; }

/* Scrollable content zone — porte le padding et le gap (footer exclu) */
.mmd-detail-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 0;
  gap: 12px;
}
/* Sticky footer — mirrors .session-col-footer */
.mmd-detail-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  background: var(--bg);   /* suit le canvas crème (ne ressort pas) */
  border-radius: 0 0 16px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* CTA button — mirrors .counter-bar-btn--finish */
.mmd-detail-footer-btn {
  background: var(--color-accent);
  color: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mmd-detail-footer-btn:disabled  { opacity: .45; cursor: not-allowed; }
#mmd-detail .gmd-info-lbl  { min-width: unset; }

/* ── Tabs section inside member inner-pad ────────────────────────────────────── */
/* Wrapper qui supprime le gap gmd-detail-inner-pad entre tabs et contenu */
.mmd-tabs-section {
  display: flex;
  flex-direction: column;
}
#mmd-detail .mmd-tab-content { padding: 12px 4px 8px; flex: none; overflow-y: visible; }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
/* ── Detail inner layout ─────────────────────────────────────────────────────── */
.mmd-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  overflow-y: auto;
}
/* Dans le nouveau layout identité-banner + inner-pad : pas de gap entre sections */
#mmd-detail { gap: 0; min-height: 0; }
#mmd-detail .gmd-detail-inner-pad { min-height: 0; }

/* ── Profile card ────────────────────────────────────────────────────────────── */
.mmd-profile {
  flex-shrink: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin: 0;
}
.mmd-profile-hd {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.mmd-profile-avatar {
  width: 52px; height: 52px;
  font-size: 19px;
  flex-shrink: 0;
}
.mmd-profile-info {
  flex: 1;
  min-width: 0;
}
.mmd-profile-name {
  font-size: 18px; font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.mmd-profile-contact {
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.mmd-profile-contact i { font-size: 12px; }

/* ── Membership grid ─────────────────────────────────────────────────────────── */
.mmd-profile-membership {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.mmd-membership-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mmd-membership-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.mmd-membership-value {
  font-size: 13px; font-weight: 600; color: var(--text);
}

/* ── Accordion (prêts / historique) ──────────────────────────────────────────── */
.mmd-accordion {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-shrink: 0;
}
.mmd-accordion-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  transition: background var(--t-fast);
}
.mmd-accordion-hd:hover { background: var(--bg); }
.mmd-accordion-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mmd-accordion-chevron {
  font-size: 15px;
  color: var(--muted);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}
.mmd-accordion--open .mmd-accordion-chevron {
  transform: rotate(90deg);
}
#mmd-acc-rentals.mmd-accordion--open .mmd-accordion-hd { background: var(--green-light); }
#mmd-acc-history.mmd-accordion--open .mmd-accordion-hd { background: var(--rental-bg); }
.mmd-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.mmd-accordion--open .mmd-accordion-body {
  grid-template-rows: 1fr;
}
.mmd-accordion-body-inner {
  overflow: hidden;
}
.mmd-history-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 6px 14px;
  background: none;
  border: none;
  border-top: 1px solid var(--hairline);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.mmd-history-more-btn:hover {
  background: var(--bg);
  color: var(--text);
}
.mmd-section-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 10px;
  background: var(--membres-bg); color: var(--membres-text); border: 1px solid var(--membres-border);
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
}
.mmd-section-empty {
  padding: 16px;
  font-size: 13px; color: var(--muted); text-align: center;
}

/* ── Rental cards ────────────────────────────────────────────────────────────── */
.mmd-rental-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.mmd-rental-card:last-child { border-bottom: none; }
.mmd-rental-card--late    { background: var(--err-bg); }
/* Rétablir la bordure sur les cartes compactes (actives + groupes historique) */
.mmd-history-group .mmd-rental-card:last-child,
.mmd-accordion-body-inner > .mmd-rental-card:last-child { border-bottom: 1px solid var(--border); }
.mmd-rental-card--history { padding: 7px 16px; }
.mmd-rental-history-ref { font-size: 11px; font-weight: 400; color: var(--muted); }
.mmd-rental-card--history .mmd-rental-title {
  flex: 1; min-width: 0;
  font-size: 12px;
}
.mmd-rental-pills {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.mmd-rental-info { flex: 1; min-width: 0; }
.mmd-rental-title {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mmd-rental-ref {
  font-size: 11px; color: var(--muted); margin-top: 1px;
}
.mmd-rental-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;
}
/* Deux lignes de dates (emprunté + retour) */
.mmd-rental-dates {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.mmd-rental-date-row {
  font-size: 11px; color: var(--muted); text-align: right;
}
.mmd-rental-date-row--late {
  color: var(--err-text); font-weight: 700;
}
.mmd-rental-date-lbl {
  font-size: 11px; font-weight: 600; color: var(--text);
}

/* ── Onglets fiche membre ───────────────────────────────────────────────────── */
.mmd-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 18px; flex-shrink: 0; }
.mmd-tab { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--muted); border: none; background: transparent; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; font-family: var(--font); }
.mmd-tab:hover { color: var(--text); }
.mmd-tab.on { color: var(--text); border-bottom-color: var(--color-accent); }
.mmd-tab-n { font-size: 10px; background: var(--bg); border-radius: var(--radius-pill); padding: 1px 6px; font-weight: 700; color: var(--muted); }
.mmd-tab.on .mmd-tab-n { background: var(--color-accent); color: white; }
.mmd-tab-content { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; overflow-y: auto; }
.mmd-tab-panel { display: none; flex-direction: column; gap: 10px; }
.mmd-tab-panel.on { display: flex; }

/* ── Carte foyer ────────────────────────────────────────────────────────────── */
.mmd-hh-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.mmd-hh-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mmd-hh-title-row { display: flex; align-items: center; gap: 8px; }
.mmd-hh-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--catalogue-bg); border: 1px solid var(--catalogue-border); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.mmd-hh-name { font-size: 13px; font-weight: 700; color: var(--text); }
.mmd-hh-address { font-size: 11px; color: var(--muted); margin-top: 1px; }
.mmd-hh-role-badge { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; background: var(--catalogue-bg); color: var(--catalogue-text); border: 1px solid var(--catalogue-border); flex-shrink: 0; }
.mmd-hh-edit-btn { font-size: 12px; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--font); }
.mmd-hh-edit-btn:hover { background: var(--surface); color: var(--text); }
.mmd-hh-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.mmd-hh-member-row:last-child { border-bottom: none; }
.mmd-hh-member-row.is-self { background: var(--catalogue-bg); }
.mmd-hh-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.mmd-hh-member-info { flex: 1; }
.mmd-hh-member-name { font-size: 12px; font-weight: 500; color: var(--text); }
.mmd-hh-member-role { font-size: 10px; color: var(--muted); margin-top: 1px; }
.mmd-hh-self-badge { font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--catalogue-bg); color: var(--catalogue-muted); border: 1px solid var(--catalogue-border); margin-left: 5px; }
.mmd-hh-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
.mmd-hh-total { font-size: 11px; color: var(--muted); }
.mmd-hh-total strong { color: var(--text); font-weight: 600; }
.mmd-hh-add-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--font); }
.mmd-hh-add-btn:hover { background: var(--bg); }
.mmd-hh-leave-btn { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-xs); border: 1px dashed var(--err-border); background: transparent; color: var(--err-text); cursor: pointer; font-family: var(--font); }
.mmd-hh-leave-btn:hover { background: var(--err-bg); border-style: solid; }
.mmd-badge--household { background: var(--catalogue-bg); color: var(--catalogue-text); border: 1px solid var(--catalogue-border); }

/* ── État vide foyer ────────────────────────────────────────────────────────── */
.mmd-hh-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; }
.mmd-hh-empty-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.mmd-hh-empty-title { font-size: 13px; font-weight: 600; color: var(--text); }
.mmd-hh-empty-sub { font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 260px; }
.mmd-hh-empty-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ══ Idle panel membres ══════════════════════════════════════════════════════ */
.mmd-idle-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  color: var(--warn-text);
  text-align: left;
  transition: opacity var(--t-fast);
}
.mmd-idle-alert:hover { opacity: .88; }
.mmd-idle-alert strong { font-weight: 700; }

/* ── Zone B : barre stock en bas de la liste membres ────────────────────── */
.mmd-stock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 46px; /* aligne avec .mmd-detail-footer */
  border-top: 1px solid var(--border);
  background: var(--bg);   /* suit le canvas crème */
  flex-shrink: 0;
}
.mmd-stock-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  min-width: 0;
}
.mmd-stock-chip:hover { background: var(--membres-bg); color: var(--membres-text); border-color: var(--membres-border); }
.mmd-stock-chip--active-ok,
.mmd-stock-chip--active-warn,
.mmd-stock-chip--active-err  {
  background: var(--membres-bg);
  color: var(--membres-text);
  border-color: var(--membres-icon);
  box-shadow: 0 0 0 2px rgba(71,85,105,.10);
}
.mmd-stock-chip--active-ok:hover,
.mmd-stock-chip--active-warn:hover,
.mmd-stock-chip--active-err:hover { background: var(--membres-bg); color: var(--membres-text); border-color: var(--membres-icon); }

/* ═══════════════════════════════════════════════════════════════
   SUPPORT — section superadmin
   ═══════════════════════════════════════════════════════════════ */

/* (Les stat-chips d'en-tête ont été retirées — les chiffres vivent dans
   la Vue globale et les compteurs de la nav.) */

/* ─── Tab count badge ────────────────────────────────── */
.support-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--border); color: var(--muted);
  border-radius: var(--radius-sm); font-size: 10px; font-weight: 700;
  margin-left: 4px;
}
.section-tab.active .support-tab-count {
  background: var(--text); color: var(--surface);
}

/* ─── Health bar ─────────────────────────────────────── */
.support-health-bar {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 16px;
  margin-bottom: 20px; display: flex; align-items: center; gap: 16px;
  font-size: 12px;
}
.support-health-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(16,185,129,.2); flex-shrink: 0;
}
.support-health-dot--err { background: var(--err-text); box-shadow: 0 0 0 3px rgba(153,27,27,.18); }
.support-health-label  { font-weight: 600; color: var(--text); }
.support-health-details { color: var(--muted); flex: 1; }
.support-health-time   { font-size: 11px; color: var(--muted); }

/* ─── Widgets grid (overview) ────────────────────────── */
.support-widgets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 22px;
}
/* Cartes d'aperçu alignées sur le langage .stat-card : accent gauche ardoise
   (palette Administration) + grande valeur colorée, comme Dashboard/Finance. */
.support-widget {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--membres-icon);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.support-widget-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.support-widget-hd i { opacity: .6; }
.support-widget-val {
  font-size: 28px; font-weight: 600; line-height: 1;
  color: var(--text);
}
.support-widget-sub { font-size: 11px; color: var(--muted); }

/* ─── Toolbar row (tabs with search + btn) ───────────── */
.support-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.support-toolbar-title {
  font-size: 14px; font-weight: 700; color: var(--text); flex: 1;
}
.support-search {
  padding: 8px 12px 8px 34px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 13px; outline: none;
  box-shadow: var(--shadow); transition: border-color var(--t-fast);
  width: 220px;
}
.support-search:focus-visible { border-color: var(--text); }
.support-search-wrap { position: relative; }
.support-search-wrap .ti { position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: 14px;
  pointer-events: none; }

/* ─── Concept cards (catalog tab) ───────────────────── */
.support-concept-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.support-concept-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.support-concept-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(44,38,32,.1), 0 2px 6px rgba(44,38,32,.06);
}
.support-concept-img {
  height: 72px; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--muted);
}
.support-concept-body { padding: 10px 12px 12px; }
.support-concept-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.support-concept-pub {
  font-size: 11px; color: var(--muted); margin-bottom: 6px;
}

/* ─── Tool cards (tools tab) ─────────────────────────── */
.support-tools-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.support-tool-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.support-tool-card-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--muted);
}
.support-tool-card-icon--danger { background: var(--err-bg); color: var(--err-text); }
.support-tool-title  { font-size: 14px; font-weight: 700; color: var(--text); }
.support-tool-sub    { font-size: 12px; color: var(--muted); flex: 1; }
.support-tool-row    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─── Tab panels ─────────────────────────────────────── */
.support-tab-panel         { display: none; }
.support-tab-panel.active  { display: block; }

/* ═══ Formules d'abonnement — gestion & assistant (modale Paramètres) ═══════ */
#formules-modal .modal-body { max-height: 68vh; overflow-y: auto; }

/* Liste des formules */
.f-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.f-row--archived { opacity: .6; }
.f-row-main { flex: 1; min-width: 0; }
.f-row-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.f-row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.f-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.f-section-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 8px; }
.f-empty { font-size: 13px; color: var(--muted); padding: 14px 0; }

/* Badges d'état */
.f-badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px; }
.f-badge i { font-size: 12px; }
.f-badge--lock  { background: var(--warn-bg);   color: var(--warn-text); }
.f-badge--draft { background: var(--catalogue-bg); color: var(--catalogue-text); }
.f-badge--ok    { background: var(--ok-bg);     color: var(--ok-text); }
.f-badge--muted { background: var(--gry-bg);    color: var(--muted); }

/* Formulaire conditions */
.f-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.f-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f-field > span { font-size: 12px; color: var(--muted); }
.f-field--full { grid-column: 1 / -1; }
.f-check { grid-column: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); align-self: end; padding-bottom: 8px; }
.f-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.f-lock-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--warn-text); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 8px 10px; }
.f-err { display: none; font-size: 12px; color: var(--err-text); background: var(--err-bg); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 12px; grid-column: 1 / -1; }

/* Blocs tables (règles / accès) */
.f-block { margin-top: 18px; }
.f-block-hd { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.f-hint { font-size: 11px; font-weight: 400; color: var(--muted); }
.f-table { width: 100%; border-collapse: collapse; }
.f-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--hairline); }
.f-table td { font-size: 12px; color: var(--text); padding: 6px 6px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.f-table tr:last-child td { border-bottom: none; }
.f-table .form-input { padding: 4px 7px; font-size: 12px; border-radius: var(--radius-sm); width: 100%; }
.f-addrow td { padding-top: 8px; }

/* Comptoir — puces plan (quota / solde prépayé) + recharge */
.counter-plan-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.counter-plan-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--comptoir-bg); color: var(--comptoir-text);
}
.counter-plan-chip i { font-size: 12px; }
.counter-plan-chip--warn { background: var(--warn-bg); color: var(--warn-text); }
.counter-plan-recharge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); background: transparent; color: var(--muted);
  cursor: pointer; font-family: var(--font); transition: background var(--t-fast), color var(--t-fast);
}
.counter-plan-recharge:hover { background: var(--comptoir-bg); color: var(--comptoir-text); border-color: transparent; }

/* Paramètres — aperçu des formules dans le panneau du step */
.setup-sum-row--plan { align-items: baseline; }
.setup-sum-row--plan .setup-sum-k {
  flex: 0 0 auto; min-width: 90px; color: var(--text); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.setup-sum-row--plan .setup-sum-v { color: var(--muted); }

/* ═══ Mode démo — pastille d'avis + modale feedback ═════════════════════════ */
.demo-pill {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-dropdown);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.demo-pill:hover { background: var(--comptoir-bg); border-color: var(--comptoir-border); }
.demo-pill-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--warn-bg); color: var(--warn-text);
  padding: 2px 7px; border-radius: var(--radius-pill);
}

.fb-rating { display: flex; gap: 4px; margin-bottom: 12px; }
.fb-star {
  border: none; background: transparent; cursor: pointer;
  font-size: 22px; color: var(--border); padding: 2px 4px;
  transition: color var(--t-fast), transform var(--t-fast);
}
.fb-star:hover { transform: scale(1.12); }
.fb-star.on { color: var(--catalogue-icon); }
#fb-message { width: 100%; resize: vertical; min-height: 90px; box-sizing: border-box; }

/* ═══ Surcouche — Activité / Finance / Paramètres (grande modale) ═══════════ */
.overlay-page {
  position: fixed; inset: 0; z-index: 900;   /* sous les modales (1000) : les dialogues flottent au-dessus */
  display: none; align-items: center; justify-content: center;
  background: rgba(30, 26, 22, .38);
}
.overlay-page.open { display: flex; }
.overlay-card {
  width: min(1080px, 92vw); height: 88vh;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; overflow: hidden;
}
.overlay-hd {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 12px 18px; border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.overlay-title { font-size: 15px; font-weight: 700; color: var(--text); }
.overlay-hd .modal-close-btn { margin-left: auto; }
.overlay-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 26px; }
.ov-host { display: none; }
.ov-host.on { display: block; }
/* Titre de bloc dans Activité (section Prêts sous le tableau de bord) */
.ov-block-hd {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--hairline);
}

/* Nav : entrées surcouche — flèche ↗ discrète + marque « ouvert » */
.nav-ov-arrow { margin-left: auto; font-size: 12px; color: var(--color-text-tertiary); opacity: .8; }
.nav-item--overlay { display: flex; align-items: center; }
.nav-item.overlay-open { background: var(--hover); }

/* Paramètres — accueil en liste d'étapes */
.ov-set-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.ov-set-list { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.ov-set-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  font-family: var(--font); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ov-set-row:not(.ov-set-row--soon):hover { background: var(--hover); }
.ov-set-row--soon { opacity: .55; cursor: default; }
.ov-set-ico { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.ov-set-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-set-title { font-size: 14px; font-weight: 700; color: var(--text); }
.ov-set-desc { font-size: 12px; color: var(--muted); }
.ov-set-state { flex-shrink: 0; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.ov-set-state--ok   { color: var(--ok-text); }
.ov-set-state--todo { color: var(--catalogue-text); }
.ov-set-state--soon { color: var(--color-text-tertiary); font-weight: 500; }

/* ── Surcouches deux colonnes (à la Claude) : nav de sections à gauche,
   contenu à droite — chaque colonne scrolle indépendamment. Vaut pour
   Activité, Finance et Paramètres (hôtes .ov-host--cols). ────────────────── */
.overlay-body:has(.ov-host--cols.on) { overflow: hidden; padding: 0; }
.ov-host--cols.on { display: flex; height: 100%; }
.ov-host--cols.on > * { flex: 1; min-width: 0; }
.set2 { display: flex; width: 100%; height: 100%; min-height: 0; }

.set2-nav {
  width: 200px; flex-shrink: 0;
  background: var(--bg); border-right: 1px solid var(--hairline);
  padding: 12px 8px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.set2-nav-count { font-size: 11px; color: var(--muted); padding: 2px 10px 10px; }
.set2-nav-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; border-radius: var(--radius-sm);
  background: transparent; font-family: var(--font); font-size: 13px;
  color: var(--text); cursor: pointer;
  transition: background var(--t-fast);
}
.set2-nav-row i { font-size: 15px; color: var(--muted); flex-shrink: 0; }
.set2-nav-row:hover:not(:disabled) { background: var(--hover); }
.set2-nav-row.on { background: var(--hover); font-weight: 700; }
.set2-nav-row.on i { color: var(--text); }
.set2-nav-row--soon { color: var(--color-text-tertiary); cursor: default; }
.set2-nav-row--soon i { color: var(--color-text-tertiary); }
.set2-nav-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set2-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.set2-dot--ok { background: var(--green-mid); }
.set2-soon { margin-left: auto; font-size: 10px; color: var(--color-text-tertiary); flex-shrink: 0; }

.set2-pane {
  flex: 1; min-width: 0; overflow-y: auto;
  background: var(--surface);
  padding: 18px 22px 26px;
}
.set2-pane-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
/* Écrans de volet : flèche de retour ronde intégrée à l'en-tête (option C). */
.set2-pane-hd--back { align-items: center; }
.pane-back {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--bg); color: var(--text);
  font-size: 15px; cursor: pointer;
  transition: background var(--t-fast);
}
.pane-back:hover { background: var(--hover); }
/* Le retour porte la couleur de la page où il se trouve : c'est le seul geste
   de navigation de l'écran, il a droit à sa touche d'identité. */
#section-games .pane-back { background: var(--catalogue-bg); color: var(--catalogue-icon); }
#section-games .pane-back:hover { background: var(--catalogue-border); }
#section-members .pane-back { background: var(--membres-pastel); color: var(--membres-icon); }
#section-members .pane-back:hover { background: var(--membres-border); }
#section-counter .pane-back { background: var(--comptoir-bg); color: var(--comptoir-icon); }
#section-counter .pane-back:hover { background: var(--comptoir-border); }
.set2-pane-txt { flex: 1; min-width: 0; }
.set2-pane-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.set2-pane-desc { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }
.set2-pane-ft { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.set2-cat-stat { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.set2-cat-hint { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; max-width: 520px; }

/* Écrans formules rendus dans le volet : re-cadrage des classes de modale. */
.set2-pane .modal-body { max-height: none; overflow: visible; padding: 0; max-width: 860px; }
.set2-pane .modal-ft {
  padding: 12px 0 0; margin-top: 14px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: flex-end; gap: 8px; max-width: 860px;
}

/* Tablette étroite : la nav se replie sur les icônes. */
@media (max-width: 900px) {
  .set2-nav { width: 54px; padding: 12px 6px; }
  .set2-nav-lbl, .set2-nav-count, .set2-soon, .set2-dot { display: none; }
  .set2-nav-row { justify-content: center; padding: 9px 0; }
}

/* Nav deux colonnes — groupe de section, compteurs, saut depuis un widget */
.set2-nav-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-tertiary); padding: 12px 10px 4px;
}
.set2-count {
  margin-left: auto; flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  background: var(--gry-bg); color: var(--muted);
  border-radius: var(--radius-pill); padding: 1px 8px;
}
.set2-count--err { background: var(--err-bg); color: var(--err-text); }
@media (max-width: 900px) { .set2-count, .set2-nav-group { display: none; } }

/* Activité : les chips de statut sont remplacées par la nav de gauche. */
#ov-activity .rentals-filter-row { display: none; }
/* Widget « Prêts en retard » cliquable → saute à l'entrée de nav. */
.act2-jump { cursor: pointer; transition: background var(--t-fast); }
.act2-jump:hover { background: var(--err-bg); }

/* Variante « page » du deux-colonnes (Administration) : rail de nav sticky en
   carte, le contenu suit le scroll normal de la page. */
.set2--page { height: auto; min-height: 0; align-items: flex-start; gap: 18px; }
.set2--page .set2-nav {
  position: sticky; top: 10px;
  width: 200px; max-height: calc(100vh - 140px);
  border: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 8px;
}
.set2--page .set2-pane {
  background: transparent; overflow: visible; padding: 0;
}
@media (max-width: 900px) { .set2--page .set2-nav { width: 54px; padding: 8px 6px; } }