:root {
    --teal-900: #1E4B47;
    --teal-600: #3F8A81;
    --teal-100: #BFE0DA;
    --sable: #E3A44B;
    --urgent: #C85C3E;
    --ivoire: #F4F1E9;
    --carte: #FFFFFF;
    --bordure: #D8D2C2;
    --texte: #1E2A28;
    --texte-att: #52615E;
    --fond-elevé: #FAF8F2;
    --ombre: 0 12px 34px rgba(30, 42, 40, 0.08);
    --ombre-forte: 0 20px 50px rgba(30, 42, 40, 0.14);
  }

  html[data-theme="dark"] {
    --teal-900: #163F3C;
    --teal-600: #65B8AD;
    --teal-100: #A7D7D0;
    --sable: #F0B45C;
    --urgent: #F07A5D;
    --ivoire: #121917;
    --carte: #1C2623;
    --bordure: #34423E;
    --texte: #F3F0E8;
    --texte-att: #C3CECB;
    --fond-elevé: #17201D;
    --ombre: 0 12px 34px rgba(0, 0, 0, 0.22);
    --ombre-forte: 0 20px 50px rgba(0, 0, 0, 0.36);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--ivoire);
    color: var(--texte);
    font-family: 'Nunito', sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }

  #app {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    background: var(--ivoire);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  html[data-theme="dark"] { color-scheme: dark; }
  html[data-theme="dark"] .onglets,
  html[data-theme="dark"] .onglets-depense { background: #26332F; }
  html[data-theme="dark"] .bloc-assistant-prix { background: #17201D; }

  .ecran {
    display: none;
    flex-direction: column;
    min-height: 100vh;
  }
  .ecran.actif { display: flex; }

  h1, h2, h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    margin: 0;
  }

  p { margin: 0; }

  label {
    font-size: 13px;
    font-weight: 700;
    color: var(--texte-att);
    display: block;
    margin-bottom: 6px;
  }

  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--bordure);
    background: var(--carte);
    /* 16 px minimum : en dessous, l'iPhone zoome tout seul sur le champ touché.
       Le zoom à deux doigts reste autorisé pour ceux qui voient mal. */
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    color: var(--texte);
  }
  select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texte-att) 50%), linear-gradient(135deg, var(--texte-att) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
  input:focus { outline: 2px solid var(--teal-600); outline-offset: -1px; }
  input::placeholder, textarea::placeholder { color:var(--texte-att); opacity:.9; }

  .champ { margin-bottom: 16px; }
  .aide-champ { font-size: 12px; color: var(--texte-att); line-height: 1.4; margin-top: 6px; }
  .btn-whatsapp-aide { display: block; text-align: center; text-decoration: none; margin-bottom: 12px; box-sizing: border-box; }

  button {
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
  }

  .btn-principal {
    width: 100%;
    background: var(--teal-900);
    border: none;
    border-radius: 14px;
    padding: 15px;
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
  }
  .btn-principal:disabled { opacity: 0.5; cursor: not-allowed; }

  .btn-secondaire {
    width: 100%;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--teal-900);
  }

  .lien-discret {
    background: none;
    border: none;
    color: var(--teal-600);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 0;
  }

  .erreur {
    color: var(--urgent);
    font-size: 13px;
    font-weight: 700;
    margin: -8px 0 14px;
    display: none;
  }
  .erreur.visible { display: block; }

  /* --- Auth --- */
  #vue-auth { padding: 40px 26px; justify-content: center; }
  #vue-auth .entete { text-align: center; margin-bottom: 36px; }
  #vue-auth .entete h1 { font-size: 52px; line-height:.95; letter-spacing:-.035em; color: var(--teal-900); }
  #vue-auth .entete p { font-size: 15px; font-weight:700; color: var(--texte-att); margin-top: 12px; }

  .onglets { display: flex; gap: 8px; margin-bottom: 26px; background: #E9E5D8; border-radius: 12px; padding: 4px; }
  .onglet { flex: 1; text-align: center; padding: 11px 10px; border-radius: 9px; border: none; background: none; font-weight: 800; font-size: 14px; color: var(--texte); opacity:.82; }
  .onglet.actif { background: var(--carte); color: var(--teal-900); opacity:1; box-shadow:0 2px 8px rgba(30,42,40,.08); }

  .formulaire { display: none; }
  .formulaire.actif { display: block; }

  /* --- PIN --- */
  .vue-pin { padding: 48px 30px; justify-content: center; align-items: center; text-align: center; }
  .vue-pin h2 { font-size: 22px; margin-bottom: 8px; }
  .vue-pin p.sous-titre { font-size: 14px; color: var(--texte-att); margin-bottom: 32px; }

  .pin-points { display: flex; gap: 16px; margin-bottom: 40px; }
  .pin-point { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--teal-900); }
  .pin-point.rempli { background: var(--teal-900); }

  .pin-clavier { display: grid; grid-template-columns: repeat(3, 64px); gap: 14px; }
  .pin-touche {
    width: 64px; height: 64px; border-radius: 50%;
    border: 1px solid var(--bordure); background: var(--carte);
    font-size: 22px; font-weight: 700; color: var(--texte);
  }
  .pin-touche:active { background: var(--teal-100); }
  .pin-touche.vide { border: none; background: none; }

  /* --- Bienvenue --- */
  #vue-bienvenue { background: var(--teal-900); padding: 48px 30px 36px; justify-content: space-between; }
  #vue-bienvenue .haut { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; }
  #vue-bienvenue h1 { font-size: 32px; color: #FFFFFF; }
  #vue-bienvenue p { font-size: 16px; line-height: 1.6; color: #E4EEEC; }
  #vue-bienvenue .citation { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; color: var(--sable); margin-top: 6px; }
  #vue-bienvenue .bas { display: flex; flex-direction: column; gap: 12px; }
  #vue-bienvenue .btn-bienvenue { background: var(--sable); border: none; border-radius: 14px; padding: 15px; font-size: 15px; font-weight: 800; color: var(--texte); width: 100%; }
  #vue-bienvenue .note { text-align: center; font-size: 12px; color: #9FC2BD; }

  /* --- Dashboard --- */
  #vue-dashboard { padding-bottom: 24px; }
  .entete-dash { padding: 26px 22px 20px; background: var(--teal-900); border-radius: 0 0 24px 24px; display: flex; flex-direction: column; gap: 6px; }
  .dash-ligne-haut { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .marque-kalmo { font-family:'Fraunces',serif; font-size:30px; font-weight:600; line-height:1; color:#fff; letter-spacing:-.025em; margin-bottom:8px; }
  .btn-theme { min-height:40px; padding:0 13px; border-radius:12px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.13); color:#fff; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; font-weight:800; flex-shrink:0; }
  .entete-dash .nom-boutique { font-size: 13px; color: var(--teal-100); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  .entete-dash .solde { font-size: 36px; color: #FFFFFF; }
  .entete-dash .solde-label { font-size: 13px; color: var(--teal-100); }
  .entete-dash .stats-jour { display: flex; gap: 18px; margin-top: 10px; }
  .entete-dash .stat-jour .label { font-size: 12px; color: var(--teal-100); }
  .entete-dash .stat-jour .valeur { font-size: 16px; font-weight: 800; color: #FFFFFF; }

  .section-dash { padding: 18px 22px; }
  .section-titre { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }

  .carte-alerte { display: flex; align-items: center; gap: 12px; background: var(--carte); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
  .carte-alerte .puce { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .carte-alerte.urgente { border-left: 4px solid var(--urgent); }
  .carte-alerte.urgente .puce { background: var(--urgent); }
  .carte-alerte.importante { border-left: 4px solid var(--sable); }
  .carte-alerte.importante .puce { background: var(--sable); }
  .carte-alerte .texte { font-size: 14px; font-weight: 700; }
  .carte-alerte.cliquable { cursor: pointer; }
  .carte-alerte.cliquable::after { content: '›'; margin-left: auto; font-size: 18px; color: var(--texte-att); }
  .echeance-credit { display:inline-block; margin-top:5px; font-size:11px; font-weight:800; color:var(--texte-att); }
  .echeance-credit.depassee { color:var(--urgent); }

  .actions-rapides { padding: 16px 22px 4px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
  .action-rapide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border-radius: 16px; padding: 14px 8px; border: 1px solid var(--bordure); background: var(--carte); }
  .action-rapide.pleine span { font-size: 17px; }
  .action-rapide.pleine { background: var(--teal-900); border: none; }
  .action-rapide.pleine span { color: #FFFFFF; }
  .action-rapide span { font-size: 14px; font-weight: 900; color: var(--texte); }

  .vide { font-size: 13px; color: var(--texte-att); padding: 4px 0; }

  .barre-hors-ligne {
    display: none;
    background: #5B6461; color: #FFFFFF; font-size: 12px; font-weight: 700;
    text-align: center; padding: 8px; border-radius: 0 0 12px 12px;
  }
  .barre-hors-ligne.visible { display: block; }

  /* --- Stock --- */
  #vue-stock { padding-bottom: 90px; }
  .entete-stock { display: flex; align-items: center; gap: 14px; padding: 24px 22px 16px; }
  .entete-stock .retour { background: none; border: none; padding: 0; display: flex; }
  .entete-stock h2 { font-size: 22px; }

  .cartes-valorisation { display: flex; gap: 10px; padding: 0 22px 16px; }
  .carte-valorisation { flex: 1; background: var(--carte); border-radius: 12px; padding: 12px 14px; }
  .carte-valorisation .valeur { font-family: 'Fraunces', serif; font-size: 20px; color: var(--texte); }
  .carte-valorisation .label { font-size: 11px; color: var(--texte-att); margin-top: 2px; }
  .carte-valorisation.accent { background: var(--teal-900); }
  .carte-valorisation.accent .valeur { color:#fff; }
  .carte-valorisation.accent .label { color:var(--teal-100); }

  .resume-financier { padding: 18px 22px 4px; }
  .resume-financier-entete { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .resume-financier-entete .periode { font-size:11px; color:var(--texte-att); }
  .grille-finances { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .carte-finance { background:var(--carte); border:1px solid var(--bordure); border-radius:14px; padding:14px; min-width:0; }
  .carte-finance .libelle { font-size:11px; color:var(--texte-att); line-height:1.25; }
  .carte-finance .montant { font-family:'Fraunces',serif; font-size:19px; margin-top:5px; color:var(--texte); overflow-wrap:anywhere; }
  .carte-finance.resultat { background:var(--teal-900); border-color:var(--teal-900); }
  .carte-finance.resultat .libelle { color:var(--teal-100); }
  .carte-finance.resultat .montant { color:#fff; }
  .aide-finance { font-size:11px; color:var(--texte-att); line-height:1.4; margin-top:9px; }
  .aide-finance.incomplet { color:var(--urgent); font-weight:800; }

  .btn-premium { width:100%; border:1px solid #D99A3E; background:linear-gradient(135deg,#F3BD68,#E3A44B); color:#2B2418; border-radius:14px; padding:14px; font-size:14px; font-weight:900; margin-bottom:10px; }
  .statut-premium { display:none; border:1px solid var(--bordure); background:var(--fond-elevé); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
  .statut-premium.visible { display:block; }
  .statut-premium .titre { font-size:13px; font-weight:900; }
  .statut-premium .detail { font-size:11px; color:var(--texte-att); margin-top:3px; line-height:1.4; }

  #fond-modale-premium { display:none; position:fixed; inset:0; z-index:40; background:rgba(15,25,22,.65); align-items:flex-end; justify-content:center; padding:0; }
  #fond-modale-premium.visible { display:flex; }
  #modale-premium { width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--carte); border-radius:22px 22px 0 0; padding:26px; }
  #modale-premium h2 { font-size:22px; margin-bottom:5px; }
  #modale-premium .intro { font-size:13px; color:var(--texte-att); line-height:1.45; margin-bottom:14px; }
  .promesse-premium { background:var(--teal-900); color:#fff; border-radius:15px; padding:16px; margin-bottom:12px; }
  .promesse-premium .titre { font-family:'Fraunces',serif; font-size:17px; }
  .promesse-premium .texte { color:var(--teal-100); font-size:12px; line-height:1.45; margin-top:4px; }
  .avantages-premium { display:grid; gap:8px; margin-bottom:14px; }
  .avantage-premium { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:center; padding:10px 11px; border:1px solid var(--bordure); border-radius:12px; background:var(--fond-elevé); }
  .avantage-premium .icone { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--carte); color:var(--teal-600); font-size:16px; }
  .avantage-premium .titre { font-size:12px; font-weight:900; color:var(--texte); }
  .avantage-premium .detail { font-size:11px; line-height:1.35; color:var(--texte-att); margin-top:2px; }
  .note-version-gratuite { font-size:11px; line-height:1.4; color:var(--texte-att); padding:10px 12px; border-left:3px solid var(--sable); background:var(--fond-elevé); border-radius:0 10px 10px 0; margin-bottom:18px; }
  .titre-activation-premium { display:flex; align-items:center; gap:10px; margin:3px 0 14px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; color:var(--texte-att); }
  .titre-activation-premium::after { content:""; height:1px; background:var(--bordure); flex:1; }
  .encart-premium-verrouille { display:none; align-items:flex-start; gap:10px; margin:0 0 14px; padding:12px 14px; border:1px solid var(--sable); border-radius:12px; background:var(--carte); }
  .encart-premium-verrouille .texte { flex:1; font-size:12px; line-height:1.4; color:var(--texte-att); }
  .encart-premium-verrouille .texte strong { display:block; color:var(--texte); margin-bottom:2px; }
  .encart-premium-verrouille button { border:none; background:none; padding:0; color:var(--teal-600); font-size:12px; font-weight:900; white-space:nowrap; }
  .modes-paiement-premium { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
  .mode-paiement { text-align:left; padding:12px; border-radius:13px; border:1px solid var(--bordure); background:var(--carte); color:var(--texte); display:flex; flex-direction:column; gap:3px; }
  .mode-paiement strong { font-size:13px; font-weight:900; }
  .mode-paiement small { font-size:11px; color:var(--texte-att); line-height:1.35; }
  .mode-paiement.actif { border-color:var(--teal-600); box-shadow:0 0 0 2px var(--teal-100); background:var(--fond-elevé); }
  .fin-premium { font-size:12px; font-weight:800; color:var(--teal-600); line-height:1.4; margin:-6px 0 14px; }
  .fin-premium:empty { display:none; }
  .aide-premium { font-size:12px; color:var(--texte-att); line-height:1.45; margin:-4px 0 14px; }
  .bandeau-paiement { display:none; align-items:flex-start; gap:10px; margin:12px 22px 0; padding:12px 14px; border-radius:12px; font-size:13px; font-weight:800; line-height:1.4; }
  .bandeau-paiement.visible { display:flex; }
  .bandeau-paiement .texte { flex:1; }
  .bandeau-paiement .fermer { border:none; background:none; font-size:20px; line-height:1; color:inherit; padding:0 2px; }
  .bandeau-paiement.attente { background:var(--fond-elevé); border:1px solid var(--sable); color:var(--texte); }
  .bandeau-paiement.ok { background:#E3F1EE; border:1px solid var(--teal-600); color:var(--teal-900); }
  html[data-theme="dark"] .bandeau-paiement.ok { background:#203A34; color:var(--teal-100); }
  .destination-paiement { background:var(--ivoire); border:1px dashed var(--sable); border-radius:13px; padding:14px; margin-bottom:16px; }
  .destination-paiement .reseau { font-size:11px; text-transform:uppercase; color:var(--texte-att); font-weight:900; }
  .destination-paiement .numero { font-family:'Fraunces',serif; font-size:24px; margin:3px 0; }
  .destination-paiement .nom { font-size:12px; color:var(--texte-att); }
  .ligne-actions-premium { display:flex; gap:10px; margin-top:16px; }
  .ligne-actions-premium button { flex:1; }

  .grille-champs-produit { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
  .grille-champs-produit .pleine { grid-column:1 / -1; }
  .separateur-formulaire { display:flex; align-items:center; gap:10px; margin:5px 0 15px; color:var(--texte-att); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
  .separateur-formulaire::after { content:""; height:1px; background:var(--bordure); flex:1; }

  .recherche-stock { padding: 0 22px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
  .recherche-stock input { min-width:0; }

  .quota-produits { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--bordure); border-radius:11px; background:var(--fond-elevé); color:var(--texte-att); font-size:12px; font-weight:800; }
  .quota-produits .compteur { color:var(--teal-600); font-size:13px; white-space:nowrap; }
  .quota-produits.limite { border-color:var(--sable); background:var(--carte); }
  .quota-produits.limite .compteur { color:var(--urgent); }

  .liste-produits { padding: 0 22px; display: flex; flex-direction: column; gap: 10px; }
  .carte-produit { display: flex; align-items: center; justify-content: space-between; background: var(--carte); border-radius: 14px; padding: 13px 14px; border-left: 4px solid var(--teal-600); }
  .carte-produit.stock-bas { border-left-color: var(--sable); }
  .carte-produit.stock-epuise { border-left-color: var(--urgent); }
  .carte-produit .nom { font-size: 15px; font-weight: 800; color: var(--texte); }
  .carte-produit .details { font-size: 12px; color: var(--texte-att); margin-top: 2px; }
  .carte-produit .quantite { font-family: 'Fraunces', serif; font-size: 20px; color: var(--texte); }

  .bouton-ajouter-produit {
    position: static; min-height:46px; padding:0 17px; border-radius:12px; background:var(--teal-900);
    border:none; color:#FFF; font-size:14px; font-weight:900; white-space:nowrap; box-shadow:0 5px 14px rgba(30,75,71,0.22);
  }

  /* --- Modale produit --- */
  #fond-modale-produit { display: none; position: fixed; inset: 0; background: rgba(30,42,40,0.5); align-items: flex-end; justify-content: center; padding: 0; z-index: 20; }
  #fond-modale-produit.visible { display: flex; }
  #fond-modale-type { display: none; position: fixed; inset: 0; background: rgba(30,42,40,0.5); align-items: flex-end; justify-content: center; z-index: 20; }
  #fond-modale-type.visible { display: flex; }
  #modale-type { background: var(--carte); border-radius: 20px 20px 0 0; padding: 26px; max-width: 480px; width: 100%; }
  #modale-type p.aide { font-size: 13px; color: var(--texte-att); margin: 4px 0 16px; line-height: 1.45; }
  .lien-type-activite { display:block; margin-bottom:10px; }
  #modale-produit { background: var(--carte); border-radius: 20px 20px 0 0; padding: 26px; max-width: 480px; width: 100%; max-height: 88vh; overflow-y: auto; }
  #modale-produit h2 { font-size: 19px; margin-bottom: 18px; }

  .barre-modale-produit { display: flex; gap: 10px; margin-top: 18px; }
  .barre-modale-produit button { flex: 1; }

  .bloc-assistant-prix { background: var(--ivoire); border: 1px dashed var(--bordure); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
  .entete-assistant-prix { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--teal-600); margin-bottom: 10px; }
  .bloc-assistant-prix .champ:last-of-type { margin-bottom: 12px; }

  /* --- Fiche produit (historique + Modifier) --- */
  #fond-fiche-produit { display: none; position: fixed; inset: 0; background: rgba(30,42,40,0.5); align-items: flex-end; justify-content: center; padding: 0; z-index: 19; }
  #fond-fiche-produit.visible { display: flex; }
  #fiche-produit { background: var(--carte); border-radius: 20px 20px 0 0; padding: 24px 22px 22px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; }
  .fiche-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
  .fiche-identite { min-width: 0; }
  .fiche-entete h2 { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
  .fiche-sous-titre { font-size: 12px; color: var(--texte-att); margin-top: 4px; }
  .fiche-sous-titre:empty { display: none; }
  .btn-modifier-fiche { flex-shrink: 0; min-height: 42px; padding: 0 16px; border-radius: 12px; border: none; background: var(--teal-900); color: #fff; font-size: 14px; font-weight: 900; }
  .fiche-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .fiche-chiffre { background: var(--fond-elevé); border: 1px solid var(--bordure); border-radius: 12px; padding: 11px 12px; min-width: 0; }
  .fiche-chiffre .valeur { font-family: 'Fraunces', serif; font-size: 18px; color: var(--texte); overflow-wrap: anywhere; }
  .fiche-chiffre .label { font-size: 11px; color: var(--texte-att); margin-top: 2px; }
  .fiche-chiffre.principal { background: var(--teal-900); border-color: var(--teal-900); }
  .fiche-chiffre.principal .valeur { color: #fff; }
  .fiche-chiffre.principal .label { color: var(--teal-100); }
  .fiche-chiffre.principal.epuise { background: var(--urgent); border-color: var(--urgent); }
  .fiche-chiffre.principal.epuise .label { color: #fff; }
  #fiche-produit .performance-produit { margin: 0 0 18px; }
  .fiche-historique { display: flex; flex-direction: column; }
  .ligne-historique-produit { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bordure); }
  .ligne-historique-produit:last-child { border-bottom: none; }
  .ligne-historique-produit .gauche { min-width: 0; }
  .ligne-historique-produit .libelle { font-size: 14px; font-weight: 800; color: var(--texte); }
  .ligne-historique-produit .quand { font-size: 11px; color: var(--texte-att); margin-top: 2px; overflow-wrap: anywhere; }
  .ligne-historique-produit .droite { text-align: right; flex-shrink: 0; }
  .ligne-historique-produit .delta { font-size: 16px; font-weight: 900; }
  .ligne-historique-produit .delta.entree { color: var(--teal-600); }
  .ligne-historique-produit .delta.sortie { color: var(--urgent); }
  .ligne-historique-produit .delta.neutre { color: var(--texte-att); }
  .ligne-historique-produit .montant { font-size: 11px; color: var(--texte-att); margin-top: 1px; }
  .carte-produit { cursor: pointer; }
  #fiche-note-archives { margin-top: 10px; }

  /* --- Scanner, outils du stock --- */
  [hidden] { display: none !important; }
  .btn-scanner { min-width: 46px; min-height: 46px; border-radius: 12px; border: 1px solid var(--bordure); background: var(--carte); color: var(--teal-900); display: flex; align-items: center; justify-content: center; padding: 0 12px; }
  .outils-stock { grid-column: 1 / -1; display: flex; gap: 8px; }
  .btn-outil-stock { flex: 1; min-height: 42px; border-radius: 11px; border: 1px solid var(--bordure); background: var(--carte); color: var(--teal-900); font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 7px; }
  .btn-outil-stock.verrouille span::after { content: '  🔒'; font-size: 11px; }
  .champ-avec-bouton { display: flex; gap: 8px; }
  .champ-avec-bouton input { flex: 1; min-width: 0; }

  #fond-scanner { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(15,25,22,.8); align-items: flex-end; justify-content: center; }
  #fond-scanner.visible { display: flex; }
  #modale-scanner { width: 100%; max-width: 480px; background: var(--carte); border-radius: 22px 22px 0 0; padding: 22px; }
  #modale-scanner h2 { font-size: 19px; margin-bottom: 14px; }
  .cadre-scanner { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; margin-bottom: 12px; }
  .cadre-scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cadre-scanner .viseur { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 3px solid var(--sable); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); }
  .scanner-etat { font-size: 13px; font-weight: 800; color: var(--texte-att); min-height: 20px; margin-bottom: 12px; }
  .scanner-etat.etat-ok { color: var(--teal-600); }
  .scanner-etat.etat-erreur { color: var(--urgent); }
  .scanner-saisie { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 12px; }
  .scanner-saisie .btn-secondaire { width: auto; padding: 0 18px; }

  /* --- Inventaire --- */
  #vue-inventaire { padding-bottom: 150px; }
  .intro-inventaire { font-size: 13px; color: var(--texte-att); line-height: 1.45; padding: 0 22px 14px; }
  .liste-inventaire { padding: 0 22px; display: flex; flex-direction: column; gap: 8px; }
  .ligne-inventaire { display: grid; grid-template-columns: minmax(0,1fr) 96px; gap: 12px; align-items: center; background: var(--carte); border-radius: 13px; padding: 11px 12px 11px 14px; border-left: 4px solid var(--bordure); }
  .ligne-inventaire.compte { border-left-color: var(--teal-600); }
  .ligne-inventaire .nom { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
  .ligne-inventaire .theorique { font-size: 12px; color: var(--texte-att); margin-top: 2px; }
  .ligne-inventaire .ecart { font-size: 12px; font-weight: 900; margin-top: 2px; }
  .ligne-inventaire .ecart.juste { color: var(--teal-600); }
  .ligne-inventaire .ecart.plus { color: var(--sable); }
  .ligne-inventaire .ecart.moins { color: var(--urgent); }
  .ligne-inventaire input { text-align: center; font-weight: 800; padding: 10px 8px; }
  .barre-inventaire { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; background: var(--carte); border-top: 1px solid var(--bordure); padding: 12px 22px 20px; z-index: 5; }
  .barre-inventaire .resume { font-size: 12px; font-weight: 800; color: var(--texte-att); margin-bottom: 10px; line-height: 1.4; }
  .barre-inventaire .actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; }
  .barre-inventaire .btn-secondaire { width: auto; padding: 14px 16px; }

  /* --- Modale mot de passe oublie --- */
  #fond-modale-mdp { display: none; position: fixed; inset: 0; background: rgba(30,42,40,0.5); align-items: flex-end; justify-content: center; padding: 0; z-index: 25; }
  #fond-modale-mdp.visible { display: flex; }
  #modale-mdp { background: var(--carte); border-radius: 20px 20px 0 0; padding: 26px; max-width: 480px; width: 100%; }
  #modale-mdp h2 { font-size: 18px; margin-bottom: 6px; }
  #modale-mdp .explication { font-size: 13px; color: var(--texte-att); margin-bottom: 18px; }
  #modale-mdp .confirmation { display: none; background: #E3F1EE; color: var(--teal-900); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
  #modale-mdp .confirmation.visible { display: block; }
  .barre-modale-mdp { display: flex; gap: 10px; margin-top: 6px; }
  .barre-modale-mdp button { flex: 1; }

  /* --- Historique / Stats --- */
  #vue-historique { padding: 0 22px 40px; }
  .nav-mois { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
  .nav-mois button { background: var(--carte); border: 1px solid var(--bordure); border-radius: 50%; width: 36px; height: 36px; font-size: 16px; color: var(--teal-900); }
  .nav-mois .label-mois { font-family: 'Fraunces', serif; font-size: 17px; text-transform: capitalize; }

  .cartes-historique { display: flex; gap: 10px; margin-bottom: 22px; }

  .bloc-titre-section { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-att); margin-bottom: 10px; }

  .liste-top-produits { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
  .ligne-top-produit { display: flex; justify-content: space-between; align-items: center; background: var(--carte); border-radius: 12px; padding: 11px 14px; }
  .ligne-top-produit .nom-top { font-size: 14px; font-weight: 700; }
  .ligne-top-produit .qte-top { font-size: 12px; color: var(--texte-att); }
  .ligne-top-produit .montant-top { font-size: 14px; font-weight: 800; color: var(--teal-900); }

  .graphique-tendance { display: flex; align-items: flex-end; gap: 8px; background: var(--carte); border-radius: 14px; padding: 16px; height: 120px; }
  .barre-tendance { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
  .barre-tendance .tige { width: 100%; background: var(--teal-100); border-radius: 4px 4px 0 0; min-height: 3px; }
  .barre-tendance.mois-actif .tige { background: var(--teal-900); }
  .barre-tendance.negatif .tige { background: var(--urgent); opacity: .55; }
  .barre-tendance.negatif.mois-actif .tige { opacity: 1; }
  .barre-tendance .etiquette { font-size: 10px; color: var(--texte-att); }

  /* --- Aide --- */
  .boutons-entete { display:flex; gap:8px; flex-shrink:0; }
  .lien-aide-connexion { display:block; margin:18px auto 0; }
  #vue-aide { padding: 0 22px 40px; }
  .intro-aide { font-size:13px; color:var(--texte-att); margin:-4px 0 14px; }
  #aide-recherche { width:100%; margin-bottom:18px; padding:12px 14px; border-radius:12px; border:1px solid var(--bordure); background:var(--carte); color:var(--texte); font-size:16px; font-family:'Nunito',sans-serif; }
  .section-aide { margin-bottom:18px; }
  .section-aide h3 { font-family:'Nunito',sans-serif; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; color:var(--texte-att); margin-bottom:8px; }
  .section-aide details { background:var(--carte); border:1px solid var(--bordure); border-radius:12px; margin-bottom:8px; }
  .section-aide summary { cursor:pointer; padding:13px 40px 13px 14px; font-size:14px; font-weight:800; color:var(--texte); list-style:none; position:relative; }
  .section-aide summary::-webkit-details-marker { display:none; }
  .section-aide summary::after { content:'+'; position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:20px; font-weight:700; color:var(--teal-600); }
  .section-aide details[open] summary::after { content:'−'; }
  .section-aide details p { font-size:13px; line-height:1.55; color:var(--texte); padding:0 14px 12px; }
  .contact-aide { border-top:1px solid var(--bordure); padding-top:18px; margin-top:8px; }
  .titre-contact-aide { font-size:14px; font-weight:900; margin-bottom:12px; }
  .contact-aide .btn-secondaire { margin-top:4px; }
  @media (max-width: 380px) { .boutons-entete { flex-direction:column; } }

  /* --- Suggestion --- */
  #vue-suggestion { padding: 0 22px 40px; }
  #vue-suggestion textarea {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--bordure); background: var(--carte); font-size: 16px;
    font-family: 'Nunito', sans-serif; min-height: 110px; resize: vertical;
  }
  .confirmation-suggestion { display: none; background: #E3F1EE; color: var(--teal-900); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
  .confirmation-suggestion.visible { display: block; }

  /* --- Outils Premium : rapports, credits, equipe et boutiques --- */
  .outils-premium-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
  .outil-premium { min-height:62px; padding:10px; border:1px solid var(--bordure); border-radius:12px; background:var(--fond-elevé); color:var(--texte); text-align:left; }
  .outil-premium .nom { display:block; font-size:12px; font-weight:900; }
  .outil-premium .detail { display:block; margin-top:2px; font-size:10px; line-height:1.3; color:var(--texte-att); }
  .outil-premium.verrouille .nom::after { content:'  🔒'; font-size:10px; }

  .vue-outil { padding:0 22px 42px; }
  .barre-outil { display:flex; gap:8px; margin-bottom:16px; }
  .barre-outil > * { flex:1; }
  .grille-indicateurs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:20px; }
  .indicateur { padding:13px; border:1px solid var(--bordure); border-radius:13px; background:var(--carte); }
  .indicateur .libelle { font-size:10px; color:var(--texte-att); }
  .indicateur .valeur { margin-top:4px; font-family:'Fraunces',serif; font-size:19px; color:var(--texte); overflow-wrap:anywhere; }
  .indicateur.positif { background:var(--teal-900); border-color:var(--teal-900); }
  .indicateur.positif .libelle { color:var(--teal-100); }
  .indicateur.positif .valeur { color:#fff; }
  .liste-metier { display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
  .carte-metier { padding:13px 14px; border:1px solid var(--bordure); border-radius:13px; background:var(--carte); }
  .carte-metier-haut { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .carte-metier .titre { font-size:14px; font-weight:900; color:var(--texte); }
  .carte-metier .sous-titre { margin-top:2px; font-size:11px; color:var(--texte-att); }
  .carte-metier .montant { font-family:'Fraunces',serif; font-size:17px; white-space:nowrap; }
  .carte-metier .montant.perte { color:var(--urgent); }
  .carte-metier .montant.inconnu { font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; color:var(--texte-att); }
  .carte-metier .sous-titre .alerte-cout { color:var(--urgent); font-weight:800; }
  .barre-part { height:6px; border-radius:999px; background:var(--fond-elevé); margin-top:10px; overflow:hidden; }
  .barre-part > span { display:block; height:100%; border-radius:999px; background:var(--teal-600); }
  .carte-metier.cliquable { cursor:pointer; }
  .choix-tri { display:flex; gap:6px; margin:-2px 0 12px; }
  .choix-tri button { min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--bordure); background:var(--carte); color:var(--texte-att); font-size:13px; font-weight:800; }
  .choix-tri button.actif { background:var(--teal-900); border-color:var(--teal-900); color:#fff; }
  .performance-produit { margin:-6px 0 18px; padding:12px 14px; border-radius:12px; background:var(--fond-elevé); border-left:4px solid var(--teal-600); }
  .performance-produit.perte { border-left-color:var(--urgent); }
  .performance-produit.inconnu { border-left-color:var(--sable); }
  .performance-produit .titre-perf { font-size:14px; font-weight:900; color:var(--texte); }
  .performance-produit .detail-perf { font-size:12px; color:var(--texte-att); margin-top:3px; line-height:1.4; }
  .performance-produit.perte .detail-perf { color:var(--urgent); font-weight:800; }
  .performance-produit .lien-perf { padding:6px 0 0; }
  .carte-produit .ventes-30j { color:var(--teal-600); font-weight:800; }
  .actions-carte { display:flex; gap:8px; margin-top:11px; }
  .actions-carte button { flex:1; min-height:38px; border-radius:10px; border:1px solid var(--bordure); background:var(--fond-elevé); color:var(--texte); font-size:11px; font-weight:900; }
  .actions-carte button.principal { background:var(--teal-900); color:#fff; border-color:var(--teal-900); }
  .actions-carte button.danger { flex:0 0 auto; padding:0 12px; color:var(--urgent); background:var(--carte); }
  .formulaire-outil { display:none; padding:15px; border:1px solid var(--bordure); border-radius:14px; background:var(--carte); margin-bottom:17px; }
  .formulaire-outil.visible { display:block; }
  .aide-employe { font-size:12px; color:var(--texte-att); line-height:1.45; margin:-4px 0 12px; }
  .identifiants-employe { background:var(--teal-100); border-radius:12px; padding:12px; margin:10px 0; font-size:13px; line-height:1.6; word-break:break-all; }
  .champ.champ-case { display:flex; align-items:center; gap:10px; }
  .champ.champ-case label { margin:0; order:2; }
  .champ.champ-case input { width:auto; order:1; }
  .permissions-employe { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
  .permission-employe { display:flex; align-items:center; gap:8px; padding:9px; border:1px solid var(--bordure); border-radius:10px; font-size:11px; font-weight:800; color:var(--texte); }
  .boutique-active { border-color:var(--teal-600); box-shadow:0 0 0 2px var(--teal-100); }
  .badge-etat { display:inline-flex; padding:4px 8px; border-radius:999px; background:var(--fond-elevé); color:var(--texte-att); font-size:10px; font-weight:900; }
  .session-employe { display:none; padding:9px 12px; background:var(--sable); color:#2B2418; font-size:11px; font-weight:900; text-align:center; }
  .session-employe.visible { display:block; }

  #fond-rappel { display:none; position:fixed; inset:0; z-index:46; background:rgba(15,25,22,.68); align-items:flex-end; justify-content:center; }
  #fond-rappel.visible { display:flex; }
  #modale-rappel { width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--carte); border-radius:22px 22px 0 0; padding:24px; }
  #modale-rappel h2 { font-size:20px; margin-bottom:4px; }
  #modale-rappel .intro { font-size:12px; color:var(--texte-att); line-height:1.45; margin-bottom:14px; }
  #rappel-message { min-height:170px; resize:vertical; line-height:1.5; }
  .rappel-avertissement { display:none; font-size:12px; font-weight:800; color:var(--urgent); background:var(--fond-elevé); border-left:3px solid var(--urgent); border-radius:0 10px 10px 0; padding:9px 12px; margin-bottom:14px; }
  .rappel-avertissement.visible { display:block; }
  .rappel-mots { font-size:11px; color:var(--texte-att); line-height:1.5; margin:-8px 0 14px; }
  .rappel-mots code { background:var(--fond-elevé); border:1px solid var(--bordure); border-radius:5px; padding:0 4px; font-size:10px; }
  .rappel-reglages { border-top:1px solid var(--bordure); margin-top:6px; padding-top:14px; }
  .rappel-reglages summary { font-size:12px; font-weight:900; color:var(--teal-600); cursor:pointer; margin-bottom:12px; }
  .rappel-note { font-size:11px; color:var(--texte-att); line-height:1.4; margin-top:10px; }
  #fond-confirmation-rappel { display:none; position:fixed; inset:0; z-index:47; background:rgba(15,25,22,.68); align-items:center; justify-content:center; padding:22px; }
  #fond-confirmation-rappel.visible { display:flex; }
  #modale-confirmation-rappel { width:100%; max-width:400px; background:var(--carte); border-radius:22px; padding:24px; text-align:center; }
  #modale-confirmation-rappel h2 { font-size:19px; margin-bottom:6px; }
  #modale-confirmation-rappel p { font-size:13px; color:var(--texte-att); line-height:1.45; margin-bottom:18px; }
  #modale-confirmation-rappel .ligne-actions-premium { flex-direction:column-reverse; }
  .dernier-rappel { display:block; margin-top:3px; font-size:11px; color:var(--texte-att); }
  #fond-recu { display:none; position:fixed; inset:0; z-index:45; background:rgba(15,25,22,.68); align-items:flex-end; justify-content:center; }
  #fond-recu.visible { display:flex; }
  #modale-recu { width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--carte); border-radius:22px 22px 0 0; padding:24px; }
  .recu-apercu { border:1px dashed var(--bordure); border-radius:14px; padding:17px; background:var(--fond-elevé); }
  .recu-entete { text-align:center; padding-bottom:12px; border-bottom:1px dashed var(--bordure); }
  .recu-entete h3 { font-size:22px; }
  .recu-ligne { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:12px; border-bottom:1px solid var(--bordure); }
  .recu-total { display:flex; justify-content:space-between; gap:12px; padding-top:12px; font-size:17px; font-weight:900; }
  .champs-client-vente { padding:0 22px 10px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .choix-paiement, .clients-recents { grid-column:1 / -1; }
  .choix-paiement { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--fond-elevé); border:1px solid var(--bordure); border-radius:14px; padding:4px; }
  .choix-paiement button { min-height:46px; border:none; border-radius:10px; background:none; font-size:15px; font-weight:900; color:var(--texte-att); }
  .choix-paiement button.actif { background:var(--teal-900); color:#fff; }
  .choix-paiement button.verrouille::after { content:' 🔒'; font-size:11px; }
  .clients-recents { display:none; gap:8px; overflow-x:auto; padding:2px 0 4px; }
  .clients-recents.visible { display:flex; }
  .clients-recents button { flex-shrink:0; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--bordure); background:var(--carte); color:var(--texte); font-size:13px; font-weight:800; white-space:nowrap; }
  .clients-recents button.choisi { border-color:var(--teal-600); box-shadow:0 0 0 2px var(--teal-100); }
  .toast-kalmo { position:fixed; left:50%; bottom:22px; transform:translate(-50%, 30px); opacity:0; pointer-events:none; z-index:60; width:calc(100% - 32px); max-width:440px; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--teal-900); color:#fff; box-shadow:var(--ombre-forte); transition:opacity .2s, transform .2s; }
  .toast-kalmo.visible { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
  .toast-kalmo .texte { flex:1; font-size:14px; font-weight:800; }
  .toast-kalmo .action { display:none; border:none; background:rgba(255,255,255,.18); color:#fff; border-radius:10px; min-height:38px; padding:0 14px; font-size:13px; font-weight:900; }
  .toast-kalmo .action.visible { display:block; }
  @media (prefers-reduced-motion: reduce) { .toast-kalmo { transition:none; } }
  .champs-client-vente .echeance-vente { grid-column:1 / -1; display:none; }
  .champs-client-vente .echeance-vente.visible { display:block; }
  .champs-client-vente .echeance-vente label { margin-bottom:4px; }

  @media print {
    body * { visibility:hidden !important; }
    #recu-apercu, #recu-apercu * { visibility:visible !important; }
    #recu-apercu { position:absolute; inset:0 auto auto 0; width:100%; border:none; background:#fff; color:#000; }
  }

  .liste-suggestions-envoyees { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
  .carte-suggestion-envoyee { background: var(--carte); border-radius: 12px; padding: 12px 14px; }
  .carte-suggestion-envoyee .texte-suggestion { font-size: 13px; color: var(--texte); }
  .carte-suggestion-envoyee .meta-suggestion { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--texte-att); }

  /* --- Dernieres operations (correction rapide) --- */
  .carte-operation { display: flex; align-items: center; justify-content: space-between; background: var(--carte); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; }
  .carte-operation .details-operation { display: flex; flex-direction: column; }
  .carte-operation .libelle-operation { font-size: 14px; font-weight: 700; }
  .carte-operation .heure-operation { font-size: 11px; color: var(--texte-att); }
  .carte-operation .montant-operation { font-size: 14px; font-weight: 800; }
  .carte-operation .montant-operation.entree { color: var(--teal-900); }
  .carte-operation .montant-operation.sortie { color: var(--urgent); }
  .carte-operation .btn-annuler-operation { background: none; border: none; font-size: 11px; font-weight: 800; color: var(--urgent); padding: 0; margin-top: 2px; }

  @media (min-width: 900px) {
    body { display:block; background:var(--fond-elevé); }
    #app { max-width:1440px; min-height:100vh; margin:0 auto; background:transparent; padding:28px 34px; }
    .ecran { min-height:calc(100vh - 56px); }
    #vue-auth, .vue-pin, #vue-bienvenue { width:520px; min-height:calc(100vh - 56px); margin:auto; border-radius:28px; box-shadow:var(--ombre); }

    #vue-dashboard.actif { display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas:"offline offline" "paiement paiement" "hero finance" "alerts operations" "actions operations" "links operations"; align-content:start; gap:18px 24px; }
    #vue-dashboard .bandeau-paiement { grid-area:paiement; margin:0; }
    #vue-dashboard .bandeau-paiement:not(.visible) { display:none; }
    #vue-dashboard .barre-hors-ligne { grid-area:offline; }
    #vue-dashboard .entete-dash { grid-area:hero; border-radius:24px; padding:28px 30px; min-height:240px; box-shadow:var(--ombre-forte); }
    #vue-dashboard .resume-financier { grid-area:finance; padding:0; }
    #vue-dashboard .dash-alertes-section { grid-area:alerts; }
    #vue-dashboard .dash-operations-section { grid-area:operations; }
    #vue-dashboard .actions-rapides { grid-area:actions; padding:0 22px; }
    #vue-dashboard .dash-liens-section { grid-area:links; }
    #vue-dashboard .section-dash { background:var(--carte); border:1px solid var(--bordure); border-radius:20px; box-shadow:var(--ombre); }
    #vue-dashboard .dash-operations-section { min-height:420px; }
    .grille-finances { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .carte-finance { min-height:104px; padding:18px; }
    .carte-finance .montant { font-size:23px; }

    #vue-stock, #vue-vente, #vue-depense, #vue-historique, #vue-comptage, #vue-alertes, #vue-suggestion, #vue-rapport, #vue-credits, #vue-equipe, #vue-boutiques, #vue-inventaire, #vue-aide { width:100%; max-width:1180px; margin:0 auto; background:var(--ivoire); border:1px solid var(--bordure); border-radius:24px; box-shadow:var(--ombre); overflow:hidden; }
    .entete-stock { padding:28px 34px 20px; }
    .cartes-valorisation { padding:0 34px 22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
    .carte-valorisation { padding:18px 20px; border:1px solid var(--bordure); }
    .carte-valorisation .valeur { font-size:26px; }
    .recherche-stock { padding:0 34px 18px; }
    .liste-produits, .liste-vente { padding:0 34px 34px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
    .carte-produit, .ligne-vente { min-height:78px; box-shadow:0 4px 12px rgba(30,42,40,.04); }
    #vue-depense, #vue-comptage, #vue-suggestion, #vue-aide { max-width:860px; padding-left:80px !important; padding-right:80px !important; }
    #modale-produit { max-width:760px; border-radius:24px; margin:auto; padding:30px 34px; }
    #fond-modale-produit { align-items:center; padding:30px; }
    #fond-fiche-produit { align-items:center; padding:30px; }
    #fiche-produit { max-width:640px; border-radius:24px; padding:30px 34px; }
    #fond-modale-premium { align-items:center; padding:30px; }
    #modale-premium { border-radius:24px; }
    #fond-recu { align-items:center; padding:30px; }
    #fond-scanner { align-items:center; padding:30px; }
    #modale-scanner { border-radius:24px; }
    .intro-inventaire { padding:0 34px 16px; }
    .liste-inventaire { padding:0 34px 34px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .barre-inventaire { left:50%; right:auto; transform:translateX(-50%); width:min(760px, calc(100% - 80px)); max-width:760px; border:1px solid var(--bordure); border-radius:18px 18px 0 0; box-shadow:var(--ombre-forte); }
    #fond-rappel { align-items:center; padding:30px; }
    #modale-rappel { border-radius:24px; }
    #modale-recu { border-radius:24px; }
    .barre-total-vente { left:50%; transform:translateX(-50%); width:min(760px, calc(100% - 80px)); border:1px solid var(--bordure); border-radius:18px 18px 0 0; box-shadow:var(--ombre-forte); }
  }

  @media (max-width: 380px) {
    .fiche-chiffres { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .fiche-chiffre.principal { grid-column:1 / -1; }
  }

  @media (max-width: 520px) {
    .grille-champs-produit { grid-template-columns:1fr; }
    .grille-champs-produit .pleine { grid-column:auto; }
    .cartes-valorisation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cartes-valorisation .carte-valorisation:last-child { grid-column:1 / -1; }
    .recherche-stock { grid-template-columns:1fr; }
    .recherche-stock.avec-scanner { grid-template-columns:minmax(0,1fr) auto; }
    .bouton-ajouter-produit { width:100%; }
    .quota-produits { grid-column:1; }
    .champs-client-vente { grid-template-columns:1fr; }
    .choix-paiement, .clients-recents { grid-column:1; }
    .champs-client-vente .echeance-vente { grid-column:1; }
  }

  /* --- Vente --- */
  #vue-vente { padding-bottom: 110px; }
  .liste-vente { padding: 0 22px; display: flex; flex-direction: column; gap: 10px; }
  .ligne-vente { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; background: var(--carte); border-radius: 14px; padding: 12px 14px; border: 1px solid transparent; cursor: pointer; user-select: none; }
  .ligne-vente:active { background: var(--fond-elevé); }
  .ligne-vente.epuise { opacity: .45; cursor: default; }
  .ligne-vente .badge-top { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--teal-100); color:var(--teal-900); font-size:10px; font-weight:900; vertical-align:2px; }
  .ligne-vente.dans-panier { border-color: var(--teal-900); }
  .ligne-vente .nom { font-size: 15px; font-weight: 800; }
  .ligne-vente .prix-unite { font-size: 12px; color: var(--texte-att); margin-top: 2px; }
  .ligne-vente .lien-ajouter { flex-shrink: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 22px; font-weight: 900; color: var(--teal-900); background: var(--teal-100); }

  .stepper { display: flex; align-items: center; gap: 10px; }
  .stepper button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--ivoire); font-size: 20px; font-weight: 800; color: var(--teal-900); }
  .stepper button.pleine { background: var(--teal-900); border: none; color: #FFF; }
  .stepper .valeur { font-size: 18px; font-weight: 900; min-width: 22px; text-align: center; }

  .barre-total-vente {
    position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
    background: var(--carte); border-top: 1px solid var(--bordure);
    padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 10px;
  }
  .barre-total-vente .ligne-total { display: flex; justify-content: space-between; align-items: baseline; }
  .barre-total-vente .ligne-total .label { font-size: 13px; color: var(--texte-att); font-weight: 700; }
  .barre-total-vente .ligne-total .montant { font-family: 'Fraunces', serif; font-size: 24px; }

  /* --- Depense --- */
  #vue-depense { padding: 0 22px 40px; }
  .onglets-depense { display: flex; gap: 8px; margin: 4px 0 22px; background: #E9E5D8; border-radius: 12px; padding: 4px; }
  .onglet-depense { flex: 1; text-align: center; padding: 11px 10px; border-radius: 9px; border: none; background: none; font-weight: 800; font-size: 14px; color: var(--texte); opacity:.82; }
  .onglet-depense.actif { background: var(--carte); color: var(--teal-900); opacity:1; box-shadow:0 2px 8px rgba(30,42,40,.08); }
  .bloc-depense { display: none; }
  .bloc-depense.actif { display: block; }

  /* --- Comptage de caisse --- */
  #vue-comptage { padding: 0 22px 40px; }
  .carte-solde-theorique { background: var(--teal-900); border-radius: 16px; padding: 22px; text-align: center; margin: 4px 0 22px; }
  .carte-solde-theorique .valeur { font-family: 'Fraunces', serif; font-size: 34px; color: #FFF; }
  .carte-solde-theorique .label { font-size: 12px; color: var(--teal-100); margin-top: 4px; }

  .resultat-comptage { display: none; border-radius: 14px; padding: 16px; margin-top: 16px; text-align: center; }
  .resultat-comptage.visible { display: block; }
  .resultat-comptage.ok { background: #E3F1EE; }
  .resultat-comptage.ecart { background: #FBEDE7; }
  .resultat-comptage .titre-resultat { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
  .resultat-comptage.ok .titre-resultat { color: var(--teal-900); }
  .resultat-comptage.ecart .titre-resultat { color: var(--urgent); }
  .resultat-comptage .detail-resultat { font-size: 13px; color: var(--texte-att); }

  /* --- Alertes (ecran dedie) --- */
  #vue-alertes { padding: 0 22px 40px; }
  .onglets-alertes { display: flex; gap: 8px; margin: 4px 0 18px; background: #E9E5D8; border-radius: 12px; padding: 4px; }
  .onglet-alerte { flex: 1; text-align: center; padding: 11px 10px; border-radius: 9px; border: none; background: none; font-weight: 800; font-size: 14px; color: var(--texte); opacity:.82; }
  .onglet-alerte.actif { background: var(--carte); color: var(--teal-900); opacity:1; box-shadow:0 2px 8px rgba(30,42,40,.08); }

  .liste-alertes-complete { display: flex; flex-direction: column; gap: 10px; }
  .carte-alerte-complete { background: var(--carte); border-radius: 12px; padding: 13px 14px; }
  .carte-alerte-complete.urgente { border-left: 4px solid var(--urgent); }
  .carte-alerte-complete.importante { border-left: 4px solid var(--sable); }
  .carte-alerte-complete .haut-alerte { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
  .carte-alerte-complete .puce { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
  .carte-alerte-complete.urgente .puce { background: var(--urgent); }
  .carte-alerte-complete.importante .puce { background: var(--sable); }
  .carte-alerte-complete .texte-alerte { font-size: 14px; font-weight: 700; }
  .carte-alerte-complete .date-alerte { font-size: 11px; color: var(--texte-att); margin-top: 2px; }
  .carte-alerte-complete .btn-resoudre { margin-top: 10px; background: none; border: none; color: var(--teal-600); font-size: 12px; font-weight: 800; padding: 0; }

  html[data-theme="dark"] .onglets-alertes { background:#26332F; }
  html[data-theme="dark"] .confirmation-suggestion,
  html[data-theme="dark"] .resultat-comptage.ok { background:#203A34; }
  html[data-theme="dark"] .resultat-comptage.ecart { background:#3B2924; }
  html[data-theme="dark"] .retour svg { stroke:var(--texte); }
  html[data-theme="dark"] #vue-auth .entete h1 { color:var(--teal-600); }
  html[data-theme="dark"] .btn-secondaire,
  html[data-theme="dark"] .lien-discret,
  html[data-theme="dark"] .onglet.actif,
  html[data-theme="dark"] .onglet-depense.actif,
  html[data-theme="dark"] .onglet-alerte.actif,
  html[data-theme="dark"] .ligne-vente .badge-top,
  html[data-theme="dark"] .ligne-top-produit .montant-top,
  html[data-theme="dark"] .carte-operation .montant-operation.entree,
  html[data-theme="dark"] .stepper button,
  html[data-theme="dark"] .btn-scanner,
  html[data-theme="dark"] .btn-outil-stock { color:var(--teal-600); }
  html[data-theme="dark"] .stepper button.pleine { color:#fff; }

  /* Ces règles restent en dernier pour que la mise en page PC gagne sur les styles mobiles. */
  @media (min-width: 900px) {
    .liste-produits, .liste-vente { padding:0 34px 34px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-content:start; }
    .barre-total-vente { left:50%; right:auto; transform:translateX(-50%); width:min(760px, calc(100% - 80px)); max-width:760px; border:1px solid var(--bordure); border-radius:18px 18px 0 0; box-shadow:var(--ombre-forte); }
    #vue-historique, #vue-alertes { padding-left:44px; padding-right:44px; }
    #vue-auth .entete h1 { font-size:64px; }
    .marque-kalmo { font-size:36px; }
  }

/* ===================== GARDE+ (mode pharmacie) ===================== */
.btn-garde-outil { border-color: #0b6b4b; color: #0b6b4b; font-weight: 700; }
.garde-encart { background: var(--carte); border: 1px solid var(--bordure); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.garde-encart p { margin: 8px 0; }
.garde-encart.garde-ok { border-color: #0b6b4b; box-shadow: inset 4px 0 0 #0b6b4b; }
.garde-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; word-break: break-all; background: var(--ivoire); border: 1px dashed var(--bordure); border-radius: 10px; padding: 10px; margin: 8px 0; user-select: all; }
.titre-garde { font-size: 16px; margin: 20px 0 6px; }
#vue-garde .champ-case { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#vue-garde .champ-case input { width: 22px; height: 22px; }

/* Champ téléphone : pays devant le numéro (js/pays.js) */
.tel-pays { display: flex; gap: 6px; align-items: stretch; }
.tel-pays select { flex: 0 1 46%; width: auto !important; min-width: 0; max-width: 11.5rem; text-overflow: ellipsis; }
.tel-pays input { flex: 1 1 auto; width: auto !important; min-width: 0; }
.garde-encart.garde-alerte { border-color: #b42318; box-shadow: inset 4px 0 0 #b42318; }

/* Garde+ : choix des produits montrés */
.garde-modes { display: grid; gap: 8px; margin: 6px 0 10px; }
.garde-mode { display: flex; gap: 10px; align-items: flex-start; background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.garde-mode input { margin-top: 3px; flex: none; width: 20px; height: 20px; }
.garde-mode { font-size: 15px; font-weight: 400; color: var(--texte); margin: 0; }
.garde-mode small { font-size: 13px; font-weight: 400; color: var(--texte-att); line-height: 1.35; }
.garde-choix { background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.garde-choix > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.garde-boutons { margin: 4px 0 8px; }
.garde-liste { max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--bordure); }
.garde-cat { padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.garde-ligne { font-size: 15px; font-weight: 400; color: var(--texte); margin: 0;
  display: flex; gap: 10px; align-items: center; padding: 7px 2px; min-height: 40px; overflow-wrap: anywhere; }
.garde-ligne input { flex: none; width: 20px; height: 20px; }
.garde-ligne-cat small { color: var(--texte-att); font-weight: 400; }
.garde-ligne-cat { background: var(--ivoire); border-radius: 8px; padding: 7px 8px; }
.garde-ligne:not(.garde-ligne-cat) { padding-left: 18px; }
.garde-ligne[hidden], .garde-cat[hidden] { display: none; }

/* Modale « Monnaie du commerce » : même présentation que « Type d’activité » */
  #fond-modale-devise { display: none; position: fixed; inset: 0; background: rgba(30,42,40,0.5); align-items: flex-end; justify-content: center; z-index: 20; }
  #fond-modale-devise.visible { display: flex; }
  #modale-devise { background: var(--carte); border-radius: 20px 20px 0 0; padding: 26px; max-width: 480px; width: 100%; }
  #modale-devise p.aide { font-size: 13px; color: var(--texte-att); margin: 4px 0 16px; line-height: 1.45; }