/* ═══════════════════════════════════════════
   EKIN DISTRIBUTION — style.css
   Police : Manrope (400 / 500 / 600 / 700 / 800)
   ═══════════════════════════════════════════ */


/* ────────────────────────────────────────────
   VARIABLES
──────────────────────────────────────────── */
:root {
  /* Layout */
  --sidebar-w:       250px;
  --header-h:        60px;
  --bottom-h:        64px;
  /* Hauteur réelle de la barre du bas, zone de sécurité iOS incluse (encoche/
     barre d'accueil) — à utiliser pour positionner tout ce qui doit rester
     au-dessus de la barre, sinon ça déborde sur les appareils avec zone de
     sécurité (iPhone Face ID notamment). */
  --bottom-h-total:  calc(64px + env(safe-area-inset-bottom));

  /* Couleurs */
  --bg:              #F1F5F9;
  --surface:         #FFFFFF;
  --surface-2:       #F8FAFC;

  --nav-bg:          #0F172A;
  --nav-text:        #94A3B8;
  --nav-hover:       #CBD5E1;
  --nav-active-bg:   #2563EB;
  --nav-active-text: #FFFFFF;

  --primary:         #2563EB;
  --primary-dark:    #1D4ED8;
  --primary-pale:    #EFF6FF;

  --sky:             #0369A1;

  --t1:              #0F172A;
  --t2:              #475569;
  --t3:              #6B7280;

  --border:          #E2E8F0;
  --border-2:        #CBD5E1;

  --green:           #10B981;
  --green-bg:        #D1FAE5;
  --green-t:         #064E3B;

  --red:             #EF4444;
  --red-bg:          #FEE2E2;
  --red-t:           #991B1B;

  --orange:          #F59E0B;
  --orange-bg:       #FEF3C7;
  --orange-t:        #92400E;

  --blue-bg:         #DBEAFE;
  --blue-t:          #1E40AF;

  /* Typographie */
  --font:            'Montserrat', system-ui, sans-serif;
  --font-logo:       'Dancing Script', cursive;

  /* Ombres */
  --s1: 0 1px 3px rgba(15,23,42,.06);
  --s2: 0 4px 12px rgba(15,23,42,.08);
  --s3: 0 8px 24px rgba(15,23,42,.10);
  --s4: 0 16px 48px rgba(15,23,42,.14);

  /* Rayons */
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;
  --rf:  9999px;

  /* Transitions */
  --tf: 150ms ease;
  --tn: 240ms ease;
  --ts: 360ms cubic-bezier(.4,0,.2,1);
}

/* ────────────────────────────────────────────
   THEME SOMBRE
──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:              #0D0D0D;
  --surface:         #1C1C1C;
  --surface-2:       #161616;

  --nav-bg:          #111111;
  --nav-text:        #888888;
  --nav-hover:       #CCCCCC;
  --nav-active-bg:   #E63946;
  --nav-active-text: #FFFFFF;

  --primary:         #E63946;
  --primary-dark:    #C62B38;
  --primary-pale:    rgba(230,57,70,.12);

  --sky:             #F4D03F;

  --t1:              #F0F0F0;
  --t2:              #AAAAAA;
  --t3:              #666666;

  --border:          #2A2A2A;
  --border-2:        #444444;

  --green:           #28A745;
  --green-bg:        rgba(40,167,69,.15);
  --green-t:         #5cb85c;

  --red:             #E63946;
  --red-bg:          rgba(230,57,70,.15);
  --red-t:           #ff8888;

  --orange:          #F4D03F;
  --orange-bg:       rgba(244,208,63,.15);
  --orange-t:        #F4D03F;

  --blue-bg:         rgba(230,57,70,.12);
  --blue-t:          #ff9099;

  --s1: 0 1px 3px rgba(0,0,0,.4);
  --s2: 0 4px 12px rgba(0,0,0,.5);
  --s3: 0 8px 24px rgba(0,0,0,.6);
  --s4: 0 16px 48px rgba(0,0,0,.7);
}

/* Sélection de texte en mode sombre */
[data-theme="dark"] ::selection { background:rgba(230,57,70,.25); color:#fff; }

/* Transition douce lors du changement de thème */
body,
.sidebar, .mobile-header, .bottom-nav,
.produit-carte, .stat-carte, .profil-carte,
.modal-conteneur, .panier-article {
  transition: background-color var(--tn), color var(--tn), border-color var(--tn);
}


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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--primary-pale); color: var(--primary); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

img { display:block; max-width:100%; }
button { font-family:var(--font); cursor:pointer; border:none; background:none; }
input,textarea,select { font-family:var(--font); font-size:inherit; }
ul,ol { list-style:none; }

/* Classe utilitaire — texte lisible par lecteurs d'écran, invisible visuellement */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip link — accessible au clavier, invisible au reste */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 4px 0;
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform var(--tf);
}
.skip-link:focus-visible { transform: translateY(0); }

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(37,99,235,.2);
}
.btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}


/* ────────────────────────────────────────────
   LAYOUT
──────────────────────────────────────────── */
#app { min-height:100vh; background: var(--bg); }
#app.fond-sombre-chargement { background: #0a0a0a; }

/* Tout contenu de page reçoit la marge de la sidebar */
#app > main,
#app > .page-auth,
#app > .page-catalogue,
#app > .page-produit,
#app > .page-panier,
#app > .page-commandes,
#app > .page-commande-detail,
#app > .page-valider-commande,
#app > .page-factures,
#app > .page-favoris,
#app > .container {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 36px 40px;
  animation: fadeUp .25s ease;
}

/* La page auth est plein écran, pas de marge */
#app > .page-auth {
  margin-left: 0 !important;
  padding: 0 !important;
}


/* ────────────────────────────────────────────
   SIDEBAR (desktop)
──────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
}

/* Logo */
.sidebar-entete {
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}
.logo-ekin {
  font-family: var(--font-logo);
  font-size: 1.7rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: .01em;
}
.logo-dist {
  font-family: var(--font);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nav-text);
}

/* Liens */
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display:none; }

