/* ============================================================
   goguy.fr — charte graphique commune (thème sombre)
   Une seule source pour toutes les pages : couleurs, police,
   cartes, pastilles, en-tête. Modifier ici = tout le site suit.
   ============================================================ */

:root{
  /* Fonds */
  --bg:        #060b18;
  --bg-grad:   radial-gradient(1200px 600px at 30% -10%, #14233f 0%, #0a1326 45%, #060b18 100%);
  --card:      #111c33;
  --card-soft: #16233f;
  --line:      rgba(255,255,255,.08);

  /* Texte */
  --ink:   #e8eef7;
  --muted: #92a1ba;

  /* Accents sémantiques (cohérents partout) */
  --solaire: #f5a623;  /* solaire / soleil */
  --import:  #3b97f0;  /* import EDF / réseau */
  --green:   #22c55e;  /* charge / aujourd'hui / OK */
  --red:     #ef4444;  /* décharge / alerte */
  --accent:  #38bdf8;  /* accent UI / liens */

  /* Formes */
  --radius: 16px;
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

/* ---- Carte générique ---- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

/* ---- Titres ---- */
h1{ font-size:18px; font-weight:650; margin:0; letter-spacing:.2px; }
h2{ font-size:20px; font-weight:650; margin:0 0 18px; letter-spacing:.2px; }

.sub{ font-size:12.5px; color:var(--muted); }
.sub.off{ color:#fca5a5; }

/* ---- Pastilles / légendes ---- */
.pill{ font-size:12.5px; color:var(--muted); }
.pill b{ color:var(--ink); font-weight:650; }
.dot{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle; }

/* ---- Badges (valeurs) ---- */
.badge{ padding:9px 15px; border-radius:12px; font-size:14px; font-weight:700; }
.badge.is-import  { background:rgba(59,151,240,.16); color:var(--import); }
.badge.is-solaire { background:rgba(245,166,35,.16);  color:var(--solaire); }
.badge.is-green   { background:rgba(34,197,94,.16);   color:var(--green); }

/* ---- Pied de carte ---- */
.foot{ font-size:11.5px; color:var(--muted); text-align:right; margin-top:10px; }

/* ---- En-tête de navigation (accueil) ---- */
.header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:10px;
  height:64px; padding:0 14px;
  background:rgba(8,14,28,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.header .brand{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:15px; color:var(--ink);
  padding-right:8px; margin-right:4px; white-space:nowrap;
}
.header .brand .logo{ font-size:18px; }

.link{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card-soft);
  border:1px solid var(--line);
  padding:8px 13px; border-radius:11px;
  color:var(--ink); font-size:13.5px; text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.link:hover{
  background:#22324f;
  border-color:rgba(56,189,248,.5);
  transform:translateY(-1px);
}

/* ---- Barre de défilement discrète ---- */
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---- Utilitaire : centrer une carte seule ---- */
.center{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px; }