/* =====================================================================
   EVM - Ecole Virtuelle de Mauritanie
   Tableau Intelligent de Mathematiques - Feuille de style principale
   Direction : surface d'ardoise, trace a la craie, tranche coloree du logo
   ===================================================================== */

:root {
  /* Surfaces */
  --ardoise-900: #0E1A22;
  --ardoise-800: #14242F;
  --ardoise-700: #1B3040;
  --ardoise-600: #234055;
  --ligne:       rgba(238, 244, 243, .12);
  --ligne-forte: rgba(238, 244, 243, .24);

  /* Craie */
  --craie:       #EEF4F3;
  --craie-2:     rgba(238, 244, 243, .72);
  --craie-3:     rgba(238, 244, 243, .46);

  /* Tranche du logo EVM */
  --rouge:  #D6194F;
  --bleu:   #0E82C4;
  --vert:   #22A64C;
  --orange: #F26522;
  --jaune:  #FFC200;

  /* Etats */
  --ok:     #22A64C;
  --alerte: #FFC200;
  --erreur: #D6194F;

  /* Typographie */
  --display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --texte:   'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', 'Consolas', monospace;

  /* Rythme */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;
  --rayon: 10px;
  --rayon-sm: 6px;
  --ombre: 0 18px 40px rgba(0, 0, 0, .38);
  --barre: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--ardoise-900);
  background-image:
    linear-gradient(var(--ligne) 1px, transparent 1px),
    linear-gradient(90deg, var(--ligne) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  color: var(--craie);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  line-height: 1.2;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

p { margin: 0 0 12px; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono, kbd {
  font-family: var(--mono);
  font-size: .92em;
  background: rgba(0, 0, 0, .28);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--jaune);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--craie-3);
  margin: 0 0 4px;
}

.aide { color: var(--craie-2); font-size: 14px; }

hr.separateur {
  border: 0;
  border-top: 1px solid var(--ligne);
  margin: 20px 0;
}

/* --------------------------------------------------- tranche signature */
.tranche,
.install-cadre::before,
.carte-auth::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--rouge) 0 20%, var(--bleu) 20% 40%, var(--vert) 40% 60%,
    var(--orange) 60% 80%, var(--jaune) 80% 100%);
}

.marque {
  width: 64px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}

/* ------------------------------------------------------------ boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--ligne-forte);
  background: transparent;
  color: var(--craie);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.bouton:hover { background: rgba(238, 244, 243, .07); text-decoration: none; }
.bouton:active { transform: translateY(1px); }
.bouton:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }

.bouton-primaire {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}
.bouton-primaire:hover { background: #1194db; border-color: #1194db; }

.bouton-danger { border-color: var(--rouge); color: #ff86a6; }
.bouton-danger:hover { background: rgba(214, 25, 79, .16); }

.bouton-icone {
  padding: 8px 10px;
  font-size: 13px;
}

/* --------------------------------------------------------- formulaires */
.formulaire label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--craie-2);
  margin-bottom: 14px;
}

.formulaire input[type=text],
.formulaire input[type=email],
.formulaire input[type=password],
.formulaire input[type=url],
.formulaire input[type=number],
.formulaire select,
.formulaire textarea,
.champ {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-sm);
  color: var(--craie);
  font-family: var(--texte);
  font-size: 14px;
}
.formulaire textarea { min-height: 90px; resize: vertical; }
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus,
.champ:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(14, 130, 196, .22);
}
.formulaire select option { background: var(--ardoise-800); color: var(--craie); }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.interrupteur {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-sm);
  background: rgba(0, 0, 0, .18);
}
.interrupteur input { width: 18px; height: 18px; accent-color: var(--vert); margin: 0; }

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------- avis */
.avis {
  border-left: 3px solid var(--ligne-forte);
  background: rgba(0, 0, 0, .22);
  padding: 12px 14px;
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  margin-bottom: 16px;
  font-size: 14px;
}
.avis ul { margin: 8px 0 0; padding-left: 18px; }
.avis-ok     { border-left-color: var(--ok); }
.avis-erreur { border-left-color: var(--erreur); }
.avis-info   { border-left-color: var(--bleu); }
.avis-alerte { border-left-color: var(--alerte); }