.sidebar-lien {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r8);
  color: var(--nav-text);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--tf);
  position: relative;
  margin-bottom: 2px;
}
.sidebar-lien:hover  { background:rgba(255,255,255,.13); color:#fff; }
.sidebar-lien.actif  {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  box-shadow: 0 4px 14px rgba(37,99,235,.4);
}
.sidebar-lien.actif:hover { background:var(--primary-dark); color:#fff; }

.nav-icone { width:18px; height:18px; flex-shrink:0; display:flex; }
.nav-icone svg { width:18px; height:18px; }
.nav-label  { flex:1; white-space:nowrap; }

/* Badge */
.nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--rf);
  background: var(--red);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nav-badge:not(:empty) { display:flex; }
.sidebar-lien.actif .nav-badge { background:rgba(255,255,255,.25); }

/* Pied */
.sidebar-pied {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.btn-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r8);
  color: var(--nav-text);
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--tf);
}
.btn-logout svg { width:18px; height:18px; }
.btn-logout:hover { background:rgba(239,68,68,.15); color:#FCA5A5; }


/* ────────────────────────────────────────────
   MOBILE HEADER
──────────────────────────────────────────── */
.mobile-header {
  display: none;
  position: fixed;
  top:0; left:0; right:0;
  height: var(--header-h);
  background: var(--nav-bg);
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
}

.mobile-header .logo-ekin { font-size:1.3rem; font-weight:800; }

.mobile-panier-btn {
  position: relative;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r8);
  color:var(--nav-text);
  transition: color var(--tf);
}
.mobile-panier-btn:hover { color:#fff; }
.mobile-panier-btn svg { width:22px; height:22px; }
.mobile-panier-btn .nav-badge {
  position:absolute; top:2px; right:2px;
  min-width:15px; height:15px; font-size:.58rem; padding:0 3px;
}


/* ────────────────────────────────────────────
   BOTTOM NAV (mobile)
──────────────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom:0; left:0; right:0;
  height: var(--bottom-h-total);
  background: var(--nav-bg);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom);
  align-items: center;
  justify-content: space-around;
  z-index: 200;
}

.bottom-lien {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--r8);
  color: var(--nav-text);
  font-size: .64rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--tf);
  cursor: pointer;
  border: none;
  min-height: 48px;
  font-family: var(--font);
}
.bottom-lien:hover,
.bottom-lien.actif { color: #FFFFFF; }

.bottom-icone {
  position: relative;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
}
.bottom-icone svg { width:22px; height:22px; }
.bottom-icone .nav-badge {
  position:absolute; top:-5px; right:-7px;
  min-width:15px; height:15px; font-size:.58rem; padding:0 3px;
}
.bottom-label { line-height:1; }


/* ────────────────────────────────────────────
   MENU PLUS (mobile overlay)
──────────────────────────────────────────── */
.menu-plus {
  position: fixed; inset:0; z-index:400;
  pointer-events:none; visibility:hidden;
}
.menu-plus.ouvert { pointer-events:all; visibility:visible; }

.menu-plus-fond {
  position:absolute; inset:0;
  background:transparent;
  transition: background var(--tn);
}
.menu-plus.ouvert .menu-plus-fond {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.menu-plus-panneau {
  position:absolute; bottom:0; left:0; right:0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--ts);
  box-shadow: var(--s4);
}
.menu-plus.ouvert .menu-plus-panneau { transform:translateY(0); }

.menu-plus-entete {
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.menu-plus-titre { font-size:1rem; font-weight:700; }
.menu-plus-fermer {
  width:32px; height:32px; border-radius:var(--rf);
  background:var(--bg); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--t2); transition:background var(--tf);
}
.menu-plus-fermer:hover { background:var(--border); }
.menu-plus-fermer svg { width:16px; height:16px; }

.menu-plus-nav { padding: 12px 16px; overflow-y: auto; flex: 1; }

.menu-plus-lien {
  display:flex; align-items:center; gap:12px;
  padding: 14px 12px; border-radius:var(--r12);
  color:var(--t1); font-size:.95rem; font-weight:600;
  text-decoration:none; transition:background var(--tf); margin-bottom:2px;
}
.menu-plus-lien:hover { background:var(--bg); color:var(--t1); }
.menu-plus-lien.actif { color:var(--primary); background:var(--primary-pale); }
.menu-plus-lien svg { width:22px; height:22px; }

.menu-plus-pied {
  padding: 12px 16px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  flex-shrink: 0;
}
.btn-logout-mobile {
  display:flex; align-items:center; gap:12px;
  width:100%; padding: 14px 12px; border-radius:var(--r12);
  color:var(--red); font-size:.95rem; font-weight:600;
  font-family:var(--font); background:none; border:none; cursor:pointer;
  transition:background var(--tf);
}
.btn-logout-mobile:hover { background:var(--red-bg); }
.btn-logout-mobile svg { width:22px; height:22px; }


/* ────────────────────────────────────────────
   BOUTONS
──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:.65rem 1.2rem; border-radius:var(--r8);
  font-family:var(--font); font-size:.875rem; font-weight:700; line-height:1;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:all var(--tf); white-space:nowrap; user-select:none;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

.btn-primaire {
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.btn-primaire:hover {
  background:var(--primary-dark); border-color:var(--primary-dark);
  color:#fff; box-shadow:0 4px 16px rgba(37,99,235,.35); transform:translateY(-1px);
}

.btn-outline {
  background:transparent; color:var(--primary); border-color:var(--border-2);
}
.btn-outline:hover { background:var(--primary-pale); border-color:var(--primary); color:var(--primary); }

.btn-danger  { background:var(--red);   color:#fff; border-color:var(--red); }
.btn-danger:hover  { background:#DC2626; border-color:#DC2626; color:#fff; }

.btn-success { background:var(--green); color:#fff; border-color:var(--green); }

.btn-ghost   { background:transparent; color:var(--t2); border-color:transparent; }
.btn-ghost:hover { background:var(--bg); color:var(--t1); }

.btn-large  { padding:.8rem 1.6rem; font-size:.95rem; }
.btn-petit  { padding:.38rem .85rem; font-size:.8rem; }
.btn-block  { width:100%; }
.btn-petit  { padding:.38rem .85rem; font-size:.8rem; }


/* ────────────────────────────────────────────
   FORMULAIRES
──────────────────────────────────────────── */
.champ-groupe, .form-groupe, .champ { margin-bottom:20px; }

.champ-mdp-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.champ-mdp-wrapper input {
    flex: 1;
    padding-right: 44px;
}
.btn-toggle-mdp {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 12px;
    color: var(--t3);
    display: flex;
    align-items: center;
    height: 100%;
}
.btn-toggle-mdp:hover { color: var(--t1); }
.btn-toggle-mdp svg { width: 18px; height: 18px; }

label {
  display:block; margin-bottom:7px;
  font-size:.8125rem; font-weight:700; color:var(--t2);
  letter-spacing:.01em;
}

input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="tel"],input[type="search"],
select, textarea {
  width:100%; padding:.65rem 1rem;
  border:2px solid var(--border); border-radius:var(--r8);
  background:var(--surface); color:var(--t1);
  font-family:var(--font); font-size:.9375rem; font-weight:500;
  transition:border-color var(--tf),box-shadow var(--tf); outline:none; appearance:none;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
input::placeholder,textarea::placeholder { color:var(--t3); }
textarea { resize:vertical; min-height:100px; }

select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  background-size:16px; padding-right:2.5rem; cursor:pointer;
}

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-actions { display:flex; gap:12px; justify-content:flex-end; padding-top:8px; flex-wrap:wrap; }

.small { font-size:.78rem; color:var(--t3); margin-top:5px; }


/* ────────────────────────────────────────────
   ALERTES
──────────────────────────────────────────── */
.alerte {
  padding:12px 16px; border-radius:var(--r8); font-size:.875rem; font-weight:600;
  animation:slideDown .22s ease; border-left:4px solid;
}
.alerte-erreur  { background:var(--red-bg);    color:var(--red-t);    border-color:var(--red); }
.alerte-succes  { background:var(--green-bg);  color:var(--green-t);  border-color:var(--green); }
.alerte-info    { background:var(--blue-bg);   color:var(--blue-t);   border-color:var(--primary); }
.alerte-warning { background:var(--orange-bg); color:var(--orange-t); border-color:var(--orange); }


/* ────────────────────────────────────────────
   BADGES
──────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:.2rem .65rem; border-radius:var(--rf);
  font-size:.72rem; font-weight:700; white-space:nowrap;
}
.badge-success,.badge-payee,.badge-livree     { background:var(--green-bg);  color:var(--green-t); }
.badge-danger,.badge-impayee                  { background:var(--red-bg);    color:var(--red-t); }
.badge-warning,.badge-partiel,.badge-en_attente { background:var(--orange-bg); color:var(--orange-t); }
.badge-info,.badge-validee,.badge-expediee    { background:var(--blue-bg);   color:var(--blue-t); }
.badge-secondary,.badge-annulee               { background:var(--bg); color:var(--t3); border:1px solid var(--border); }
.badge-default,.badge-defaut                  { background:var(--primary-pale); color:var(--primary); }


/* ────────────────────────────────────────────
   MODALES
──────────────────────────────────────────── */
.modal {
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  animation:fadeIn .2s ease;
}
.modal-contenu {
  background:var(--surface); border-radius:var(--r16);
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--s4); animation:scaleIn .2s ease;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.modal-header h2 { font-size:1rem; }
.modal-fermer {
  width:30px; height:30px; border-radius:var(--rf);
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  color:var(--t2); cursor:pointer; border:none; font-size:1.1rem; transition:background var(--tf);
}
.modal-fermer:hover { background:var(--border); }
.modal-body { padding:24px; }
#modal-etablissement .form-actions { justify-content:stretch; }
#modal-etablissement .form-actions .btn { flex:1; width:auto; }

