/*
  signature-truc.css
  Signature visuelle des "trucs informatiques" du cours 420-SN1.
  Famille colorblock du site (creme, bordures noires, ombres dures,
  polices Bungee / Lilita One / Nunito) MAIS avec un accent CYAN + un motif
  terminal ">_", pour rester distinctif sans le theme sombre des "en savoir plus"
  et sans entrer en collision avec les couleurs des 3 missions (orange/vert/violet).
  Partage par toutes les pages truc/<sujet>/index.html (lien ../decoration/).
*/

:root {
  --noir:#111; --blanc:#fff; --creme:#FFF7E6;
  --cyan:#0891b2; --cyan-clair:#22d3ee; --cyan-fonce:#0a1240;
  --vert:#16a34a; --jaune:#FFCC00; --gris:#e7e7e7;
  --terminal:#0a0d18;
}

* { box-sizing:border-box; }
body {
  margin:0; font-family:'Nunito', sans-serif; font-weight:700;
  color:var(--noir); background:var(--creme); line-height:1.6;
}

/* ====== En-tete ====== */
#entete { padding:44px 24px 28px; text-align:center; }
#entete .surtitre {
  display:inline-block; font-family:'Bungee', cursive; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blanc); background:var(--cyan);
  border:3px solid var(--noir); border-radius:999px; padding:6px 16px;
  box-shadow:4px 4px 0 var(--noir); margin:0 0 16px;
}
#entete .surtitre::before { content:"\203A_ "; }
#titre-principal { margin:0; font-family:'Lilita One', cursive; font-size:clamp(28px, 5vw, 46px); line-height:1.05; }
#sous-titre { color:#555; max-width:660px; margin:14px auto 0; font-weight:700; }

/* ====== Contenu et sections ====== */
#contenu { max-width:860px; margin:0 auto; padding:16px 24px 64px; }
.section {
  background:var(--blanc); border:5px solid var(--noir); border-radius:16px;
  box-shadow:8px 8px 0 var(--cyan); padding:24px 26px; margin:24px 0;
}
.section-titre { margin:0 0 10px; font-family:'Lilita One', cursive; font-size:1.45rem; color:var(--cyan); }
.note { color:#555; font-size:.95em; }
.legende { color:#555; font-size:.95em; margin-top:12px; }

/* ====== Code et touches clavier ====== */
code {
  font-family:'JetBrains Mono', 'Courier New', monospace; background:var(--terminal);
  color:var(--cyan-clair); padding:2px 8px; border-radius:6px; font-size:.88em;
}
.touche {
  display:inline-block; font-family:'JetBrains Mono', monospace; font-size:.85em; color:var(--noir);
  background:var(--blanc); border:3px solid var(--noir); border-bottom-width:5px;
  border-radius:8px; padding:3px 11px;
}

/* ====== Tableaux de raccourcis ====== */
.tableau-raccourcis { width:100%; border-collapse:collapse; margin-top:14px; }
.tableau-raccourcis th, .tableau-raccourcis td {
  border:3px solid var(--noir); padding:11px 13px; text-align:left; vertical-align:middle; font-weight:700;
}
.tableau-raccourcis th { background:var(--noir); color:var(--blanc); font-family:'Bungee', cursive; font-size:.74rem; letter-spacing:.04em; }

/* ====== Demo : titres et boutons d'action ====== */
.demo { margin-top:16px; }
.demo-titre { margin:0 0 12px; font-family:'Bungee', cursive; font-size:.8rem; color:var(--cyan); text-transform:uppercase; letter-spacing:.06em; }
.commandes { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; align-items:center; }
.commandes .libelle { color:#555; font-size:.95em; margin-right:4px; }
.action {
  font-family:'Lilita One', cursive; font-size:.95rem; cursor:pointer;
  background:var(--blanc); color:var(--noir); border:4px solid var(--noir);
  border-radius:10px; box-shadow:4px 4px 0 var(--noir); padding:9px 16px;
  transition:transform .1s ease, box-shadow .1s ease;
}
.action:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--noir); }
.action:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--noir); }
.action.secondaire { background:var(--cyan); color:var(--blanc); }
.action.inactif { background:var(--gris); color:#8a8a8a; box-shadow:4px 4px 0 #b9b9b9; }

/* ====== Demo "fenetres cote a cote" : ecran simule ====== */
#ecran {
  position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden;
  background:linear-gradient(135deg, #11203a, var(--terminal));
  border:5px solid var(--noir); border-radius:12px; box-shadow:6px 6px 0 var(--noir);
}
.fenetre {
  position:absolute; border-radius:8px; color:var(--noir); font-family:'Lilita One', cursive; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; border:3px solid var(--noir);
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
  transition:top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1),
             width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1);
}
#fenetre-code { background:var(--cyan-clair); }
#fenetre-doc { background:var(--jaune); }

/* ====== Demo "indentation" : editeur et console ====== */
.editeur { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px; }
@media (max-width:620px) { .editeur { grid-template-columns:1fr; } }
.volet { background:var(--terminal); border:4px solid var(--noir); border-radius:12px; box-shadow:5px 5px 0 var(--noir); padding:14px 16px; }
.volet-titre { font-family:'Bungee', cursive; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cyan-clair); margin-bottom:10px; }
.code-editeur { font-family:'JetBrains Mono', monospace; font-size:15px; white-space:pre; line-height:1.7; color:#e8ecf4; }
.code-editeur .motcle { color:#ffb86b; }
.code-editeur .nomvar { color:var(--cyan-clair); }
.code-editeur .ligne-mobile { background:#16263f; border-radius:5px; }
.code-editeur .marque-retrait { color:#46527a; }
.console-sortie { font-family:'JetBrains Mono', monospace; font-size:15px; white-space:pre; line-height:1.7; color:var(--cyan-clair); min-height:1.7em; }
.console-vide { color:#9aa6c2; font-style:italic; }
.verdict { margin-top:14px; font-size:.98em; }
.pastille { display:inline-block; padding:3px 12px; border-radius:999px; font-size:.85em; font-weight:800; border:3px solid var(--noir); }
.pastille.dans { background:#dcfce7; color:#15803d; }
.pastille.hors { background:var(--jaune); color:var(--noir); }

/* ====== Pied ====== */
#pied { text-align:center; color:#555; padding:26px; font-size:.95em; }
#pied a { color:var(--cyan); font-weight:800; }

/* ====== Navigation de retour (pied de page) ====== */
#retour {
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
  text-align:center; padding:8px 24px 56px; margin-top:8px;
}
#retour a { color:var(--cyan); font-weight:800; text-decoration:none; }
#retour a:hover { text-decoration:underline; }