/* =====================================================================
   LYVIRE — LIQUID GLASS  ·  Système de design partagé
   Auteur : Alexis (direction artistique DAYDGROUP)
   100 % autonome — aucune police, icône ou librairie externe.
   Polices = pile système. Icônes = SVG inline (voir icones.html).
   =====================================================================
   SOMMAIRE
   1. Tokens (variables CSS)
   2. Thèmes d'enseigne (Style / Cosmétique)
   3. Base & fond « verre liquide »
   4. Barre supérieure (topbar) en verre
   5. Navigation à grandes icônes (rail + barre mobile)
   6. Layout & panneaux/cartes en verre
   7. Tuiles KPI
   8. Boutons
   9. Champs de formulaire
  10. Tableaux / listes
  11. Badges & puces
  12. Modale de confirmation
  13. Utilitaires, accessibilité, replis, responsive
   ===================================================================== */

/* ============================ 1. TOKENS ============================= */
:root {
  /* --- CHARTE LYVIRE : NOIR & BLANC. Monochrome élégant (noir/gris/blanc),
     touches discrètes de beige/marron en accent seulement. --- */

  /* --- « Marque » = graphite quasi-noir (boutons primaires, éléments actifs) --- */
  --ly-brand:        #26262A;   /* graphite interactif principal */
  --ly-brand-strong: #121215;   /* survol / pressé (proche noir) */
  --ly-brand-soft:   #55555C;   /* fin de dégradé, gris moyen */
  --ly-brand-tint:   rgba(30, 25, 20, .07); /* voile neutre chaud très léger */

  /* --- Accent = beige / marron (taupe), très sobre (voir §2 par enseigne) --- */
  --ly-accent:       #8C7157;   /* marron café / taupe */
  --ly-accent-soft:  #C7B299;   /* beige doux */

  /* --- Neutres (encre presque noire, gris) --- */
  --ly-ink:      #17171A;   /* texte principal (quasi noir) */
  --ly-ink-2:    #3C3C42;   /* texte secondaire */
  --ly-muted:    #74747C;   /* texte tertiaire / libellés (gris) */
  --ly-line:     rgba(20, 20, 25, .10); /* filets / séparateurs */

  /* --- Sémantique (signaux FONCTIONNELS discrets : états de stock, alertes) --- */
  --ly-success:  #3E8E63;   /* désaturé, sobre */
  --ly-warning:  #B98432;
  --ly-danger:   #C24A4A;
  --ly-info:     #4A5F7A;

  /* --- Fond « verre liquide » (mesh dégradé de gris + soupçon de beige) --- */
  --ly-bg-1: #F5F5F6;   /* gris très clair */
  --ly-bg-2: #ECECEF;   /* gris clair */
  --ly-bg-3: #F2EFEA;   /* soupçon de beige */
  --ly-bg-4: #E7E7EA;   /* gris */

  /* --- Surfaces en verre (blanc translucide + halo) --- */
  --glass:        rgba(255, 255, 255, .55);  /* panneau standard */
  --glass-strong: rgba(255, 255, 255, .72);  /* barre, éléments lisibles */
  --glass-soft:   rgba(255, 255, 255, .38);  /* couches secondaires */
  --glass-border: rgba(255, 255, 255, .65);  /* liseré lumineux du verre */
  --glass-inner:  rgba(255, 255, 255, .90);  /* reflet interne haut */

  /* --- Flou d'arrière-plan (verre dépoli) --- */
  --blur:      18px;
  --blur-lg:   28px;
  --blur-sm:   10px;
  --saturate:  180%;

  /* --- Rayons (coins arrondis généreux) --- */
  --r-xs:  10px;
  --r-sm:  14px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  36px;
  --r-pill: 999px;

  /* --- Ombres douces multi-niveaux (profondeur, anti « plat ») --- */
  --sh-1: 0 1px 2px rgba(36,27,46,.06), 0 2px 8px rgba(36,27,46,.05);
  --sh-2: 0 4px 12px rgba(36,27,46,.08), 0 12px 32px rgba(36,27,46,.08);
  --sh-3: 0 8px 24px rgba(36,27,46,.10), 0 24px 60px rgba(36,27,46,.14);
  --sh-brand: 0 10px 26px rgba(20,20,25,.26);
  --sh-inset: inset 0 1px 0 var(--glass-inner);

  /* --- Espacements (échelle 4px, respiration généreuse) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* --- Typographie (pile système, texte pas trop gros) --- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
          system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px;
  --lh: 1.55;
  --tracking-title: -.01em;

  /* --- Transitions (mouvement de qualité, ease souple) --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t: .28s;
  --t-slow: .5s;

  /* --- Dimensions layout --- */
  --rail-w: 92px;      /* largeur du rail d'icônes desktop */
  --topbar-h: 68px;
}