#form-erreur {
  font-size:.85rem; color:var(--red-t); background:var(--red-bg);
  border-radius:var(--r8); padding:10px 14px; margin-bottom:16px;
  display:none;
}


/* ────────────────────────────────────────────
   PAGINATION
──────────────────────────────────────────── */
#catalogue-pagination,.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:6px; padding:32px 0; flex-wrap:wrap;
}
.pagination-liste { display:flex; align-items:center; gap:4px; }

.pagination-btn {
  min-width:34px; height:34px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r8); font-size:.83rem; font-weight:700;
  color:var(--t2); background:var(--surface); border:1px solid var(--border);
  cursor:pointer; transition:all var(--tf);
}
.pagination-btn:hover { background:var(--primary-pale); color:var(--primary); border-color:var(--primary); }
.pagination-actif { background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }
.pagination-info { font-size:.8rem; color:var(--t3); padding:0 6px; }


/* ────────────────────────────────────────────
   ÉTAT CHARGEMENT / VIDE
──────────────────────────────────────────── */
.chargement {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:80px 40px; gap:16px; color:var(--t3);
}
.spinner {
  width:32px; height:32px; border:3px solid var(--border);
  border-top-color:var(--primary); border-radius:50%;
  animation:spin .7s linear infinite;
}

.vide,.panier-vide,.commandes-vide,.factures-vide,.favoris-vide {
  display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:80px 40px; text-align:center;
  color:var(--t3); font-size:.9rem;
}
.vide svg,.favoris-vide svg { opacity:.2; }


/* ────────────────────────────────────────────
   NOTIFICATIONS TOAST
──────────────────────────────────────────── */
.notification {
  position:fixed; top:24px; right:24px; z-index:999;
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:var(--r12);
  font-size:.875rem; font-weight:700;
  box-shadow:var(--s4); animation:toastIn .3s ease; max-width:340px;
}
.notification-succes { background:var(--green); color:#fff; }
.notification-erreur { background:var(--red);   color:#fff; }
.notification-info   { background:var(--primary); color:#fff; }


/* ────────────────────────────────────────────
   ANIMATIONS
──────────────────────────────────────────── */
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes fadeUp   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
@keyframes slideDown{ from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes popIn    { 0%{transform:scale(0);} 70%{transform:scale(1.1);} 100%{transform:scale(1);} }


/* ════════════════════════════════════════════
   VUES
   ════════════════════════════════════════════ */


/* ────────────────────────────────────────────
   VUE 1 — CONNEXION
──────────────────────────────────────────── */
.page-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--bg-auth-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  padding-bottom: 3rem;
}


/* Panneau gauche — masqué sur la page connexion, visible sur inscription */
.auth-gauche { display: none; }

/* Logo flottant en haut à gauche — fixe comme le fond image */
.auth-logo-flottant {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 2;
}
.auth-logo-flottant img {
  height: 150px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Panneau droit — card centré */
.auth-droite {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--r16);
  padding: 48px 44px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}

.auth-form-conteneur {
  width: 100%;
  max-width: 100%;
  animation: fadeUp .3s ease;
}

.auth-form-conteneur h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.auth-sous-titre {
  color: var(--t3);
  font-size: .9rem;
  margin-bottom: 32px;
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: .84rem;
  color: var(--t3);
}
.auth-footer a { font-weight: 700; }

#erreur-connexion, #erreur-inscription { margin-bottom: 20px; }

/* Bouton connexion — pleine largeur */
#form-connexion .btn-primaire,
#form-inscription .btn-primaire { margin-top: 8px; }


/* ────────────────────────────────────────────
   VUE 2 — INSCRIPTION
──────────────────────────────────────────── */
.auth-droite.large {
  max-width: 580px;
  max-height: 92vh;
  overflow-y: auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

.auth-form-conteneur.large {
  max-width: 100%;
}

.auth-form-conteneur.large h1 { font-size:1.4rem; margin-bottom:6px; }
.auth-form-conteneur.large .auth-sous-titre { margin-bottom:24px; }

/* Séparateur de section dans le form inscription */
.form-section-titre {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--t3);
  margin: 24px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.form-contact-note {
  font-size: .8rem;
  color: var(--t3);
  margin: 0 0 10px;
}


/* ────────────────────────────────────────────
   VUE 3 — ACCUEIL
──────────────────────────────────────────── */
.page-accueil-entete {
  margin-bottom: 36px;
}
.page-accueil-entete h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.page-accueil-entete .entreprise-tag {
  display: inline-block;
  background: var(--primary-pale);
  color: var(--primary);
  border-radius: var(--rf);
  padding: 4px 14px;
  font-size: .8rem;
  font-weight: 700;
}

.accueil-raccourcis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.raccourci-carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  padding: 28px 24px;
  text-decoration: none;
  color: var(--t1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--tn);
  box-shadow: var(--s1);
}
.raccourci-carte:hover {
  box-shadow: var(--s3);
  transform: translateY(-3px);
  border-color: var(--primary);
  color: var(--t1);
}
.raccourci-icone {
  width: 44px; height: 44px;
  border-radius: var(--r12);
  background: var(--primary-pale);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.raccourci-icone svg { width:22px; height:22px; }
.raccourci-carte h3 { font-size:1rem; font-weight:700; }
.raccourci-carte p  { font-size:.82rem; color:var(--t3); }
.raccourci-fleche {
  margin-top: auto;
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary);
}


/* ────────────────────────────────────────────
   VUE 4 — CATALOGUE
──────────────────────────────────────────── */
.page-catalogue {}

.catalogue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.catalogue-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

/* Filtres groupes de marque */
.catalogue-filtres-groupes {
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filtres-pills {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  flex-wrap: nowrap;
}
.pill-groupe {
  white-space: nowrap;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--couleur-bordure, #e2e8f0);
  background: transparent;
  color: var(--couleur-texte, #1a202c);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pill-groupe:hover {
  border-color: var(--couleur-primaire, #3b82f6);
  color: var(--couleur-primaire, #3b82f6);
}
.pill-groupe.actif {
  background: var(--couleur-primaire, #3b82f6);
  border-color: var(--couleur-primaire, #3b82f6);
  color: #fff;
}
[data-theme="dark"] .pill-groupe {
  border-color: var(--border-2);
  color: var(--t2);
}
[data-theme="dark"] .pill-groupe:hover {
  border-color: var(--primary);
  color: var(--primary);
}
[data-theme="dark"] .pill-groupe.actif {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Barre de recherche */
.catalogue-recherche {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.catalogue-recherche .ico-search {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--t3);
  pointer-events: none;
}
#recherche-produit { padding-left: 42px; border-radius: var(--rf); }

/* Grille */
.produits-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 16px;
}

/* Carte produit */
.produit-carte {
  background: var(--surface);
  border-radius: var(--r16);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--s1);
  transition: all var(--tn);
  cursor: pointer;
  position: relative;
}
.produit-carte:hover { box-shadow:var(--s3); transform:translateY(-3px); }

/* Image */
.produit-image {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg);
  overflow: hidden;
}
.produit-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--ts); }
.produit-carte:hover .produit-image img,
.favori-carte:hover .produit-image img { transform:scale(1.05); }

.produit-image-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #F1F5F9, #EFF6FF);
  font-size: 2.5rem; color: #CBD5E1;
}

.produit-badge-rupture {
  position:absolute; top:10px; left:10px;
  background:rgba(239,68,68,.9); backdrop-filter:blur(4px);
  color:#fff; font-size:.65rem; font-weight:700;
  padding:3px 10px; border-radius:var(--rf); letter-spacing:.04em;
}

.btn-favori {
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:var(--rf);
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t3); box-shadow:var(--s1);
  transition:all var(--tf);
}
.btn-favori:hover { background:#fff; color:var(--red); transform:scale(1.1); }
.btn-favori.actif { color:var(--red); }
.btn-favori svg { width:15px; height:15px; }

/* Contenu carte */
.produit-infos { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }

.produit-type {
  font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sky);
}
.produit-nom {
  font-size:.9rem; font-weight:700; color:var(--t1); line-height:1.3;
}
.produit-conditionnement { font-size:.78rem; color:var(--t3); }

.produit-prix {
  display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:8px;
  border-top:1px solid var(--border);
}
.prix-ttc {
  font-size:1.1rem; font-weight:800; color:var(--t1);
}
.prix-ht { font-size:.74rem; color:var(--t3); }

/* Quantité */
.produit-pied {
  padding:0 16px 16px;
  display:flex; align-items:center; justify-content:center;
}
.produit-pied .btn { width:100%; font-size:.8rem; }

.selecteur-quantite {
  display:flex; align-items:center;
  border:2px solid var(--border); border-radius:var(--r8);
  background:var(--bg); overflow:hidden; width:100%;
}
.btn-moins,.btn-plus {
  flex:1; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--t2);
  font-size:1.1rem; font-weight:700; cursor:pointer; transition:all var(--tf);
}
.btn-moins:hover,.btn-plus:hover { background:var(--primary-pale); color:var(--primary); }
.quantite-valeur {
  flex:1; text-align:center;
  font-weight:800; font-size:.95rem; color:var(--t1);
  border:none; background:none; pointer-events:none;
}

.produit-indisponible {
  font-size:.78rem; color:var(--t3); font-weight:600;
}

/* ────────────────────────────────────────────
   CATALOGUE — GRILLE FAMILLES
──────────────────────────────────────────── */
.familles-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 8px 0 32px;
}

.famille-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 36px 24px 28px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r16);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--t1);
}
.famille-carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--s3);
  border-color: var(--primary);
}
.famille-carte-icone {
  width: 56px; height: 56px;
  background: var(--primary-pale);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  transition: background .18s;
}
.famille-carte-icone svg { width: 28px; height: 28px; }
.famille-carte:hover .famille-carte-icone {
  background: var(--primary);
  color: #fff;
}
.famille-carte-nom { font-size: .95rem; font-weight: 700; color: var(--t1); }

