/* Glaces Romane — charte officielle 2026 : vert #b8c8ba + noir #1d1d1b (logo),
   jaune #FEF17F, rose #FFB1B8 ; --vert-fonce = déclinaison foncée du vert charte
   pour les boutons/liens (le vert officiel est trop clair pour du texte blanc) */
:root {
  --vert: #b8c8ba;
  --vert-fonce: #5e7263;
  --jaune: #FEF17F;
  --rose: #FFB1B8;
  --encre: #1d1d1b;
  --fond: #f5f8f5;
  --blanc: #ffffff;
  --gris: #7a8d93;
  --ok: #3bb273;
  --alerte: #e05c5c;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fond);
  color: var(--encre);
  font-size: 14px;
}
a { color: var(--vert-fonce); }

/* ---- barre ---- */
.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--blanc);
  padding: 6px 14px;
  border-bottom: 3px solid var(--vert);
  position: sticky; top: 0; z-index: 10;
}
.brand img { height: 42px; display: block; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.topbar nav a {
  text-decoration: none; color: var(--encre); font-weight: 600; font-size: 13.5px;
  padding: 6px 11px; border-radius: 999px;
}
.topbar nav a:hover { background: var(--jaune); }
.userbox { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gris); font-size: 13px; }

/* largeur unique 1390px pour tout le monde sur ordinateur (demande 18/07) —
   sans effet sur mobile/tablette, où l'écran est plus étroit */
.page { max-width: 1390px; margin: 0 auto; padding: 18px 16px 50px; }
.footer { text-align: center; color: var(--gris); padding: 14px; font-size: 12px; }

h1 { font-size: 19px; margin: 6px 0 14px; }
h1 .accent { color: var(--vert-fonce); }
h2 { font-size: 15px; margin: 18px 0 8px; }

