/* GESTECH ACADEMY — feuille de style unique. Couleurs du logo : bleu Afrique, or des lauriers, marine de l'affiche. */

:root{
  --fond:#f3f5f9;
  --surface:#ffffff;
  --encre:#14213a;
  --encre-douce:#55627a;
  --encre-pale:#8a95a8;
  --trait:#dde3ec;
  --marine:#13294b;
  --accent:#1374d0;
  --accent-fonce:#0e5aa3;
  --accent-pale:#e4effb;
  --or:#b8912f;
  --or-pale:#f7efd9;
  --ok:#1f7a4d;
  --ok-pale:#e2f2e9;
  --alerte:#8a6100;
  --alerte-pale:#fdf3dc;
  --danger:#a1262b;
  --danger-pale:#fbeaea;
  --rayon:10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--fond); color:var(--encre);
  font:15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{ color:var(--accent); }
h1{ font-size:22px; margin:0 0 4px; color:var(--marine); }
h2{ font-size:17px; margin:0 0 12px; color:var(--marine); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
h3{ font-size:14px; margin:20px 0 8px; color:var(--encre-douce); text-transform:uppercase; letter-spacing:.4px; }

/* ---------- en-tête ---------- */
.entete{
  background:var(--marine); color:#fff; display:flex; align-items:center; gap:14px;
  padding:10px 18px; border-bottom:3px solid var(--or); position:sticky; top:0; z-index:20;
}
.marque{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; min-width:0; }
.marque img{ background:#fff; border-radius:50%; flex:none; }
.marque span{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.marque b{ letter-spacing:.6px; }
.marque small{ color:#c9d3e6; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.identite{ margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13.5px; }
.identite .nom{ color:#dfe6f3; }
.identite .lien-sobre{ color:#f1d58c; }
.burger{ display:none; font-size:22px; cursor:pointer; padding:0 4px; }
.lien-sobre{ background:none; border:0; padding:0; cursor:pointer; color:var(--accent); font:inherit; text-decoration:underline; }

/* ---------- cadre : menu + contenu ---------- */
.cadre{ display:flex; flex:1; width:100%; max-width:1440px; margin:0 auto; }
.bascule{ display:none; }
.menu{
  width:230px; flex:none; padding:16px 10px 30px; background:var(--surface); border-right:1px solid var(--trait);
  position:sticky; top:63px; align-self:flex-start; max-height:calc(100vh - 63px); overflow-y:auto;
}
.menu a{
  display:block; padding:7px 12px; border-radius:8px; color:var(--encre); text-decoration:none; font-size:14px; margin:1px 0;
}
.menu a:hover{ background:var(--fond); }
.menu a.actif{ background:var(--accent-pale); color:var(--accent-fonce); font-weight:600; box-shadow:inset 3px 0 0 var(--or); }
.menu-titre{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--encre-pale); margin:16px 12px 4px; font-weight:600; }

.contenu{ flex:1; min-width:0; padding:22px 24px 40px; }
.sans-menu .contenu{ max-width:1100px; margin:0 auto; }

@media (max-width:900px){
  .burger{ display:block; }
  .menu{
    position:fixed; left:0; top:63px; bottom:0; max-height:none; z-index:15; transform:translateX(-100%);
    transition:transform .2s; box-shadow:4px 0 18px rgba(0,0,0,.12);
  }
  .bascule:checked + .menu{ transform:none; }
  .contenu{ padding:16px; }
  .marque small, .identite .nom{ display:none; }
}

.pied{ padding:16px 24px 24px; color:var(--encre-pale); font-size:12px; text-align:center; }

/* ---------- blocs ---------- */
.carte{ background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon); padding:18px 20px; margin-bottom:18px; }
.carte-etroite{ max-width:440px; margin:40px auto; }
.entete-page{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.entete-page .sous{ color:var(--encre-douce); font-size:14px; }
.colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.colonnes-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:1000px){ .colonnes, .colonnes-3{ grid-template-columns:1fr; } }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:18px; }
.kpi{ background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon); padding:14px 16px; border-top:3px solid var(--accent); }
.kpi.or{ border-top-color:var(--or); }
.kpi.danger{ border-top-color:var(--danger); }
.kpi.ok{ border-top-color:var(--ok); }
.kpi .valeur{ font-size:24px; font-weight:700; color:var(--marine); }
.kpi .libelle{ font-size:12.5px; color:var(--encre-douce); }

/* ---------- messages ---------- */
.message{ padding:11px 14px; border-radius:var(--rayon); margin-bottom:14px; font-size:14px; }
.message.succes{ background:var(--ok-pale); color:var(--ok); }
.message.alerte{ background:var(--alerte-pale); color:var(--alerte); }
.message.erreur{ background:var(--danger-pale); color:var(--danger); }
.message.info{ background:var(--accent-pale); color:var(--accent-fonce); }

/* ---------- formulaires ---------- */
.champ{ display:block; margin-bottom:12px; }
.champ > span{ display:block; font-size:12.5px; font-weight:600; color:var(--encre-douce); margin-bottom:4px; }
.champ small{ display:block; color:var(--encre-pale); font-size:12px; margin-top:3px; }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=month], input[type=number],
input[type=password], input[type=search], input[type=url], input[type=tel], select, textarea{
  width:100%; padding:8px 10px; border:1px solid var(--trait); border-radius:8px; font:inherit; color:var(--encre); background:#fff;
}
select[multiple]{ min-height:120px; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent-pale); border-color:var(--accent); }
textarea{ resize:vertical; }
.grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0 12px; }
.paire{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
@media (max-width:560px){ .paire{ grid-template-columns:1fr; } }
.case{ display:flex; align-items:center; gap:7px; margin:6px 0 12px; font-size:14px; }
.case input{ width:auto; margin:0; }
.cases{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-bottom:12px; }
.cases label{ display:flex; align-items:center; gap:6px; font-size:14px; }
.enligne{ display:inline; }
.filtres{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; }
.filtres .champ{ margin:0; min-width:150px; }
details.depliant{ border-top:1px solid var(--trait); margin-top:12px; padding-top:10px; }
details.depliant > summary{ cursor:pointer; color:var(--accent); font-weight:600; font-size:14px; }
details.depliant[open] > summary{ margin-bottom:12px; }

.bouton{
  display:inline-block; padding:8px 14px; border:1px solid var(--trait); border-radius:8px; background:#fff; color:var(--encre);
  font:inherit; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.bouton:hover{ border-color:var(--encre-pale); }
.bouton.principal{ background:var(--accent); border-color:var(--accent); color:#fff; }
.bouton.principal:hover{ background:var(--accent-fonce); }
.bouton.or{ background:var(--or); border-color:var(--or); color:#fff; }
.bouton.ok{ background:var(--ok); border-color:var(--ok); color:#fff; }
.bouton.danger{ border-color:var(--danger); color:var(--danger); }
.bouton.danger:hover{ background:var(--danger-pale); }
.bouton.petit{ padding:5px 10px; font-size:13px; }
.bouton.inactif{ opacity:.45; pointer-events:none; }
.boutons{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- tableaux ---------- */
.defile{ overflow-x:auto; }
.tableau{ width:100%; border-collapse:collapse; font-size:14px; }
.tableau th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--encre-pale);
  border-bottom:1px solid var(--trait); padding:8px 10px; font-weight:600; white-space:nowrap;
}
.tableau td{ padding:9px 10px; border-bottom:1px solid var(--trait); vertical-align:top; }
.tableau tr:hover td{ background:#fafbfd; }
.tableau tr.inactive td{ opacity:.5; }
.tableau .num, .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tableau tfoot td{ font-weight:700; border-top:2px solid var(--trait); }
.mono{ font-family:ui-monospace, Consolas, monospace; font-size:13px; }
.note{ color:var(--encre-pale); font-size:12.5px; }
.vide{ color:var(--encre-pale); font-size:14px; padding:6px 0; }
.aide{ color:var(--encre-douce); font-size:13.5px; }
.aide.cadre-alerte{ background:var(--alerte-pale); color:var(--alerte); padding:10px 12px; border-radius:8px; }
.rouge{ color:var(--danger); }
.vert{ color:var(--ok); }

.pastille{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; background:var(--fond); color:var(--encre-douce); white-space:nowrap; }
.pastille.ok{ background:var(--ok-pale); color:var(--ok); }
.pastille.warn{ background:var(--alerte-pale); color:var(--alerte); }
.pastille.danger{ background:var(--danger-pale); color:var(--danger); }
.pastille.muted{ background:var(--fond); color:var(--encre-pale); }
.pastille.bleu{ background:var(--accent-pale); color:var(--accent-fonce); }
.pastille.or{ background:var(--or-pale); color:#7a5c12; }

/* ---------- planning ---------- */
.weekend{ margin-bottom:16px; }
.weekend h3{ margin-top:0; }
.creneau{
  display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid var(--trait); border-left:4px solid var(--accent);
  border-radius:8px; margin-bottom:8px; background:#fff;
}
.creneau.annulee, .creneau.reportee{ opacity:.55; border-left-color:var(--encre-pale); }
.creneau.tenue{ border-left-color:var(--ok); }
.creneau .heure{ font-weight:700; color:var(--marine); white-space:nowrap; min-width:92px; }
.creneau .quoi{ flex:1; min-width:0; }
.creneau .quoi b{ display:block; }
.creneau .meta{ color:var(--encre-douce); font-size:13px; }
@media (max-width:560px){
  .creneau{ flex-wrap:wrap; }
  .creneau .quoi{ flex-basis:100%; order:3; }
}

.cours{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--trait); }
.cours:last-child{ border-bottom:0; }
.cours .date{ font-weight:700; color:var(--marine); }

/* ---------- identifiants à communiquer ---------- */
.identifiants{ border:2px solid var(--or); background:var(--or-pale); }
.identifiants .valeur{ font-family:ui-monospace, Consolas, monospace; font-size:18px; letter-spacing:1px; color:var(--marine); }

/* ---------- double authentification ---------- */
.qr-bloc{ display:flex; justify-content:center; margin:14px 0; }
.qr{ width:210px; height:210px; padding:6px; background:#fff; border:1px solid var(--trait); border-radius:var(--rayon); display:flex; align-items:center; justify-content:center; }
.qr svg{ width:100%; height:100%; }
.cle{ font-family:ui-monospace, Consolas, monospace; font-size:16px; letter-spacing:1px; word-break:break-all; }

/* ---------- connexion ---------- */
.connexion{ text-align:center; }
.connexion img{ width:150px; height:150px; margin:6px auto 10px; display:block; }
.connexion form{ text-align:left; }

/* ---------- matrice des droits ---------- */
.matrice th.rot{ writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; text-align:left; padding:8px 4px; }
.matrice td.c{ text-align:center; }