/* Cadre commun de l'administration Ariahfrica (même esprit que Ariah Group) :
   barre latérale sur ordinateur, barre du bas sur téléphone, thème clair/sombre.
   Chargé par index.html, presentiel.html et conversations.html, APRÈS leur
   style propre : il en reprend les couleurs et les polices sans toucher à leur contenu. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,800..900&family=Instrument+Sans:wght@400;500;600;700&display=swap");

/* ---------- couleurs : clair, sombre automatique, sombre choisi ---------- */
:root{
  --bg:#F6F7FB;--card:#FFFFFF;--ink:#0D1B3E;--muted:#667089;--line:#E2E6F0;
  --shadow:0 1px 2px rgba(13,27,62,.05),0 8px 24px rgba(13,27,62,.06);
  --titre:"Archivo","Segoe UI",Arial,sans-serif;--texte:"Instrument Sans","Segoe UI",Arial,sans-serif;
  --ag-hover:#F3F5FB;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1020;--card:#121B33;--ink:#E7EBF7;--muted:#9AA6C6;--line:#27345A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--ag-hover:#19244A;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1020;--card:#121B33;--ink:#E7EBF7;--muted:#9AA6C6;--line:#27345A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--ag-hover:#19244A;color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

body{font-family:var(--texte);-webkit-font-smoothing:antialiased}
h1,h2,h3,.admin-head h1,.content-head h1,.section-head h2,.form-card h3{font-family:var(--titre)}

/* ---------- cadre : caché tant qu'on n'est pas dans l'administration ---------- */
.ag-side,.ag-top,.ag-bas,.ag-feuille,.ag-voile{display:none}
body.avec-menu{--ag-l:0px;--ag-h:0px}
.ag-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Barre latérale (ordinateur) */
@media (min-width:900px){
  body.avec-menu{padding-left:248px;--ag-l:248px}
  body.avec-menu .ag-side{
    display:flex;flex-direction:column;gap:3px;position:fixed;inset:0 auto 0 0;width:248px;
    background:linear-gradient(180deg,#0D1B3E,#091330);color:#fff;padding:20px 14px;overflow-y:auto;z-index:40;
  }
}
.ag-logo{display:flex;align-items:center;gap:10px;padding:4px 10px 16px}
.ag-side .ag-logo{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 8px 16px}
.ag-side .ag-logo img{width:176px;height:auto;display:block}
.ag-top .ag-logo img{width:32px;height:32px;border-radius:9px;display:block}
.ag-logo small{display:block;color:#8F9BBA;font-size:11px;font-weight:500}
/* logo de la page de connexion : clair ou sombre selon le thème */
.logo-img{display:block;height:auto;width:200px;margin:0 auto 10px}
.lg-sombre{display:none}
:root[data-theme="dark"] .lg-clair{display:none}
:root[data-theme="dark"] .lg-sombre{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-clair{display:none}:root:not([data-theme="light"]) .lg-sombre{display:block}}
.ag-logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#F26B21,#FF8A4C);display:grid;place-items:center;font:900 17px var(--titre);font-style:normal;color:#fff}
.ag-logo b{font:800 17px/1 var(--titre);display:block}
.ag-logo small{display:block;color:#8F9BBA;font-size:11px;font-weight:500;margin-top:3px}
.ag-groupe{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7F8BAC;padding:12px 12px 4px}
.ag-nav,.ag-onglet{background:transparent;border:0;font-family:var(--texte)}
.ag-titre-page{font:900 clamp(24px,3.2vw,32px)/1.1 var(--titre);margin:0 0 16px;letter-spacing:-.01em}
.ag-nav{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;width:100%;
  color:#B6C1DE;font:500 14.5px var(--texte);text-decoration:none;transition:.18s;text-align:left;cursor:pointer;
}
.ag-nav:hover{background:rgba(255,255,255,.07);color:#fff}
.ag-nav.on{background:rgba(242,107,33,.16);color:#fff}
.ag-nav.on .ag-ico{color:#FF8A4C}
.ag-nav .pay-badge{
  position:static;display:none;margin-left:auto;min-width:20px;height:20px;line-height:16px;
  background:#F26B21;border:0;color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:999px;text-align:center;
}
.ag-nav .pay-badge.is-visible{display:inline-block}
.ag-pied{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:3px}
.ag-pied .ag-nav{color:#9FABCB;font-size:13.5px;padding:8px 12px}
.ag-pied .ag-nav.danger{color:#FFB88A}

/* Barre du haut + barre du bas (téléphone) */
@media (max-width:899.98px){
  body.avec-menu{padding-top:54px;padding-bottom:calc(66px + env(safe-area-inset-bottom,0px));--ag-h:54px}
  body.avec-menu .ag-top{
    display:flex;align-items:center;gap:10px;position:fixed;inset:0 0 auto 0;height:54px;z-index:40;
    background:#0D1B3E;color:#fff;padding:0 14px;
  }
  .ag-top .ag-logo{padding:0}
  .ag-top .ag-logo i{width:30px;height:30px;font-size:15px;border-radius:9px}
  .ag-top .titre{font:800 16px var(--titre);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ag-top .theme{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#B6C1DE;background:rgba(255,255,255,.08)}
  body.avec-menu .ag-bas{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0 0;z-index:40;
    background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .ag-bas .ag-onglet{
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:10px;
    color:var(--muted);font:600 10.5px var(--texte);text-decoration:none;position:relative;cursor:pointer;min-width:0;
  }
  .ag-bas .ag-onglet span.t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ag-bas .ag-onglet.on{color:#F26B21}
  .ag-bas .pay-badge{position:absolute;top:1px;left:calc(50% + 4px);right:auto;min-width:17px;height:17px;line-height:13px;font-size:10px;padding:1px 4px;background:#F26B21;border:0;color:#fff;border-radius:999px;display:none;text-align:center}
  .ag-bas .pay-badge.is-visible{display:block}
  body.fil-ouvert .ag-bas{display:none}
  body.fil-ouvert.avec-menu{padding-bottom:0}
  .ag-voile{position:fixed;inset:0;background:rgba(7,15,36,.55);z-index:44}
  .ag-voile.ouvert{display:block}
  .ag-feuille{
    position:fixed;inset:auto 0 0 0;z-index:45;background:var(--card);color:var(--ink);border-radius:20px 20px 0 0;
    padding:10px 14px calc(16px + env(safe-area-inset-bottom,0px));max-height:80vh;overflow-y:auto;
    box-shadow:0 -20px 50px rgba(7,15,36,.35);
  }
  .ag-feuille.ouvert{display:block}
  .ag-feuille .poignee{width:42px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 10px}
  .ag-feuille .ag-nav{color:var(--ink);font-size:15px;padding:12px 10px}
  .ag-feuille .ag-nav:hover{background:var(--ag-hover);color:var(--ink)}
  .ag-feuille .ag-nav.danger{color:#DC2626}
  .ag-feuille .ag-groupe{color:var(--muted)}
}

/* ---------- l'ancienne barre de boutons n'a plus lieu d'être ---------- */
body.avec-menu .admin-bar.hors-menu{display:none}
body.avec-menu .admin-bar:not(.hors-menu){
  background:var(--card);border-bottom:1px solid var(--line);padding:10px clamp(16px,3vw,38px);top:var(--ag-h);
}
body.avec-menu .admin-bar:not(.hors-menu) .back-btn{color:var(--ink);font-weight:700}
body.avec-menu .admin-bar:not(.hors-menu) .switch-view{color:var(--ink);border-color:var(--line)}
body.avec-menu .barre,body.avec-menu .topbar:not(.garder){display:none}

/* ---------- habillage des écrans existants ---------- */
body.avec-menu .wrap{max-width:1180px;padding-left:clamp(16px,3vw,38px);padding-right:clamp(16px,3vw,38px)}
body.avec-menu .admin-head{padding-top:clamp(18px,3vw,30px)}
.admin-head h1,.content-head h1{font-size:clamp(24px,3.2vw,32px);font-weight:900;line-height:1.1;letter-spacing:-.01em}
.admin-head p{font-size:14.5px}
.form-card,.stat-card,.row,.dash-row,.chap-block,.parcours-bloc,.stat,.msg,.conv{border-radius:16px;border-color:var(--line);box-shadow:var(--shadow)}
.row{padding:14px 16px}
.stat-card b,.stat b{font-family:var(--titre)}
.form-card .btn,.btn{border-radius:11px}
.f input,.f select,.f textarea,.field input{background:var(--card);border-color:var(--line);border-radius:10px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:#22377A;box-shadow:0 0 0 3px rgba(34,55,122,.12)}
:root[data-theme="dark"] .f input:focus,:root[data-theme="dark"] .f select:focus,:root[data-theme="dark"] .f textarea:focus{border-color:#7C93F0;box-shadow:0 0 0 3px rgba(124,147,240,.2)}
.pack-select{background:var(--card)}
.pack-filter button{background:var(--card)}
.view-as,.mini,.row-edit,.contact-btn{background:var(--card)}
.view-as{color:var(--ink);font-weight:700}
.view-as:hover{background:var(--ag-hover)}
/* fiche élève : l'avatar et le nom sur la même ligne (le nom prenait toute la largeur) */
.row .stud-avatar + .row-main{flex:1 1 0;min-width:0}
.row:hover{border-color:rgba(242,107,33,.35)}

/* Les lignes d'élèves : sur téléphone, les boutons passent à la ligne proprement */
@media (max-width:640px){
  .row{gap:10px}
  .row .view-as,.row .pack-select{flex:1 1 auto}
  .admin-layout{gap:16px}
}

/* ---------- connexion : même carte que le reste ---------- */
.login-card{border-radius:22px}
.login-card .logo{font-family:var(--titre)}

@media (prefers-reduced-motion:reduce){.ag-nav,.ag-onglet{transition:none}}