/* -------------------------------------------------------------- tables */
.table-controle {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}
.table-controle td, .table-controle th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ligne);
  text-align: left;
}
.table-controle th { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--craie-3); }
.table-controle td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; }
.table-controle .ok     { color: var(--ok); }
.table-controle .ko     { color: var(--erreur); }
.table-controle .neutre { color: var(--craie-2); }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ligne-forte);
  color: var(--craie-2);
}
.badge-admin { border-color: var(--rouge); color: #ff8fac; }
.badge-prof  { border-color: var(--orange); color: #ffab7d; }
.badge-eleve { border-color: var(--bleu); color: #7fc9ef; }

/* ==================================================== page installation */
.page-standard { min-height: 100vh; }
.page-standard .page-install { min-height: 0; }

.page-install { display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; }

.install-cadre {
  width: 100%;
  max-width: 820px;
  background: var(--ardoise-800);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.install-tete {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--ligne);
}
.install-tete h1 { margin: 0; font-size: 22px; }

.fil-etapes {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ligne);
  background: rgba(0, 0, 0, .18);
  overflow-x: auto;
}
.fil-etapes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--craie-3);
  white-space: nowrap;
  border-right: 1px solid var(--ligne);
}
.fil-etapes .puce {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ligne-forte);
  font-family: var(--mono); font-size: 11px;
}
.fil-etapes li.actif { color: var(--craie); }
.fil-etapes li.actif .puce { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.fil-etapes li.fait { color: var(--craie-2); }
.fil-etapes li.fait .puce { background: var(--vert); border-color: var(--vert); color: #fff; }

.install-corps { padding: 28px; }

.install-pied {
  display: flex;
  justify-content: space-between;
  padding: 14px 28px;
  border-top: 1px solid var(--ligne);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--craie-3);
}

/* ========================================================= pages auth */
.page-auth { display: flex; align-items: center; justify-content: center; padding: 40px 20px; min-height: 100vh; }

.carte-auth {
  width: 100%;
  max-width: 420px;
  background: var(--ardoise-800);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  padding: 0 0 26px;
  text-align: center;
}
.carte-auth .marque { width: 92px; margin: 26px auto 12px; }
.carte-auth h1 { font-size: 20px; padding: 0 26px; }
.carte-auth .aide { padding: 0 26px; }
.carte-auth .formulaire,
.carte-auth .avis,
.carte-auth .bouton { text-align: left; }
.carte-auth .formulaire { padding: 8px 26px 0; }
.carte-auth .avis { margin: 0 26px 16px; }
.carte-auth .bouton-large { width: 100%; justify-content: center; }
.carte-auth .pied-auth {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ligne);
  font-size: 13px;
  color: var(--craie-2);
}

/* ==================================================== coquille de l'app */
.page-app { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

.barre-haute {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--barre);
  padding: 0 16px;
  background: var(--ardoise-800);
  border-bottom: 1px solid var(--ligne);
  flex: 0 0 auto;
  z-index: 30;
}
.barre-haute .marque { width: 38px; }
.barre-haute .titre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.barre-haute .titre small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--craie-3);
}
.barre-haute .espace { flex: 1; }

.menu-compte { position: relative; }
.pastille {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ardoise-600);
  border: 1px solid var(--ligne-forte);
  font-family: var(--display);
  font-size: 13px;
  color: var(--craie);
  cursor: pointer;
}
.tiroir-compte {
  position: absolute;
  right: 0; top: 46px;
  width: 230px;
  background: var(--ardoise-700);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-sm);
  box-shadow: var(--ombre);
  padding: 10px;
  display: none;
  text-align: left;
  z-index: 40;
}
.tiroir-compte.ouvert { display: block; }
.tiroir-compte a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  color: var(--craie);
  font-size: 14px;
}
.tiroir-compte a:hover { background: rgba(238, 244, 243, .07); text-decoration: none; }
.tiroir-compte .entete {
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--ligne);
  margin-bottom: 6px;
}

.zone-travail {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 320px 1fr 340px;
  min-height: 0;
}

.colonne {
  min-height: 0;
  overflow-y: auto;
  background: var(--ardoise-800);
  border-right: 1px solid var(--ligne);
  padding: 16px;
}
.colonne-droite { border-right: 0; border-left: 1px solid var(--ligne); }

.scene {
  position: relative;
  min-height: 0;
  background: var(--ardoise-900);
  display: flex;
  flex-direction: column;
}

.onglets {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--ligne);
  background: var(--ardoise-800);
  flex: 0 0 auto;
}
.onglet {
  font-family: var(--display);
  font-size: 13px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--rayon-sm) var(--rayon-sm) 0 0;
  color: var(--craie-3);
  background: transparent;
  cursor: pointer;
}
.onglet:hover { color: var(--craie); }
.onglet.actif {
  color: var(--craie);
  background: var(--ardoise-900);
  border-color: var(--ligne);
  box-shadow: inset 0 2px 0 var(--bleu);
}

.vue { flex: 1 1 auto; position: relative; min-height: 0; display: none; overflow: hidden; }
.vue.actif { display: block; }
.vue canvas { display: block; width: 100%; height: 100%; }

.bloc {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-sm);
  background: rgba(0, 0, 0, .18);
  padding: 14px;
  margin-bottom: 14px;
}
.bloc > h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--craie-3);
  font-family: var(--mono);
  font-weight: 500;
  margin-bottom: 10px;
}

