/* ==========================================================================
   MécaLab - feuille de style principale
   Charte : fond sombre, contraste fort, lisible en videoprojection.
   Code couleur constant dans tout le logiciel :
     bleu   = air admis / liquide de refroidissement froid
     orange = combustion
     rouge  = gaz d'echappement / point chaud
     ambre  = huile
     vert   = energie electrique
   ========================================================================== */

:root {
  --bg:      #0e1319;
  --bg2:     #151d26;
  --panel:   #1b2530;
  --panel2:  #223040;
  --line:    #2e3f52;
  --txt:     #e9eff6;
  --txt2:    #9db0c4;
  --txt3:    #6b7f94;

  --bleu:    #3fa9f5;
  --orange:  #ff8a3d;
  --rouge:   #e4463f;
  --ambre:   #f5b942;
  --vert:    #3fd18b;

  --r: 10px;
  --font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  overflow: hidden;
}

/* ---------- Barre du haut ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 18px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: none;
  border: 0;
  color: var(--txt);
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r);
}
.logo:hover { background: var(--panel); }
.logo .logo-meca { color: var(--txt); }
.logo .logo-lab  { color: var(--orange); }
.logo .logo-sub  { font-size: 13px; font-weight: 400; color: var(--txt3); }

.topbar-spacer { flex: 1; }

.fil-ariane {
  color: var(--txt2);
  font-size: 15px;
}

/* ---------- Boutons ---------- */

.btn {
  font-family: var(--font);
  font-size: 16px;
  color: var(--txt);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 16px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--panel2); border-color: #3d5670; }
.btn:active { transform: translateY(1px); }
.btn.actif { background: var(--orange); border-color: var(--orange); color: #16202a; font-weight: 600; }
.btn.primaire { background: var(--orange); border-color: var(--orange); color: #16202a; font-weight: 600; }
.btn.primaire:hover { background: #ffa05f; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-large { font-size: 18px; padding: 12px 22px; }

/* ---------- Ecrans ---------- */

main {
  height: calc(100% - 60px);
  overflow: hidden;
}

.ecran {
  display: none;
  height: 100%;
  overflow-y: auto;
}
.ecran.actif { display: block; }

/* ---------- Accueil ---------- */

.accueil-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 28px 60px;
}

.accueil-titre {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -.5px;
}
.accueil-titre .pt { color: var(--orange); }

.accueil-sous {
  color: var(--txt2);
  font-size: 20px;
  margin: 0 0 8px;
}
.accueil-ligne {
  color: var(--txt3);
  font-size: 15px;
  margin: 0 0 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.grille-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  color: var(--txt);
  font-family: var(--font);
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
}
.carte:hover { transform: translateY(-3px); border-color: var(--orange); background: var(--panel2); }
.carte.indispo { cursor: not-allowed; opacity: .5; }
.carte.indispo:hover { transform: none; border-color: var(--line); background: var(--panel); }

.carte-icone { font-size: 30px; line-height: 1; }
.carte-titre { font-size: 21px; font-weight: 700; margin: 0; }
.carte-desc  { font-size: 15px; color: var(--txt2); margin: 0; }

.etiquette {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}
.etiquette.pret     { background: rgba(63,209,139,.16); color: var(--vert); }
.etiquette.chantier { background: rgba(157,176,196,.14); color: var(--txt2); }

.bandeau-lot {
  margin: 34px 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--txt3);
}

/* ---------- Mise en page d'un module ---------- */

.module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  padding: 20px 24px 40px;
  max-width: 1500px;
  margin: 0 auto;
}

.scene {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Le dessin se cale sur la hauteur disponible, jamais sur la largeur :
   sinon il deborde et les commandes passent sous le bas de l'ecran. */
.scene svg#svg-moteur {
  height: calc(100vh - 290px);
  min-height: 340px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.panneau {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bloc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.bloc h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--txt3);
}

/* ---------- Commandes ---------- */

.commandes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 4px 2px;
}
.commandes .sep { width: 1px; height: 28px; background: var(--line); }
.commandes label { font-size: 14px; color: var(--txt2); }