[data-theme="dark"] .famille-carte { border-color: var(--border-2); }
[data-theme="dark"] .famille-carte:hover { border-color: var(--primary); }

/* ────────────────────────────────────────────
   CATALOGUE — LAYOUT FAMILLE (filtres + produits)
──────────────────────────────────────────── */
.catalogue-famille-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}

.catalogue-filtres {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r16);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 20px;
}

.btn-retour-familles {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  font-size: .85rem;
  font-weight: 600;
  padding: 0;
  text-align: left;
  transition: opacity .15s;
}
.btn-retour-familles:hover { opacity: .7; }

.filtre-section { display: flex; flex-direction: column; gap: 10px; }

.filtre-titre {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t3);
  margin: 0;
}

.filtres-pills-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filtres-pills-vertical .pill-categorie {
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.filtres-pills-vertical .pill-categorie:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.filtres-pills-vertical .pill-categorie.actif {
  background: var(--primary-pale);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

.filtres-tags { display: flex; flex-direction: column; gap: 8px; }

.tag-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--t2);
  transition: color .12s;
}
.tag-checkbox:hover { color: var(--t1); }
.tag-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.tag-checkbox input:checked + span { color: var(--t1); font-weight: 600; }

/* ────────────────────────────────────────────
   CATALOGUE — BADGES TAGS SUR LA CARTE PRODUIT
──────────────────────────────────────────── */
.produit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.produit-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
[data-theme="dark"] .produit-tag {
  background: rgba(230,57,70,.15);
  color: var(--primary);
}

/* Responsive catalogue famille */
@media (max-width: 768px) {
  .catalogue-famille-layout {
    grid-template-columns: 1fr;
  }
  .catalogue-filtres {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
  }
  .filtre-titre { margin-bottom: 2px; }
  .filtres-pills-vertical {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .filtres-tags { flex-direction: row; flex-wrap: wrap; }
  .familles-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .famille-carte { padding: 24px 16px 20px; gap: 12px; }
  .famille-carte-icone { width: 44px; height: 44px; }
}

@media (max-width: 420px) {
  .familles-grille { grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────────
   VUE 5 — PRODUIT DÉTAIL
──────────────────────────────────────────── */
.page-produit {}

.btn-retour {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--t3); font-size:.83rem; font-weight:700;
  text-decoration:none; margin-bottom:28px; transition:color var(--tf);
}
.btn-retour:hover { color:var(--primary); }
.btn-retour svg { width:16px; height:16px; }

.produit-detail {
  background:var(--surface); border-radius:var(--r16);
  border:1px solid var(--border); box-shadow:var(--s2);
  display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden;
}

.produit-detail-image {
  position:relative; aspect-ratio:1;
  background:var(--bg);
}
.produit-detail-image img {
  width:100%; height:100%; object-fit:cover;
}
.produit-image-placeholder-large {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#F1F5F9,#EFF6FF);
  font-size:5rem; color:#CBD5E1;
}

/* Bouton favori dans la page détail (avec texte) */
#btn-favori-detail, .btn-favori-detail {
  display:inline-flex; align-items:center; gap:8px;
  padding:.55rem 1.1rem; border-radius:var(--r8);
  background:var(--bg); border:2px solid var(--border);
  font-family:var(--font); font-size:.83rem; font-weight:700;
  color:var(--t2); cursor:pointer; transition:all var(--tf);
  align-self:flex-start; margin-top:4px;
}
#btn-favori-detail:hover, .btn-favori-detail:hover {
  border-color:var(--red); color:var(--red);
}
#btn-favori-detail.actif, .btn-favori-detail.actif {
  border-color:var(--red); color:var(--red); background:var(--red-bg);
}
#btn-favori-detail svg, .btn-favori-detail svg { width:16px; height:16px; }

.produit-detail-infos {
  padding:36px 32px;
  display:flex; flex-direction:column; gap:16px;
}

.produit-detail-type {
  font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sky);
}
.produit-detail-nom {
  font-size:1.7rem; font-weight:800; letter-spacing:-.02em; line-height:1.2;
}
.produit-detail-conditionnement { font-size:.875rem; color:var(--t3); }
.produit-detail-description {
  font-size:.9rem; color:var(--t2); line-height:1.7;
  padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}

