/* ── MADE Mirage — police de la marque ───────────────────────────────────────
   Police COMMERCIALE (MadeType) : les fichiers ne sont pas dans le dépôt, il faut
   acheter la licence *webfont* et les déposer dans `fonts/` (voir fonts/LISEZMOI.md).
   Tant qu'ils manquent, `src` échoue et le navigateur descend SILENCIEUSEMENT la pile
   de `--sans` / `--serif` : on retrouve exactement le rendu actuel, rien ne casse.
   C'est aussi pour ça que le lien Google Fonts reste dans index.html. */
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/made-mirage-regular.woff2') format('woff2'),
       url('../fonts/made-mirage-regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/made-mirage-medium.woff2') format('woff2'),
       url('../fonts/made-mirage-medium.woff')  format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/made-mirage-bold.woff2') format('woff2'),
       url('../fonts/made-mirage-bold.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Les ~1 400 `font-family` de l'app (dont beaucoup en style inline dans les JS)
     pointent désormais sur ces DEUX variables : changer de police se fait ici, en
     un endroit. Les anciennes familles restent en repli.
     ⚠️ Toute page qui utilise var(--sans)/var(--serif) doit charger CE fichier —
     c'est le cas d'index.html comme des bancs d'essai de dev/banc-essai/. */
  --sans:  'MADE Mirage', 'DM Sans', system-ui, sans-serif;
  --serif: 'MADE Mirage', 'Cormorant Garamond', Georgia, serif;

  --rose: #C0435A;
  --rose-light: #f5e8eb;
  --rose-dark: #8e2d3f;
  --charcoal: #2C2B2B;
  --warm-gray: #6B6560;
  --cream: #FAF8F5;
  --soft-white: #FFFFFF;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 2px 20px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); background: var(--cream); color: var(--charcoal); min-height: 100vh; }

/* NAV */
nav { background: var(--soft-white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 64px; }
.logo { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--rose); letter-spacing: 0.02em; cursor: pointer; }
.logo span { color: var(--charcoal); }
.nav-tabs { display: flex; gap: 4px; }
.nav-tab { padding: 8px 16px; border: none; background: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--warm-gray); border-radius: var(--radius-sm); transition: all 0.2s; white-space: nowrap; }
.nav-tab:hover { background: var(--cream); color: var(--charcoal); }
.nav-tab.active { background: var(--rose-light); color: var(--rose); font-weight: 500; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.cart-btn { position: relative; padding: 8px 16px; background: var(--rose); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: background 0.2s; }
.cart-btn:hover { background: var(--rose-dark); }
.cart-count { background: white; color: var(--rose); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }

/* PAGES */
.page { display: none; max-width: 1400px; margin: 0 auto; padding: 2rem; }
.page.active { display: block; }

/* HERO */
.hero-logo-wrap { text-align: center; margin-bottom: 2.5rem; padding: 1.5rem 0; }
.hero-logo { max-width: 420px; width: 70%; height: auto; }
.hero { background: linear-gradient(135deg, var(--charcoal) 0%, #3d2a2e 100%); border-radius: 20px; padding: 4rem 3rem; margin-bottom: 2.5rem; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; border: 1px solid rgba(192,67,90,0.2); border-radius: 50%; }
.hero::after { content: ''; position: absolute; top: -30%; right: 5%; width: 300px; height: 300px; border: 1px solid rgba(192,67,90,0.15); border-radius: 50%; }
.hero h1 { font-family: var(--serif); font-size: 48px; font-weight: 300; color: white; line-height: 1.1; margin-bottom: 1rem; position: relative; z-index: 1; }
.hero h1 em { color: var(--rose); font-style: italic; }
.hero p { color: rgba(255,255,255,0.65); font-size: 15px; max-width: 480px; line-height: 1.7; margin-bottom: 2rem; position: relative; z-index: 1; }
.hero-stats { display: flex; gap: 2.5rem; position: relative; z-index: 1; }
.hero-stat .n { font-family: var(--serif); font-size: 32px; font-weight: 500; color: white; }
.hero-stat .l { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* FILTERS */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.section-title { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--charcoal); }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: 50px; background: white; color: var(--warm-gray); font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.filter-chip:hover, .filter-chip.active { background: var(--rose); color: white; border-color: var(--rose); }
.gamme-badge { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 50px; font-weight: 500; }
.gamme-Incontournable { background: #e8f4e8; color: #2d6a2d; }
.gamme-Prestige { background: #fff3e0; color: #8a5000; }
.gamme-Exclusif { background: var(--rose-light); color: var(--rose-dark); }

/* CATALOGUE GRID */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.article-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; transition: all 0.25s; cursor: pointer; }
.article-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.article-img { aspect-ratio: 4 / 5; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; }
.article-body { padding: 1rem; }
.article-name { font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 4px; }
.article-cat { font-size: 11px; color: var(--warm-gray); margin-bottom: 8px; }
.article-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.article-price { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--rose); }
.article-price span { font-size: 11px; font-weight: 400; color: var(--warm-gray); font-family: var(--sans); }
.add-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--rose); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background 0.2s; }
.add-btn:hover { background: var(--rose-dark); }
.avail-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; display: inline-block; margin-right: 4px; }
.avail-label { font-size: 10px; color: #2d6a2d; }
.article-stars-badge { position:absolute; top:8px; right:8px; background:rgba(255,255,255,0.92); border:1px solid var(--border); border-radius:50px; padding:2px 9px; font-size:11px; font-weight:600; color:var(--charcoal); }
.cat-stepper { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin:8px 0 10px; }
.cat-stepper button { width:30px; height:30px; border:none; background:#f5f5f5; color:var(--charcoal); font-size:16px; cursor:pointer; line-height:1; }
.cat-stepper button:hover { background:var(--rose-light); color:var(--rose); }
.cat-stepper input { width:42px; height:30px; border:none; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font-size:14px; font-weight:600; outline:none; font-family:var(--sans); -moz-appearance:textfield; }
.cat-stepper input::-webkit-outer-spin-button, .cat-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cat-add-btn { display:block; width:100%; padding:9px; background:var(--rose); color:white; border:none; border-radius:8px; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:600; transition:background 0.2s; }
.cat-add-btn:hover { background:var(--rose-dark); }
.cat-add-btn:disabled { opacity:0.4; cursor:not-allowed; }
/* Aligner le bouton « Ajouter » en bas de chaque carte, quelle que soit la longueur du nom */
.catalog-grid .article-card { display:flex; flex-direction:column; }
.catalog-grid .article-img  { flex-shrink:0; }
.catalog-grid .article-body { display:flex; flex-direction:column; flex:1; }
.catalog-grid .cat-stepper  { margin-top:auto; align-self:center; }

/* DEVIS / PANIER */
.devis-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; }
.panel { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 1.5rem; }
.panel-title { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 1.25rem; color: var(--charcoal); border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-group label { font-size: 12px; color: var(--warm-gray); font-weight: 500; }
.form-group select, .form-group input { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--sans); font-size: 13px; background: white; color: var(--charcoal); outline: none; }
.form-group select:focus, .form-group input:focus { border-color: var(--rose); }
.cart-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cart-item-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-sub { font-size: 11px; color: var(--warm-gray); }
.cart-item-price { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--rose); flex-shrink: 0; }
.cart-item-remove { background: none; border: none; color: #ccc; cursor: pointer; font-size: 16px; padding: 4px; }
.cart-item-remove:hover { color: var(--rose); }
.qty-ctrl { display: flex; align-items: center; gap: 6px; }
.qty-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: none; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; color: var(--charcoal); }
.qty-btn:hover { border-color: var(--rose); color: var(--rose); }
.qty-val { font-size: 13px; font-weight: 500; min-width: 20px; text-align: center; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--warm-gray); margin-bottom: 8px; }
.summary-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; color: var(--charcoal); padding-top: 10px; border-top: 1px solid var(--border); margin-top: 8px; }
.pay-btn { width: 100%; padding: 13px; background: var(--rose); color: white; border: none; border-radius: var(--radius-sm); font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 1rem; transition: background 0.2s; }
.pay-btn:hover { background: var(--rose-dark); }
.tranche-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.tranche-opt { padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; font-size: 11px; cursor: pointer; transition: all 0.15s; }
.tranche-opt:hover { border-color: var(--rose); color: var(--rose); }
.tranche-opt.selected { background: var(--rose); color: white; border-color: var(--rose); }
.tranche-opt.full { background: var(--cream); color: #ccc; cursor: not-allowed; }
.empty-cart { text-align: center; padding: 3rem 1rem; color: var(--warm-gray); }
.empty-cart .icon { font-size: 48px; margin-bottom: 1rem; }

/* FACTURE */
.facture-paper { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 2.5rem; max-width: 760px; margin: 0 auto; }
.facture-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--rose-light); gap: 2rem; }
.facture-logo { font-family: var(--serif); font-size: 36px; color: var(--rose); font-style: italic; }
.facture-rccm { font-size: 10px; color: var(--warm-gray); margin-top: 4px; }
/* Infos commande : TOUJOURS 3 colonnes, quelle que soit la taille de l'écran.
   Une facture est un document : sa mise en page ne doit pas se réorganiser selon l'appareil,
   sinon le même document ne se lit pas pareil sur ordinateur et sur tablette. Sur petit écran on
   récupère donc de la place en resserrant la gouttière et la typo — jamais en repliant en colonne. */
