/* ============================================================
   LIBYANGI — styles des pages plateforme (accueil, créateur,
   tableau de bord, protocole)
   ============================================================ */
:root{
  --papier:#F6F1E7;
  --papier-2:#EFE7D6;
  --encre:#1E2A23;
  --encre-2:#5A685E;
  --or:#B8862B;
  --or-clair:#D9B45B;
  --brique:#A6472E;
  --vert:#24523B;
  --blanc:#FFFDF8;
  --ok:#1F7A46;
  --alerte:#B3261E;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Public Sans',system-ui,sans-serif;
  background:var(--papier);color:var(--encre);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif}
a{color:inherit}

/* ---------- entête plateforme ---------- */
.barre{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem 1.1rem;background:var(--encre);color:var(--papier);
}
.barre .logo{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;
  color:var(--or-clair);text-decoration:none;letter-spacing:.02em}
.barre nav{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
.barre nav a{
  font-size:.8rem;font-weight:600;text-decoration:none;color:#C9D2CB;
  padding:.35rem .7rem;border-radius:99px;
}
.barre nav a.actif,.barre nav a:hover{background:rgba(217,180,91,.15);color:var(--or-clair)}
.wax{height:10px;width:100%;background:
  repeating-linear-gradient(135deg,var(--vert) 0 12px,var(--or) 12px 16px,var(--brique) 16px 28px,var(--or) 28px 32px)}

/* ---------- mise en page ---------- */
.page{max-width:860px;margin:0 auto;padding:1.6rem 1.2rem 4rem}
.page-titre{margin:.6rem 0 1.4rem}
.page-titre h1{font-size:1.9rem;font-weight:600}
.page-titre p{color:var(--encre-2);font-size:.92rem}

.carte{
  background:var(--blanc);border:1px solid var(--papier-2);border-radius:14px;
  padding:1.3rem;margin-bottom:1.1rem;
}
.carte h2{font-size:1.15rem;font-weight:600;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.carte h2 .puce{
  font-family:'Public Sans',sans-serif;font-size:.72rem;font-weight:700;
  background:var(--vert);color:var(--papier);border-radius:99px;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
}

/* ---------- formulaires ---------- */
label.champ{display:block;margin-bottom:.85rem}
label.champ .l{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--encre-2);margin-bottom:.25rem}
input[type=text],input[type=date],input[type=time],input[type=number],textarea,select{
  width:100%;font:inherit;font-size:.95rem;color:var(--encre);
  background:var(--papier);border:1.5px solid var(--papier-2);border-radius:9px;
  padding:.6rem .75rem;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--or)}
.rangee{display:grid;gap:.8rem}
@media(min-width:560px){
  .rangee.deux{grid-template-columns:1fr 1fr}
  .rangee.trois{grid-template-columns:1fr 1fr 1fr}
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:inherit;font-weight:600;font-size:.9rem;
  padding:.7rem 1.3rem;border-radius:99px;border:none;cursor:pointer;
  text-decoration:none;transition:transform .08s;
}
.btn:active{transform:scale(.97)}
.btn-vert{background:var(--vert);color:var(--papier)}
.btn-or{background:var(--or);color:var(--blanc)}
.btn-ligne{background:transparent;color:var(--encre);border:1.5px solid var(--encre)}
.btn-rouge{background:var(--alerte);color:#fff}
.btn-mini{font-size:.76rem;padding:.4rem .8rem}
.btn-wa{background:#1FAF5A;color:#fff}

/* ---------- badges ---------- */
.badge{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;white-space:nowrap}
.badge.oui{background:#E1F0E6;color:var(--ok)}
.badge.non{background:#F8E4E2;color:var(--alerte)}
.badge.attente{background:var(--papier-2);color:var(--encre-2)}
.badge.scan{background:var(--encre);color:var(--or-clair)}

/* ---------- indicateurs (tableau de bord) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1.2rem}
.kpi{background:var(--blanc);border:1px solid var(--papier-2);border-radius:12px;
  padding:.9rem 1rem;text-align:center}
.kpi .n{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:600;color:var(--vert)}
.kpi .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--encre-2)}

/* ---------- tableaux ---------- */
.defile{overflow-x:auto}
table.liste{width:100%;border-collapse:collapse;font-size:.88rem}
table.liste th{
  text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--encre-2);padding:.5rem .6rem;border-bottom:2px solid var(--papier-2);
}
table.liste td{padding:.6rem;border-bottom:1px solid var(--papier-2);vertical-align:middle}
table.liste tr:last-child td{border-bottom:none}
.actions-cellule{display:flex;gap:.35rem;flex-wrap:wrap}
.ico-btn{
  font-size:.74rem;font-weight:600;border:1px solid var(--papier-2);
  background:var(--papier);border-radius:8px;padding:.32rem .6rem;cursor:pointer;
  text-decoration:none;color:var(--encre);white-space:nowrap;
}
.ico-btn:hover{border-color:var(--or)}
.ico-btn.wa{background:#1FAF5A;color:#fff;border-color:#1FAF5A}

/* ---------- divers ---------- */
.note{font-size:.8rem;color:var(--encre-2)}
.sep{height:1px;background:var(--papier-2);margin:1.1rem 0}
.pied-fixe{
  position:sticky;bottom:0;background:var(--blanc);border-top:1px solid var(--papier-2);
  padding:.8rem 1.2rem;display:flex;gap:.8rem;justify-content:flex-end;z-index:40;
}
.toast{
  position:fixed;left:50%;bottom:5.2rem;transform:translateX(-50%);
  background:var(--encre);color:var(--papier);font-size:.85rem;font-weight:600;
  padding:.6rem 1.2rem;border-radius:99px;opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:99;white-space:nowrap;
}
.toast.visible{opacity:1}

/* ============ verre fondu (survol) ============
   Au repos : voilé. Au survol : le verre fond — un reflet
   glisse sur les boutons, les cartes se soulèvent. */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:-2px;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.12) 54%,transparent 72%);
  transform:translateX(-130%) skewX(-8deg);transition:transform .75s ease}
.btn:hover::after{transform:translateX(130%) skewX(-8deg)}
.btn:hover{box-shadow:0 10px 26px rgba(30,42,35,.18)}
.carte{transition:box-shadow .45s ease,transform .25s ease}
.carte:hover{box-shadow:0 16px 38px rgba(30,42,35,.1);transform:translateY(-2px)}
.ico-btn{transition:border-color .3s,box-shadow .3s,background .3s}
.ico-btn:hover{box-shadow:0 6px 16px rgba(30,42,35,.14)}
.kpi{transition:box-shadow .4s ease,transform .25s ease}
.kpi:hover{box-shadow:0 12px 28px rgba(30,42,35,.1);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){
  .btn::after{display:none}
  .btn,.carte,.ico-btn,.kpi{transition:none}
}