/* Démonstration de la revendication : console à relief d'ASA Compass,
   réglée sur le cran « Matière » choisi par Karl (K-17). Les quatre règles :
   la lumière vient du haut, une surface qui reçoit se creuse, ce qui se
   presse s'enfonce, l'accent est une lampe. */

:root {
  --fond: #05080C;
  --chassis: #22303F;
  --chassis-haut: #2C3D50;
  --creux: #131C26;
  --filet: rgba(255, 255, 255, .20);
  --arete-vive: rgba(255, 255, 255, .26);
  --arete: rgba(255, 255, 255, .12);
  --texte: #E8EDF2;
  --doux: #9FAFBE;
  --accent: #00E0B8;
  --accent-vif: #57F2D6;
  --lueur: rgba(0, 224, 184, .22);
  --alerte: #FF7A6B;
  --or: #F2D65C;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(180deg, #0A101A 0%, var(--fond) 240px);
  background-color: var(--fond);
  color: var(--texte);
  font: 15px/1.55 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  padding: 0 16px 64px;
}

.cadre { max-width: 1060px; margin: 0 auto; }

/* ------------------------------------------------------------- la barre */

.barre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin: 18px 0 26px;
  background: linear-gradient(180deg, var(--chassis-haut), var(--chassis));
  border: 1px solid var(--filet); border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--arete-vive), 0 6px 20px rgba(0, 0, 0, .85);
}
.barre .logo {
  font-weight: 700; letter-spacing: .4px; text-decoration: none; color: var(--texte);
}
.barre .logo b { color: var(--accent); text-shadow: 0 0 12px var(--lueur); }
.barre .etiquette {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fond); background: var(--accent);
  padding: 3px 9px; border-radius: 6px; font-weight: 700;
  box-shadow: 0 0 14px var(--lueur);
}
.barre nav { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .barre nav { margin-left: 0; gap: 4px; font-size: .9rem; }
}
.barre nav a { color: var(--doux); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.barre nav a:hover { color: var(--texte); }
.barre nav a.ici {
  color: var(--texte); background: var(--creux);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .95);
}

/* ------------------------------------------------------------- les blocs */

.bloc {
  background: linear-gradient(180deg, var(--chassis-haut), var(--chassis));
  border: 1px solid var(--filet); border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--arete-vive), 0 16px 34px rgba(0, 0, 0, .75);
  padding: 20px 22px; margin-bottom: 22px;
}
.bloc h2 {
  margin: 0 0 6px; font-size: 1.15rem; letter-spacing: .3px;
}
.bloc h2 .lampe { color: var(--accent); text-shadow: 0 0 12px var(--lueur); }
.bloc .sous { color: var(--doux); margin: 0 0 16px; font-size: .92rem; }

.creux {
  background: var(--creux); border: 1px solid var(--arete); border-radius: 10px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .95);
  padding: 12px 14px;
}

/* ------------------------------------------------------------- boutons */

button, .bouton {
  font: inherit; cursor: pointer; color: var(--texte);
  background: linear-gradient(180deg, #33455A, #263547);
  border: 1px solid var(--filet); border-radius: 10px;
  padding: 9px 16px;
  box-shadow: inset 0 1px 0 var(--arete-vive), 0 3px 8px rgba(0, 0, 0, .6);
  text-decoration: none; display: inline-block;
}
button:hover, .bouton:hover { border-color: var(--arete-vive); }
button:active, .bouton:active {
  transform: translateY(1px);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8);
}
button.principal, .bouton.principal {
  background: linear-gradient(180deg, #0AF0C6, #00C4A1);
  color: #04231C; font-weight: 700; border-color: rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px var(--lueur);
}
button.danger { color: var(--alerte); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------- formulaires */

label { display: block; margin: 14px 0 6px; font-size: .9rem; color: var(--doux); }
label b { color: var(--texte); }
input[type=text], textarea {
  width: 100%; font: inherit; color: var(--texte);
  background: var(--creux); border: 1px solid var(--arete); border-radius: 10px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .95);
  padding: 10px 12px;
}
input[type=text]:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .95), 0 0 0 3px var(--lueur);
}
textarea { min-height: 130px; resize: vertical; }
.aide { font-size: .8rem; color: var(--doux); margin-top: 4px; }
.compteur { float: right; }

/* ------------------------------------------------------------- tuiles */

.tuiles { display: flex; gap: 10px; flex-wrap: wrap; }
.tuiles img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--arete); background: var(--creux);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8);
}

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.carte {
  background: var(--creux); border: 1px solid var(--arete); border-radius: 12px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .95); padding: 16px;
}
.carte h3 { margin: 0 0 4px; }
.carte .chiffre { color: var(--accent); text-shadow: 0 0 10px var(--lueur); font-weight: 700; }

/* ------------------------------------------------------------- aperçu de page */

.apercu-page {
  border: 1px solid var(--filet); border-radius: 12px; overflow: hidden;
  background: var(--fond);
  box-shadow: inset 0 1px 0 var(--arete), 0 10px 26px rgba(0, 0, 0, .7);
}
.apercu-page .banniere {
  width: 100%; aspect-ratio: 4 / 1; object-fit: cover; display: block;
  background: var(--creux);
}
.apercu-page .corps { padding: 18px 20px 22px; }
.apercu-page h3 { margin: 0 0 2px; font-size: 1.5rem; }
.apercu-page .mention {
  display: inline-block; font-size: .75rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 6px;
  padding: 2px 8px; margin: 6px 0 12px;
}
.apercu-page .mention.grise { color: var(--doux); border-color: var(--doux); }
.apercu-page p.texte { color: var(--doux); white-space: pre-wrap; margin: 0 0 16px; }
.apercu-page p.texte a { color: var(--accent); }

/* ------------------------------------------------------------- divers */

.adresse { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; color: var(--accent); word-break: break-all; }
.pastille {
  display: inline-block; font-size: .75rem; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--arete); color: var(--doux);
}
.pastille.verte { color: var(--accent); border-color: var(--accent); }
.pastille.rouge { color: var(--alerte); border-color: var(--alerte); }
.pastille.or { color: var(--or); border-color: var(--or); }

.journal { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.journal li { padding: 7px 0; border-bottom: 1px solid var(--arete); color: var(--doux); }
.journal li:last-child { border-bottom: none; }
.journal .quand { color: var(--texte); }

.message-etat { margin-top: 12px; font-size: .9rem; }
.message-etat.bon { color: var(--accent); }
.message-etat.mauvais { color: var(--alerte); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; } }

.grande-porte {
  display: block; text-decoration: none; color: var(--texte);
  background: linear-gradient(180deg, var(--chassis-haut), var(--chassis));
  border: 1px solid var(--filet); border-radius: 14px; padding: 26px 24px;
  box-shadow: inset 0 1px 0 var(--arete-vive), 0 16px 34px rgba(0, 0, 0, .75);
}
.grande-porte:hover { border-color: var(--accent); }
.grande-porte:active { transform: translateY(1px); }
.grande-porte h2 { margin: 0 0 8px; }
.grande-porte p { margin: 0; color: var(--doux); }
.grande-porte .fleche { color: var(--accent); font-weight: 700; }