/* Crédits Ndongo — couleurs du logo ETS NDONGO DIAGNE */
:root{
  --marine:#0b2a5b;--marine-2:#143a78;--marine-3:#0a2149;--jaune:#f7b916;--jaune-pale:#fff5d6;
  --fond:#f4f2ec;--carte:#fff;--encre:#15213a;--encre-2:#4d5972;--encre-3:#667089;--trait:#e2e0d8;--trait-2:#cfccc2;
  --rouge:#b3261e;--rouge-pale:#fdecea;--vert:#146c3c;--vert-pale:#e5f4eb;--orange:#8a5a00;--orange-pale:#fff3d9;--wa:#128c4b;
  --rayon:14px;--ombre:0 1px 2px rgba(11,42,91,.06),0 6px 20px rgba(11,42,91,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-wrap:anywhere}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--marine)}
[hidden]{display:none!important}
.nb{font-variant-numeric:tabular-nums;white-space:nowrap}
.demarrage{min-height:100vh;display:grid;place-items:center;background:var(--marine)}

/* --- Structure --- */
.cadre{display:flex;min-height:100vh}
.cote{display:none}
.principal{flex:1;min-width:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.entete{position:sticky;top:0;z-index:20;background:var(--marine);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:10px;min-height:56px}
.entete h1{font-size:18px;font-weight:750;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entete .logo{width:34px;height:34px;border-radius:50%;flex:none}
.ic-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer;text-decoration:none}
.contenu{padding:14px 16px;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.nav{position:fixed;z-index:30;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--trait-2);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;font-size:11.5px;font-weight:600;color:var(--encre-3);text-decoration:none}
.nav a svg{width:23px;height:23px}
.nav a.actif{color:var(--marine)}
.nav a.actif::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;background:var(--jaune);border-radius:0 0 3px 3px}
.pastille{position:absolute;top:3px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rouge);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}

