/* EVM - Ecole Virtuelle de Mauritanie · style.css */
:root{
    --vert:#1a6b3c; --vert-f:#14562f; --or:#d4a017; --rouge:#c0392b;
    --bleu:#2563a8; --fond:#f4f6fb; --bord:#e3e8f0; --texte:#22303f; --gris:#66748a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;background:var(--fond);color:var(--texte);min-height:100vh;display:flex;flex-direction:column}

/* ---------- Barre supérieure ---------- */
.topbar{background:#fff;border-bottom:2px solid var(--vert);display:flex;align-items:center;gap:18px;padding:10px 22px;flex-wrap:wrap;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texte)}
.brand img{height:42px}
.brand span{font-size:14px}
.recherche{flex:1;display:flex;max-width:430px;min-width:200px}
.recherche input{flex:1;padding:8px 12px;border:1px solid var(--bord);border-radius:8px 0 0 8px;font-size:14px}
.recherche input:focus{outline:none;border-color:var(--vert)}
.recherche button{border:1px solid var(--vert);background:var(--vert);color:#fff;border-radius:0 8px 8px 0;padding:0 14px;cursor:pointer}
.topnav{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.topnav a{color:var(--texte);text-decoration:none;font-size:13.5px;padding:6px 8px;border-radius:6px}
.topnav a:hover{background:var(--fond);color:var(--vert)}
.whoami{font-size:13px;color:var(--gris);border-left:1px solid var(--bord);padding-left:14px}
.btn-sortie{background:var(--rouge);color:#fff !important;padding:6px 12px !important;border-radius:7px}

/* ---------- Conteneur / pied ---------- */
.conteneur{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:26px 22px}
.pied{background:#fff;border-top:1px solid var(--bord);display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;font-size:12.5px;color:var(--gris)}
.pied img{height:26px}

/* ---------- Titres / cartes ---------- */
h1.page{font-size:22px;color:var(--vert);margin-bottom:4px}
p.sous{color:var(--gris);font-size:13.5px;margin-bottom:20px}
.grille{display:grid;gap:16px}
.grille.c4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grille.c3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.carte{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:18px;box-shadow:0 2px 10px rgba(20,40,80,.04)}
.carte h3{font-size:15px;margin-bottom:6px}
.carte a.lien-carte{text-decoration:none;color:inherit;display:block}
.carte:hover{border-color:var(--vert)}
.c-span2{grid-column:span 2;min-width:0}

/* ---------- Statistiques (tableau de bord) ---------- */
.stat{display:flex;flex-direction:column;gap:4px;border-left:5px solid var(--vert)}
.stat .chiffre{font-size:30px;font-weight:700;color:var(--vert)}
.stat.or{border-color:var(--or)} .stat.or .chiffre{color:var(--or)}
.stat.bleu{border-color:var(--bleu)} .stat.bleu .chiffre{color:var(--bleu)}
.stat.rouge{border-color:var(--rouge)} .stat.rouge .chiffre{color:var(--rouge)}
.stat .libelle{font-size:13px;color:var(--gris)}

/* ---------- Tableaux ---------- */
.tableau{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--bord);border-radius:12px;overflow:hidden}
.tableau th{background:var(--vert);color:#fff;text-align:left;padding:10px 12px;font-size:13px}
.tableau td{padding:9px 12px;border-top:1px solid var(--bord);font-size:13.5px;vertical-align:middle}
.tableau tr:hover td{background:#f8faf9}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600}
.badge-vert{background:#e9f7ef;color:var(--vert)}
.badge-rouge{background:#fdecea;color:var(--rouge)}
.badge-or{background:#fbf3dd;color:#9c7510}
.code-acces{font-family:Consolas,monospace;background:var(--fond);border:1px dashed var(--bord);padding:2px 8px;border-radius:6px;font-size:12.5px}

/* ---------- Boutons / formulaires ---------- */
.btn{display:inline-block;border:none;border-radius:8px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;color:#fff;background:var(--vert)}
.btn:hover{background:var(--vert-f)}
.btn-or{background:var(--or)} .btn-or:hover{background:#b3860f}
.btn-rouge{background:var(--rouge)} .btn-rouge:hover{background:#992d22}
.btn-bleu{background:var(--bleu)} .btn-bleu:hover{background:#1d4f86}
.btn-gris{background:#8b97a8} .btn-gris:hover{background:#75808f}
.btn-mini{padding:5px 10px;font-size:12px;border-radius:6px}
.actions-ligne{display:flex;gap:6px;flex-wrap:wrap}
.barre-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}

.formulaire{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:24px;max-width:640px}
.formulaire label{display:block;font-size:13px;color:#445;margin:12px 0 5px;font-weight:600}
.formulaire input,.formulaire select,.formulaire textarea{width:100%;padding:9px 12px;border:1px solid var(--bord);border-radius:8px;font-size:14px;font-family:inherit}
.formulaire textarea{min-height:320px;line-height:1.7}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{outline:none;border-color:var(--vert)}
.form-ligne{display:flex;gap:14px}
.form-ligne>div{flex:1}
.form-boutons{margin-top:20px;display:flex;gap:10px}

/* ---------- Contenu arabe (fiches) ---------- */
.contenu-ar,textarea.contenu-ar{direction:rtl;text-align:right;font-family:'Segoe UI','Traditional Arabic',Tahoma,sans-serif}
.contenu-ltr,textarea.contenu-ltr,input.contenu-ltr{direction:ltr;text-align:left;font-family:'Segoe UI',Tahoma,Arial,sans-serif}
.fiche-lecture{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:30px;line-height:2.05;font-size:17px}
.fiche-lecture .unite{display:inline-block;background:#e9f7ef;color:var(--vert);border-radius:20px;padding:4px 14px;font-size:13px;margin-bottom:14px}
.fiche-lecture h1{color:var(--vert);font-size:24px;margin-bottom:16px}
mark{background:#ffe9a8;border-radius:3px;padding:0 2px}

/* ---------- Messages flash ---------- */
.flash{display:flex;justify-content:space-between;align-items:center;border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:14px}
.flash-succes{background:#e9f7ef;border:1px solid #bfe6cd;color:var(--vert)}
.flash-erreur{background:#fdecea;border:1px solid #f5c6c0;color:var(--rouge)}
.flash-info{background:#eaf2fb;border:1px solid #c5d9f1;color:var(--bleu)}
.flash-close{border:none;background:none;font-size:20px;cursor:pointer;color:inherit}

/* ---------- Modales ---------- */
.modale-fond{position:fixed;inset:0;background:rgba(15,25,40,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modale-fond[hidden]{display:none}
.modale{background:#fff;border-radius:14px;padding:26px;max-width:440px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.25);animation:pop .18s ease}
.modale h3{color:var(--vert);margin-bottom:10px;font-size:17px}
.modale p{font-size:14px;color:#334;line-height:1.6;white-space:pre-line}
.modale-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Connexion ---------- */
.page-connexion{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.boite-connexion{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:38px;width:100%;max-width:410px;text-align:center;box-shadow:0 10px 34px rgba(20,40,80,.09)}
.boite-connexion img{height:86px;margin-bottom:12px}
.boite-connexion h1{font-size:19px;color:var(--vert);margin-bottom:4px}
.boite-connexion p{font-size:13px;color:var(--gris);margin-bottom:22px}
.boite-connexion input{width:100%;padding:12px 14px;border:1px solid var(--bord);border-radius:9px;font-size:15px;text-align:center;letter-spacing:1px}
.boite-connexion input:focus{outline:none;border-color:var(--vert)}
.boite-connexion button{width:100%;margin-top:14px;padding:12px;border:none;border-radius:9px;background:var(--vert);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.boite-connexion button:hover{background:var(--vert-f)}

@media (max-width:900px){
    .c-span2{grid-column:auto}
}
@media (max-width:720px){
    .topbar{gap:10px}
    .recherche{order:3;max-width:none;width:100%}
    .conteneur{padding:18px 14px}
    .form-ligne{flex-direction:column;gap:0}
}