input[type=range] {
  accent-color: var(--orange);
  width: 130px;
  vertical-align: middle;
}

.inter { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--txt2); cursor: pointer; }
.inter input { accent-color: var(--orange); width: 17px; height: 17px; }

/* ---------- Affichages de valeurs ---------- */

.temps-actuel {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 4px;
}
.temps-desc { font-size: 15px; color: var(--txt2); margin: 0; }

.mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mesure {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
}
.mesure .lib { font-size: 12px; color: var(--txt3); text-transform: uppercase; letter-spacing: .7px; }
.mesure .val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.voyants { display: flex; flex-direction: column; gap: 9px; }
.voyant {
  display: flex; align-items: center; gap: 11px;
  font-size: 15px;
}
.voyant .pastille {
  width: 15px; height: 15px; border-radius: 50%;
  background: #2b3947; border: 1px solid var(--line);
  flex: none;
  transition: background .1s, box-shadow .1s;
}
.voyant.on-bleu   .pastille { background: var(--bleu);   box-shadow: 0 0 11px var(--bleu); }
.voyant.on-rouge  .pastille { background: var(--rouge);  box-shadow: 0 0 11px var(--rouge); }
.voyant.on-orange .pastille { background: var(--orange); box-shadow: 0 0 13px var(--orange); }
.voyant .txt-val { margin-left: auto; color: var(--txt2); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- Cours deroulant ---------- */

.cours { margin-top: 4px; }
.cours details {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg2);
  overflow: hidden;
}
.cours summary {
  cursor: pointer;
  padding: 11px 15px;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
}
.cours summary::-webkit-details-marker { display: none; }
.cours summary::before { content: "▸ "; color: var(--orange); }
.cours details[open] summary::before { content: "▾ "; }
.cours .corps { padding: 0 15px 14px; font-size: 15.5px; color: var(--txt2); }
.cours .corps p { margin: 0 0 9px; }
.cours .corps ul { margin: 0 0 9px; padding-left: 20px; }
.cours .corps li { margin-bottom: 4px; }
.cours .corps b { color: var(--txt); }

/* ---------- Termes du glossaire cliquables ---------- */

.gt {
  color: var(--orange);
  border-bottom: 1px dotted var(--orange);
  cursor: help;
}
.gt:hover { background: rgba(255,138,61,.14); }

/* ---------- Glossaire ---------- */

.glossaire-inner { max-width: 1000px; margin: 0 auto; padding: 30px 28px 60px; }

.recherche {
  width: 100%;
  font-family: var(--font);
  font-size: 18px;
  color: var(--txt);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 16px;
  margin-bottom: 14px;
}
.recherche:focus { outline: none; border-color: var(--orange); }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filtres .btn { font-size: 14px; padding: 6px 13px; }

.terme {
  border-bottom: 1px solid var(--line);
  padding: 15px 4px;
}
.terme:target, .terme.vise { background: rgba(255,138,61,.09); border-radius: 8px; }
.terme h4 { margin: 0 0 5px; font-size: 19px; }
.terme .cat {
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--txt3); margin-left: 9px;
}
.terme p { margin: 0; color: var(--txt2); font-size: 16px; }
.aucun { color: var(--txt3); padding: 26px 4px; font-style: italic; }

/* ---------- Barre de cycle ---------- */

/* hauteur laissee libre : le rapport du viewBox pilote l'echelle,
   sinon le clic sur la barre ne tomberait pas sur le bon angle */
.cycle-bar { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }

/* Le module moteur occupe exactement la fenetre : seule la colonne
   de droite defile, le dessin et ses commandes restent toujours visibles. */
#ecran-moteur { overflow: hidden; }
#ecran-moteur .module { height: 100%; }
#ecran-moteur .scene { overflow: hidden; }
#ecran-moteur .panneau { overflow-y: auto; padding-right: 6px; }

/* ---------- Ecrans etroits ---------- */

@media (max-width: 1100px) {
  .module { grid-template-columns: 1fr; }
}