/* Charte OGP — alignée sur giper.smirpub.com (mêmes jetons, mêmes polices). */
:root{
  --marine:#0A1628; --marine2:#1A2B4A; --marine3:#243660;
  --or:#C9A84C; --or-clair:#E8CC7A; --or-fonce:#9B7B2E; --or-profond:#D4AF37;
  --fond:#F5F7FA; --carte:#FFFEF9; --parchemin:#EDF0F7; --bord:#D0D8EC;
  --texte:#0A1628; --doux:#6B7A99; --pale:#8597B5;
  --vert:#1f9d61; --rouge:#CE1126; --orange:#C9A84C;
  --entete:linear-gradient(135deg,#0A1628 0%,#1A2B4A 50%,#243660 100%);
  --serif:'Cinzel',Georgia,serif; --serif2:'Cormorant Garamond',Georgia,serif;
  --corps:'Raleway','Source Sans 3','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ombre:0 1px 3px rgba(10,22,40,.06), 0 8px 24px rgba(10,22,40,.06);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--corps);
  background:var(--fond); color:var(--texte); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.titre{font-family:var(--serif); letter-spacing:.01em}
a{color:var(--marine2)}
.cache{display:none !important}
::selection{background:var(--or);color:var(--marine)}
/* Bandeau tricolore guinéen, mêmes teintes que GIPER. */
.tricolore{height:4px;background:linear-gradient(90deg,#CE1126,#CE1126 33.3%,#D4AF37 33.3%,#D4AF37 66.6%,#009A44 66.6%)}
/* Bandeau institutionnel, repris de GIPER. */
.republique{background:var(--marine);color:#8ea0c4;font-size:11.5px;letter-spacing:1.5px;
  padding:7px 22px;text-transform:uppercase;font-weight:500}

/* ---------- barre supérieure ---------- */
header.appbar{
  background:var(--entete); color:#fff; padding:14px 22px;
  border-bottom:1px solid rgba(201,168,76,.25);
  display:flex; align-items:center; gap:18px; position:sticky; top:0; z-index:40;
}
header.appbar .marque{display:flex;align-items:center;gap:14px;min-width:0}
/* Plaque blanche du logo OGP, identique à la barre de GIPER. */
header.appbar .logo{
  height:52px;flex:none;display:flex;align-items:center;background:#fff;
  border-radius:12px;border:1px solid rgba(201,168,76,.35);padding:7px 14px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
header.appbar .logo img{height:100%;width:auto;object-fit:contain;display:block}
header.appbar .marque b{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.5px;display:block;line-height:1.1;color:#fff}
header.appbar .marque span{font-size:10px;color:var(--or-clair);letter-spacing:2.2px;text-transform:uppercase}
header.appbar nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
header.appbar .qui{font-size:12.5px;color:#a9b6cd;margin-right:4px}

/* ---------- boutons ---------- */
.btn{
  border:1px solid transparent; border-radius:8px; padding:8px 14px; font:inherit; font-size:14px;
  font-weight:600; cursor:pointer; background:var(--marine2); color:#fff; display:inline-flex;
  align-items:center; gap:7px; transition:.12s; white-space:nowrap; text-decoration:none;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn.or{background:var(--or);color:var(--marine)}
.btn.clair{background:#fff;color:var(--marine2);border-color:var(--bord)}
.btn.clair:hover{background:#eef1f7;filter:none}
.btn.fantome{background:transparent;color:#cdd6e5;border-color:#3a4a68}
.btn.fantome:hover{background:#1d2e4c;filter:none}
.btn.vert{background:var(--vert)} .btn.rouge{background:var(--rouge)} .btn.orange{background:var(--orange)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:7px}
.btn.xs{padding:3px 7px;font-size:12px;border-radius:6px}
.btn.bloc{width:100%;justify-content:center}
.btn.geant{font-size:19px;padding:16px 26px;border-radius:12px}

/* ---------- mise en page ---------- */
.page{max-width:1400px;margin:0 auto;padding:22px 18px 60px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre)}
.carte .entete{padding:13px 16px;border-bottom:1px solid var(--bord);display:flex;align-items:center;gap:10px}
.carte .entete h2,.carte .entete h3{margin:0;font-size:15px;color:var(--marine)}
.carte .corps{padding:16px}
.grille{display:grid;gap:16px}
.rangee{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pousse{margin-left:auto}
.doux{color:var(--doux)} .pale{color:var(--pale)} .petit{font-size:13px} .mini{font-size:12px}
.centre{text-align:center}

/* ---------- formulaires ---------- */
label.champ{display:block;margin-bottom:12px}
label.champ > span{display:block;font-size:12.5px;font-weight:600;color:var(--doux);margin-bottom:4px}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--bord);border-radius:8px;font:inherit;font-size:14px;
  background:#fff;color:var(--texte);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--or);outline-offset:-1px;border-color:var(--or)}
textarea{resize:vertical;min-height:70px;line-height:1.5}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ---------- tableaux & listes ---------- */
table.tab{width:100%;border-collapse:collapse;font-size:14px}
table.tab th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--doux);
  padding:8px 10px;border-bottom:2px solid var(--bord)}
table.tab td{padding:9px 10px;border-bottom:1px solid var(--bord);vertical-align:middle}
table.tab tr:last-child td{border-bottom:none}
table.tab tr:hover td{background:#f8fafd}

.etiq{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
.etiq.gris{background:#e8ebf1;color:#5b6780}
.etiq.bleu{background:#dde8fa;color:#1a4f9c}
.etiq.vert{background:#dbf1e6;color:#136c46}
.etiq.or{background:#fbf0d4;color:#8a6d13}
.etiq.rouge{background:#fadfdc;color:#96281b}

/* ---------- console de modération ---------- */
.console{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:14px;align-items:start}
.colonne{display:flex;flex-direction:column;gap:14px}
.panneau{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden}
.panneau > h3{margin:0;padding:11px 14px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--marine);border-bottom:1px solid var(--bord);background:#f8fafd;display:flex;align-items:center;gap:8px}
.panneau > h3 .cpt{margin-left:auto;background:var(--marine2);color:#fff;border-radius:999px;
  padding:1px 8px;font-size:11px;letter-spacing:0}
.panneau .liste{max-height:340px;overflow:auto}
.panneau .zone{padding:12px 14px}

.ligne{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px solid #eef1f6;cursor:pointer}
.ligne:last-child{border-bottom:none}
.ligne:hover{background:#f2f6fc}
.ligne .nom{font-weight:600;font-size:14px;line-height:1.25}
.ligne .fct{font-size:11.5px;color:var(--pale);line-height:1.2}
.ligne .tps{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;color:var(--doux);text-align:right}
.ligne.actif{background:#fff7e3;box-shadow:inset 3px 0 0 var(--or)}
.ligne.absent{opacity:.45}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--vert);flex:none}
.pastille.excuse{background:var(--orange)} .pastille.abs{background:#c3cad6}

.pt{padding:9px 14px;border-bottom:1px solid #eef1f6;cursor:pointer;display:flex;gap:9px;align-items:flex-start}
.pt:hover{background:#f2f6fc}
.pt .num{width:22px;height:22px;border-radius:6px;background:#e8ecf3;color:var(--marine2);font-size:12px;
  font-weight:700;display:grid;place-items:center;flex:none;margin-top:1px}
.pt.encours{background:#fff7e3;box-shadow:inset 3px 0 0 var(--or)}
.pt.encours .num{background:var(--or);color:var(--marine)}
.pt.traite .num{background:var(--vert);color:#fff}
.pt.traite .ttr{text-decoration:line-through;color:var(--pale)}
.pt .ttr{font-size:13.5px;font-weight:600;line-height:1.3}
.pt .sub{font-size:11.5px;color:var(--pale)}

.transcript-srv{margin-top:6px;background:#f8fafd;border-left:2px solid var(--or);border-radius:0 6px 6px 0;
  padding:7px 10px;font-size:12.5px;color:#3d4757;max-height:130px;overflow:auto}
.transcript-srv .ent{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--pale);margin-bottom:3px}

/* ---------- quorum ---------- */
.quorum-bandeau{padding:9px 14px;border-bottom:1px solid var(--bord);font-size:12.5px;display:flex;
  align-items:center;gap:9px;background:#f3f5f9}
.quorum-bandeau.ok{background:#dbf1e6;color:#136c46}
.quorum-bandeau.ko{background:#fadfdc;color:#8a1f10}
.quorum-bandeau b{font-family:"Cinzel",Georgia,serif;font-size:15px}
.quorum-bandeau .t{font-weight:700;text-align:right;flex:none}

.appel .l{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid #eef1f6}
.appel .l:last-child{border-bottom:none}
.appel .l .id{flex:1;min-width:0}
.appel .l .id b{display:block;font-size:14px}
.appel .l .id span{font-size:11.5px;color:var(--pale)}
.appel .grp{display:flex;gap:4px}
.appel .grp button{border:1px solid var(--bord);background:#fff;color:var(--doux);border-radius:7px;
  padding:5px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.appel .grp button.on[data-e=present]{background:var(--vert);border-color:var(--vert);color:#fff}
.appel .grp button.on[data-e=excuse]{background:var(--orange);border-color:var(--orange);color:#fff}
.appel .grp button.on[data-e=absent]{background:#7a8496;border-color:#7a8496;color:#fff}

/* ---------- compteur de séance ---------- */
.compteur{display:flex;align-items:center;gap:16px;background:var(--marine);color:#fff;
  border-radius:10px;padding:9px 18px;box-shadow:var(--ombre)}
.compteur .l{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#a9b6cd;line-height:1.3}
.compteur .v{font-family:"Cinzel",Georgia,serif;font-size:24px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums}
.compteur .v.petit-v{font-size:14px;font-family:inherit;font-weight:600;padding-top:3px}
.compteur .sep{width:1px;align-self:stretch;background:rgba(255,255,255,.18)}
.compteur.serre{background:#7a4a10}
.compteur.retard{background:#8a1f10}
.compteur.fini{background:#3a4a68}

/* ---------- chrono ---------- */
.chrono{background:var(--marine);color:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--ombre);position:relative;overflow:hidden}
.chrono.alerte{background:#6d2718}
.chrono.depasse{background:#8a1f10;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,80,60,.5)}50%{box-shadow:0 0 0 14px rgba(255,80,60,0)}}
.chrono .orateur{font-family:"Cinzel",serif;font-size:26px;line-height:1.2;margin:0 0 2px}
.chrono .sujet{color:#a9b6cd;font-size:13.5px;margin-bottom:14px}
.chrono .cadran{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.chrono .temps{font-size:68px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;
  font-family:"Cinzel",Georgia,serif;letter-spacing:-.01em}
.chrono .alloue{font-size:13px;color:#a9b6cd}
.chrono.depasse .temps,.chrono.alerte .temps{color:#ffd9d2}
.jauge{height:8px;background:rgba(255,255,255,.16);border-radius:99px;margin:14px 0 0;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--or);width:0;transition:width .3s linear}
.chrono.alerte .jauge i{background:#ffb545}
.chrono.depasse .jauge i{background:#ff6a53}
.commandes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.temoins{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:#a9b6cd;align-items:center}
.temoin{display:inline-flex;align-items:center;gap:6px}
.temoin .led{width:9px;height:9px;border-radius:50%;background:#54607a}
.temoin.on .led{background:#ff4d4d;animation:clignote 1.1s infinite}
.temoin.on.ecoute .led{background:#4dd07f}
@keyframes clignote{0%,100%{opacity:1}50%{opacity:.25}}

.saisie textarea{min-height:120px;font-size:15px}
.transcript-box{background:#f8fafd;border:1px dashed var(--bord);border-radius:8px;padding:10px 12px;
  font-size:13.5px;color:#3d4757;max-height:150px;overflow:auto;white-space:pre-wrap}
.transcript-box .interim{color:var(--pale);font-style:italic}

.hist{max-height:260px;overflow:auto}
.hist .it{padding:9px 14px;border-bottom:1px solid #eef1f6;display:flex;gap:10px;align-items:flex-start}
.hist .it:last-child{border-bottom:none}
.hist .it .d{font-variant-numeric:tabular-nums;font-weight:700;color:var(--marine2);font-size:13px;flex:none;min-width:46px}
.hist .it .d.rouge{color:var(--rouge)}

/* ---------- alertes / modales ---------- */
.msg{padding:10px 13px;border-radius:8px;font-size:14px;margin-bottom:12px}
.msg.err{background:#fadfdc;color:#8a1f10;border:1px solid #f1bdb6}
.msg.ok{background:#dbf1e6;color:#136c46;border:1px solid #b2ddc6}
.msg.info{background:#e7eefa;color:#1a4f9c;border:1px solid #c3d5f0}
.voile{position:fixed;inset:0;background:rgba(10,22,40,.55);display:grid;place-items:center;z-index:70;padding:18px}
.modale{background:#fff;border-radius:12px;max-width:640px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.modale header{padding:15px 18px;border-bottom:1px solid var(--bord);display:flex;align-items:center}
.modale header h3{margin:0;font-size:17px;color:var(--marine)}
.modale .corps{padding:18px}
.modale footer{padding:13px 18px;border-top:1px solid var(--bord);display:flex;gap:9px;justify-content:flex-end}

.toast{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast div{background:var(--marine);color:#fff;padding:11px 16px;border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  font-size:14px;animation:entre .2s}
.toast div.err{background:var(--rouge)} .toast div.ok{background:var(--vert)}
@keyframes entre{from{opacity:0;transform:translateY(8px)}}

/* ---------- connexion ---------- */
.connexion{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1000px 500px at 20% -10%, #1A2B4A 0%, #0A1628 60%);padding:20px}
/* Carte de connexion calquée sur giper.smirpub.com/login.html :
   fond blanc, filet or en tête, logo OGP en clair, sous-titre en italique. */
.connexion .boite{background:var(--carte);border-radius:18px;width:100%;max-width:430px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.connexion .haut{padding:28px 32px 0;text-align:center}
/* Comme sur giper.smirpub.com/login.html : le logo posé directement sur la carte. */
.connexion .haut .logo{width:230px;max-width:82%;height:auto;margin:0 auto 8px;display:block;
  mix-blend-mode:multiply}
.connexion .haut h1{margin:0;font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.5px;color:var(--marine)}
.connexion .haut p{margin:4px 0 0;font-family:var(--serif2);font-style:italic;font-size:16px;color:var(--doux)}
.connexion .filet{width:90px;height:2px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,var(--or),transparent)}
.connexion form{padding:22px 32px 30px}
.connexion .boite .tricolore{height:5px}

/* ---------- statistiques ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--bord);border-top:3px solid var(--or);border-radius:var(--r);padding:14px 16px}
.kpi .v{font-family:"Cinzel",serif;font-size:27px;font-weight:700;color:var(--marine);line-height:1.1}
.kpi .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--doux);margin-top:3px}
.barres .b{display:grid;grid-template-columns:190px 1fr 120px;gap:10px;align-items:center;padding:6px 0}
.barres .piste{background:#eef1f6;border-radius:99px;height:17px;overflow:hidden}
.barres .piste i{display:block;height:100%;background:linear-gradient(90deg,var(--marine2),var(--or));border-radius:99px}
.barres .val{font-variant-numeric:tabular-nums;font-size:13px;color:var(--doux);text-align:right}

@media (max-width:1180px){ .console{grid-template-columns:1fr} .colonne{flex-direction:row;flex-wrap:wrap}
  .colonne > *{flex:1 1 320px} }
@media (max-width:720px){
  .page{padding:14px 11px 50px}
  .duo,.trio{grid-template-columns:1fr}
  .chrono .temps{font-size:52px}
  .colonne{flex-direction:column}
  header.appbar{flex-wrap:wrap;gap:9px;padding:11px 14px}
  header.appbar .logo{height:42px;padding:6px 11px}
  header.appbar .marque{gap:10px}
  header.appbar .marque b{font-size:15px}
  header.appbar .marque span{font-size:8.5px;letter-spacing:1.6px}
  .republique{font-size:10px;letter-spacing:1px;padding:6px 14px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barres .b{grid-template-columns:1fr;gap:3px}
}
@media print{ header.appbar,.republique,.commandes,.btn{display:none !important} body{background:#fff} }