.produit-detail-prix {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.detail-prix-ttc { font-size:2rem; font-weight:800; letter-spacing:-.02em; }
.detail-prix-ht  { font-size:.83rem; color:var(--t3); }
.detail-tva {
  font-size:.72rem; background:var(--bg); color:var(--t3);
  padding:2px 8px; border-radius:var(--rf);
}

.produit-detail-stock { font-size:.875rem; font-weight:700; }
.stock-disponible { color:var(--green); }
.stock-rupture    { color:var(--red); }

.produit-detail-actions {
  display:flex; align-items:center; gap:16px;
  padding-top:8px; flex-wrap:wrap;
}

.quantite-selecteur {
  display:flex; align-items:center; border:2px solid var(--border);
  border-radius:var(--r8); background:var(--bg); overflow:hidden;
}
.quantite-btn, .quantite-moins, .quantite-plus {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--t2);
  font-size:1.1rem; font-weight:700; cursor:pointer; transition:all var(--tf);
}
.quantite-btn:hover,.quantite-moins:hover,.quantite-plus:hover {
  background:var(--primary-pale); color:var(--primary);
}
#quantite, .quantite-input {
  width:50px; text-align:center; font-weight:700;
  border:none !important; background:none !important;
  box-shadow:none !important; padding:0 !important;
  -moz-appearance:textfield;
}
#quantite::-webkit-inner-spin-button,
#quantite::-webkit-outer-spin-button,
.quantite-input::-webkit-inner-spin-button,
.quantite-input::-webkit-outer-spin-button {
  -webkit-appearance:none; margin:0;
}

#btn-ajouter-panier { flex:1; max-width:260px; padding:.75rem; font-size:.9rem; }


/* ────────────────────────────────────────────
   VUE 6 — PANIER
──────────────────────────────────────────── */
.page-panier {}
.panier-top { margin-bottom:28px; }
.panier-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

.panier-layout {
  display:grid; grid-template-columns:1fr 320px;
  gap:28px; align-items:start;
}

.panier-articles { display:flex; flex-direction:column; gap:12px; }

.panier-alerte-stock { margin-bottom:12px; }

.panier-article-stock-insuffisant {
  border-color: var(--red) !important;
}

.article-stock-alerte {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--red-t, #ff8888);
  font-weight: 500;
}

#btn-valider-panier:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panier-article {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:16px;
  display:grid; grid-template-columns:64px 1fr auto;
  gap:16px; align-items:center; box-shadow:var(--s1);
  animation:fadeUp .2s ease;
}

.article-image {
  width:64px; height:64px; border-radius:var(--r8);
  overflow:hidden; background:var(--bg); flex-shrink:0;
}
.article-image img { width:100%; height:100%; object-fit:cover; }

.article-infos {}
.article-nom { font-size:.9rem; font-weight:700; margin-bottom:4px; }
.article-prix { font-size:.78rem; color:var(--t3); }

.article-droite {
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.article-total { font-size:.95rem; font-weight:800; }

.article-quantite-ctrl {
  display:flex; align-items:center;
  border:2px solid var(--border); border-radius:var(--r8);
  background:var(--bg); overflow:hidden;
}
.quantite-input {
  width:40px; text-align:center; font-weight:700; font-size:.875rem;
  border:none !important; background:none !important;
  box-shadow:none !important; padding:0 !important;
}

.btn-supprimer-article {
  width:28px; height:28px; border-radius:var(--r8);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); cursor:pointer; transition:all var(--tf); font-size:1rem;
}
.btn-supprimer-article:hover { background:var(--red-bg); color:var(--red); }

/* Résumé */
.panier-resume {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r16); padding:24px; box-shadow:var(--s2);
  position:sticky; top:28px;
}
.panier-resume h2 {
  font-size:1rem; font-weight:800; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid var(--border);
}
.resume-ligne {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; font-size:.875rem; color:var(--t2);
}
.resume-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; margin-top:8px; border-top:2px solid var(--border);
  font-weight:800; font-size:1.1rem;
}
.resume-total span:last-child { color:var(--primary); }

#btn-valider-panier { width:100%; padding:.8rem; font-size:.9rem; margin-top:16px; }
#btn-vider-panier   { width:100%; margin-top:8px; }


/* ────────────────────────────────────────────
   VUE 7 — COMMANDES
──────────────────────────────────────────── */
.page-commandes {}
.commandes-top {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:24px;
}
.commandes-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

.commandes-filtre {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:12px 20px; margin-bottom:24px;
}
.toggle-toutes { display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:0; }
.toggle-label  { font-size:.85rem; font-weight:600; color:var(--t2); cursor:pointer; user-select:none; line-height:1; }

input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; vertical-align:middle; flex-shrink:0; }

.commandes-liste { display:flex; flex-direction:column; gap:12px; }

.commande-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); overflow:hidden; box-shadow:var(--s1);
  transition:box-shadow var(--tf);
}
.commande-card:hover { box-shadow:var(--s2); }

.commande-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:var(--bg);
  border-bottom:1px solid var(--border); flex-wrap:wrap; gap:8px;
}
.commande-numero { font-size:.9rem; font-weight:800; }
.commande-date   { font-size:.8rem; color:var(--t3); }

.commande-body {
  padding:14px 20px; display:flex; flex-wrap:wrap; gap:12px;
}
.commande-etablissement,.commande-livraison,.commande-articles {
  font-size:.83rem; color:var(--t2);
}

.commande-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px;
}
.commande-total { font-size:1rem; font-weight:800; }


/* ────────────────────────────────────────────
   VUE 8 — COMMANDE DÉTAIL
──────────────────────────────────────────── */
.page-commande-detail {}

.commande-detail-header {
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin-bottom:28px;
}
.commande-detail-header h1 { font-size:1.4rem; font-weight:800; }

.commande-detail-layout {
  display:grid; grid-template-columns:1fr 300px;
  gap:24px; align-items:start;
}

.commande-detail-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:24px; box-shadow:var(--s1);
  margin-bottom:16px;
}
.commande-detail-section h2 {
  font-size:.9rem; font-weight:800; margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid var(--border); color:var(--t2);
  text-transform:uppercase; letter-spacing:.05em;
}

