/* Site des données de Microcontrôland : lignes vertes sur fond sombre. */
:root {
  --fond: #050b07;
  --panneau: #08140c;
  --ligne: #1f6b3a;
  --ligne-vive: #39d96f;
  --texte: #d6eedc;
  --texte-doux: #93b89c;
  --accent: #6dff9c;
  --attente: #e6c35c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  background-image:
    linear-gradient(rgba(57, 217, 111, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 217, 111, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--texte);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, .marque, .icones, th { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 .5rem; color: var(--accent); }
h2 { font-size: 1.25rem; color: var(--accent); margin-top: 0; }
h3 { font-size: 1rem; color: var(--ligne-vive); margin-bottom: .25rem; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dim { color: var(--texte-doux); }

.bandeau {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 16px; border-bottom: 1px solid var(--ligne);
  position: sticky; top: 0; background: rgba(5, 11, 7, .94); z-index: 2;
}
.marque { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.logo { color: var(--ligne-vive); }
.langues button {
  background: transparent; color: var(--texte-doux); border: 1px solid var(--ligne);
  font: inherit; font-size: .85rem; padding: .2rem .6rem; cursor: pointer;
}
.langues button[aria-pressed="true"] { color: var(--fond); background: var(--ligne-vive); border-color: var(--ligne-vive); }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px 3rem; }

.tete { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; padding: 2.5rem 0 1.5rem; }
.sous-titre { color: var(--texte-doux); margin-top: 0; }
.cerveau { margin: 0; text-align: center; }
.cerveau canvas { width: 100%; max-width: 420px; aspect-ratio: 1; border: 1px solid var(--ligne); background: radial-gradient(circle, #0b2414 0%, var(--fond) 70%); }
.cerveau figcaption { font-size: .8rem; color: var(--texte-doux); margin-top: .4rem; }

.recherche { position: relative; margin-top: 1.25rem; }
.recherche input {
  width: 100%; padding: .7rem .9rem; font: inherit; color: var(--texte);
  background: var(--panneau); border: 1px solid var(--ligne-vive); border-radius: 0;
}
.resultats { list-style: none; margin: .25rem 0 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.resultats li { border: 1px solid var(--ligne); border-top: 0; background: var(--panneau); }
.resultats li:first-child { border-top: 1px solid var(--ligne); }
.resultats a { display: block; padding: .5rem .8rem; text-decoration: none; color: var(--texte); }
.resultats a:hover, .resultats a:focus { background: #0f2a18; }
.resultats .type { font-size: .75rem; color: var(--ligne-vive); font-family: ui-monospace, Menlo, monospace; }
.resultats .extrait { display: block; font-size: .85rem; color: var(--texte-doux); }
.resultats mark { background: transparent; color: var(--accent); font-weight: 600; }

.icones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0 2rem; }
.icones a {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .4rem;
  border: 1px solid var(--ligne); background: var(--panneau); color: var(--texte); text-decoration: none;
  font-size: .85rem; text-align: center; transition: border-color .15s, color .15s;
  min-width: 0; overflow-wrap: anywhere; hyphens: auto;
}
.icones a:hover, .icones a:focus { border-color: var(--ligne-vive); color: var(--accent); }
.icones .ic { font-size: 1.6rem; color: var(--ligne-vive); line-height: 1; }

.cadre { border: 1px solid var(--ligne); background: rgba(8, 20, 12, .88); padding: 1.25rem 1.25rem 1rem; margin-bottom: 1.5rem; scroll-margin-top: 4rem; }
.cadre p { max-width: 75ch; }
.note { color: var(--texte-doux); font-size: .9rem; }

.tableau-defile { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { border-bottom: 1px solid var(--ligne); padding: .45rem .6rem; text-align: left; vertical-align: top; }
th { color: var(--ligne-vive); font-weight: 600; white-space: nowrap; }
td.code { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; word-break: break-all; color: var(--texte-doux); }
tr.bloc td { color: var(--accent); font-family: ui-monospace, Menlo, monospace; padding-top: .9rem; border-bottom-color: var(--ligne-vive); }
td .note-critere { display: block; font-size: .78rem; color: var(--texte-doux); margin-top: .15rem; }
td.plafond { font-family: ui-monospace, Menlo, monospace; text-align: center; }
tr.en-avant td:nth-child(2) { color: var(--accent); font-weight: 600; }
.etat-attente { color: var(--attente); white-space: nowrap; }
.etiquette { display: inline-block; border: 1px solid var(--ligne); padding: 0 .4rem; font-size: .78rem; white-space: nowrap; }

.etat h2 { display: flex; align-items: center; gap: .4rem; }
.etat dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; margin: 0; border-top: 1px solid var(--ligne); padding-top: .9rem; }
.etat dt { color: var(--texte-doux); }
.etat dd { margin: 0; text-align: right; font-weight: 600; }
.etat button { margin-left: .5rem; background: transparent; color: var(--accent); border: 1px solid var(--ligne); font: inherit; font-size: .78rem; font-weight: 400; padding: .1rem .5rem; cursor: pointer; }
.etat button:disabled { opacity: .5; cursor: default; }
.ok { color: var(--accent); }
.alerte { color: #ff7a6b; }
@media (max-width: 760px) { .etat dl { grid-template-columns: 1fr; gap: .1rem; } .etat dd { text-align: left; margin-bottom: .5rem; } }
.liens { list-style: none; padding: 0; margin: 0; }
.liens li { padding: .4rem 0; border-bottom: 1px solid var(--ligne); }
.liens .dim { font-size: .85rem; }

footer { border-top: 1px solid var(--ligne); color: var(--texte-doux); font-size: .85rem; text-align: center; padding: 1.25rem 16px; }

html:not(.fr) [lang="fr"] { display: none; }
html.fr [lang="en"] { display: none; }

@media (max-width: 760px) {
  .tete { grid-template-columns: 1fr; padding-top: 1.5rem; gap: 1rem; }
  .cerveau { order: -1; }
  .cerveau canvas { max-width: 280px; }
  .icones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .icones a { font-size: .78rem; }
  .etiquette { white-space: normal; }
  .cadre { padding: 1rem .8rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }