:root { --bg:#0f1822; --card:#fff; --ink:#1a2b3c; --accent:#2f6f9f; --muted:#7a8794; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; color: var(--ink); background:#eef2f5; }
body.centered { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 50% -10%, #1d3a52, var(--bg)); }

.topbar { display:flex; align-items:center; gap:10px; padding:12px 20px;
  background: var(--bg); color:#fff; }
.topbar .spacer { flex:1; }
.topbar .who { opacity:.85; margin-right:6px; font-size:14px; }

/* Marque cliquable (retour accueil) + navigation des pages d'information. */
.topbar .brand { color:#fff; text-decoration:none; font-weight:700; font-size:17px; letter-spacing:.3px; }
.topbar .brand:hover { opacity:.85; }
.mainnav { display:flex; gap:2px; margin-left:4px; }
.mainnav a { color:rgba(255,255,255,.82); text-decoration:none; font-size:14px;
  padding:5px 9px; border-radius:7px; }
.mainnav a:hover { background:rgba(255,255,255,.12); color:#fff; }

/* Pages d'information (méthodologie, à propos) : contenu lisible en colonne. */
.prose { max-width:760px; }
.prose h1 { margin-top:0; }
.prose h2 { font-size:17px; margin:26px 0 8px; color:var(--accent); }
.prose p, .prose li { line-height:1.6; color:#33414f; }
.prose ul { padding-left:20px; }
.prose .lead { font-size:16px; color:#445; }

.container { max-width: 1000px; margin: 24px auto; padding: 0 20px; }
h1 { font-size: 22px; }
.muted { color: var(--muted); }

.btn { background: var(--accent); color:#fff; text-decoration:none; padding:7px 12px;
  border-radius:8px; font-size:14px; }
.btn.ghost { background: transparent; border:1px solid rgba(255,255,255,.4); }

.card { background: var(--card); border-radius:12px; padding:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.12); margin-bottom:20px; }
.card.login { width: 320px; }
.login h1 { margin:0; } .login .sub { color:var(--muted); margin:4px 0 16px; }
.login label, .row label { display:block; }
.login label { margin-bottom:12px; font-size:13px; color:#445; }
.login input { width:100%; padding:9px; margin-top:4px; border:1px solid #cdd6df; border-radius:8px; }
.login button, .row button, .checks button, .mini button {
  background: var(--accent); color:#fff; border:0; padding:9px 14px; border-radius:8px; cursor:pointer; }
.login button { width:100%; margin-top:6px; }
.error { background:#fdecea; color:#a3261b; padding:8px 10px; border-radius:8px; font-size:13px; }

.cards { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.card.project { display:flex; flex-direction:column; gap:6px; color:var(--ink); padding:0;
  overflow:hidden; transition: transform .08s; }
.card.project:hover { transform: translateY(-2px); }
.card.project .open-link { display:flex; flex-direction:column; gap:6px; text-decoration:none;
  color:var(--ink); padding:20px 20px 14px; }
.card.project .thumb { font-size:34px; }
.card.project .pname { font-weight:600; }
.card.project .open { color: var(--accent); font-size:13px; }
.card.project .dl { display:block; text-decoration:none; color:var(--muted); font-size:12px;
  padding:9px 20px; border-top:1px solid #eef2f5; background:#fafbfc; }
.card.project .dl:hover { color:var(--accent); background:#f2f6fa; }

/* Bascule de langue FR/EN : sur la barre sombre (portail) et sur la carte de connexion. */
.lang { display:inline-flex; border:1px solid rgba(255,255,255,.35); border-radius:7px;
  overflow:hidden; font-size:11px; }
.lang button { border:0; background:transparent; color:#fff; padding:3px 8px; cursor:pointer;
  font-weight:600; font-family:inherit; opacity:.8; }
.lang button + button { border-left:1px solid rgba(255,255,255,.35); }
.lang button.active { background:#fff; color:var(--bg); opacity:1; }

/* En-tête de page (titre + bouton créer). */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Carte de projet : état « en attente » (grisé, non cliquable). */
.card.project.pending { opacity:.85; }
.card.project .open-link.disabled { cursor:default; color:var(--muted); }
.card.project.pending .thumb { filter:grayscale(1); opacity:.7; }
.card.project .pending-tag { display:inline-block; font-size:12px; color:#9a6b00;
  background:#fff5e0; border:1px solid #f0dca8; border-radius:6px; padding:1px 8px; align-self:flex-start; }

/* Barre du haut : flèche retour. */
.topbar .back-link { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px; text-decoration:none; color:#fff; font-size:17px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); margin-right:6px; }
.topbar .back-link:hover { background:rgba(255,255,255,.22); }

/* Formulaire de création de projet. */
.field { display:block; margin-bottom:14px; font-size:13px; color:#445; }
.field input { display:block; width:100%; max-width:420px; padding:9px; margin-top:4px;
  border:1px solid #cdd6df; border-radius:8px; }
.muted.small, .small { font-size:12px; }
button.primary { background:var(--accent); color:#fff; border:0; padding:10px 16px;
  border-radius:8px; cursor:pointer; font-size:14px; margin-top:6px; }

/* Onglets import / dessin. */
.tabs { display:flex; gap:6px; margin:14px 0 10px; border-bottom:1px solid #e6ebf0; }
.tab { background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted);
  padding:8px 12px; cursor:pointer; font-size:14px; font-family:inherit; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tabpane input[type=file] { margin-top:6px; }
#map { height:420px; width:100%; border-radius:10px; margin:6px 0; border:1px solid #cdd6df; }

.login-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.login-head .lang { border-color:#dde3e9; }
.login-head .lang button { color:var(--muted); }
.login-head .lang button + button { border-left-color:#dde3e9; }
.login-head .lang button.active { background:var(--accent); color:#fff; }

.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row input { padding:8px; border:1px solid #cdd6df; border-radius:8px; }
.chk { display:inline-flex; align-items:center; gap:5px; font-size:13px; }

.grid { width:100%; border-collapse: collapse; }
.grid th, .grid td { text-align:left; padding:10px 8px; border-top:1px solid #e6ebf0; vertical-align:top; }
.grid th { font-size:12px; text-transform:uppercase; color:var(--muted); }
.uname { font-weight:600; }
.tag { background:#e3f0fb; color:var(--accent); font-size:11px; padding:1px 6px; border-radius:6px; }
.checks { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.mini { display:flex; gap:6px; margin-top:6px; }
.mini input { padding:5px; border:1px solid #cdd6df; border-radius:6px; font-size:12px; }
.mini button { padding:5px 9px; font-size:12px; }
button.danger { background:#c0392b; color:#fff; border:0; padding:7px 11px; border-radius:8px; cursor:pointer; }
code { background:#eef2f5; padding:1px 5px; border-radius:4px; }