.liste-courbes { list-style: none; margin: 0; padding: 0; }
.liste-courbes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--mono);
  font-size: 13px;
}
.liste-courbes li:last-child { border-bottom: 0; }
.puce-couleur { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.liste-courbes .expr { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- modales */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 16, .72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.voile.ouvert { display: flex; }

.modale {
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ardoise-800);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.modale-large { max-width: 860px; }
.modale::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    var(--rouge) 0 20%, var(--bleu) 20% 40%, var(--vert) 40% 60%,
    var(--orange) 60% 80%, var(--jaune) 80% 100%);
}
.modale-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ligne);
}
.modale-tete h3 { margin: 0; }
.modale-corps { padding: 20px; overflow-y: auto; }
.modale-pied {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--ligne);
}
.fermer {
  background: transparent;
  border: 0;
  color: var(--craie-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.fermer:hover { color: var(--craie); }

/* ------------------------------------------------------------- toasts */
.zone-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 120;
}
.toast {
  min-width: 240px;
  max-width: 360px;
  background: var(--ardoise-700);
  border: 1px solid var(--ligne-forte);
  border-left: 3px solid var(--bleu);
  border-radius: var(--rayon-sm);
  padding: 12px 14px;
  box-shadow: var(--ombre);
  font-size: 14px;
  animation: toast-entree .18s ease-out;
}
.toast-ok     { border-left-color: var(--ok); }
.toast-erreur { border-left-color: var(--erreur); }
.toast-alerte { border-left-color: var(--alerte); }
@keyframes toast-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- chargement */
.chargement {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--ligne-forte);
  border-top-color: var(--bleu);
  border-radius: 50%;
  animation: rotation .7s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

/* -------------------------------------------------------- explications */
.explication { font-size: 14px; line-height: 1.7; }
.explication h4 {
  font-family: var(--display);
  font-size: 13px;
  margin: 16px 0 6px;
  color: var(--jaune);
}
.explication ul, .explication ol { padding-left: 20px; margin: 0 0 12px; }
.explication .formule {
  font-family: var(--mono);
  background: rgba(0, 0, 0, .3);
  border-left: 2px solid var(--vert);
  padding: 8px 12px;
  margin: 10px 0;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .zone-travail { grid-template-columns: 280px 1fr; }
  .colonne-droite {
    position: fixed;
    top: var(--barre); right: 0; bottom: 0;
    width: 330px;
    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 50;
  }
  .colonne-droite.ouverte { transform: none; }
}

@media (max-width: 860px) {
  .zone-travail { grid-template-columns: 1fr; }
  .colonne-gauche {
    position: fixed;
    top: var(--barre); left: 0; bottom: 0;
    width: 300px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 50;
  }
  .colonne-gauche.ouverte { transform: none; }
  .grille-2 { grid-template-columns: 1fr; }
  .install-corps, .install-tete { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* =====================================================================
   Mode projection
   Destiné à la salle de classe équipée d'un vidéoprojecteur : les panneaux
   latéraux s'effacent, la scène occupe toute la largeur, les caractères et
   les traits sont épaissis, le contraste est renforcé.
   ===================================================================== */
body.projection {
  --craie-2: rgba(238, 244, 243, .88);
  --craie-3: rgba(238, 244, 243, .70);
  --ligne: rgba(238, 244, 243, .20);
  --ligne-forte: rgba(238, 244, 243, .38);
}

body.projection .colonne-gauche,
body.projection .colonne-droite {
  display: none;
}

body.projection .zone-travail {
  grid-template-columns: 1fr;
}

body.projection .barre-haute {
  height: 74px;
}
body.projection .barre-haute .marque { width: 48px; }
body.projection .barre-haute .titre { font-size: 20px; }
body.projection .barre-haute .titre small { font-size: 12px; }

body.projection .onglets { padding: 10px 14px 0; }
body.projection .onglet {
  font-size: 17px;
  padding: 12px 22px;
}
body.projection .bouton {
  font-size: 16px;
  padding: 12px 20px;
}
body.projection .bouton-icone {
  font-size: 15px;
  padding: 10px 14px;
}

body.projection .voile .modale { max-width: 760px; }
body.projection .modale-corps { font-size: 18px; }
body.projection .modale-tete h3 { font-size: 24px; }
body.projection .table-controle { font-size: 17px; }
body.projection .table-controle td,
body.projection .table-controle th { padding: 12px 14px; }
body.projection .explication { font-size: 18px; line-height: 1.75; }

/* Rappel discret de la sortie du mode */
body.projection .barre-haute::after {
  content: 'Mode projection — Échap pour revenir';
  position: absolute;
  right: 18px;
  bottom: -22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--craie-3);
  pointer-events: none;
}
body.projection .barre-haute { position: relative; }

/* =====================================================================
   Tableau de variations
   ===================================================================== */
.variations {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 12px;
}
.variations th {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--craie-3);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ligne);
}
.variations td {
  padding: 8px;
  border-bottom: 1px solid var(--ligne);
}
.variations .sens-croissante { color: var(--vert); }
.variations .sens-decroissante { color: var(--orange); }
.variations .sens-constante,
.variations .sens-indetermine { color: var(--craie-3); }
.variations .fleche {
  font-size: 16px;
  line-height: 1;
}