/* ===================== 2. THÈMES D'ENSEIGNE ======================== */
/* Base commune identique ; on ne change qu'un accent + la teinte du fond.
   S'applique via <body data-enseigne="style"> ou "cosmetique".        */

/* Lyvire STYLE — mode / couture : monochrome plus FROID (gris purs),
   accent marron profond très sobre. */
body[data-enseigne="style"] {
  --ly-accent:      #6F5B49;   /* marron/taupe profond */
  --ly-accent-soft: #B29A80;
  --ly-bg-1: #F5F5F7;
  --ly-bg-2: #EAEAED;
  --ly-bg-3: #F0F0F2;
  --ly-bg-4: #E4E4E8;
}

/* Lyvire COSMÉTIQUE — beauté / doux : même base, chaleur BEIGE discrète,
   accent camel/beige. */
body[data-enseigne="cosmetique"] {
  --ly-accent:      #A98A66;   /* camel / beige chaud */
  --ly-accent-soft: #D8C4A8;
  --ly-brand-tint:   rgba(120, 92, 60, .08);
  --ly-bg-1: #F6F3EF;
  --ly-bg-2: #EFEAE3;
  --ly-bg-3: #F3EEE6;
  --ly-bg-4: #E9E3DA;
}

/* ==================== 3. BASE & FOND VERRE ========================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--ly-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Le mesh dégradé qui « vit » derrière le verre dépoli */
  background:
    radial-gradient(1200px 800px at 8% -8%,  var(--ly-bg-1), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, var(--ly-bg-2), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, var(--ly-bg-3), transparent 60%),
    radial-gradient(700px 600px at 90% 100%, var(--ly-bg-4), transparent 55%),
    var(--ly-bg-1);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s-3);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  font-weight: 700;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--ly-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* icône SVG générique (héritent de currentColor) */
.icon { width: 24px; height: 24px; display: inline-block;
        stroke: currentColor; fill: none; flex: none;
        vertical-align: middle; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 40px; height: 40px; }

/* ==================== 4. BARRE SUPÉRIEURE ========================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--sh-1), var(--sh-inset);
}
.topbar__brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: .01em; color: var(--ly-ink);
}
.topbar__logo {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--ly-brand), var(--ly-brand-soft));
  box-shadow: var(--sh-brand), var(--sh-inset);
}
.topbar__spacer { flex: 1; }

/* champ de recherche « verre » dans la barre */
.topbar__search {
  display: flex; align-items: center; gap: var(--s-2);
  height: 42px; padding: 0 var(--s-4);
  min-width: 220px; max-width: 380px; flex: 1;
  border-radius: var(--r-pill);
  background: var(--glass-soft);
  border: 1px solid var(--glass-border);
  color: var(--ly-muted);
  box-shadow: var(--sh-inset);
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.topbar__search:focus-within {
  background: var(--glass);
  box-shadow: 0 0 0 3px var(--ly-brand-tint), var(--sh-inset);
}
.topbar__search input {
  border: 0; background: transparent; outline: none;
  font: inherit; color: var(--ly-ink); width: 100%;
}
.topbar__search input::placeholder { color: var(--ly-muted); }

/* pastille utilisateur / action ronde en verre */
.iconbtn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  color: var(--ly-ink-2); cursor: pointer;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-inset);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.iconbtn:hover { background: var(--glass); transform: translateY(-1px);
                 box-shadow: var(--sh-1), var(--sh-inset); }
.iconbtn:active { transform: translateY(0) scale(.96); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(150deg, var(--ly-accent), var(--ly-accent-soft));
  box-shadow: var(--sh-1), var(--sh-inset);
}