.facture-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; }
.facture-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fi-row { display: flex; flex-direction: column; gap: 1px; }
/* overflow-wrap : « Tranche horaire de récupération » doit pouvoir se couper dans une colonne
   étroite plutôt que déborder de la facture. */
.fi-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warm-gray); font-weight: 600; overflow-wrap: anywhere; }
.fi-value { font-size: 12px; color: var(--charcoal); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 640px){
  .facture-infos { gap: 0.6rem; }
  .fi-label { font-size: 8px; letter-spacing: 0.02em; }
  .fi-value { font-size: 11px; }
}

/* Panneau client droit — labels + valeurs comme dans le PDF */
.facture-client-panel { text-align: right; min-width: 220px; }
.cf-row { margin-bottom: 7px; }
.cf-label { display: block; font-size: 9.5px; color: var(--warm-gray); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1px; }
.cf-value { display: block; font-size: 12px; color: var(--charcoal); font-weight: 500; }

.facture-type { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 1.5rem; color: var(--charcoal); }
.facture-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.facture-table th { text-align: left; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warm-gray); padding: 8px 0; border-bottom: 1px solid var(--border); }
.facture-table th.r, .facture-table td.r { text-align: right; }
.facture-table td { padding: 10px 0; border-bottom: 1px solid var(--cream); font-size: 13px; vertical-align: top; }
.facture-table td.icon-cell { width: 40px; }
.facture-table .item-icon { width: 34px; height: 34px; border-radius: 6px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.facture-table .livraison-row td { color: var(--warm-gray); font-style: italic; border-bottom: 1px solid var(--cream); }

/* Totaux */
.facture-totals { margin-left: auto; width: 280px; }
.facture-totals .row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; color: var(--warm-gray); }
.facture-totals .row.ht { color: var(--charcoal); font-weight: 500; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.facture-totals .row.total { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.facture-totals .row.remise { color: #2d6a2d; }
.facture-totals .row.remise-total { color: #2d6a2d; font-weight: 600; border-top: 1px dashed #c8e6c9; padding-top: 6px; }
.facture-totals .row.apres-remise { font-weight: 600; color: var(--charcoal); padding: 6px 0; }
.facture-totals .row.net { font-size: 17px; font-weight: 700; color: var(--rose); border-top: 2px solid var(--rose-light); padding-top: 10px; margin-top: 6px; }

.stamp { font-family: var(--serif); font-size: 60px; color: rgba(76,175,80,0.15); font-weight: 600; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); pointer-events: none; border: 4px solid rgba(76,175,80,0.15); padding: 6px 20px; border-radius: 6px; white-space: nowrap; }
.facture-note { font-size: 11px; color: var(--warm-gray); line-height: 1.6; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-style: italic; }
.print-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--charcoal); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; transition: background 0.2s; }
.print-btn:hover { background: var(--rose); }
@media print {
  nav, .page > div:first-child { display: none !important; }
  .page { padding: 0 !important; }
  .facture-paper { border: none; box-shadow: none; max-width: 100%; }
}

/* OPERATIONS */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.ops-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 1.25rem; }
.ops-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.ops-badge { font-size: 20px; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ops-card-title { font-weight: 500; font-size: 14px; color: var(--charcoal); }
.ops-card-sub { font-size: 11px; color: var(--warm-gray); }
.step-tracker { display: flex; align-items: center; gap: 4px; margin-bottom: 1rem; flex-wrap: wrap; }
.step { padding: 4px 10px; border-radius: 50px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.step.done { background: #e8f4e8; color: #2d6a2d; }
.step.active { background: var(--rose-light); color: var(--rose); }
.step.pending { background: var(--cream); color: var(--warm-gray); }
.step-arrow { color: var(--border); font-size: 10px; }
.progress-bar-wrap { background: var(--cream); border-radius: 50px; height: 4px; margin-bottom: 8px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 50px; background: var(--rose); transition: width 0.4s; }
.ops-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--cream); font-size: 12px; color: var(--charcoal); }
.ops-item:last-child { border-bottom: none; }
.ops-checkbox { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.15s; }
.ops-checkbox.checked { background: #4caf50; border-color: #4caf50; color: white; font-size: 10px; }
.ops-qty { font-size: 10px; color: var(--warm-gray); margin-left: auto; }
.validate-btn { width: 100%; padding: 10px; background: var(--rose); color: white; border: none; border-radius: var(--radius-sm); font-family: var(--sans); font-size: 12px; font-weight: 500; cursor: pointer; margin-top: 1rem; transition: background 0.2s; }
.validate-btn:hover { background: var(--rose-dark); }

/* DASHBOARD */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.kpi-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 1.25rem; }
.kpi-label { font-size: 11px; color: var(--warm-gray); margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--charcoal); }
.kpi-delta { font-size: 11px; margin-top: 4px; }
.kpi-delta.up { color: #2d6a2d; }
.kpi-delta.down { color: var(--rose); }
.chart-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 1.5rem; margin-bottom: 1.25rem; }
.chart-title { font-size: 13px; font-weight: 500; color: var(--charcoal); margin-bottom: 1.25rem; }
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar { border-radius: 4px 4px 0 0; width: 100%; background: var(--rose-light); transition: background 0.2s; cursor: pointer; }
.bar:hover { background: var(--rose); }
.bar.primary { background: var(--rose); }
.bar-label { font-size: 9px; color: var(--warm-gray); }
.donut-wrap { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; align-items: center; }
.donut-svg { width: 120px; height: 120px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--warm-gray); margin-bottom: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* FIDELITE */
.stars-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.card-tier { border-radius: 16px; padding: 1.75rem; color: white; position: relative; overflow: hidden; }
.card-tier::before { content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.card-tier.saphir { background: linear-gradient(135deg, #1565c0, #1e88e5); }
.card-tier.rubis { background: linear-gradient(135deg, #b71c1c, #ef5350); }
.card-tier.diamant { background: linear-gradient(135deg, #4a148c, #7b1fa2); }
.card-tier .tier-name { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-bottom: 4px; }
.card-tier .tier-range { font-size: 11px; opacity: 0.8; margin-bottom: 1rem; }
.card-tier .tier-bonus { font-size: 13px; opacity: 0.9; }
.stars-progress { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 1.5rem; }
.progress-stars { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.star-icon { color: #ffc107; font-size: 20px; }
.stars-count { font-family: var(--serif); font-size: 32px; font-weight: 500; color: var(--charcoal); }
.stars-label { font-size: 12px; color: var(--warm-gray); }
.prog-track { background: var(--cream); border-radius: 50px; height: 8px; margin: 12px 0; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 50px; background: linear-gradient(90deg, var(--rose), #e56b7e); transition: width 0.6s; }
.tier-markers { display: flex; justify-content: space-between; font-size: 10px; color: var(--warm-gray); }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 1.5rem; }
.gift-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; text-align: center; cursor: pointer; transition: all 0.2s; }
.gift-card:hover { border-color: var(--rose); box-shadow: 0 4px 12px rgba(192,67,90,0.1); }
.gift-icon { font-size: 28px; margin-bottom: 8px; }
.gift-name { font-size: 12px; font-weight: 500; color: var(--charcoal); margin-bottom: 4px; }
.gift-stars { font-size: 11px; color: var(--rose); font-weight: 500; }

/* ESPACE COMMERCIAL */
.comm-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }
.comm-tab-btn { background:var(--rose-light); border:2px solid transparent; border-radius:14px; padding:16px 10px; cursor:pointer; text-align:center; transition:all .2s; color:var(--warm-gray); font-family:var(--sans); font-weight:500; font-size:13px; }
.comm-tab-btn.active { background:var(--rose); color:white; border-color:var(--rose); box-shadow:0 4px 14px rgba(192,67,90,.3); }
.comm-tab-btn:hover:not(.active) { background:var(--rose-light); color:var(--rose); border-color:var(--rose); }
.visite-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.visite-row:last-child { border-bottom:none; }
.visite-motif { display:inline-block; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:500; }
.visite-motif.rens  { background:#e3f2fd; color:#1565c0; }
.visite-motif.devis { background:#e8f4e8; color:#2d6a2d; }
.visite-motif.facture { background:var(--rose-light); color:var(--rose-dark); }
.visite-motif.caution { background:#fff3e0; color:#8a5000; }
.visite-client-opt { padding:10px 14px; border-radius:8px; cursor:pointer; border:1px solid var(--border); margin-bottom:6px; transition:background .12s; }
.visite-client-opt:hover { background:var(--cream); }
.visite-mode-btn { flex:1; padding:9px 6px; border:none; border-radius:8px; font-family:var(--sans); font-size:12px; cursor:pointer; transition:all .15s; }
.caution-card { background:white; border-radius:var(--radius); border:1px solid var(--border); padding:1.25rem; margin-bottom:12px; }
.brouillard-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.brouillard-total { font-weight:600; color:var(--charcoal); font-size:14px; border-bottom:none; padding-top:14px; }

/* TOAST */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--charcoal); color: white; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 13px; z-index: 9999; transform: translateY(80px); opacity: 0; transition: all 0.3s; max-width: 300px; pointer-events: none; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #2d6a2d; }
.toast.error   { background: #c62828; }

/* MODAL — overlay fixe centré */
.modal-bg { display: none; }
.modal-bg.open { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9000; align-items: center; justify-content: center; padding: 16px; }
.modal { background: white; border-radius: 16px; width: 100%; max-width: 480px; padding: 2rem; position: relative; max-height: 85vh; overflow-y: auto; }
.modal-title { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 1.25rem; }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--warm-gray); }
.modal-close:hover { color: var(--charcoal); }

/* ALERT */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 1rem; }
.alert.info { background: #e3f2fd; color: #1565c0; }
.alert.warning { background: #fff3e0; color: #8a5000; }
.alert.danger { background: var(--rose-light); color: var(--rose-dark); }

/* RESPONSIVE */
.nav-burger { display:none; background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--charcoal); padding:4px 8px; }
@media (max-width: 900px) {
  .devis-layout, .two-cols, .stars-layout { grid-template-columns: 1fr; }
  .resp-stack { grid-template-columns: 1fr !important; }
  /* Barre de navigation → menu hamburger déroulant */
  .nav-inner { padding: 0 1rem; }
  .nav-burger { display:inline-flex; align-items:center; }
  .nav-tabs {
    display:none; position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--soft-white); border-bottom:1px solid var(--border);
    padding:8px; max-height:75vh; overflow-y:auto; z-index:150;
    box-shadow:0 10px 24px rgba(0,0,0,0.10);
  }
  .nav-tabs.open { display:flex; }
  .nav-tab { text-align:left; padding:12px 14px; font-size:14px; }
  .nav-user-name, .nav-user-role { display:none; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 32px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ── Authentification ─────────────────────────────────────────────────────── */
#loginOverlay {
  position:fixed;inset:0;background:var(--cream);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.login-card {
  background:white;border-radius:20px;padding:2.5rem 2rem;
  max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.13);
}
.login-logo-row {
  text-align:center;margin-bottom:1.75rem;
}
.login-logo-big {
  font-family:var(--serif);font-size:40px;font-weight:600;
  color:var(--rose);letter-spacing:0.05em;line-height:1;
}
.login-logo-big span{color:var(--charcoal);}
.login-logo-img { max-width:260px; width:78%; height:auto; display:block; margin:0 auto; }
.login-tagline {
  font-size:11px;color:var(--warm-gray);margin-top:4px;
}
.login-title {
  font-size:15px;font-weight:600;color:var(--charcoal);
  margin-bottom:1.25rem;text-align:center;
}
.login-error {
  background:#fff5f5;border:1px solid #fca5a5;border-radius:8px;
  padding:10px 14px;font-size:12px;color:#dc2626;
  margin-bottom:1rem;display:none;
}
.login-btn {
  width:100%;padding:13px;background:var(--rose);color:white;border:none;
  border-radius:10px;font-family:var(--sans);font-size:14px;
  font-weight:600;cursor:pointer;transition:background 0.2s;margin-top:4px;
}
.login-btn:hover{background:var(--rose-dark);}
.login-btn:disabled{opacity:0.6;cursor:not-allowed;}

/* ── Nav User ─────────────────────────────────────────────────────────────── */
.nav-user {
  display:flex;align-items:center;gap:8px;
}
.nav-user-avatar {
  width:30px;height:30px;background:var(--rose);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:11px;font-weight:700;flex-shrink:0;
}
.nav-user-name  { font-size:11px;font-weight:600;color:var(--charcoal);line-height:1.2; }
.nav-user-role  { font-size:9px;color:var(--warm-gray); }
.nav-logout-btn {
  padding:5px 10px;background:none;border:1px solid var(--border);
  border-radius:6px;font-family:var(--sans);font-size:11px;
  color:var(--warm-gray);cursor:pointer;white-space:nowrap;
}
.nav-logout-btn:hover{background:var(--cream);color:var(--rose);}

/* ── Page Utilisateurs ────────────────────────────────────────────────────── */
.users-table { width:100%;border-collapse:collapse;font-size:13px; }
.users-table th {
  background:var(--cream);padding:10px 12px;text-align:left;
  font-weight:600;color:var(--warm-gray);font-size:11px;
  text-transform:uppercase;letter-spacing:0.04em;
  border-bottom:1px solid var(--border);
}
.users-table td {
  padding:11px 12px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.users-table tr:last-child td{border-bottom:none;}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT « ADMIN » — activé UNIQUEMENT pour le Responsable de stock (body.rs-admin,
   posé par _rsAdminSync). Transforme la barre du haut en sidebar bordeaux et décale
   le contenu, sur toutes ses pages. Entièrement réversible : sans la classe rs-admin
   (tous les autres rôles), aucune de ces règles ne s'applique.
   ════════════════════════════════════════════════════════════════════════════════ */
body.rs-admin{ --rs-brand:#a8465a; --rs-bg:#eef0f2; background:var(--rs-bg); }

/* La nav devient une sidebar fixe à gauche */
body.rs-admin nav{
  position:fixed; top:0; left:0; width:250px; height:100vh;
  background:var(--rs-brand); border:none; z-index:200;
}
body.rs-admin .nav-inner{
  flex-direction:column; align-items:stretch; justify-content:flex-start;
  max-width:none; height:100%; padding:0; overflow-y:auto;
}
body.rs-admin .nav-burger{ display:none; }

/* Logo (wordmark) en tête de sidebar */
body.rs-admin .nav-inner::before{
  content:""; order:0; flex-shrink:0; width:100%; height:86px;
  background:url("../assets/logo-sidebar.png") center / auto 44px no-repeat;  /* logo blanc, affiché tel quel */
  border-bottom:1px solid rgba(255,255,255,.18);
}

/* Bloc utilisateur remonté sous le logo */
body.rs-admin .nav-actions{ order:1; flex-direction:column; align-items:stretch; gap:0; padding:0; }
body.rs-admin .cart-btn, body.rs-admin #navLoginBtn{ display:none; }
body.rs-admin .nav-user{
  flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:16px 14px; border-bottom:1px solid rgba(255,255,255,.18);
}
body.rs-admin .nav-user-avatar{ width:44px; height:44px; font-size:15px; background:rgba(255,255,255,.20); }
body.rs-admin .nav-user-name{ color:#fff; font-size:15px; }
body.rs-admin .nav-user-role{ color:rgba(255,255,255,.82); font-size:12px; }
body.rs-admin .nav-logout-btn{
  margin-top:6px; color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.4);
}
body.rs-admin .nav-logout-btn:hover{ background:rgba(255,255,255,.20); color:#fff; }

/* Onglets = items de menu verticaux */
body.rs-admin .nav-tabs{
  order:2; visibility:visible !important; flex-direction:column; gap:2px; padding:12px 10px;
}
body.rs-admin .nav-tab{
  text-align:left; width:100%; padding:11px 14px; font-size:14px; font-weight:500; color:#fff; border-radius:8px;
}
body.rs-admin .nav-tab:hover{ background:rgba(255,255,255,.12); color:#fff; }
body.rs-admin .nav-tab.active{ background:rgba(255,255,255,.18); color:#fff; font-weight:700; }
body.rs-admin #rsOpsNav .rs-badge{ margin-left:8px; background:#fff; color:var(--rs-brand); border-radius:20px; padding:1px 8px; font-size:11px; font-weight:800; vertical-align:middle; }
/* Toggle « + / − » et sous-onglets imbriqués dans la sidebar */
body.rs-admin #rsOpsNav .rs-toggle{ margin-left:auto; padding:0 7px; font-size:17px; font-weight:700; line-height:1; border-radius:5px; }
body.rs-admin #rsOpsNav .rs-toggle:hover{ background:rgba(255,255,255,.22); }
body.rs-admin #rsOpsNav .rs-children{ display:flex; flex-direction:column; gap:2px; margin:2px 0 4px 20px; padding-left:8px; border-left:1px solid rgba(255,255,255,.30); }
body.rs-admin #rsOpsNav .rs-child{ font-size:13px; font-weight:500; padding:8px 12px; opacity:.94; }

/* Bandeau-titre rouge (injecté par _rsAdminSync) + contenu décalé à droite de la sidebar */
.rs-banner{ display:none; }
body.rs-admin .rs-banner{
  display:block; margin:22px 22px 0 272px; background:var(--rs-brand); color:#fff;
  border-radius:8px; text-align:center; font-size:20px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; padding:18px 22px;
}
body.rs-admin .page{ max-width:none; margin:0; padding:22px 22px 22px 272px; }
/* Dashboard : en mode admin, l'entête et les onglets in-page sont fournis par la sidebar + le bandeau.
   !important pour primer sur le style inline (la barre d'onglets a un display:flex inline). */
body.rs-admin .mgr-dash-chrome{ display:none !important; }
body.rs-admin .mgr-dash-wrap{ max-width:none; padding:0; }

/* Tablette / mobile (≤900px) : la sidebar bordeaux devient une barre compacte en haut + menu déroulant « ☰ ».
   Le hamburger standard (masqué en admin sur desktop) est réactivé ; toggleMobileNav() ouvre/ferme .nav-tabs,
   et showPage() retire .open après sélection d'un onglet → le menu se referme tout seul. */
@media (max-width:900px){
  body.rs-admin nav{ position:sticky; top:0; width:auto; height:auto; z-index:200; }
  body.rs-admin .nav-inner{ flex-direction:row; align-items:center; gap:10px; max-width:none; height:56px; padding:0 12px; overflow:visible; }
  body.rs-admin .nav-inner::before{ order:1; margin-right:auto; width:auto; flex:0 0 auto; height:30px;
    border-bottom:none; background:url("../assets/logo-sidebar.png") left center / auto 28px no-repeat; }
  /* Bloc utilisateur compact (avatar + déconnexion) à droite ; nom/rôle masqués */
  body.rs-admin .nav-actions{ order:2; flex-direction:row; align-items:center; gap:8px; padding:0; border-bottom:none; }
  body.rs-admin .nav-user{ flex-direction:row; align-items:center; gap:8px; padding:0; border-bottom:none; }
  body.rs-admin .nav-user-name, body.rs-admin .nav-user-role{ display:none; }
  body.rs-admin .nav-logout-btn{ margin-top:0; }
  /* Hamburger ☰ blanc sur la barre bordeaux (réaffiché uniquement sur tablette/mobile) */
  body.rs-admin .nav-burger{ display:inline-flex; align-items:center; order:0; color:#fff; font-size:26px; padding:2px 6px; }
  /* Menu : masqué par défaut, déroulé en panneau bordeaux plein largeur sous la barre */
  body.rs-admin .nav-tabs{
    display:none; position:absolute; top:56px; left:0; right:0;
    background:var(--rs-brand); border-top:1px solid rgba(255,255,255,.2);
    padding:8px 10px; max-height:82vh; overflow-y:auto; z-index:200; box-shadow:0 14px 30px rgba(0,0,0,.28);
  }
  body.rs-admin .nav-tabs.open{ display:flex; }
  body.rs-admin .rs-banner{ margin:14px; }
  body.rs-admin .page{ padding:14px; margin:0; }
}
.users-table tr:hover td{background:var(--cream);}
.role-badge {
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:10px;font-weight:600;background:var(--rose-light);
  color:var(--rose-dark);white-space:nowrap;
}
.user-actif-dot {
  width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;
}