/* By Almira — back-office. Interface dense mais lisible, utilisable sur téléphone. */
:root{
  --rose:#b9375e; --rose-f:#96284a; --rose-c:#fdf2f5;
  --noir:#22222a; --gris:#6b6b78; --ligne:#e9e8ee; --fond:#f6f5f8; --carte:#fff;
  --vert:#1f9d63; --vert-c:#e6f6ee; --rouge:#d64545; --rouge-c:#fdecec; --ambre:#c98a0e; --ambre-c:#fdf4e0; --bleu:#3a72b8; --bleu-c:#e9f1fa;
  --ombre:0 1px 3px rgba(34,34,42,.07),0 1px 2px rgba(34,34,42,.04);
  --ombre-f:0 8px 26px rgba(34,34,42,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--fond);color:var(--noir);font-size:14.5px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

/* ---------- Connexion ---------- */
.ecran-co{min-height:100dvh;display:grid;place-items:center;background:linear-gradient(135deg,var(--rose) 0%,#7c2545 100%);padding:20px}
.carte-co{background:#fff;border-radius:20px;padding:38px 32px 30px;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.co-marque{width:62px;height:62px;margin:0 auto 16px;display:block}
.co-logo{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-size:27px;font-weight:700;color:var(--noir);text-align:center;letter-spacing:-.3px}
.co-sous{text-align:center;color:var(--gris);font-size:12px;text-transform:uppercase;letter-spacing:1.6px;margin-top:2px}
/* Les champs respirent : c'est une grille avec un vrai espacement, pas des blocs collés */
.co-champs{display:grid;gap:16px;margin-top:28px}
.co-champs .champ>span{font-size:13px}
.co-champs input{padding:12px 14px;font-size:16px}
.co-champs .btn{padding:13px;font-size:15px;margin-top:4px}
.carte-co .msg{margin:18px 0 0}
.co-retour{display:block;text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne);font-size:13px;color:var(--gris)}
.co-retour:hover{color:var(--rose)}

/* ---------- Ossature ---------- */
.app{display:flex;min-height:100dvh}
.cote{width:236px;background:var(--noir);color:#c9c9d4;display:flex;flex-direction:column;flex-shrink:0}
.cote-tete{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.cote-tete b{display:block;color:#fff;font-size:18px;letter-spacing:-.3px}
.cote-tete span{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:#8e8e9e}
.menu{flex:1;overflow:auto;padding:12px 0}
.menu-sep{font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;color:#75758a;padding:16px 20px 6px;font-weight:700}
.menu a{display:flex;align-items:center;gap:11px;padding:10px 20px;font-size:14px;font-weight:600;border-left:3px solid transparent}
.menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.menu a.on{background:rgba(185,55,94,.22);border-left-color:var(--rose);color:#fff}
.menu .pastille{margin-left:auto;background:var(--rose);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:10px}
.cote-pied{padding:14px 16px;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:9px}
.cote-lien{font-size:13px;padding:6px 4px}
.cote-lien:hover{color:#fff}
.cote-user b{display:block;color:#fff;font-size:13.5px}
.cote-user span{font-size:11.5px;color:#8e8e9e;text-transform:capitalize}
.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.barre{height:60px;background:#fff;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:10}
.barre h1{font-size:19px;font-weight:800;letter-spacing:-.3px;flex:1}
.barre-date{font-size:13px;color:var(--gris)}
.ic-btn{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:18px}
.ic-btn:hover{background:var(--fond)}
#menu-btn{display:none}
.vue{padding:22px;flex:1;max-width:1400px;width:100%}

/* ---------- Blocs ---------- */
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:13px;box-shadow:var(--ombre)}
.carte-tete{padding:14px 18px;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:12px}
.carte-tete h3{font-size:15px;flex:1}
.carte-corps{padding:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--carte);border:1px solid var(--ligne);border-radius:13px;padding:16px 18px;box-shadow:var(--ombre)}
.kpi .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--gris);font-weight:700}
.kpi .v{font-size:24px;font-weight:800;letter-spacing:-.6px;margin:5px 0 2px}
.kpi .s{font-size:12.5px;color:var(--gris)}
.kpi.rose{background:linear-gradient(135deg,var(--rose),#8e2a52);border:0;color:#fff}
.kpi.rose .l,.kpi.rose .s{color:rgba(255,255,255,.85)}
.evo{font-size:12.5px;font-weight:700}
.evo.up{color:var(--vert)}.evo.down{color:var(--rouge)}
.titre-sec{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--gris);font-weight:800;margin:26px 0 12px}

/* ---------- Tableaux ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--ligne);white-space:nowrap}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);font-weight:700;background:#fbfafc}
tbody tr:hover{background:#fbfafc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.vide{padding:44px;text-align:center;color:var(--gris)}
.mini-img{width:42px;height:42px;border-radius:8px;background:var(--rose-c) center/cover;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.cell-prod{display:flex;align-items:center;gap:11px;white-space:normal;min-width:220px}
.cell-prod b{font-size:14px;line-height:1.3}
.cell-prod span{font-size:12px;color:var(--gris)}

/* ---------- Éléments ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--rose);color:#fff;padding:10px 17px;border-radius:9px;font-weight:700;font-size:14px;transition:.14s}
.btn:hover{background:var(--rose-f)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--noir);border:1.5px solid var(--ligne)}
.btn.sec:hover{background:var(--fond);border-color:#d5d4dc}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.bloc{width:100%}
.btn.danger{background:var(--rouge)}.btn.danger:hover{background:#b93636}
.btn.vert{background:var(--vert)}.btn.vert:hover{background:#17804f}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.actions .esp{flex:1}
.etiq{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap}
.etiq.gris{background:#eeedf2;color:var(--gris)}
.etiq.vert{background:var(--vert-c);color:var(--vert)}
.etiq.rouge{background:var(--rouge-c);color:var(--rouge)}
.etiq.ambre{background:var(--ambre-c);color:var(--ambre)}
.etiq.bleu{background:var(--bleu-c);color:var(--bleu)}
.etiq.rose{background:var(--rose-c);color:var(--rose)}
.puces{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.puce{padding:7px 14px;border-radius:20px;border:1.5px solid var(--ligne);font-size:13px;font-weight:600;background:#fff}
.puce.on{background:var(--rose);color:#fff;border-color:var(--rose)}
.puce small{opacity:.75;margin-left:4px}
.msg{padding:11px 14px;border-radius:9px;font-size:13.5px;margin-bottom:12px;line-height:1.5}
.msg.err{background:var(--rouge-c);color:#a3311f}
.msg.ok{background:var(--vert-c);color:#166b45}
.msg.info{background:var(--bleu-c);color:#1d4f85}
.msg.ambre{background:var(--ambre-c);color:#8a5e0f}

/* ---------- Formulaires ---------- */
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.champ{display:flex;flex-direction:column;gap:5px}
.champ.plein{grid-column:1/-1}
.champ>span,.champ label{font-size:12.5px;font-weight:700;color:var(--gris)}
.champ input,.champ select,.champ textarea{padding:10px 12px;border:1.5px solid var(--ligne);border-radius:9px;font-size:15px;background:#fff;width:100%}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--rose)}
.champ textarea{min-height:90px;resize:vertical}
.aide{font-size:12px;color:var(--gris)}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* ---------- Modale ---------- */
.voile{position:fixed;inset:0;background:rgba(34,34,42,.5);z-index:54}
.modale{position:fixed;inset:0;display:grid;place-items:center;z-index:55;padding:16px;pointer-events:none}
.modale-boite{background:#fff;border-radius:15px;width:100%;max-width:720px;max-height:92dvh;overflow:auto;box-shadow:var(--ombre-f);pointer-events:auto}
.modale-tete{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ligne);position:sticky;top:0;background:#fff;z-index:2}
.modale-tete h3{flex:1;font-size:16.5px}
#modale-corps{padding:20px}

/* ---------- Divers ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--noir);color:#fff;padding:12px 20px;border-radius:22px;font-size:14px;font-weight:600;z-index:60;box-shadow:var(--ombre-f)}
.toast.ok{background:var(--vert)}.toast.err{background:var(--rouge)}
.barres{display:flex;flex-direction:column;gap:9px}
.barre-l{display:grid;grid-template-columns:150px 1fr 90px;gap:11px;align-items:center;font-size:13.5px}
.barre-p{background:#eeedf2;border-radius:5px;height:9px;overflow:hidden}
.barre-f{height:100%;background:var(--rose);border-radius:5px}
.graph{display:flex;align-items:flex-end;gap:3px;height:130px;padding-top:10px}
.graph-b{flex:1;background:var(--rose-c);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.graph-b:hover{background:var(--rose)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trois{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.chrono{display:flex;flex-direction:column;gap:0}
.chrono-l{display:flex;gap:12px;padding-bottom:16px;position:relative}
.chrono-l:before{content:'';position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--ligne)}
.chrono-l:last-child:before{display:none}
.chrono-pt{width:24px;height:24px;border-radius:50%;background:var(--rose-c);display:grid;place-items:center;font-size:12px;flex-shrink:0}
.chrono-t{font-size:13.5px}
.chrono-t span{display:block;font-size:11.5px;color:var(--gris)}
.grille-v{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.vign{background:#fff;border:1px solid var(--ligne);border-radius:12px;overflow:hidden;box-shadow:var(--ombre)}
.vign-img{aspect-ratio:1/1;background:var(--rose-c) center/cover;display:grid;place-items:center;font-size:34px;position:relative}
.vign-c{padding:11px 13px}
.vign-c b{font-size:14px;display:block;line-height:1.3}
.vign-c .p{color:var(--rose);font-weight:800;margin-top:4px}
.ligne-var{display:grid;grid-template-columns:1fr 1fr 100px 100px 90px 34px;gap:8px;align-items:end;margin-bottom:9px}
/* Choix simple / variable */
.type-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.type-c{border:2px solid var(--ligne);border-radius:12px;padding:14px 16px;text-align:left;transition:.14s;background:#fff}
.type-c:hover{border-color:#d5d4dc}
.type-c.on{border-color:var(--rose);background:var(--rose-c)}
.type-c b{display:block;font-size:14.5px;margin-bottom:3px}
.type-c span{font-size:12.5px;color:var(--gris)}
/* Tableau des déclinaisons */
.tab-var{width:100%;border-collapse:collapse;font-size:13.5px}
.tab-var th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris);padding:8px 6px;text-align:left;background:#fbfafc;white-space:nowrap}
.tab-var td{padding:5px 6px;border-bottom:1px solid var(--ligne)}
.tab-var input{padding:7px 9px;border:1.5px solid var(--ligne);border-radius:7px;width:100%;min-width:74px;font-size:14px}
.tab-var input:focus{outline:none;border-color:var(--rose)}
.photos{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px}
.photo-v{width:74px;height:74px;border-radius:9px;background:var(--rose-c) center/cover;position:relative;border:1px solid var(--ligne)}
.photo-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--rouge);color:#fff;font-size:12px;display:grid;place-items:center}

/* ---------- Mobile ---------- */
@media (max-width:900px){ .deux,.trois{grid-template-columns:1fr} }
@media (max-width:760px){
  #menu-btn{display:grid}
  .cote{position:fixed;inset:0 auto 0 0;z-index:52;transform:translateX(-100%);transition:transform .22s ease}
  .cote.ouvert{transform:translateX(0)}
  .vue{padding:14px}
  .barre{padding:0 14px}
  .barre h1{font-size:17px}
  .barre-date{display:none}
  .kpis{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .kpi .v{font-size:20px}
  .champs{grid-template-columns:1fr}
  .champ input,.champ select,.champ textarea{font-size:16px}
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%}
  .actions .btn{flex:1 1 100%;justify-content:center}
  .ligne-var{grid-template-columns:1fr 1fr;gap:7px}
  .type-choix{grid-template-columns:1fr}
  .tab-var th{font-size:10px;padding:6px 4px}
  .tab-var td{padding:4px}
  .tab-var input{min-width:60px;padding:6px;font-size:15px}
  .modale{padding:0;align-items:flex-end}
  .modale-boite{max-height:94dvh;border-radius:15px 15px 0 0}
  /* Tableaux en fiches empilées */
  .tm thead{display:none}
  .tm,.tm tbody,.tm tr,.tm td{display:block;width:100%}
  .tm tr{border:1px solid var(--ligne);border-radius:11px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .tm td{border:0;padding:4px 0;white-space:normal;display:flex;justify-content:space-between;gap:12px;align-items:baseline;text-align:right}
  .tm td:before{content:attr(data-l);color:var(--gris);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;text-align:left;flex-shrink:0}
  .tm td[data-l=""]{justify-content:flex-end;border-top:1px solid var(--ligne);margin-top:6px;padding-top:9px;gap:8px}
  .tm td[data-l=""]:before{content:none}
  .tm td[data-l=""] .btn{flex:1;justify-content:center}
  .cell-prod{min-width:0;text-align:left}
}

/* Suggestions de clients à la saisie d'une commande */
.sugg{position:absolute;top:100%;left:0;right:0;z-index:20;background:#fff;border:1.5px solid var(--ligne);border-radius:10px;box-shadow:0 10px 26px rgba(34,34,42,.14);overflow:hidden;margin-top:4px;max-height:250px;overflow-y:auto}
.sugg-l{display:block;width:100%;text-align:left;padding:9px 13px;border-bottom:1px solid var(--ligne)}
.sugg-l:last-child{border-bottom:0}
.sugg-l:hover{background:var(--rose-c)}
.sugg-l b{display:block;font-size:13.5px}
.sugg-l span{font-size:12px;color:var(--gris)}
.btn.sec.danger{background:#fff;color:var(--rouge);border-color:#f3d3d3}
.btn.sec.danger:hover{background:var(--rouge-c);border-color:var(--rouge);color:var(--rouge)}
.lien-gps{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--rose)}
.lien-gps:hover{text-decoration:underline}