/* Identité « Globe » (n° 15) : nuit #05070f, blanc, bleu #4da3ff, Sora. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
:root { --nuit: #05070f; --nuit2: #0b0f1c; --trait: #1a2236; --blanc: #ffffff; --bleu: #4da3ff; --gris: #9aa4b8; --rouge: #ff6b6b;
  --sans: Sora, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--nuit); color: var(--blanc); }
body { font-family: var(--sans); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
.w { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
nav.haut { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; gap: 16px; flex-wrap: wrap; }
.marque { display: flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.liens { display: flex; gap: 22px; align-items: center; }
.liens a { color: var(--gris); text-decoration: none; font-size: 14px; }
.liens a:hover, .liens a.ici { color: var(--blanc); }
.liens a.go { color: var(--bleu); }
.liens a.x { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--blanc); box-shadow: inset 0 0 0 1px #ffffff30; }
.liens a.x:hover { box-shadow: inset 0 0 0 1px var(--bleu); }
.avert { max-width: 640px; margin-top: 8px; font-size: 12px; line-height: 1.5; color: #7d879b; }
.info { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: 600 10px var(--sans); background: #ffffff14; color: var(--gris); cursor: help; margin-left: 4px; vertical-align: 1px; }
h1 { font-weight: 300; letter-spacing: -.03em; line-height: 1.02; }
h1 b { font-weight: 700; }
.gris { color: var(--gris); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.btn { display: inline-block; background: var(--blanc); color: var(--nuit); padding: 14px 24px; border-radius: 99px; font-weight: 700;
  text-decoration: none; border: 0; font: 700 15px var(--sans); cursor: pointer; }
.btn.bleu { background: var(--bleu); color: var(--nuit); }
.btn.ligne { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1px #ffffff40; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.carte { background: var(--nuit2); border: 1px solid var(--trait); border-radius: 18px; }
.pastille { display: inline-flex; gap: 6px; align-items: center; font: 500 12px var(--mono); padding: 5px 10px; border-radius: 99px; background: #4da3ff1a; color: var(--bleu); }
.pastille.rouge { background: #ff6b6b1a; color: var(--rouge); }
.pastille.gris { background: #ffffff10; color: var(--gris); }
.pastille i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vit i { animation: pouls 1.4s infinite; } @keyframes pouls { 50% { opacity: .2; } }
.note { border-left: 2px solid var(--bleu); padding: 12px 16px; background: #4da3ff0d; color: #cfd6e4; font-size: 14px; line-height: 1.55; border-radius: 0 10px 10px 0; }
footer { border-top: 1px solid var(--trait); margin-top: 80px; padding: 26px 0 40px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--gris); font-size: 13px; }
.demo { position: fixed; right: 12px; bottom: 12px; z-index: 50; font: 500 11px var(--mono); background: #ffd75e; color: #1a1300; padding: 6px 10px; border-radius: 4px; }
@media (max-width: 640px) { .w { padding: 0 16px; } .liens { gap: 14px; } }