/* ══════════════════════════════════════════════════════════════
   AK & SD Marketing — interface d'administration
   Responsive : barre latérale rétractable en tiroir sur mobile
   ══════════════════════════════════════════════════════════════ */
:root{
  --ink:#0C1B33;
  --navy:#10264A;
  --azure:#1E88D2;
  --azure-dark:#166BA8;
  --sky:#E7F1FA;
  --fond:#F4F7FB;
  --blanc:#fff;
  --muted:#64789A;
  --ligne:#E1E9F2;
  --vert:#1FA855;
  --rouge:#D9534F;
  --orange:#E39A1C;
  --r:14px;
  --ombre:0 12px 30px -18px rgba(12,27,51,.35);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--fond);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── Structure ── */
.adm{display:grid;grid-template-columns:252px 1fr;min-height:100vh}

/* ── Barre latérale ── */
.sidebar{background:var(--ink);color:#CFDDEC;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60}
.sb-tete{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.sb-tete img{height:38px;width:auto;background:#fff;border-radius:8px;padding:4px 6px}
.sb-menu{padding:12px 10px;overflow-y:auto;flex:1}
.sb-titre{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#6C82A0;font-weight:800;padding:14px 12px 6px}
.sb-menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;font-size:13.5px;font-weight:600;
  color:#B9CADD;transition:.16s;margin-bottom:2px}
.sb-menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-menu a.actif{background:var(--azure);color:#fff}
.sb-menu a .pastille{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:800;
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.sb-menu a.actif .pastille{background:rgba(0,0,0,.22)}
.sb-pied{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08)}

/* ── Zone principale ── */
.principal{display:flex;flex-direction:column;min-width:0}
.barre{background:#fff;border-bottom:1px solid var(--ligne);padding:0 26px;height:66px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:50}
.barre h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.barre .droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.burger-adm{display:none;border:1px solid var(--ligne);background:#fff;border-radius:10px;width:40px;height:40px;
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--azure);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.contenu{padding:26px;flex:1}

/* ── Cartes / tuiles ── */
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.tuile{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:18px;box-shadow:0 1px 2px rgba(12,27,51,.04)}
.tuile .lib{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.tuile .val{font-size:28px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.tuile .sous{font-size:12.5px;color:var(--muted);margin-top:4px}
.tuile .ico{float:right;width:38px;height:38px;border-radius:11px;background:var(--sky);color:var(--azure-dark);display:grid;place-items:center}

.carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);margin-bottom:20px;overflow:hidden}
.carte-tete{padding:16px 20px;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.carte-tete h2{font-size:15.5px;font-weight:800}
.carte-tete .droite{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.carte-corps{padding:20px}

/* ── Boutons ── */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;
  padding:10px 16px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.16s;white-space:nowrap}
.b-noir{background:var(--ink);color:#fff}
.b-noir:hover{background:var(--azure-dark)}
.b-bleu{background:var(--azure);color:#fff}
.b-bleu:hover{background:var(--azure-dark)}
.b-clair{background:#fff;border-color:var(--ligne);color:var(--ink)}
.b-clair:hover{border-color:#B9CFE4;background:#F8FBFF}
.b-rouge{background:#FDECEC;color:#B33;border-color:#F5CFCF}
.b-rouge:hover{background:#F9DADA}
.b-vert{background:var(--vert);color:#fff}
.b-sm{padding:7px 11px;font-size:12.5px;border-radius:9px}
.b-ico{padding:8px;width:34px;height:34px}

/* ── Formulaires ── */
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.champ{margin-bottom:16px}
.champ label,.etiquette{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:#3E5470;margin-bottom:6px}
.champ input[type=text],.champ input[type=email],.champ input[type=password],.champ input[type=number],.champ input[type=tel],
.champ input[type=file],.champ select,.champ textarea{
  width:100%;padding:11px 13px;border:1px solid var(--ligne);border-radius:10px;font:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
.champ textarea{resize:vertical;min-height:88px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid rgba(30,136,210,.3);border-color:var(--azure)}
.aide{font-size:12px;color:var(--muted);margin-top:5px}
.case{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#2A3E58}
.case input{width:18px;height:18px}

/* ── Tableaux ── */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.tbl th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:11px 14px;border-bottom:1px solid var(--ligne);white-space:nowrap;background:#FAFCFF}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--ligne);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:#FAFCFF}
.mini{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--sky)}
.cellule-produit{display:flex;align-items:center;gap:12px;min-width:220px}
.cellule-produit b{display:block;font-size:14px}
.cellule-produit small{color:var(--muted);font-size:12px}
.actions{display:flex;gap:6px}

/* ── Étiquettes d'état ── */
.etat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.etat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.etat-nouvelle{background:#EAF3FD;color:#166BA8}
.etat-confirmee{background:#FFF6E3;color:#9A6B0A}
.etat-livree{background:#E9F7EF;color:#14663A}
.etat-annulee{background:#FDECEC;color:#9B2F2F}
.etat-actif{background:#E9F7EF;color:#14663A}
.etat-inactif{background:#EEF2F7;color:#64789A}

/* ── Messages flash ── */
.flash{border-radius:12px;padding:12px 16px;font-size:13.5px;font-weight:600;margin-bottom:18px;display:flex;gap:10px;align-items:center}
.flash-ok{background:#E9F7EF;border:1px solid #BFE5CD;color:#14663A}
.flash-ko{background:#FDECEC;border:1px solid #F3C2C2;color:#8C2020}

/* ── Recherche ── */
.recherche{position:relative;max-width:320px}
.recherche input{width:100%;padding:10px 13px 10px 38px;border:1px solid var(--ligne);border-radius:10px;font:inherit;font-size:14px;background:#fff}
.recherche svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}

/* ── Aperçu image upload ── */
.apercu{width:120px;height:120px;border-radius:12px;object-fit:cover;border:1px solid var(--ligne);background:var(--sky)}
.zone-upload{border:2px dashed #B9CFE4;border-radius:12px;padding:18px;text-align:center;background:#FAFCFF;transition:.2s}
.zone-upload:hover{border-color:var(--azure);background:#F4F9FF}
.zone-upload small{display:block;color:var(--muted);font-size:12px;margin-top:6px}

/* ── Grille médias ── */
.medias{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.media{border:1px solid var(--ligne);border-radius:12px;overflow:hidden;background:#fff}
.media img{width:100%;height:130px;object-fit:cover;background:var(--sky)}
.media .pied{padding:8px 10px;display:flex;align-items:center;gap:8px}
.media .pied small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* ── Connexion ── */
.page-login{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(circle at 15% 20%,rgba(30,136,210,.35),transparent 45%),
  radial-gradient(circle at 85% 80%,rgba(79,168,224,.3),transparent 45%),var(--ink);padding:24px}
.boite-login{width:100%;max-width:420px;background:#fff;border-radius:20px;padding:34px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.boite-login .logo-login{height:60px;width:auto;margin:0 auto 18px}
.boite-login h1{font-size:20px;text-align:center;margin-bottom:4px}
.boite-login p.sous{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:24px}
.boite-login .b{width:100%;margin-top:8px;padding:13px}
.lien-doux{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px}

/* ── Divers ── */
.vide{text-align:center;color:var(--muted);font-size:14px;padding:38px 16px}
.voile-adm{position:fixed;inset:0;background:rgba(12,27,51,.5);opacity:0;pointer-events:none;transition:.25s;z-index:55}
.voile-adm.on{opacity:1;pointer-events:auto}
.detail-ligne{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--ligne);font-size:14px}
.detail-ligne:last-child{border:0}
.pastille-msg{background:var(--rouge);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 6px;margin-left:6px}

/* ── Responsive ── */
@media(max-width:1100px){.tuiles{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .adm{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.2,.7,.2,1);height:100vh;overflow-y:auto}
  .sidebar.ouvert{transform:none}
  .burger-adm{display:flex}
  .contenu{padding:18px}
  .barre{padding:0 16px;height:60px}
  .barre h1{font-size:16px}
  .grille2,.grille3{grid-template-columns:1fr}
}
@media(max-width:560px){
  .tuiles{grid-template-columns:1fr}
  .carte-corps{padding:16px}
  .barre .droite .nom-util{display:none}
}