/* ============= 5. NAVIGATION À GRANDES ICÔNES ===================== */
/* Desktop : rail vertical en verre à gauche. Mobile : barre en bas.   */
.rail {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 30;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2); padding: var(--s-5) var(--s-3);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--sh-1);
  overflow-y: auto;
}
.rail__item {
  width: 100%; min-height: 68px; padding: var(--s-3) var(--s-1);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-radius: var(--r-md);
  color: var(--ly-ink-2); cursor: pointer;
  font-size: 11px; font-weight: 600; text-align: center;
  border: 1px solid transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.rail__item .icon { width: 28px; height: 28px; }
.rail__item:hover {
  background: var(--glass-soft); transform: translateY(-1px);
  border-color: var(--glass-border);
}
.rail__item.is-active {
  color: var(--ly-brand-strong);
  background: linear-gradient(160deg, rgba(255,255,255,.85), var(--ly-brand-tint));
  border-color: var(--glass-border);
  box-shadow: var(--sh-1), var(--sh-inset);
}
.rail__item.is-active .icon { stroke-width: 2.1; }

/* ==================== 6. LAYOUT & PANNEAUX ======================== */
.app { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.main {
  flex: 1; margin-left: var(--rail-w);
  padding: var(--s-6) var(--s-6) var(--s-8);
  max-width: 1180px;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap;
}
.page-head .subtitle { color: var(--ly-muted); font-size: var(--fs-md); }

/* Le panneau en verre : la brique visuelle centrale */
.panel, .card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2), var(--sh-inset);
  padding: var(--s-5);
}
/* reflet lumineux discret en haut du verre */
.panel::before, .card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
  opacity: .8;
}
.panel > *, .card > * { position: relative; }

.card--hover { transition: transform var(--t) var(--ease-out),
                           box-shadow var(--t) var(--ease-out); cursor: pointer; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-3), var(--sh-inset); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ======================= 7. TUILES KPI =========================== */
.kpi {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5);
}
.kpi__top { display: flex; align-items: center; justify-content: space-between; }
.kpi__ico {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--ly-brand), var(--ly-brand-soft));
  box-shadow: var(--sh-brand), var(--sh-inset);
}
.kpi__ico--accent { background: linear-gradient(150deg, var(--ly-accent), var(--ly-accent-soft)); }
/* variantes « neutre » (verre gris) et statut sobre pour rester monochrome */
.kpi__ico--neutral { color: var(--ly-ink); background: linear-gradient(160deg, #ffffff, #E7E7EA);
  border: 1px solid var(--glass-border); box-shadow: var(--sh-inset); }
.kpi__ico--success { background: linear-gradient(150deg, var(--ly-success), #8FC7AC); box-shadow: 0 10px 24px rgba(62,142,99,.24), var(--sh-inset); }
.kpi__ico--warning { background: linear-gradient(150deg, var(--ly-warning), #E0BE85); box-shadow: 0 10px 24px rgba(185,132,50,.24), var(--sh-inset); }
.kpi__label { color: var(--ly-muted); font-size: var(--fs-sm); font-weight: 600; }
.kpi__value { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; color: var(--ly-ink); }
.kpi__value small { font-size: var(--fs-md); font-weight: 700; color: var(--ly-muted); }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 700; }
.kpi__delta--up { color: var(--ly-success); }
.kpi__delta--down { color: var(--ly-danger); }

/* raccourci à grande icône (tuile d'action) */
.shortcut {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-5); text-align: left; color: var(--ly-ink);
}
.shortcut__ico {
  width: 60px; height: 60px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--ly-brand-strong);
  background: linear-gradient(160deg, rgba(255,255,255,.85), var(--ly-brand-tint));
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-inset);
}
.shortcut__ico .icon { width: 32px; height: 32px; }
.shortcut h3 { margin: 0; }
.shortcut p { margin: 0; color: var(--ly-muted); font-size: var(--fs-sm); }

/* ========================= 8. BOUTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 var(--s-5);
  font: inherit; font-weight: 700; font-size: var(--fs-md);
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), filter var(--t) var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  color: #fff;
  background: linear-gradient(150deg, var(--ly-brand), var(--ly-brand-strong));
  box-shadow: var(--sh-brand), var(--sh-inset);
}
.btn--primary:hover { filter: brightness(1.12); box-shadow: var(--sh-brand), 0 14px 32px rgba(20,20,25,.30), var(--sh-inset); }

.btn--accent {
  color: #fff;
  background: linear-gradient(150deg, var(--ly-accent), var(--ly-accent-soft));
  box-shadow: var(--sh-1), var(--sh-inset);
}

/* bouton « verre » (secondaire) */
.btn--glass {
  color: var(--ly-ink);
  background: var(--glass-strong);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  box-shadow: var(--sh-1), var(--sh-inset);
}
.btn--glass:hover { background: #fff; transform: translateY(-1px); }

.btn--ghost {
  color: var(--ly-brand-strong); background: transparent;
  border-color: var(--glass-border);
}
.btn--ghost:hover { background: var(--ly-brand-tint); }

.btn--danger {
  color: #fff;
  background: linear-gradient(150deg, var(--ly-danger), #D67A7A);
  box-shadow: 0 10px 24px rgba(194,74,74,.28), var(--sh-inset);
}

.btn--sm { min-height: 38px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 54px; padding: 0 var(--s-6); font-size: var(--fs-lg); }
.btn--icon { padding: 0; width: 46px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ==================== 9. CHAMPS DE FORMULAIRE ==================== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.field > label { font-size: var(--fs-sm); font-weight: 700; color: var(--ly-ink-2); }
.field .hint { font-size: var(--fs-xs); color: var(--ly-muted); }

.input, .select, .textarea {
  width: 100%; font: inherit; font-size: var(--fs-md); color: var(--ly-ink);
  min-height: 48px; padding: 12px var(--s-4);
  border-radius: var(--r-sm);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-inset);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  outline: none;
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ly-muted); }
.input:focus, .select:focus, .textarea:focus {
  background: #fff; border-color: var(--ly-brand-soft);
  box-shadow: 0 0 0 4px var(--ly-brand-tint), var(--sh-inset);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236E6780' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 44px;
}
/* champ avec icône préfixe */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .icon { position: absolute; left: 14px; color: var(--ly-muted); width: 20px; height: 20px; }
.input-group .input { padding-left: 44px; }

/* interrupteur (toggle) en verre */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch__track {
  width: 52px; height: 30px; border-radius: var(--r-pill);
  background: var(--glass-soft); border: 1px solid var(--glass-border);
  box-shadow: var(--sh-inset); transition: background var(--t) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t) var(--ease-out);
}
.switch input:checked + .switch__track {
  background: linear-gradient(150deg, var(--ly-brand), var(--ly-brand-soft));
}
.switch input:checked + .switch__track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 4px var(--ly-brand-tint), var(--sh-inset); }