/* ---- composants ---- */
.card {
  background: var(--blanc); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 12px;
  box-shadow: 0 1px 6px rgba(151,175,158,.20);
}
.flash { padding: 9px 13px; border-radius: var(--radius); margin-bottom: 12px; font-weight: 600; }
.flash-ok { background: #d9f3e6; color: #1c6b45; }
.flash-err { background: #fde3e3; color: #a33; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-G { background: var(--rose); }
.badge-N { background: var(--jaune); }
/* Statuts de commande : une couleur par statut */
.badge-validee { background: var(--jaune); color: #6b5d00; }          /* ⏳ en attente */
.badge-fabriquee { background: #d6ebfa; color: #1c5a74; }             /* 🏭 fabriquée */
.badge-livree { background: #3bb273; color: #fff; }                   /* 🚚 livrée */
.badge-bl { background: #e2ece4; color: #3c5a46; }                    /* n° de BL */
.badge-franchise { background: #eee; color: #555; }

.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--vert-fonce); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 8px 16px; border-radius: 999px;
}
.btn:hover { background: var(--encre); }
.btn-second { background: var(--blanc); color: var(--encre); border: 2px solid var(--vert); }
.btn-second:hover { background: var(--jaune); border-color: var(--jaune); }
.btn-danger { background: var(--alerte); }
.btn-mini { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--fond); text-decoration: none; color: var(--gris); border: 0; cursor: pointer; }

table.liste { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: var(--radius); overflow: hidden; }
table.liste th { background: var(--vert); color: var(--encre); text-align: left; padding: 6px 10px; font-size: 12px; }
table.liste td { padding: 6px 10px; border-bottom: 1px solid #e9efe9; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste td.num, table.liste th.num { text-align: right; }

input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  padding: 7px 10px; border: 2px solid #dbe5dd; border-radius: 8px;
  font-size: 16px; background: #fff; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vert); }

/* ---- login ---- */
.login-wrap { max-width: 360px; margin: 8vh auto; text-align: center; }
.login-wrap .logo-big { width: 200px; margin-bottom: 8px; }
.login-wrap form { display: flex; flex-direction: column; gap: 10px; }

/* ---- sections repliables du bon de commande ---- */
details.section {
  background: var(--blanc); border-radius: var(--radius);
  margin-bottom: 9px; box-shadow: 0 1px 6px rgba(151,175,158,.20);
  overflow: hidden;
}
details.section summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; padding: 11px 14px;
}
details.section summary::-webkit-details-marker { display: none; }
details.section summary::after {
  content: '▾'; margin-left: auto; color: var(--vert-fonce);
  transition: transform .15s; font-size: 15px;
}
details.section[open] summary::after { transform: rotate(180deg); }
details.section[open] summary { border-bottom: 2px solid #e9efe9; }
details.section > .cat-titre, details.section > .prod-grid { margin-left: 12px; margin-right: 12px; }
details.section > .prod-grid:last-child { padding-bottom: 12px; }
.sec-count { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.sec-count.on { background: var(--jaune); }

/* ---- catalogue commande boutique ---- */
.deadline-info {
  background: var(--jaune); border-radius: var(--radius);
  padding: 9px 13px; font-weight: 600; margin-bottom: 14px; font-size: 13.5px;
}
.cat-titre {
  margin: 16px 0 7px; font-size: 12.5px; font-weight: 800;
  color: var(--vert-fonce); text-transform: uppercase; letter-spacing: .5px;
}
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 7px; }
.prod {
  background: var(--blanc); border-radius: var(--radius); padding: 6px 10px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 4px rgba(151,175,158,.22);
}
.prod .pnom { flex: 1; font-weight: 600; font-size: 13px; }
.prod .pnom small { display: block; color: var(--gris); font-weight: 400; font-size: 11.5px; }
/* steppers en turquoise (le bleu du logo Glaces Romane) */
.qty { display: flex; align-items: center; gap: 5px; }
.qty button {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: #55C5E5; color: #fff; font-size: 17px; font-weight: 700; line-height: 1;
}
.qty button.moins { background: #d8f1f8; color: var(--encre); }
.qty input { width: 44px; text-align: center; padding: 5px 3px; font-weight: 700;
             border-color: #a9e0f1; color: #0e6c8c; }
.prod.actif { outline: 2px solid var(--vert); }

.barre-valider {
  position: sticky; bottom: 10px; display: flex; justify-content: center; margin-top: 18px;
}
.barre-valider .btn { font-size: 14.5px; padding: 11px 28px; box-shadow: 0 3px 12px rgba(93,122,103,.4); }

/* ---- labo ---- */
.labo-date { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.labo-date a {
  text-decoration: none; font-weight: 700; font-size: 14px; color: var(--encre);
  background: var(--blanc); padding: 8px 14px; border-radius: var(--radius);
  border: 2px solid #dbe5dd;
}
.labo-date a.sel { border-color: var(--vert); background: var(--jaune); }
table.labo { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
table.labo th { background: var(--vert); color: var(--encre); padding: 7px 12px; text-align: left; font-size: 13px; }
table.labo td { padding: 6px 12px; border-bottom: 1px solid #e9efe9; font-weight: 600; }
table.labo td.q { font-size: 16px; font-weight: 800; text-align: center; white-space: nowrap; }
.btn-labo {
  display: block; width: 100%; border: 0; cursor: pointer; margin-top: 16px;
  background: var(--ok); color: #fff; font-size: 16px; font-weight: 800;
  padding: 13px; border-radius: var(--radius);
}
.btn-labo[disabled] { background: #c2ccc3; cursor: default; }
.q-total { color: var(--vert-fonce); }

/* ---- bon de fabrication façon ardoise : 2 colonnes, lecture DE HAUT EN BAS ----
   (colonnes construites côté serveur : fiable à l'impression, contrairement à columns:2) */
.fab-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start;
  background: var(--blanc); border-radius: var(--radius);
  padding: 8px 16px; box-shadow: 0 1px 6px rgba(151,175,158,.20);
}
/* lisible de loin : max 60 parfums/jour = 30 lignes par colonne */
.fab-item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 2px; border-bottom: 1px solid #e9efe9;
  font-size: 20px; font-weight: 700;
  break-inside: avoid;
}
.fab-rang { color: var(--gris); font-size: 12px; font-weight: 700; min-width: 20px; text-align: right; }
/* quantité totale en turquoise (bleu du logo) : saute à l'œil */
.fab-qte { font-weight: 800; font-size: 22px; white-space: nowrap; color: #1eb0da; }
.fab-qte small { font-weight: 700; font-size: 15px; color: var(--vert-fonce); }
.fab-G { background: var(--rose); border-radius: 4px; padding: 0 3px; margin-left: 1px; }
.fab-N { background: var(--jaune); border-radius: 4px; padding: 0 3px; margin-left: 1px; }
table.labo.prep td { padding: 5px 12px; }
table.labo.prep .qty input { width: 52px; font-size: 14px; }
.qty-labo button { width: 34px; height: 34px; font-size: 18px; }

/* ---- repères visuels par catégorie ---- */
.cat-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; color: var(--encre); }
.badge-cat { color: var(--encre); font-weight: 700; }

/* ---- signature tactile ---- */
#sigpad {
  width: 100%; height: 180px; touch-action: none;
  background: #fff; border: 2px dashed var(--vert); border-radius: var(--radius);
  cursor: crosshair;
}
.fab-stock { color: #2f7ea8; font-weight: 700; font-size: 11px; display: block; }

/* ---- bon de chargement à cocher (livreur) ---- */
.chk {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid #e9efe9;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.chk:last-child { border-bottom: 0; }
.chk input { width: 24px; height: 24px; accent-color: var(--ok); flex-shrink: 0; }
.chk-num { color: var(--gris); font-size: 11px; font-weight: 700; min-width: 17px; text-align: right; }
.chk.done .chk-nom { text-decoration: line-through; color: var(--gris); }
.chk-qte { margin-left: auto; font-weight: 800; font-size: 16px; white-space: nowrap; }
.chk.done .chk-qte { color: var(--gris); }
/* steppers compacts du bon de chargement (correction casse/erreur sur mobile) */
.qty-mini { margin-left: auto; flex-shrink: 0; }
.qty-mini button { width: 26px; height: 26px; font-size: 15px; }
.qty-mini input { width: 40px; padding: 3px 2px; font-size: 14px; }
.chk-qte-print { display: none; }

/* ---- bon livreur / impression ---- */
.bon-boutique { page-break-inside: avoid; }
.bon-boutique h2 { display: flex; align-items: center; gap: 8px; }

/* ---- facture / BL ---- */
.facture { background: #fff; padding: 22px; border-radius: var(--radius); }
.facture .fhead { display: flex; justify-content: space-between; margin-bottom: 18px; }
.facture .fhead img { height: 42px; }
.facture .fhead h1 { font-size: 17px; }
.facture .totaux td { font-weight: 700; }

@page { margin: 11mm; }

@media print {
  /* Impression EN COULEUR, fidèle à l'écran (demande Stéphane) */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .topbar, .footer, .noprint, .flash, .labo-date { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .page { max-width: none; padding: 0; }
  .card, .facture { box-shadow: none; padding: 0; }
  /* Tous les BL du jour : UNE BOUTIQUE PAR PAGE, impérativement */
  .bl-doc { page-break-after: always !important; break-after: page !important; border-radius: 0; }
  .bl-doc:last-of-type { page-break-after: auto !important; break-after: auto !important; }
  h1 { font-size: 15px; margin: 0 0 8px; }
  h2 { font-size: 13px; margin: 10px 0 4px; }
  table.liste th { padding: 3px 6px; font-size: 10px; }
  table.liste td { padding: 2px 6px; border-bottom: 1px solid #ddd; font-size: 10.5px; }
  table.labo { font-size: 11px; }
  table.labo th { padding: 3px 8px; font-size: 10px; }
  table.labo td { padding: 2px 8px; }
  table.labo td.q { font-size: 12px; }
  .badge { padding: 0 5px; font-size: 9px; }
  .facture .fhead img { height: 34px; }
  /* bon de fabrication imprimé : le plus gros possible, 30 lignes/colonne sur une page A4 */
  .fab-grid { box-shadow: none; padding: 0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .fab-item { font-size: 17px; padding: 3px 2px; border-bottom: 1px solid #ccc; }
  .fab-rang { font-size: 11px; }
  .fab-qte { font-size: 19px; }
  .fab-qte small { font-size: 13px; }
  .fab-stock { font-size: 11px; }
  /* bon de chargement : toujours des cases VIDES sur papier, quantité en texte */
  .qty-mini { display: none; }
  .chk-qte-print { display: inline; }
  .chk { font-size: 10.5px; padding: 2px 4px; border-bottom: 1px solid #ddd; }
  .chk input { -webkit-appearance: none; appearance: none; width: 12px; height: 12px;
               border: 1.5px solid #333; border-radius: 2px; background: #fff !important; }
  .chk.done .chk-nom, .chk.done .chk-qte { text-decoration: none; color: inherit; }
  .chk-qte { font-size: 11px; }
}

@media (max-width: 640px) {
  .topbar { padding: 6px 8px; gap: 6px; }
  .brand img { height: 30px; }
  h1 { font-size: 17px; }
  .fab-grid { grid-template-columns: 1fr; }
}

/* ---- tableau de perf du labo (motivation !) ---- */
.perf-banner {
  background: linear-gradient(100deg, var(--jaune), #ffe9a8);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
  font-size: 15px; font-weight: 600; line-height: 1.7;
}
.perf-litres { font-size: 26px; font-weight: 800; color: var(--vert-fonce); padding: 0 3px; }
.perf-jour { display: inline-block; margin-left: 10px; }
.perf-record { display: inline-block; margin-left: 10px; background: var(--blanc); border-radius: 999px; padding: 2px 12px; font-size: 13px; }

/* ---- bandeaux de type sur le bon de fabrication ---- */
.fab-cat {
  font-weight: 800; font-size: 16px; color: var(--encre);
  border-radius: 8px; padding: 5px 12px; margin: 8px 0 2px;
}
.fab-cat small { font-weight: 600; color: var(--gris); }
@media print {
  .fab-cat { font-size: 13px; padding: 2px 8px; margin: 4px 0 1px;
             -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Météo Hossegor (accueils de tous les rôles) — turquoise du logo, ça motive à 5 h ! ---- */
.meteo-card {
  background: #55C5E5;
  border: none;
  color: var(--encre);
}
.meteo-titre { margin: 0 0 4px; font-size: 16px; }
.meteo-ligne {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600;
  padding: 4px 0;
}
.meteo-ligne + .meteo-titre { margin: 0 0 4px; font-size: 16px; }
.meteo-ligne { border-top: 1px solid rgba(255,255,255,.45); }
.meteo-quand { font-weight: 800; min-width: 118px; }
.meteo-quand small { font-weight: 700; opacity: .75; }
.meteo-ic { font-size: 22px; line-height: 1; }
.meteo-hint {
  margin-top: 6px; padding: 5px 10px;
  background: var(--blanc); border-radius: var(--radius);
  font-weight: 800; color: var(--vert-fonce); display: inline-block;
}

/* nom du portail dans la barre (démo Le Flow) */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-nom { font-weight: 800; font-size: 17px; color: var(--vert-fonce); }
.brand-nom small { font-weight: 600; color: var(--gris); }

/* photos de casse (livreur) : vignettes cliquables sur le BL écran + détail commande admin */
.photos-casse { margin-top: 14px; }
.photos-casse-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.photos-casse figure { margin: 0; }
.photos-casse img {
  width: 150px; height: 110px; object-fit: cover;
  border-radius: var(--radius); border: 2px solid var(--vert);
  display: block;
}
.photos-casse figcaption { font-size: 12px; color: var(--gris); margin-top: 3px; }

/* visionneuse photo de casse : calque plein écran (le lien direct data: fait une page noire sur mobile) */
.photos-casse img { cursor: zoom-in; }
#photo-zoom {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.88); padding: 12px;
  align-items: center; justify-content: center; cursor: zoom-out;
}
#photo-zoom img { max-width: 96vw; max-height: 92vh; border-radius: 10px; }

/* ---- livreur sur iPhone 14 Plus (écran 6,7", ~428 px) : cibles tactiles élargies,
   lisible en plein soleil, utilisable pressé — écran seulement, l'impression garde ses réglages ---- */
@media screen and (max-width: 700px) {
  .role-livreur .page { padding: 12px 10px 40px; }
  .role-livreur h1 { font-size: 18px; }
  /* checklist de chargement : grosses cases, lignes aérées */
  .role-livreur .chk { padding: 13px 8px; font-size: 16px; }
  .role-livreur .chk input { width: 32px; height: 32px; }
  .role-livreur .chk-qte { font-size: 19px; }
  /* boutons : hauteur de pouce */
  .role-livreur .btn { padding: 13px 20px; font-size: 15px; }
  .role-livreur .btn-second { padding: 11px 18px; }
  /* steppers du BL (casse à l'arrivée) : gros +/− */
  .role-livreur .qty-mini button { width: 40px; height: 40px; font-size: 19px; }
  .role-livreur .qty-mini input { width: 54px; font-size: 17px; padding: 7px 3px; }
  /* cartes et tableaux de la tournée / du BL */
  .role-livreur .bon-boutique h2 { font-size: 16.5px; }
  .role-livreur table.liste td { padding: 9px 8px; font-size: 15px; }
  .role-livreur .facture .fhead { font-size: 13px; }
  /* signature : plus de hauteur pour signer confortablement au doigt */
  .role-livreur #sigpad { height: 230px; }
  /* photos de casse : vignettes pleine largeur de pouce */
  .role-livreur .photos-casse img { width: 44vw; max-width: 200px; height: 33vw; max-height: 150px; }
  /* bandeaux fin de tournée / consignes */
  .role-livreur .perf-banner, .role-livreur .deadline-info { font-size: 14.5px; line-height: 1.6; }
}