/* =====================================================================
   IA-06f stock.clinilac.com  —  Feuille de style
   Mobile-first, optimise iPhone Pro Max (ecran 6.9", safe-areas).
   Dark UI ClinilacAI + accents charte HF Graphisme.
   ===================================================================== */

:root{
  /* Charte HF Graphisme */
  --vert-clair:#B2EBC9;
  --vert:#4C9A84;
  --vert-fonce:#2F5F52;
  --sable:#A7A194;
  --creme:#F6F3E7;
  --or:#DAC78F;

  /* Dark UI */
  --fond:#12161A;
  --fond-2:#1A2026;
  --carte:#20272E;
  --carte-bord:#2C353D;
  --texte:#E7ECEF;
  --texte-doux:#9AA6AE;
  --danger:#E5736B;
  --danger-fond:#3A2320;
  --info:#6FA8DC;

  --rayon:14px;
  --rayon-sm:10px;
  --ombre:0 6px 20px rgba(0,0,0,.35);

  /* Cibles tactiles confortables au pouce */
  --cible:52px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--fond);
  color:var(--texte);
  font-family:'Afacad',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.5;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  /* respect des safe-areas iPhone (encoche + barre home) */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          0 env(safe-area-inset-left);
}

h1,h2,h3{font-family:'Champagne','Afacad',sans-serif;font-weight:700;line-height:1.2;margin:0 0 .4em;}
h1{font-size:1.55rem;color:var(--creme);}
h2{font-size:1.25rem;color:var(--vert-clair);}
a{color:var(--vert-clair);text-decoration:none;}

/* ---------- Barre de titre ---------- */
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(180deg,var(--fond-2),rgba(26,32,38,.92));
  border-bottom:1px solid var(--carte-bord);
  backdrop-filter:saturate(140%) blur(8px);
}
.appbar .marque{display:flex;align-items:center;gap:10px;font-family:'Champagne',sans-serif;font-weight:700;}
.appbar .pastille{width:12px;height:12px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 3px rgba(76,154,132,.25);}
.appbar .sous{font-size:.72rem;color:var(--texte-doux);letter-spacing:.04em;text-transform:uppercase;}

/* ---------- Conteneur ---------- */
.wrap{max-width:520px;margin:0 auto;padding:18px 16px 120px;}
@media(min-width:720px){ .wrap{max-width:900px;} }

/* ---------- Cartes ---------- */
.carte{
  background:var(--carte);
  border:1px solid var(--carte-bord);
  border-radius:var(--rayon);
  padding:18px;
  box-shadow:var(--ombre);
  margin-bottom:16px;
}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px;}
@media(min-width:720px){ .kpis{grid-template-columns:repeat(3,1fr);} }
.kpi{
  background:var(--carte);border:1px solid var(--carte-bord);
  border-radius:var(--rayon);padding:16px;
}
.kpi .val{font-family:'Champagne',sans-serif;font-size:2rem;font-weight:700;color:var(--vert-clair);}
.kpi .lib{font-size:.82rem;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.04em;}
.kpi.alerte .val{color:var(--or);}

/* ---------- Tuiles d'action (navigation pouce) ---------- */
.tuiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px;}
.tuile{
  display:flex;flex-direction:column;gap:8px;justify-content:center;
  min-height:104px;padding:16px;
  background:var(--carte);border:1px solid var(--carte-bord);
  border-radius:var(--rayon);
  transition:transform .08s ease,border-color .15s ease;
}
.tuile:active{transform:scale(.97);border-color:var(--vert);}
.tuile .ico{font-size:1.6rem;}
.tuile .titre{font-family:'Champagne',sans-serif;font-weight:700;color:var(--texte);}
.tuile .maj{font-size:.72rem;color:var(--sable);}

/* ---------- Formulaires ---------- */
label{display:block;font-size:.85rem;color:var(--texte-doux);margin:14px 0 6px;}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;min-height:var(--cible);
  padding:12px 14px;font-size:17px;   /* 17px : evite le zoom auto iOS */
  color:var(--texte);background:var(--fond-2);
  border:1px solid var(--carte-bord);border-radius:var(--rayon-sm);
  appearance:none;
}
/* Cases a cocher et boutons radio : apparence native, cliquables */
input[type=checkbox],input[type=radio]{
  width:22px;height:22px;min-width:22px;min-height:22px;
  margin:0;padding:0;flex:0 0 auto;cursor:pointer;
  -webkit-appearance:auto;appearance:auto;accent-color:var(--vert);
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  outline:none;border-color:var(--vert);
  box-shadow:0 0 0 3px rgba(76,154,132,.25);
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:var(--cible);
  padding:14px 18px;font-size:1.02rem;font-weight:700;
  border:none;border-radius:var(--rayon-sm);cursor:pointer;
  font-family:'Champagne','Afacad',sans-serif;
}
.btn-primaire{background:var(--vert);color:#06120E;}
.btn-primaire:active{background:var(--vert-fonce);color:var(--creme);}
.btn-fantome{background:transparent;color:var(--texte);border:1px solid var(--carte-bord);}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger);}

/* ---------- Messages flash ---------- */
.flash{padding:12px 14px;border-radius:var(--rayon-sm);margin-bottom:12px;font-size:.92rem;}
.flash.erreur{background:var(--danger-fond);color:#F3C7C2;border:1px solid var(--danger);}
.flash.info{background:rgba(111,168,220,.12);color:#CFE2F5;border:1px solid rgba(111,168,220,.4);}

/* ---------- Barre d'onglets basse (pouce) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--fond-2),rgba(26,32,38,.96));
  border-top:1px solid var(--carte-bord);
  backdrop-filter:saturate(140%) blur(8px);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--texte-doux);font-size:.68rem;min-width:60px;padding:6px 4px;
}
.tabbar a.actif{color:var(--vert-clair);}
.tabbar .ico{font-size:1.35rem;line-height:1;}

/* ---------- Ecran de connexion ---------- */
.login-wrap{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  max-width:420px;margin:0 auto;padding:24px 20px;}
.login-logo{text-align:center;margin-bottom:8px;}
.login-logo .nom{font-family:'Champagne',sans-serif;font-size:1.9rem;font-weight:700;color:var(--vert-clair);}
.login-logo .mod{color:var(--texte-doux);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;}

/* ---------- Placeholder lots suivants ---------- */
.badge-lot{display:inline-block;padding:4px 10px;border-radius:999px;
  background:rgba(218,199,143,.15);color:var(--or);font-size:.78rem;font-weight:700;
  border:1px solid rgba(218,199,143,.4);margin-bottom:12px;}

/* ---------- Divers ---------- */
.muted{color:var(--texte-doux);}
.center{text-align:center;}
.mt{margin-top:16px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}