/* NextWaste Carac — feuille de style conforme au brief front-end NextWaste.
   Fontes auto-hébergées (RGPD, hors-ligne PWA). Poppins = titres, Aptos/Inter = corps. */

@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-weight:800;font-style:normal;font-display:swap;
  src:url('/fonts/poppins-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/inter-600.woff2') format('woff2');}

/* Tokens officiels NextWaste (brief front-end) */
:root{
  --navy:#071C42;      /* principal : texte, titres, nav, fonds sombres */
  --teal:#3DCAB1;      /* accent signature : boutons, données héros, survols */
  --teal-d:#2FB39C;    /* variante hover du teal */
  --mint:#E4F7F2;      /* fond doux */
  --brume:#E9EEF6;     /* fond clair froid, alternative au mint */
  --ardoise:#41618C;   /* ton intermédiaire, tient le texte blanc (6,3:1) */
  --teal-soft:#8FC9BD; /* accent adouci : badges, puces */
  --gris:#9D9AA1;      /* légendes et filets uniquement, jamais texte de lecture */
  --cyan:#66FCF1;      /* trait ou cadre ponctuel UNIQUEMENT, jamais aplat ni texte */
  --bleu:#0D66C2;      /* liens */
  --orange:#E8732A;    /* alerte et erreur UNIQUEMENT, jamais décoratif */
  --fd:'Poppins',sans-serif;                    /* titres : 600/700/800 */
  --fb:'Aptos','Inter',system-ui,sans-serif;    /* corps : Aptos, repli Inter */
  --blanc:#FFFFFF;
  --bord:rgba(7,28,66,.12);      /* bordure fine des cartes */
  --bord-champ:rgba(7,28,66,.18);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
  font-family:var(--fb);
  background:var(--blanc);color:var(--navy);   /* fond dominant blanc, texte navy */
  min-height:100dvh;display:flex;flex-direction:column;
}
h1,h2,h3,h4{font-family:var(--fd);}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
a{color:var(--bleu);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Bloc-mot NextWaste ---------- */
.logo{font-family:var(--fd);font-weight:700;letter-spacing:-.01em;line-height:1;}
.logo .lg-next{color:var(--teal);}
.logo .lg-waste{color:var(--navy);}
.logo.inverse .lg-next,.logo.inverse .lg-waste{color:var(--blanc);} /* entièrement blanc sur fond sombre */

/* ---------- Barre d'application (bande navy) ---------- */
.appbar{
  background:var(--navy);color:var(--blanc);
  padding:calc(env(safe-area-inset-top, 0px) + 13px) 16px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;top:0;z-index:20;
}
.appbar .logo{font-size:15.5px;}
.badge-app{
  font-family:var(--fd);font-weight:600;font-size:8.5px;letter-spacing:.14em;
  color:var(--mint);border:1px solid var(--teal-soft);border-radius:6px;
  padding:3px 6px;margin-left:8px;vertical-align:2px;
}
.user{font-size:10.5px;color:#c9d4e6;text-align:right;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- Vues ---------- */
main{flex:1;max-width:560px;width:100%;margin:0 auto;}
.vue{padding:16px 16px 26px;}
h2{font-size:17px;font-weight:700;margin-bottom:4px;}
.sub{font-size:12px;color:var(--ardoise);margin-bottom:14px;line-height:1.5;}
.note{font-size:10.5px;color:var(--ardoise);margin-top:10px;line-height:1.5;}
.legende{font-size:10px;color:var(--gris);} /* gris : légendes uniquement */

/* ---------- Écran de connexion (fond clair, logo bicolore officiel) ---------- */
#v-login{background:var(--brume);min-height:calc(100dvh - 46px);
  padding-top:calc(env(safe-area-inset-top, 0px) + 44px);}
.hero-logo{text-align:center;margin-bottom:6px;}
.hero-logo .logo{font-size:34px;}
.hero-base{font-family:var(--fb);text-align:center;font-size:12px;color:var(--ardoise);
  margin:6px 0 24px;letter-spacing:.02em;}
.carte-login{background:var(--blanc);border:1px solid var(--bord);border-radius:16px;
  padding:18px 16px;}

/* ---------- Formulaires (champs #fcfcfc, focus teal, labels Poppins 600) ---------- */
.champ{display:block;font-family:var(--fd);font-weight:600;font-size:10.5px;
  color:var(--navy);margin-bottom:10px;letter-spacing:.01em;}
.champ input,.champ select{
  display:block;width:100%;margin-top:5px;
  background:#fcfcfc;border:1px solid var(--bord-champ);border-radius:8px;
  padding:11px 13px;font-size:14px;color:var(--navy);font-family:var(--fb);font-weight:400;
}
.champ input:focus,.champ select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(61,202,177,.25);
}
.deux-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ---------- Boutons (radius 8, primaire teal->teal-d, secondaire contour) ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:none;border-radius:8px;cursor:pointer;
  font-family:var(--fd);font-weight:600;font-size:13.5px;
  padding:13px 16px;text-align:center;text-decoration:none;
  transition:background .15s ease,transform .1s ease;margin-top:10px;
}
.btn:active{transform:scale(.985);}
.btn:disabled{opacity:.55;cursor:wait;}
.btn-teal{background:var(--teal);color:var(--navy);}
.btn-teal:hover{background:var(--teal-d);text-decoration:none;}
.btn-navy{background:var(--navy);color:var(--blanc);}
.btn-navy:hover{background:#0B2B5E;text-decoration:none;}
.btn-ghost{background:var(--blanc);color:var(--navy);border:1px solid rgba(7,28,66,.28);
  font-weight:600;}
.btn-ghost:hover{background:var(--brume);text-decoration:none;}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.lien-retour{display:inline-flex;align-items:center;gap:5px;background:none;border:none;
  color:var(--ardoise);font-size:12px;font-weight:600;cursor:pointer;margin-bottom:10px;
  font-family:var(--fb);padding:2px 0;}
.lien-retour svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Zone photos ---------- */
.zone-photos{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px;}
.ajout-photo{
  width:96px;height:96px;border:1.8px dashed var(--teal-soft);border-radius:14px;
  background:var(--mint);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;font-size:9.5px;color:var(--ardoise);text-align:center;cursor:pointer;line-height:1.3;
}
.ajout-photo svg{width:20px;height:20px;stroke:var(--teal);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.mini{width:96px;height:96px;border-radius:14px;object-fit:cover;
  border:1px solid var(--bord);background:var(--brume);}
.mini-wrap{position:relative;}
.mini-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  background:var(--navy);color:var(--blanc);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;}
.mini-x svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;}
.gps-ligne{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ardoise);margin:2px 0 4px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gris);flex-shrink:0;}
.dot.ok{background:var(--teal);}