.commande-lignes { display:flex; flex-direction:column; gap:0; }
.commande-ligne {
  display:flex; flex-direction:column; gap:6px;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.commande-ligne:last-child { border-bottom:none; }
.ligne-produit { font-size:.875rem; font-weight:600; color:var(--t1); }
.ligne-produit small { font-weight:400; color:var(--t3); margin-left:4px; }
.ligne-bas { display:flex; justify-content:space-between; align-items:flex-end; }
.ligne-quantite { font-size:.83rem; color:var(--t3); }
.ligne-montants { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.ligne-prix  { font-size:.8rem; color:var(--t2); white-space:nowrap; }
.ligne-total { font-weight:800; font-size:.9rem; color:var(--t1); white-space:nowrap; }

.commande-detail-aside { position:sticky; top:28px; }

.info-groupe {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:20px; box-shadow:var(--s1); margin-bottom:12px;
}
.info-groupe h2 {
  font-size:.72rem; font-weight:800; margin-bottom:14px; color:var(--t3);
  text-transform:uppercase; letter-spacing:.08em;
}
.info-ligne {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:8px 0; font-size:.84rem; border-bottom:1px solid var(--border); gap:12px;
}
.info-ligne:last-child { border-bottom:none; }
.info-ligne span:first-child { color:var(--t3); flex-shrink:0; }
.info-ligne span:last-child  { font-weight:700; text-align:right; }

.adresse-bloc { font-size:.84rem; line-height:1.8; color:var(--t2); }

.recap-ligne {
  display:flex; justify-content:space-between;
  padding:7px 0; font-size:.84rem; color:var(--t2);
}
.recap-total {
  display:flex; justify-content:space-between;
  padding:12px 0; border-top:2px solid var(--border); margin-top:8px;
  font-weight:800; font-size:.95rem;
}
.recap-total span:last-child { color:var(--primary); }

.commande-detail-actions {
  display:flex; flex-direction:column; gap:8px; margin-top:16px;
}


/* ────────────────────────────────────────────
   VUE 9 — VALIDER COMMANDE
──────────────────────────────────────────── */
.page-valider-commande {}

.valider-top { margin-bottom:28px; }
.valider-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

.valider-layout {
  display:grid; grid-template-columns:1fr 340px;
  gap:24px; align-items:start;
}

.valider-formulaire {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:24px; box-shadow:var(--s1);
}
.valider-formulaire h2 {
  font-size:.875rem; font-weight:800; margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid var(--border);
  color:var(--t2); text-transform:uppercase; letter-spacing:.05em;
}

.valider-recapitulatif {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:24px; box-shadow:var(--s2);
  position:sticky; top:28px;
}
.valider-recapitulatif h2 {
  font-size:.875rem; font-weight:800; margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid var(--border);
  color:var(--t2); text-transform:uppercase; letter-spacing:.05em;
}

.recap-articles { display:flex; flex-direction:column; gap:0; margin-bottom:16px; }
.recap-article {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:.84rem;
}
.recap-article:last-child { border-bottom:none; }
.recap-article .article-nom      { flex:1; font-weight:600; }
.recap-article .article-quantite { color:var(--t3); }
.recap-article .article-prix     { font-weight:700; }

.recap-totaux { padding-top:12px; border-top:1px solid var(--border); }
.recap-total  {
  font-weight:800; font-size:1rem;
  border-top:2px solid var(--border); margin-top:8px;
  padding-top:12px; display:flex; justify-content:space-between;
}
.recap-total span:last-child { color:var(--primary); }

#btn-confirmer { width:100%; padding:.8rem; margin-top:8px; }
#btn-annuler   { width:100%; }

/* Succès */
.commande-succes {
  text-align:center; padding:80px 40px;
  background:var(--surface); border-radius:var(--r16);
  border:1px solid var(--border); box-shadow:var(--s2);
  animation:scaleIn .3s ease;
}
.succes-icone {
  width:68px; height:68px; border-radius:50%;
  background:var(--green-bg); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; margin:0 auto 24px;
  animation:popIn .4s ease;
}
.succes-info { color:var(--t2); margin-bottom:32px; font-size:.9rem; line-height:1.7; }
.succes-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }


/* ────────────────────────────────────────────
   VUE 10 — PROFIL
──────────────────────────────────────────── */
.profil-top { margin-bottom:28px; }
.profil-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

.profil-conteneur { display:flex; flex-direction:column; gap:20px; max-width:760px; margin:0 auto; }

.profil-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:24px; box-shadow:var(--s1);
}
.profil-section h2 {
  font-size:.875rem; font-weight:800; margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid var(--border);
  color:var(--t2); text-transform:uppercase; letter-spacing:.05em;
}

.profil-info-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px;
}
.profil-info-item { display:flex; flex-direction:column; gap:4px; }
.profil-info-item .label-info {
  display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--t3); margin-bottom:4px;
}
.profil-info-item .valeur-info { display:block; font-weight:600; }

#profil-message, #mdp-message { margin-bottom:16px; }


/* ────────────────────────────────────────────
   VUE 11 — ÉTABLISSEMENTS
──────────────────────────────────────────── */
.etablissements-top {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:28px;
}
.etablissements-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

.etablissements-liste {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;
}

.etablissement-carte {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:20px; box-shadow:var(--s1);
  display:flex; flex-direction:column; gap:16px; transition:box-shadow var(--tf);
}
.etablissement-carte:hover { box-shadow:var(--s2); }

.etablissement-nom {
  font-weight:700; font-size:.95rem; margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.etablissement-adresse { font-size:.83rem; color:var(--t2); line-height:1.7; }

.etablissement-actions {
  display:flex; gap:8px; flex-wrap:wrap;
  border-top:1px solid var(--border); padding-top:14px;
}


/* ────────────────────────────────────────────
   VUE 12 — FACTURES
──────────────────────────────────────────── */
.page-factures {}
.factures-top {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:24px;
}
.factures-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

.factures-filtres {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r12); padding:12px 20px; margin-bottom:24px;
}
.factures-filtres-groupe { display:flex; align-items:center; gap:8px; }

.factures-table-container {
  overflow-x:auto; border-radius:var(--r12);
  border:1px solid var(--border); box-shadow:var(--s1);
}
.factures-table {
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); font-size:.875rem;
}
.factures-table thead th {
  padding:12px 20px; background:var(--bg);
  color:var(--t3); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  border-bottom:2px solid var(--border); text-align:left; white-space:nowrap;
}
.factures-table tbody tr { transition:background var(--tf); }
.factures-table tbody tr:hover { background:var(--bg); }
.factures-table tbody tr.facture-annulee { opacity:.5; }
.factures-table tbody td {
  padding:14px 20px; border-bottom:1px solid var(--border); vertical-align:middle;
}
.factures-table tbody tr:last-child td { border-bottom:none; }
.montant { font-weight:800; }
.facture-partiel-info { font-size:.75rem; color:var(--orange); margin-top:2px; }

.factures-table td.actions {
  white-space:nowrap;
}
.factures-table td.actions .btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; padding:.35rem .8rem; height:30px;
  vertical-align:middle;
}
.factures-table td.actions .btn svg { width:14px; height:14px; flex-shrink:0; }


/* ────────────────────────────────────────────
   VUE 13 — FAVORIS
──────────────────────────────────────────── */
.page-favoris {}
.favoris-top { margin-bottom:28px; }
.favoris-top h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }

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

.favori-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r16); overflow:hidden; box-shadow:var(--s1);
  display:flex; flex-direction:column; transition:all var(--tn); position:relative;
}
.favori-card:hover { box-shadow:var(--s3); transform:translateY(-3px); }

.favori-image {
  position:relative; aspect-ratio:4/3;
  background:var(--bg); overflow:hidden; cursor:pointer;
}
.favori-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--ts); }
.favori-card:hover .favori-image img { transform:scale(1.05); }

.badge-rupture {
  position:absolute; top:10px; left:10px;
  background:rgba(239,68,68,.9); color:#fff;
  font-size:.65rem; font-weight:700;
  padding:3px 10px; border-radius:var(--rf);
}

.btn-favori-retirer {
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:var(--rf);
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--red); box-shadow:var(--s1); transition:all var(--tf);
}
.btn-favori-retirer:hover { background:#fff; transform:scale(1.1); }
.btn-favori-retirer svg { width:15px; height:15px; }

.favori-infos { padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.favori-nom {
  font-size:.875rem; font-weight:700; cursor:pointer; transition:color var(--tf);
}
.favori-nom:hover { color:var(--primary); }
.favori-conditionnement { font-size:.75rem; color:var(--t3); }
.favori-prix { display:flex; align-items:baseline; gap:8px; }

.favori-actions { padding:0 14px 14px; }
.favori-actions .btn { width:100%; font-size:.8rem; }
.favori-actions .btn:disabled {
  background:var(--bg); color:var(--t3);
  border-color:var(--border); box-shadow:none; transform:none;
}


/* ────────────────────────────────────────────
   CORRECTIONS & AJUSTEMENTS TRANSVERSAUX
──────────────────────────────────────────── */

/* logo-distribution (alias de logo-dist dans les vues non modifiées) */
.logo-distribution {
  font-family: var(--font);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nav-text);
}

/* logo dans le header mobile */
.mobile-header .logo-ekin {
  font-family: var(--font-logo);
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFFFFF;
}

/* logo dans auth — sur fond sombre */
.auth-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 40px;
}
.auth-logo .logo-ekin { font-size: 2rem; }
.auth-logo .logo-dist { color: #64748B; }

/* Conteneur générique de page */
.container { max-width: 1200px; }

/* .page-accueil hérite de .container mais besoin du class page-accueil */
.page-accueil { }

/* Titres de page uniformes pour les vues non modifiées */
.page-catalogue h1,
.page-produit h1,
.page-panier h1,
.page-commandes h1,
.page-commande-detail h1,
.page-valider-commande h1,
.page-factures h1,
.page-favoris h1,
.container > h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 28px;
}

