:root {
  --encre: #1B1B1F;
  --texte-2: #4A4D52;
  --texte-3: #6B6E73;
  --fond: #FFFFFF;
  --fond-2: #F5F5F2;
  --ligne: #E4E2DC;
  --ligne-2: #D6DDD8;
  --accent: #1F6B4A;
  --accent-fonce: #164D35;
  --accent-doux: #EEF5F0;
  --jaune: #F2B705;
  --jaune-doux: #FFF4CC;
  --orange: #A34A00;
  --orange-doux: #FFEBD9;
  --danger: #B3261E;
  --danger-doux: #FBE9E7;
  --rose: #A3245C;
  --rayon: 16px;
  --titre: 'Bricolage Grotesque', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--encre); background: var(--fond); line-height: 1.45; }
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(28px, 5vw, 42px); }
h2 { font-size: 24px; }
h3 { font-size: 17px; font-family: Inter, sans-serif; font-weight: 700; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sauter { position: absolute; left: -9999px; top: 8px; background: var(--encre); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 30; }
.sauter:focus { left: 8px; }
.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
body.mode-admin .conteneur { max-width: 1440px; }
main.conteneur { padding-top: 28px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 36px; min-height: 60vh; outline: none; }
.muet { color: var(--texte-2); }
.negatif { color: var(--danger); }
.positif { color: var(--accent-fonce); }
.petit-texte { font-size: 16px !important; font-family: Inter, sans-serif !important; font-weight: 600 !important; }

/* En-tête */
.entete { border-bottom: 1px solid var(--ligne); background: var(--fond); position: sticky; top: 0; z-index: 10; }
.entete-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.logo-icone { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); display: grid; place-items: center; }
.logo-texte { font-family: var(--titre); font-weight: 800; font-size: 19px; }
.logo-version { font-size: 12px; font-weight: 600; color: var(--texte-3); margin-left: 8px; align-self: center; }
.recherche-entete { flex: 1 1 260px; display: flex; gap: 8px; min-width: 0; }
.recherche-entete input { flex: 1; min-width: 0; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-weight: 500; }
.nav a { color: var(--encre); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
#nav-compte { display: inline-flex; gap: 20px; }
.nav .btn-panier { background: var(--encre); color: #fff; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px; font-weight: 600; }
.nav .btn-panier:hover { text-decoration: none; background: #000; color: #fff; }

/* Champs et boutons */
input, select, textarea { font: 500 16px Inter, sans-serif; color: var(--encre); border: 1px solid var(--ligne-2); border-radius: 10px; padding: 0 12px; min-height: 44px; background: #fff; max-width: 100%; }
textarea { padding: 12px; min-height: 96px; resize: vertical; width: 100%; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
label { font-size: 14px; font-weight: 600; color: var(--texte-2); }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label { display: flex; flex-direction: column; gap: 6px; }
.champ input, .champ select { width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; border: none; background: var(--accent); color: #fff; font: 700 15px Inter, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--accent-fonce); color: #fff; }
.btn:disabled { background: #9AA59F; cursor: not-allowed; }
.btn.petit { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-secondaire { background: #fff; color: var(--encre); border: 1px solid var(--ligne-2); }
.btn-secondaire:hover { background: var(--fond-2); color: var(--encre); }
.btn-sombre { background: var(--encre); }
.btn-sombre:hover { background: #000; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #8C1D17; }
.btn-icone { width: 44px; height: 44px; border-radius: 10px; border: none; background: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; }
.btn-icone:hover { background: var(--accent-fonce); }
.lien-btn { background: none; border: none; color: var(--accent); font: 600 14px Inter, sans-serif; cursor: pointer; padding: 8px 0; text-decoration: underline; }
.bouton-fichier { position: relative; overflow: hidden; }
.bouton-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Accueil */
.hero { background: var(--accent-doux); border-radius: 24px; padding: clamp(28px, 6vw, 64px); display: flex; flex-direction: column; gap: 22px; }
.hero .surtitre { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(34px, 6vw, 58px); max-width: 760px; }
.hero .chapo { font-size: 18px; color: var(--texte-2); max-width: 640px; }
.grande-recherche { background: #fff; border: 1px solid var(--ligne-2); border-radius: 16px; padding: 12px; display: flex; flex-wrap: wrap; gap: 12px; box-shadow: 0 8px 24px rgba(27,27,31,.06); }
.grande-recherche .champ { flex: 1 1 220px; padding: 4px 8px; }
.grande-recherche input { border: none; padding: 0; font-size: 18px; }
.grande-recherche .btn { min-height: 56px; }
.section { display: flex; flex-direction: column; gap: 18px; }
.section-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.grille-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.carte-type { border: 1px solid var(--ligne); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--encre); }
.carte-type:hover { border-color: var(--accent); color: var(--encre); }
.carte-type .vignette-mini { width: 48px; height: 48px; border-radius: 12px; background: var(--jaune-doux); display: grid; place-items: center; }
.carte-type span { font-size: 13px; color: var(--texte-2); }
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.etape { background: var(--fond-2); border-radius: var(--rayon); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.etape .num { font: 800 38px var(--titre); color: var(--accent); }
.bandeau { background: var(--encre); color: #fff; border-radius: 20px; padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.bandeau p { color: #D0D2D6; }
.bandeau .btn { background: var(--jaune); color: var(--encre); }
.bandeau .btn:hover { background: #FFCA2C; color: var(--encre); }

/* Cartes produit */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.carte { border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.carte-haut { position: relative; }
.carte .visuel { height: 150px; background: var(--fond-2); display: grid; place-items: center; text-decoration: none; }
.carte .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte .corps { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.carte .jeu { font-size: 13px; color: var(--texte-2); }
.carte .nom { font-weight: 600; font-size: 16px; color: var(--encre); text-decoration: none; }
.carte .nom:hover { text-decoration: underline; }
.carte .meta { font-size: 13px; color: var(--texte-2); }
.carte .bas { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; }
.prix { font-weight: 700; font-size: 17px; }
.coeur { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ligne); background: #fff; display: grid; place-items: center; cursor: pointer; }
.coeur svg path { fill: none; stroke: var(--rose); stroke-width: 2; }
.coeur[aria-pressed="true"] svg path { fill: var(--rose); }
.coeur:hover { border-color: var(--rose); }
.titre-coeur { display: flex; align-items: flex-start; gap: 12px; }
.titre-coeur .coeur { position: static; flex: none; }
.stock { font-size: 13px; font-weight: 700; }
.stock-ok { color: var(--accent-fonce); }
.stock-alerte { color: var(--orange); }
.stock-rupture { color: var(--danger); }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--accent-doux); color: var(--accent-fonce); white-space: nowrap; }
.pastille.grise { background: var(--fond-2); color: var(--texte-2); }
.pastille.rupture { background: var(--danger-doux); color: var(--danger); }
.pastille.rose { background: #FBE7F0; color: var(--rose); }
.statut-a_trier, .statut-nouvelle { background: var(--jaune-doux); color: #5C4300; }
.statut-payee, .statut-preparee { background: var(--orange-doux); color: var(--orange); }
.statut-epuise, .statut-retire, .statut-annulee { background: var(--fond-2); color: var(--texte-2); }

/* Recherche */
.fil { font-size: 14px; color: var(--texte-2); display: flex; flex-wrap: wrap; gap: 8px; }
.mise-en-page { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.filtres { flex: 1 1 240px; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.case { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--encre); }
.resultats { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.encart { background: var(--jaune-doux); border-radius: var(--rayon); padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; color: #4A3600; font-weight: 500; }
.vide { padding: 40px 20px; text-align: center; border: 1px dashed var(--ligne-2); border-radius: var(--rayon); color: var(--texte-2); display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* Fiche */
.fiche { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.fiche-visuel { flex: 1 1 360px; aspect-ratio: 1 / 1; max-height: 480px; background: var(--fond-2); border-radius: 20px; display: grid; place-items: center; overflow: hidden; }
.fiche-visuel img { width: 100%; height: 100%; object-fit: contain; }
.fiche-infos { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gros-prix { font: 800 34px var(--titre); }
.jauge-stock { display: flex; align-items: center; gap: 12px; }
.jauge { flex: 0 0 140px; height: 10px; background: var(--fond-2); border-radius: 999px; overflow: hidden; }
.jauge span { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.achat { display: flex; flex-wrap: wrap; gap: 12px; }
.achat .btn { flex: 1 1 200px; }
.quantite { display: flex; align-items: center; border: 1px solid var(--ligne-2); border-radius: 12px; overflow: hidden; }
.quantite button { width: 46px; height: 46px; border: none; background: #fff; font-size: 22px; cursor: pointer; }
.quantite button:hover { background: var(--fond-2); }
.quantite output { width: 40px; text-align: center; font-weight: 700; font-size: 17px; }
.compat { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.compat dl, .chiffres { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; }
dt { font-size: 13px; color: var(--texte-2); }
dd { margin: 0; font-weight: 600; }
.chiffres .conseil { grid-column: 1 / -1; background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; }
.chiffres .conseil dd { font: 800 24px var(--titre); color: var(--accent-fonce); }

/* Panier */
.panier-lignes { display: flex; flex-direction: column; gap: 12px; }
.ligne-panier { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px; }
.ligne-panier .mini { width: 64px; height: 64px; border-radius: 12px; background: var(--fond-2); display: grid; place-items: center; flex: none; }
.ligne-panier .info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.ligne-panier .sous-total { font-weight: 700; min-width: 80px; text-align: right; }
.recap { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.recap > .panier-lignes { flex: 999 1 520px; min-width: 0; }
.caisse { flex: 1 1 320px; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ligne-total { display: flex; justify-content: space-between; color: var(--texte-2); }
.total { display: flex; justify-content: space-between; font: 800 24px var(--titre); border-top: 1px solid var(--ligne); padding-top: 10px; }
.info-encart { background: var(--accent-doux); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.choix-adresses { border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.choix-adresses legend { font-size: 14px; font-weight: 600; color: var(--texte-2); padding: 0 4px; }
.formulaire { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.formulaire.large { max-width: none; }
.erreur { background: var(--danger-doux); color: var(--danger); border-radius: 10px; padding: 12px 14px; font-weight: 500; }
.succes { background: var(--accent-doux); color: var(--accent-fonce); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.succes-mini { color: var(--accent-fonce); font-weight: 700; }

/* Compte */
.carte-auth { max-width: 460px; width: 100%; margin: 0 auto; border: 1px solid var(--ligne); border-radius: 20px; padding: clamp(20px, 5vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ligne); }
.onglets a, .onglets button { border: none; background: none; padding: 12px 14px; min-height: 44px; font: 600 15px Inter, sans-serif; color: var(--texte-2); cursor: pointer; border-bottom: 3px solid transparent; text-decoration: none; }
.onglets [aria-selected="true"] { color: var(--encre); border-bottom-color: var(--accent); }
#zone-compte { display: flex; flex-direction: column; gap: 16px; }
.commande { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.commande-tete { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; width: 100%; }
.commande-lignes { margin: 0; padding-left: 18px; }
.adresse { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px 16px; }
.adresse summary { cursor: pointer; }
.adresse form { margin-top: 14px; }
.liste-adresses { display: flex; flex-direction: column; gap: 10px; }
.zone-danger { border: 1px solid var(--danger-doux); border-radius: var(--rayon); padding: 18px; margin-top: 24px; }

/* Administration */
.admin { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.admin-menu { flex: 1 1 190px; max-width: 100%; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 8px; }
.admin-menu a { padding: 10px 12px; border-radius: 10px; color: var(--encre); text-decoration: none; font-weight: 500; }
.admin-menu a:hover { background: var(--fond-2); }
.admin-menu a[aria-current="page"] { background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .admin { gap: 16px; }
  .admin-menu { flex: 1 1 100%; }
}
.admin-contenu { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
#zone-admin { display: flex; flex-direction: column; gap: 22px; }
.panneau { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; background: #fff; }
details.panneau > summary { cursor: pointer; }
details.panneau[open] > summary { margin-bottom: 4px; }
.deux-colonnes { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.deux-colonnes > * { flex: 1 1 380px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tuile { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tuile > span { font-size: 13px; color: var(--texte-2); font-weight: 600; }
.tuile strong { font: 800 26px var(--titre); overflow-wrap: anywhere; }
.tuile strong small { font-size: 16px; color: var(--texte-2); }
.tuile small { color: var(--texte-2); font-size: 13px; }
.tuile.accent { background: var(--accent-doux); border-color: transparent; }
.periode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.periode label { display: flex; align-items: center; gap: 6px; }
.pilules { display: flex; flex-wrap: wrap; gap: 6px; }
.pilule { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne-2); color: var(--encre); text-decoration: none; font-weight: 600; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; }
.pilule[aria-current] { background: var(--encre); color: #fff; border-color: var(--encre); }
.cascade { width: 100%; border-collapse: collapse; font-size: 14px; }
.cascade th { text-align: left; font-weight: 500; padding: 7px 8px 7px 0; }
.cascade td { padding: 7px 0; }
.cascade .montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cascade .barre-cellule { width: 30%; padding: 0 12px; }
.barre { display: block; height: 10px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.barre.neg { background: #E8A39E; }
.cascade .c-total th, .cascade .c-total td { font-weight: 700; border-top: 1px solid var(--ligne); }
.cascade .c-final th, .cascade .c-final td { font-weight: 800; font-size: 16px; border-top: 2px solid var(--encre); }
.alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alertes li { padding: 10px 12px; border-radius: 10px; background: var(--fond-2); }
.alertes li.important { background: var(--orange-doux); }
.alertes a { color: var(--encre); text-decoration: none; }
.alertes a:hover { text-decoration: underline; }
.liste-simple { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.legende { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--texte-2); }
.legende span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.l-enc::before { background: var(--accent); } .l-res::before { background: var(--jaune); } .l-ach::before { background: #8FA3B8; }
.graphique-boite { overflow-x: auto; }
.graphique { width: 100%; min-width: 560px; height: auto; display: block; }
.graphique text { font: 12px Inter, sans-serif; fill: var(--texte-2); }
.g-enc { fill: var(--accent); } .g-res { fill: var(--jaune); } .g-neg { fill: var(--danger); } .g-ach { fill: #8FA3B8; }
.g-axe { stroke: var(--ligne-2); }
.lots { display: flex; flex-direction: column; gap: 10px; }
.lot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) minmax(0, 1.4fr); gap: 6px 14px; align-items: center; text-decoration: none; color: var(--encre); padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.lot:hover .lot-titre strong { text-decoration: underline; }
.lot-chiffres { font-size: 13px; color: var(--texte-2); }
@media (max-width: 700px) { .lot { grid-template-columns: 1fr; } }
.progression { display: block; height: 10px; background: var(--fond-2); border-radius: 999px; overflow: hidden; }
.progression.petite { display: inline-block; width: 70px; vertical-align: middle; }
.progression span { display: block; height: 100%; background: var(--jaune); }
.progression span.rentable { background: var(--accent); }
.barre-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barre-filtres input[type=search] { flex: 1 1 220px; }
.barre-selection { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; background: var(--fond-2); border-radius: 12px; padding: 10px 14px; }
.champ-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grise td { color: var(--texte-3); }
.barre-ligne td { text-decoration: line-through; color: var(--texte-3); }
.mini-form { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px; }
.mini-form label { flex: 1 0 100%; }
.mini-form input:not([type=checkbox]) { flex: 1 1 140px; }
.actions-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.actions-grille .mini-form { background: var(--fond-2); border-radius: 12px; padding: 12px; }
.chronologie { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--ligne); display: flex; flex-direction: column; gap: 12px; }
.chronologie li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.chronologie li::before { content: ''; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 999px; background: var(--ligne-2); border: 2px solid #fff; }
.chronologie .mv-entree::before { background: var(--accent); } .chronologie .mv-vente::before { background: var(--jaune); }
.chronologie .mv-perte::before { background: var(--danger); } .chronologie .mv-deplacement::before { background: #8FA3B8; }
.mv-date { font-size: 13px; color: var(--texte-2); flex: 0 0 100%; }
.mv-note { flex: 0 0 100%; font-size: 14px; color: var(--texte-2); }
.documents { display: flex; flex-wrap: wrap; gap: 12px; }
.document { width: 140px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.document a { display: flex; flex-direction: column; gap: 4px; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
.document img, .doc-pdf { width: 140px; height: 100px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ligne); background: var(--fond-2); }
.doc-pdf { display: grid; place-items: center; font-weight: 800; color: var(--danger); }
.recherche-ajout { display: flex; flex-direction: column; gap: 8px; }
.resultats-ajout { display: flex; flex-direction: column; gap: 6px; }
.resultat-ajout { text-align: left; border: 1px solid var(--ligne); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: 500 15px Inter, sans-serif; min-height: 44px; }
.resultat-ajout:hover { border-color: var(--accent); }
.ligne-achat { border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.ligne-achat label { display: flex; flex-direction: column; gap: 4px; }
.ligne-achat input, .ligne-achat select { width: 100%; }
.simulateur { background: var(--accent-doux); border-color: transparent; }
.arbre { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arbre li { margin-left: calc(var(--niveau) * 24px); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 12px; }
.arbre a { color: var(--encre); text-decoration: none; }
.type-conteneur { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); }
.adresse-bloc { white-space: pre-line; background: var(--fond-2); border-radius: 10px; padding: 10px 12px; }

/* Scan */
.scan { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.scan-camera { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.scan-camera video { width: 100%; max-height: 420px; border-radius: var(--rayon); background: var(--encre); display: none; object-fit: cover; }
.scan-camera.active video { display: block; }
.viseur { display: none; }
.scan-camera.active .viseur { display: block; position: absolute; top: 0; left: 0; right: 0; height: min(420px, 75vw); pointer-events: none; }
.scan-camera.active .viseur::after { content: ''; position: absolute; inset: 20% 25%; border: 3px solid var(--jaune); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.scan-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.resultat-scan { flex: 1 1 320px; min-width: 0; }
.carte-scan { border: 2px solid var(--accent); border-radius: var(--rayon); padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.carte-scan .recherche-ajout { width: 100%; }
.bandeau-rangement { background: var(--jaune-doux); border-radius: 12px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* Étiquettes */
.liste-etiquettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 320px; overflow: auto; }
.planche { display: grid; grid-template-columns: repeat(3, 63.5mm); gap: 0 2.5mm; justify-content: start; overflow-x: auto; }
.etiquette { width: 63.5mm; height: 38.1mm; display: flex; align-items: center; gap: 3mm; padding: 3mm; border: 1px dashed var(--ligne-2); overflow: hidden; background: #fff; }
.etiquette img { width: 30mm; height: 30mm; flex: none; }
.etiquette div { display: flex; flex-direction: column; gap: 1mm; min-width: 0; font-size: 9pt; line-height: 1.2; }
.etiquette strong { font: 700 10pt ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.etiquette span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Tableaux */
.tableau-boite { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--rayon); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { background: var(--fond-2); font-weight: 600; white-space: nowrap; }
td input:not([type=checkbox]) { width: 100px; min-height: 36px; }
td select { min-height: 36px; }
.cascade th { background: none; white-space: normal; }
.cascade th, .cascade td { border: none; }
.grille-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* Pied et toast */
.pied { border-top: 1px solid var(--ligne); }
.pied-ligne { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 24px; padding-bottom: 24px; font-size: 14px; color: var(--texte-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--encre); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 20; max-width: calc(100vw - 32px); }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.chargement { color: var(--texte-2); padding: 24px 0; }

/* Impression : planche d'étiquettes ou bon de préparation uniquement */
@media print {
  @page { size: A4; margin: 13mm 7mm; }
  body.impression-etiquettes * , body.impression-prep * { visibility: hidden; }
  body.impression-etiquettes .planche, body.impression-etiquettes .planche * { visibility: visible; }
  body.impression-etiquettes .planche { position: absolute; left: 0; top: 0; overflow: visible; }
  body.impression-etiquettes .etiquette { border: none; break-inside: avoid; }
  body.impression-prep #preparation, body.impression-prep #preparation *, body.impression-prep .adresse-bloc, body.impression-prep .adresse-bloc * { visibility: visible; }
  body.impression-prep #preparation { position: absolute; left: 0; top: 40mm; width: 100%; border: none; }
  body.impression-prep .adresse-bloc { position: absolute; left: 0; top: 0; }
  .entete, .pied, .toast { display: none; }
}

/* Mobile : l'en-tête (plusieurs lignes) ne reste plus collé en haut, sinon il masque le champ
   actif quand le clavier s'ouvre. */
@media (max-width: 760px) {
  .entete { position: static; }
}

/* Utilisateurs : liste de permissions */
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 16px; }
.cases .case { align-items: flex-start; min-height: 44px; }
.cases .case input, .formulaire > .case input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.actions-ligne { white-space: nowrap; }
.actions-ligne .lien-btn { min-height: 44px; padding: 0 8px; }
fieldset#droits { border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 16px; }
fieldset#droits[hidden] { display: none; }

/* Photos d'article */
.photos .document { width: calc(50% - 6px); max-width: 180px; }
.photos .document img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.bouton-fichier { cursor: pointer; }

/* Menu admin regroupé */
.menu-groupe { display: flex; flex-direction: column; gap: 2px; }
.menu-groupe + .menu-groupe { border-top: 1px solid var(--ligne); margin-top: 4px; padding-top: 4px; }
.menu-groupe summary { cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); border-radius: 10px; }
.menu-groupe summary:hover { background: var(--fond-2); }
.menu-groupe a { padding-left: 24px; min-height: 44px; display: flex; align-items: center; }

/* Champ mot de passe avec œil */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { width: 100%; padding-right: 52px; }
.champ-mdp .oeil { position: absolute; top: 0; right: 0; width: 48px; height: 100%; min-height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--texte-2); cursor: pointer; border-radius: 10px; }
.champ-mdp .oeil:hover, .champ-mdp .oeil[aria-pressed="true"] { color: var(--accent); }

/* Boutons d'étape sur la ligne de vente */
.etapes { display: flex; flex-wrap: wrap; gap: 4px; }
.etape { min-height: 44px; padding: 0 10px; border: 1px solid var(--ligne-2); background: var(--fond); color: var(--texte-2); border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.etape:hover { background: var(--fond-2); }
.etape.actuelle { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.etape:disabled { opacity: .5; }

/* Facture */
.facture-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.alerte { background: var(--jaune-doux); border: 1px solid var(--jaune); border-radius: 10px; padding: 10px 14px; }
.facture { background: #fff; color: #000; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 28px; max-width: 800px; display: flex; flex-direction: column; gap: 22px; }
.facture-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.facture-id h1 { font-size: 24px; margin: 0 0 6px; }
.facture-id { text-align: right; }
.facture-vendeur { font-size: 18px; }
.facture-client h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #555; margin: 0 0 4px; }
.facture-lignes { width: 100%; border-collapse: collapse; }
.facture-lignes th, .facture-lignes td { padding: 8px 6px; border-bottom: 1px solid #ddd; text-align: left; }
.facture-lignes th:not(:first-child), .facture-lignes td:not(:first-child) { text-align: right; white-space: nowrap; }
.facture-lignes tfoot th { text-align: right; }
.facture-total th, .facture-total td { font-size: 17px; font-weight: 800; border-bottom: 0; }
.facture-mention { font-size: 13px; color: #444; margin: 0; }
@media print {
  body.impression-facture * { visibility: hidden; }
  body.impression-facture .facture, body.impression-facture .facture * { visibility: visible; }
  body.impression-facture .facture { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; padding: 0; }
  .no-print { display: none !important; }
}