/* ---------- Historique ---------- */
.hist{background:var(--blanc);border:1px solid var(--bord);border-radius:14px;
  padding:12px 13px;margin-bottom:9px;display:flex;gap:11px;align-items:center;cursor:pointer;}
.hist:hover{background:var(--brume);}
.hist .h-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;object-fit:cover;
  background:var(--brume);border:1px solid var(--bord);}
.hist .h-body{flex:1;min-width:0;}
.hist .h-nom{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hist .h-meta{font-size:10px;color:var(--gris);margin-top:2px;} /* légende */
.statut{font-family:var(--fd);font-size:9px;font-weight:600;padding:4px 8px;border-radius:99px;
  white-space:nowrap;flex-shrink:0;}
.statut.done{background:var(--mint);color:var(--navy);border:1px solid var(--teal-soft);}
.statut.wip{background:var(--brume);color:var(--ardoise);border:1px solid rgba(7,28,66,.18);}
.statut.err{background:rgba(232,115,42,.07);color:var(--orange);border:1px solid var(--orange);}

/* ---------- Détail : bande navy + KPIs (donnée héros Poppins 800 teal) ---------- */
.res-head{background:var(--navy);border-radius:16px;padding:15px 16px;color:var(--blanc);margin-bottom:12px;}
.res-head h3{font-size:14px;font-weight:700;}
.res-head .rh-meta{font-size:10px;color:#c9d4e6;line-height:1.5;margin-top:3px;}
.badge-demo{font-family:var(--fd);font-size:8.5px;font-weight:600;letter-spacing:.08em;
  background:rgba(255,255,255,.12);border:1px solid var(--teal-soft);color:var(--mint);
  padding:3px 8px;border-radius:99px;margin-left:6px;vertical-align:2px;}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px;}
.kpi{background:rgba(255,255,255,.07);border-radius:12px;padding:9px 11px;}
.kpi .k-val{font-family:var(--fd);font-weight:800;font-size:17px;color:var(--teal);}
.kpi .k-val small{font-size:10px;font-weight:600;color:#c9d4e6;margin-left:2px;}
.kpi .k-lab{font-size:9.5px;color:#c9d4e6;margin-top:2px;line-height:1.3;}

/* ---------- Cartes (radius 14-16, bordure fine, pas d'ombre) ---------- */
.card{background:var(--blanc);border:1px solid var(--bord);border-radius:16px;
  padding:14px 15px;margin-bottom:11px;}
.card h4{font-size:12.5px;font-weight:600;margin-bottom:11px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;}
.card h4 .tag{font-family:var(--fb);font-size:9px;font-weight:500;color:var(--ardoise);
  background:var(--brume);padding:3px 8px;border-radius:99px;text-align:right;}

.t-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.t-rank{width:24px;height:24px;border-radius:8px;background:var(--mint);color:var(--navy);
  font-family:var(--fd);font-weight:700;font-size:11.5px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.t-rank.r1{background:var(--teal);}
.t-body{flex:1;min-width:0;}
.t-lab{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;margin-bottom:4px;}
.t-lab b{font-weight:600;}
.t-lab span{color:var(--ardoise);font-weight:600;white-space:nowrap;}
.bar{height:8px;background:var(--brume);border-radius:99px;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;background:var(--teal);}
.t-row:nth-child(2) .bar i{background:var(--teal-soft);}
.t-row:nth-child(3) .bar i{background:var(--ardoise);}

/* ---------- Alerte (orange, bordure + fond .07, icône triangle) ---------- */
.alerte{border:1.5px solid var(--orange);background:rgba(232,115,42,.07);border-radius:14px;
  padding:11px 13px;display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;}
.alerte .a-ic{flex-shrink:0;margin-top:1px;}
.alerte .a-ic svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.alerte .a-tx{font-size:11px;color:var(--navy);line-height:1.5;}

/* ---------- Table composition ---------- */
table.compo{width:100%;border-collapse:collapse;font-size:11px;}
table.compo td,table.compo th{padding:6.5px 2px;border-bottom:1px solid var(--brume);text-align:left;}
table.compo th{font-family:var(--fd);font-size:9px;color:var(--ardoise);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;}
table.compo tr:last-child td{border-bottom:none;}
table.compo .num{text-align:right;font-weight:600;white-space:nowrap;}
table.compo .dim{color:var(--gris);font-weight:400;} /* précision secondaire = légende */

.photos-det{display:flex;gap:8px;overflow-x:auto;margin-bottom:11px;padding-bottom:2px;}
.photos-det img{height:110px;border-radius:14px;border:1px solid var(--bord);}

/* ---------- Validation des détections ---------- */
.det{background:var(--blanc);border:1px solid var(--bord);border-radius:14px;
  padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px;
  transition:border-color .2s ease, background .2s ease, opacity .2s ease;}
.det.ok{border-color:var(--teal);background:var(--mint);}
.det.ko{border-color:var(--bord);opacity:.55;}
.det.corr{border-color:var(--ardoise);}
.det .d-body{flex:1;min-width:0;}
.det .d-nom{font-size:12px;font-weight:600;}
.det .d-conf{font-size:9.5px;color:var(--gris);margin-top:1px;line-height:1.4;} /* légende */
.det .d-actions{display:flex;gap:6px;flex-shrink:0;}
.tfbtn{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--bord-champ);
  background:var(--blanc);cursor:pointer;color:var(--ardoise);padding:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;}
.tfbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.tfbtn.vrai.sel{background:var(--teal);border-color:var(--teal);color:var(--navy);}
.tfbtn.faux.sel{background:var(--navy);border-color:var(--navy);color:var(--blanc);}
.tfbtn.corr.sel{background:var(--ardoise);border-color:var(--ardoise);color:var(--blanc);}

/* ---------- Réglages ---------- */
.cat-ligne{background:var(--blanc);border:1px solid var(--bord);border-radius:14px;
  padding:9px 12px;display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.cat-ligne .c-nom{flex:1;font-size:11.5px;font-weight:500;line-height:1.35;}
.cat-ligne .c-nom small{display:block;color:var(--gris);font-size:9px;font-weight:400;} /* légende */
.cat-ligne input{width:74px;text-align:right;background:#fcfcfc;border:1px solid var(--bord-champ);
  border-radius:8px;padding:7px 9px;font-size:12.5px;font-family:var(--fb);color:var(--navy);}
.cat-ligne input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(61,202,177,.25);}
.cat-ligne .g{font-size:9.5px;color:var(--gris);}

/* ---------- Tab bar ---------- */
.tabbar{position:sticky;bottom:0;background:var(--blanc);border-top:1px solid var(--bord);
  display:flex;padding:7px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);z-index:20;
  max-width:560px;width:100%;margin:0 auto;}
.tab{flex:1;border:none;background:none;cursor:pointer;padding:6px 2px;border-radius:8px;
  font-family:var(--fb);font-size:9.5px;color:var(--ardoise);font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:4px;}
.tab .t-ic{width:30px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.tab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.tab.active{color:var(--navy);font-weight:600;}
.tab.active .t-ic{background:var(--mint);color:var(--teal-d);}

/* ---------- Pied de page (bande navy, mention officielle) ---------- */
.pied{background:var(--navy);color:var(--blanc);text-align:center;
  font-family:var(--fd);font-weight:600;font-size:9.5px;letter-spacing:.10em;
  padding:13px 16px calc(env(safe-area-inset-bottom, 0px) + 13px);}
.pied small{display:block;font-family:var(--fb);font-weight:400;font-size:8.5px;
  letter-spacing:.06em;color:#c9d4e6;margin-top:3px;}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:var(--blanc);font-size:12px;padding:11px 16px;border-radius:14px;
  border:1px solid rgba(102,252,241,.45); /* trait cyan ponctuel, signature */
  opacity:0;pointer-events:none;transition:all .3s ease;z-index:50;
  max-width:88vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
}