/* Sélecteur quantité dans la carte — alignement pied */
.produit-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 16px;
}

/* Btn-quantite hérite des styles .btn-moins/.btn-plus */
.btn-quantite { }

/* État de chargement inline */
#catalogue-contenu .chargement,
#panier-contenu .chargement,
#commandes-contenu .chargement,
#factures-contenu .chargement,
#favoris-contenu .chargement { min-height: 300px; }

/* Page commandes — structure header */
.commandes-header { margin-bottom: 0; }
.page-commandes > h1 { margin-bottom: 20px; }

/* Page factures — structure header */
.factures-header { margin-bottom: 0; }
.page-factures > h1 { margin-bottom: 20px; }

/* Page favoris — structure header */
.favoris-header { margin-bottom: 0; }
.page-favoris > h1 { margin-bottom: 20px; }

/* Commande detail header */
.commande-detail-header .btn-retour { margin-bottom: 0; }

/* Panier top */
.page-panier h1 { margin-bottom: 20px; }

/* Profil sections dans .container */
.container .profil-top { margin-bottom: 0; }
.container > h1 + .profil-conteneur { margin-top: 0; }

/* Etablissements */
.etablissements-header { margin-bottom: 0; }

/* ────────────────────────────────────────────
   CORRECTIONS SUPPLÉMENTAIRES
──────────────────────────────────────────── */

/* .btn-sm alias de .btn-petit (utilisé dans les factures) */
.btn-sm { padding:.32rem .7rem; font-size:.78rem; }

/* Bouton vider panier (danger outline) */
.btn-danger-outline { color:var(--red); border-color:var(--red); }
.btn-danger-outline:hover { background:var(--red-bg); border-color:var(--red); color:var(--red); }

/* Filtre info label établissement */
.filtre-info {
  font-size:.82rem; color:var(--t3); font-weight:500;
  transition:opacity var(--tf);
}
.filtre-info.masque { opacity:0; pointer-events:none; }

/* Séparateur dans les filtres factures */
.factures-filtres-divider {
  width:1px; height:22px; background:var(--border); flex-shrink:0;
}

/* Image placeholder dans les lignes du panier */
.article-image-placeholder {
  width:100%; height:100%;
  background:linear-gradient(135deg, #F1F5F9, #EFF6FF);
  border-radius:var(--r8);
}

/* Quantite dans le panier : ctrl hérite des styles btn-moins/btn-plus */
.article-quantite-ctrl {
  display:flex; align-items:center;
  border:2px solid var(--border); border-radius:var(--r8);
  background:var(--bg); overflow:hidden;
}
.article-quantite-ctrl .quantite-btn {
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--t2);
  font-size:1rem; font-weight:700; cursor:pointer; transition:all var(--tf);
}
.article-quantite-ctrl .quantite-btn:hover { background:var(--primary-pale); color:var(--primary); }
.article-quantite-ctrl .quantite-input {
  width:36px; text-align:center; font-weight:700; font-size:.875rem;
  border:none !important; background:none !important;
  box-shadow:none !important; padding:0 !important;
  -moz-appearance:textfield;
}
.article-quantite-ctrl .quantite-input::-webkit-inner-spin-button,
.article-quantite-ctrl .quantite-input::-webkit-outer-spin-button {
  -webkit-appearance:none; margin:0;
}

/* Actions commandes */
.commande-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* statut badge avec icône */
.statut-badge-icon {
  display:inline-flex; align-items:center; gap:5px;
}

/* Pagination générique (commandes/factures) */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:6px; padding:24px 0;
}
.pagination-pages { display:flex; gap:4px; }
.pagination-prev, .pagination-next, .pagination-page {
  min-width:34px; height:34px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r8); font-size:.83rem; font-weight:700;
  color:var(--t2); background:var(--surface); border:1px solid var(--border);
  cursor:pointer; transition:all var(--tf); font-family:var(--font);
}
.pagination-prev:hover,.pagination-next:hover,.pagination-page:hover {
  background:var(--primary-pale); color:var(--primary); border-color:var(--primary);
}
.pagination-page.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.pagination-prev:disabled,.pagination-next:disabled { opacity:.4; cursor:not-allowed; }
.pagination-prev:disabled:hover,.pagination-next:disabled:hover {
  background:var(--surface); color:var(--t2); border-color:var(--border);
}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */

@media (max-width: 1100px) {
  :root { --sidebar-w: 220px; }
  .produit-detail { grid-template-columns: 1fr; }
  .valider-layout,.commande-detail-layout { grid-template-columns: 1fr; }
  .valider-recapitulatif,.commande-detail-aside { position:static; }
}

@media (max-width: 768px) {
  /* Navigation */
  .sidebar      { display:none; }
  .mobile-header { display:flex; }
  .bottom-nav   { display:flex; }

  /* Pages — marge sidebar supprimée, remplacement par header/bottom nav */
  #app > main,
  #app > .page-auth,
  #app > .page-catalogue,
  #app > .page-produit,
  #app > .page-panier,
  #app > .page-commandes,
  #app > .page-commande-detail,
  #app > .page-valider-commande,
  #app > .page-factures,
  #app > .page-favoris,
  #app > .page-profil,
  #app > .container {
    margin-left: 0 !important;
    padding: 16px;
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: calc(var(--bottom-h-total) + 16px);
  }

  /* Page auth — plein écran */
  .auth-gauche {
    display: none; /* Masquer sur mobile — afficher juste le form */
  }
  .auth-logo-flottant {
    display: none;
  }
  #app > .page-auth {
    display: block !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: var(--surface) !important;
  }
  .auth-droite, .auth-droite.large {
    min-height: 100vh !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 40px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .page-legale-carte {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .auth-form-conteneur {
    flex: 1;
  }
  .footer-legal {
    position: static;
    color: var(--t2);
    padding: 1rem;
    text-align: center;
  }
  .footer-legal a { color: var(--t2) !important; }
  .footer-legal a:hover { color: var(--t1) !important; }

  /* Notifications */
  .notification {
    top: calc(var(--header-h) + 12px);
    right: 12px; left: 12px; max-width:none;
  }

  /* Formulaires */
  .form-row { grid-template-columns:1fr; }

  /* Catalogue */
  .catalogue-top { flex-direction:column; align-items:stretch; }
  .catalogue-recherche { max-width:none; }
  .produits-grille,.favoris-grille { grid-template-columns:repeat(2,1fr); gap:12px; }

  /* Panier */
  .panier-layout { grid-template-columns:1fr; }
  .panier-resume { position:static; }

  /* Commandes */
  .commandes-filtre { flex-direction:column; gap:12px; }

  /* Etablissements */
  .etablissements-liste { grid-template-columns:1fr; }

  /* Profil */
  .profil-info-grid { grid-template-columns:1fr; }

  /* Accueil */
  .accueil-raccourcis { grid-template-columns:1fr 1fr; }

  /* Commande detail */
  .commande-detail-layout { grid-template-columns:1fr; }

  /* Factures — filtres empilés verticalement */
  .factures-filtres { flex-direction:column; align-items:flex-start; gap:10px; }
  .factures-filtres-groupe:first-child { flex-direction:column; align-items:flex-start; }
  #filtre-etablissement-factures { order:-1; }
  .factures-filtres-divider { display:none; }

  /* Factures — tableau → cartes */
  .factures-table-container { border:none; box-shadow:none; background:transparent; overflow:visible; }
  .factures-table, .factures-table tbody,
  .factures-table tr, .factures-table td { display:block; width:100%; box-sizing:border-box; }
  .factures-table thead { display:none; }
  .factures-table tbody tr {
    display:grid; grid-template-columns:1fr auto;
    gap:4px 12px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r12); padding:14px 16px;
    margin-bottom:10px; box-shadow:var(--s1);
  }
  .factures-table tbody tr:hover { background:var(--surface); }
  .factures-table tbody td { border:none; padding:0; vertical-align:middle; }
  /* Numéro + statut → ligne 1 */
  .factures-table tbody td:nth-child(1) { grid-column:1; grid-row:1; font-size:.9rem; }
  .factures-table tbody td:nth-child(4) { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:flex-end; }
  /* Date + montant → ligne 2 */
  .factures-table tbody td:nth-child(2) { grid-column:1; grid-row:2; font-size:.82rem; color:var(--t3); }
  .factures-table tbody td:nth-child(3) { grid-column:2; grid-row:2; text-align:right; }
  /* Actions → ligne 3 pleine largeur */
  .factures-table tbody td:nth-child(5) {
    grid-column:1 / -1; grid-row:3;
    border-top:1px solid var(--border); padding-top:10px; margin-top:6px;
    display:flex; gap:8px;
  }
  .factures-table tbody td:nth-child(5) .btn { flex:1; justify-content:center; }

  /* Modales */
  .modal { padding:0; align-items:flex-end; }
  .modal-contenu { border-radius:20px 20px 0 0; max-height:92vh; }
}