/* segment (choix multiple façon iOS) */
.segment { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill);
           background: var(--glass-soft); border: 1px solid var(--glass-border); box-shadow: var(--sh-inset); }
.segment button {
  border: 0; background: transparent; font: inherit; font-weight: 700; font-size: var(--fs-sm);
  color: var(--ly-ink-2); padding: 8px 18px; border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.segment button.is-active { background: #fff; color: var(--ly-brand-strong); box-shadow: var(--sh-1); }

/* ==================== 10. TABLEAUX / LISTES ===================== */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table thead th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ly-muted); font-weight: 700;
  padding: var(--s-3) var(--s-4); white-space: nowrap;
}
.table tbody td {
  padding: var(--s-4); font-size: var(--fs-md); color: var(--ly-ink);
  border-top: 1px solid var(--ly-line); vertical-align: middle;
}
.table tbody tr { transition: background var(--t) var(--ease); }
.table tbody tr:hover { background: rgba(255,255,255,.45); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-strong { font-weight: 700; }

/* liste « verre » (alternative aux tableaux, idéale mobile) */
.list { display: flex; flex-direction: column; gap: var(--s-3); }
.list__row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--r-md); box-shadow: var(--sh-1), var(--sh-inset);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.list__row:hover { transform: translateY(-2px); box-shadow: var(--sh-2), var(--sh-inset); }
.list__thumb {
  width: 52px; height: 52px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; color: var(--ly-brand-strong);
  background: linear-gradient(160deg, rgba(255,255,255,.9), var(--ly-brand-tint));
  border: 1px solid var(--glass-border); box-shadow: var(--sh-inset);
}
.list__body { flex: 1; min-width: 0; }
.list__title { font-weight: 700; }
.list__meta { color: var(--ly-muted); font-size: var(--fs-sm); }