/* --- Accueil --- */
.hero{background:var(--marine);color:#fff;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.hero small{color:#c8d3e8;font-size:14px;font-weight:600}
.hero .gros{font-size:clamp(34px,10vw,50px);line-height:1.05;font-weight:800;color:var(--jaune);letter-spacing:-.02em}
.hero .sous{font-size:14px;color:#dfe6f3}
.hero .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tuile{background:var(--carte);border-radius:var(--rayon);padding:13px 14px;box-shadow:var(--ombre);border:0;text-align:left;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:3px}
.tuile small{font-size:13px;color:var(--encre-2);font-weight:600}
.tuile b{font-size:22px;font-weight:800;line-height:1.15}
.tuile span{font-size:12.5px;color:var(--encre-3)}
.tuile.alerte{background:var(--rouge-pale)}
.tuile.alerte b{color:var(--rouge)}
.carte{background:var(--carte);border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden}
.carte>h2,.titre-carte{font-size:15px;font-weight:750;padding:13px 14px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.titre-carte a{font-size:13px;font-weight:600}
.pad{padding:13px 14px}
.colonnes{display:grid;gap:14px}

/* --- Listes --- */
.ligne{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--trait);color:inherit;text-decoration:none;background:none;width:100%;text-align:left;min-height:58px}
.carte>.ligne:first-child{border-top:0}
.ligne .corps{flex:1;min-width:0}
.ligne .nom{font-weight:680;display:block}
.ligne .det{font-size:13px;color:var(--encre-2);display:block}
.ligne .droite{text-align:right;flex:none;max-width:48%}
.ligne .droite b{font-weight:780;display:block}
.ligne .droite small{font-size:12.5px;color:var(--encre-2);display:block}
.ligne.annule .nom,.ligne.annule .droite b{text-decoration:line-through;color:var(--encre-3)}
.rouge{color:var(--rouge)!important}.vert{color:var(--vert)!important}
.etat{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.etat.retard{background:var(--rouge-pale);color:var(--rouge)}
.etat.cours{background:#e8edf6;color:var(--marine)}
.etat.solde{background:var(--vert-pale);color:var(--vert)}
.etat.annule{background:#ececec;color:#5b5b5b}
.vide{padding:32px 18px;text-align:center;color:var(--encre-2);display:flex;flex-direction:column;gap:12px;align-items:center}
.vide b{color:var(--encre);font-size:16px}
.tranche{display:flex;justify-content:space-between;gap:8px;padding:9px 14px;border-top:1px solid var(--trait);font-size:14.5px}
.tranche span small{color:var(--encre-3)}
.recherche{position:relative}
.recherche input{padding-left:40px}
.recherche svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--encre-3)}
.filtres{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:1px 16px}
.filtres::-webkit-scrollbar{display:none}
.filtre{flex:none;border:1px solid var(--trait-2);background:#fff;border-radius:20px;padding:7px 13px;font-size:13.5px;font-weight:620;cursor:pointer;color:var(--encre-2);min-height:36px}
.filtre.actif{background:var(--marine);color:#fff;border-color:var(--marine)}
.plus-btn{width:100%;border:0;background:none;padding:13px;font-weight:700;color:var(--marine);border-top:1px solid var(--trait);cursor:pointer}

/* --- Boutons et champs --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:9px 15px;border-radius:12px;border:0;font-weight:720;font-size:15px;cursor:pointer;text-decoration:none;text-align:center}
.btn.jaune{background:var(--jaune);color:#1d1600}
.btn.marine{background:var(--marine);color:#fff}
.btn.blanc{background:#fff;color:var(--marine);border:1px solid var(--trait-2)}
.btn.fantome{background:rgba(255,255,255,.14);color:#fff}
.btn.wa{background:var(--wa);color:#fff}
.btn.danger{background:#fff;color:var(--rouge);border:1px solid #e5b5b1}
.btn.large{width:100%}
.btn[disabled],.btn.off{opacity:.5;pointer-events:none}
.btn.petit{min-height:38px;padding:6px 11px;font-size:13.5px;border-radius:10px}
.barre-btn{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.barre-btn.trois{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
label.champ{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:650;color:var(--encre-2)}
label.champ small{font-weight:500;color:var(--encre-3)}
input.txt,select.txt,textarea.txt{width:100%;min-height:46px;border:1.5px solid var(--trait-2);border-radius:11px;padding:9px 12px;background:#fff;font-size:16px;color:var(--encre);font-weight:500}
textarea.txt{min-height:80px;resize:vertical}
input.txt:focus,select.txt:focus,textarea.txt:focus,.filtre:focus-visible,.btn:focus-visible,a:focus-visible{outline:2.5px solid var(--jaune);outline-offset:1px;border-color:var(--marine)}
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--trait-2);background:#fff;border-radius:10px;padding:8px 11px;font-size:14px;font-weight:620;cursor:pointer;min-height:40px}
.chip.actif{background:var(--jaune);border-color:var(--jaune);color:#1d1600}
.err{background:var(--rouge-pale);color:var(--rouge);padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600}
.info{background:var(--orange-pale);color:var(--orange);padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600}
.total-form{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--marine);color:#fff;border-radius:12px;padding:12px 14px;font-weight:650}
.total-form b{font-size:22px;color:var(--jaune);font-weight:800}

/* --- Fiche client --- */
.fiche-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border-top:1px solid var(--trait)}
.fiche-chiffres>div{background:#fff;padding:11px 8px;text-align:center}
.fiche-chiffres small{display:block;font-size:12px;color:var(--encre-2);font-weight:600}
.fiche-chiffres b{font-size:15.5px;font-weight:800}
.du-grand{padding:16px 14px 12px}
.du-grand small{font-size:13.5px;color:var(--encre-2);font-weight:600}
.du-grand b{display:block;font-size:34px;line-height:1.1;font-weight:800;margin-top:2px}
.note{background:var(--jaune-pale);padding:9px 12px;border-radius:10px;font-size:14px;white-space:pre-wrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:14.5px}
.kv dt{color:var(--encre-2)}
.kv dd{margin:0;text-align:right;font-weight:620}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{font-size:12px;text-align:left;color:var(--encre-2);padding:8px 14px;border-bottom:1px solid var(--trait);font-weight:650}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--trait);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .d{text-align:right}
.defil{overflow-x:auto}

/* --- Feuille du bas (formulaires) --- */
.sheet-fond{position:fixed;inset:0;background:rgba(8,20,45,.55);z-index:40}
.sheet{position:fixed;z-index:50;left:0;right:0;bottom:0;max-height:94vh;max-height:94dvh;background:var(--fond);border-radius:18px 18px 0 0;display:flex;flex-direction:column;animation:monte .18s ease-out}
@keyframes monte{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet-tete{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;background:#fff;border-radius:18px 18px 0 0;border-bottom:1px solid var(--trait)}
.sheet-tete h2{flex:1;font-size:18px;font-weight:780}
.sheet-tete button{width:38px;height:38px;border:0;border-radius:10px;background:var(--fond);font-size:18px;cursor:pointer}
.sheet-corps{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.sheet-pied{padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--trait);display:flex;gap:8px}
.sheet-pied .btn{flex:1}
.lg-art{background:#fff;border:1px solid var(--trait);border-radius:12px;padding:10px;display:grid;grid-template-columns:70px 1fr 40px;gap:8px;align-items:end}
.lg-art .des{grid-column:1/-1}
.lg-art .suppr{width:40px;height:46px;border:0;background:var(--rouge-pale);color:var(--rouge);border-radius:10px;font-size:17px;cursor:pointer}
.lg-art .soustotal{grid-column:1/-1;text-align:right;font-size:13.5px;color:var(--encre-2)}
.choix-liste{background:#fff;border:1px solid var(--trait);border-radius:12px;overflow:hidden;max-height:260px;overflow-y:auto}
.choix-liste button{display:flex;justify-content:space-between;gap:10px;width:100%;padding:11px 12px;background:none;border:0;border-top:1px solid var(--trait);text-align:left;cursor:pointer;min-height:48px;align-items:center}
.choix-liste button:first-child{border-top:0}
.choix-pris{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--marine);border-radius:12px;padding:10px 12px}
.option{display:flex;gap:10px;align-items:center;background:#fff;border:1.5px solid var(--trait-2);border-radius:12px;padding:10px 12px;cursor:pointer;min-height:48px}
.option:has(input:checked){border-color:var(--marine);background:#eef2fa}
.option input{width:20px;height:20px;flex:none;accent-color:var(--marine)}
.option span{flex:1}
.option small{display:block;color:var(--encre-2);font-size:13px}
.toast{position:fixed;z-index:60;left:16px;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));max-width:440px;margin:auto;background:var(--marine-3);color:#fff;border-radius:12px;padding:12px 15px;font-weight:620;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hors-ligne{background:var(--orange-pale);color:var(--orange);padding:9px 16px;font-size:14px;font-weight:650;text-align:center}

/* --- Connexion --- */
.connexion{min-height:100vh;min-height:100dvh;background:var(--marine);display:flex;align-items:center;justify-content:center;padding:20px}
.connexion form{background:#fff;border-radius:20px;padding:24px 20px;width:100%;max-width:390px;display:flex;flex-direction:column;gap:13px}
.connexion img{width:92px;height:92px;align-self:center}
.connexion h1{text-align:center;font-size:23px;font-weight:800}
.connexion p{text-align:center;color:var(--encre-2);font-size:14.5px;margin-top:-8px}

/* --- Reçu et relevé --- */
.feuille{background:#fff;border-radius:6px;box-shadow:var(--ombre);padding:20px;color:#111;display:flex;flex-direction:column;gap:14px}
.feuille-tete{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--marine);padding-bottom:12px}
.feuille-tete img{width:62px;height:62px;flex:none}
.feuille-tete b{font-size:17px;display:block;color:var(--marine)}
.feuille-tete small{display:block;font-size:12.5px;color:#444}
.feuille h2{font-size:20px;font-weight:800;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.feuille h2 span{font-size:14px;font-weight:650;color:#444;align-self:center}
.somme{background:#f3f5fa;border-radius:8px;padding:12px;text-align:center}
.somme small{display:block;color:#444;font-size:13px}
.somme b{font-size:28px;font-weight:800;color:var(--marine)}
.signature{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:6px}
.signature img{width:150px;height:auto}
.signature small{color:#444}
.tampon-annule{border:2.5px solid var(--rouge);color:var(--rouge);padding:6px 10px;font-weight:800;text-align:center;border-radius:6px}

/* --- Grand écran : barre sur le côté --- */
@media (min-width:900px){
  .cote{display:flex;flex-direction:column;gap:4px;width:232px;flex:none;background:var(--marine);color:#fff;padding:18px 12px;position:sticky;top:0;height:100vh}
  .cote .marque{display:flex;align-items:center;gap:10px;padding:2px 6px 16px;font-weight:800;line-height:1.15}
  .cote .marque img{width:46px;height:46px}
  .cote .marque small{display:block;font-weight:500;color:#c8d3e8;font-size:12px}
  .cote a{position:relative;display:flex;align-items:center;gap:11px;padding:11px;border-radius:10px;color:#dfe6f3;text-decoration:none;font-weight:620;font-size:15px}
  .cote a svg{width:21px;height:21px;flex:none}
  .cote a:hover{background:var(--marine-2)}
  .cote a.actif{background:var(--jaune);color:#1d1600}
  .cote .pastille{position:static;margin-left:auto}
  .cote .bas{margin-top:auto;font-size:13px;color:#c8d3e8;padding:8px 11px}
  .nav{display:none}
  .principal{padding-bottom:30px}
  .entete{background:var(--fond);color:var(--encre);padding:18px 24px 6px;position:static}
  .entete h1{font-size:24px;font-weight:800}
  .entete .logo{display:none}
  .ic-btn{background:#fff;color:var(--marine);border:1px solid var(--trait-2)}
  .contenu{padding:12px 24px;max-width:1040px;margin:0}
  .colonnes{grid-template-columns:1fr 1fr;align-items:start}
  .filtres{margin:0;padding:1px 0;flex-wrap:wrap}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:560px;max-height:90vh;border-radius:18px;animation:none}
  .toast{bottom:24px}
  .feuille{max-width:640px}
}

/* --- Impression --- */
@media print{
  body{background:#fff}
  .cote,.nav,.entete,.non-imprime,.toast,.sheet,.sheet-fond{display:none!important}
  .principal{padding:0}
  .contenu{padding:0;max-width:none}
  .feuille{box-shadow:none;padding:0;max-width:none}
  .somme,.tampon-annule{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:14mm}
}