@media (max-width: 420px) {
  .produits-grille,.favoris-grille { grid-template-columns:1fr; }
  .accueil-raccourcis { grid-template-columns:1fr; }

  /* Carte catalogue : image gauche + infos droite + pied en bas */
  .produit-carte {
    display: grid;
    grid-template-columns: 90px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "img infos"
      "pied pied";
    min-height: 90px;
    flex-direction: unset;
    align-items: unset;
  }
  .produit-image {
    grid-area: img;
    width: 90px;
    height: 100%;
    min-height: 90px;
    aspect-ratio: unset;
    border-radius: var(--r16) 0 0 0;
    flex-shrink: 0;
  }
  .produit-infos {
    grid-area: infos;
    padding: 8px 12px 6px 10px;
    gap: 3px;
    min-width: 0;
  }
  .produit-pied {
    grid-area: pied;
    padding: 6px 12px 10px;
    justify-content: flex-start;
    border-top: 1px solid var(--border);
  }
  .produit-type { font-size: .6rem; }
  .produit-nom { font-size: .82rem; }
  .produit-conditionnement { font-size: .72rem; }
  .produit-prix {
    padding-top: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .prix-ttc { font-size: .88rem; }
  .selecteur-quantite { max-width: 100%; width: 100%; }
  .btn-moins, .btn-plus {
    height: 44px;
    min-width: 44px;
    font-size: 1.4rem;
  }
  .quantite-valeur {
    font-size: 1rem;
    min-width: 32px;
  }
  .produit-carte .produit-badge-rupture {
    top: 6px;
    left: 6px;
    font-size: .58rem;
    padding: 2px 7px;
  }
  .produit-carte .btn-favori {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
  }
}


/* ════════════════════════════════════════════
   BOUTON THEME FLOTTANT
   ════════════════════════════════════════════ */
.btn-theme-flottant {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 300;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  box-shadow: var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--tf), border-color var(--tf), box-shadow var(--tf), transform var(--tf);
  color: var(--t1);
}
.btn-theme-flottant:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: scale(1.08);
  box-shadow: var(--s4);
}
.btn-theme-flottant svg { width:22px; height:22px; flex-shrink:0; }

/* Icônes — lune visible en mode clair, soleil en mode sombre */
.btn-theme-flottant .icone-lune   { display:block; }
.btn-theme-flottant .icone-soleil { display:none; }
[data-theme="dark"] .btn-theme-flottant .icone-lune   { display:none; }
[data-theme="dark"] .btn-theme-flottant .icone-soleil { display:block; }

/* Sur mobile : au-dessus de la barre du bas */
@media (max-width: 768px) {
  .btn-theme-flottant {
    bottom: calc(var(--bottom-h-total) + 14px);
    right: 16px;
    width: 42px;
    height: 42px;
  }
  .btn-theme-flottant svg { width:19px; height:19px; }
}

/* ════════════════════════════════════════════
   CORRECTIONS DARK MODE
   ════════════════════════════════════════════ */

/* Inputs en mode sombre */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-2);
  color: var(--t1);
  border-color: var(--border-2);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--t3); }

/* Fond de page auth en mode sombre — on garde l'image de fond */
[data-theme="dark"] .auth-gauche { background: #111111; }

/* Scrollbar en mode sombre */
[data-theme="dark"] * {
  scrollbar-color: var(--border-2) var(--surface-2);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-2); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-2); }

/* ════════════════════════════════════════════
   PAGES LÉGALES
   ════════════════════════════════════════════ */

.page-legale { max-width: 800px; margin: 0 auto; }

/* Carte légale — panneau large et centré */
.page-legale-carte {
    max-width: 60vw;
    width: 60vw;
    min-height: 60vh;
    margin: 40px auto;
}

.page-legale-contenu {
    margin-top: 1.5rem;
    line-height: 1.8;
    font-size: 0.92rem;
    color: var(--t2);
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-legale-contenu p { margin: 0 0 0.6rem; }
.page-legale-contenu br { display: block; margin: 0.4rem 0; }

.page-legale-retour-lien {
    display: inline-block;
    margin-bottom: 1.2rem;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.page-legale-retour-lien:hover { text-decoration: underline; }

.page-legale-retour { margin-top: 1.5rem; }
.lien-retour { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.lien-retour:hover { text-decoration: underline; }

/* Footer légal — à l'intérieur de .page-auth (position: relative) */
.footer-legal {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    background: transparent;
    z-index: 10;
}
.footer-legal a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; color: #fff; }
.footer-legal span { margin: 0 0.4rem; }

/* Liens légaux dans la sidebar */
.sidebar-liens-legaux {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-1);
}
.sidebar-liens-legaux a {
    font-size: 0.75rem;
    color: var(--t3);
    text-decoration: none;
    padding: 0.1rem 0;
}
.sidebar-liens-legaux a:hover { color: var(--nav-hover); }


/* Liens légaux dans le menu Plus mobile */
.menu-plus-liens-legaux {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-1);
    margin-bottom: 0.75rem;
}
.menu-plus-liens-legaux a {
    font-size: 0.75rem;
    color: var(--t3);
    text-decoration: none;
}
.menu-plus-liens-legaux a:hover { color: var(--nav-hover); }

/* ────────────────────────────────────────────
   REFLOW 320px (WCAG 1.4.10)
──────────────────────────────────────────── */
@media (max-width: 400px) {
    .produits-grille { grid-template-columns: 1fr; }
    .valider-layout,
    .commande-detail-layout { flex-direction: column; }
}

/* ────────────────────────────────────────────
   MODALE DE CONFIRMATION
──────────────────────────────────────────── */
.modal-confirmation-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.modal-confirmation-boite {
    background: var(--surface);
    border-radius: var(--r12);
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.modal-confirmation-message {
    font-size: 1rem;
    color: var(--t1);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.modal-confirmation-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
}
.btn-danger {
    background: #DC2626;
    color: #fff;
    border: none;
}
.btn-danger:hover { background: #B91C1C; }

/* ────────────────────────────────────────────
   ACCESSIBILITÉ — prefers-reduced-motion (WCAG 2.3.3 / ECO-10)
──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}