/* barre de progression (ex. taux de tissu restant) */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--ly-line); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ly-brand), var(--ly-brand-soft)); }

/* ==================== 11. BADGES & PUCES ======================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.6;
  border: 1px solid transparent;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--neutral { color: var(--ly-ink-2); background: var(--glass-soft); border-color: var(--glass-border); }
.badge--success { color: #1E7A50; background: rgba(46,158,107,.14); }
.badge--warning { color: #9C6413; background: rgba(217,146,43,.16); }
.badge--danger  { color: #A5303B; background: rgba(218,75,87,.14); }
.badge--info    { color: #295B9E; background: rgba(62,123,216,.14); }
.badge--brand   { color: var(--ly-brand-strong); background: var(--ly-brand-tint); }

/* pastille de notification */
.pill-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--ly-danger); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; }

/* ================== 12. MODALE DE CONFIRMATION ================= */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: var(--s-4);
  background: rgba(36,27,46,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: ly-fade var(--t) var(--ease);
}
.modal {
  width: 100%; max-width: 440px; text-align: center;
  padding: var(--s-6);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3), var(--sh-inset);
  animation: ly-pop var(--t-slow) var(--ease-out);
}
.modal__ico {
  width: 68px; height: 68px; margin: 0 auto var(--s-4); border-radius: var(--r-md);
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--ly-brand), var(--ly-brand-soft));
  box-shadow: var(--sh-brand), var(--sh-inset);
}
.modal__ico--danger { background: linear-gradient(150deg, var(--ly-danger), #D67A7A);
  box-shadow: 0 10px 26px rgba(194,74,74,.30), var(--sh-inset); }
.modal p { color: var(--ly-ink-2); }
.modal__actions { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); }
.modal__actions .btn { flex: 1; }

@keyframes ly-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ly-pop  { from { opacity: 0; transform: translateY(12px) scale(.96); }
                     to   { opacity: 1; transform: none; } }
@keyframes ly-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============ 13. UTILITAIRES / A11Y / REPLIS / RESPONSIVE ====== */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.wrap { flex-wrap: wrap; } .between { justify-content: space-between; }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--ly-muted); }
.text-sm { font-size: var(--fs-sm); } .text-lg { font-size: var(--fs-lg); }
.center { text-align: center; }
.rise { animation: ly-rise var(--t-slow) var(--ease-out) both; }
.rise-2 { animation-delay: .06s; } .rise-3 { animation-delay: .12s; } .rise-4 { animation-delay: .18s; }

/* lisible pour lecteurs d'écran, invisible à l'œil */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* focus visible net (accessibilité clavier) */
:focus-visible { outline: 3px solid var(--ly-brand); outline-offset: 2px; border-radius: 6px; }

/* --- Repli : navigateurs sans backdrop-filter → surfaces opaques --- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar { background: rgba(255,255,255,.94); }
  .rail   { background: rgba(255,255,255,.94); }
  .panel, .card, .list__row { background: rgba(255,255,255,.92); }
  .modal  { background: rgba(255,255,255,.97); }
  .input, .select, .textarea, .btn--glass { background: #fff; }
}

/* --- Accessibilité : préférence « moins de transparence » --- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255,255,255,.96); --glass-strong: rgba(255,255,255,.98);
          --glass-soft: rgba(255,255,255,.9); }
  .modal-backdrop { background: rgba(36,27,46,.5); }
}

/* --- Accessibilité : préférence « moins d'animation » --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------- RESPONSIVE -------------------------- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --rail-w: 0px; }
  .main { margin-left: 0; padding: var(--s-4) var(--s-4) 110px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .topbar__search { min-width: 0; }
  .topbar__brand span.full { display: none; }

  /* le rail devient une barre d'onglets en bas, à grandes icônes */
  .rail {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 76px;
    flex-direction: row; justify-content: space-around; align-items: center;
    padding: var(--s-2) var(--s-3); gap: var(--s-1);
    border-right: 0; border-top: 1px solid var(--glass-border);
    box-shadow: 0 -6px 24px rgba(36,27,46,.10);
  }
  .rail__item { min-height: 0; flex: 1; padding: 8px 2px; font-size: 10px; }
  .rail__item .icon { width: 26px; height: 26px; }
  /* on masque les items surnuméraires sur mobile pour rester lisible */
  .rail__item.hide-mobile { display: none; }
}