/* ════════════════════════════════════════════════════════════════════
   NeuroCommunService — neuro-theme.css
   Socle visuel partagé par toutes les applications Neuro* (NeuroAuth, NeuroTache, NeuroCourse…).
   Une seule source : modifier ce fichier change l'apparence de toutes les applications.

   Thème : <html data-theme="auto|dark|light"> (auto = suit l'appareil).
   Couleur d'accent : --p (posée par neuro-theme.js) ; --s et --pd en sont dérivées.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --p: #3b82f6; --pd: rgba(59,130,246,0.14); --s: #06b6d4;
  --bg: #080c14; --sf: #0d1320; --sf2: #111827; --sf3: #1a2235;
  --b: rgba(255,255,255,0.07); --bm: rgba(255,255,255,0.12);
  --t: #f1f5f9; --td: #94a3b8; --tm: #64748b;
  --err: #ef4444; --ok: #22c55e; --warn: #f59e0b;
  --r: 8px; --rl: 12px; --sw: 220px;
  --mono: 'Space Mono', ui-monospace, monospace;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tr: .18s cubic-bezier(.4,0,.2,1);
  --ombre: none; --champ: var(--sf3);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --bg: #f1f5f9; --sf: #ffffff; --sf2: #f8fafc; --sf3: #eef2f7;
    --b: rgba(15,23,42,0.10); --bm: rgba(15,23,42,0.16);
    --t: #0f172a; --td: #475569; --tm: #94a3b8;
    --ombre: 0 1px 2px rgba(15,23,42,.05); --champ: #f8fafc;
    color-scheme: light;
  }
}
html[data-theme="light"] {
  --bg: #f1f5f9; --sf: #ffffff; --sf2: #f8fafc; --sf3: #eef2f7;
  --b: rgba(15,23,42,0.10); --bm: rgba(15,23,42,0.16);
  --t: #0f172a; --td: #475569; --tm: #94a3b8;
  --ombre: 0 1px 2px rgba(15,23,42,.05); --champ: #f8fafc;
  color-scheme: light;
}

/* ── Composants de base (préfixe nx-, utilisables par toutes les applications) ── */
.nx-logo { display: flex; align-items: center; gap: 10px; }
.nx-logo-icone {
  width: 30px; height: 30px; border-radius: 7px; background: var(--p); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.nx-logo-texte { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.nx-logo-sous { display: block; font-family: var(--mono); font-size: 9px; color: var(--tm); margin-top: 2px; }

.nx-carte {
  position: relative; overflow: hidden; background: var(--sf); border: 1px solid var(--b);
  border-radius: var(--rl); box-shadow: var(--ombre); padding: 18px; transition: border-color var(--tr);
}
.nx-carte::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--p), var(--s)); opacity: 0; transition: opacity var(--tr);
}
.nx-carte:hover { border-color: var(--bm); }
.nx-carte:hover::before, .nx-carte.nx-accent::before { opacity: 1; }

.nx-etiquette {
  font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--tm);
}
.nx-titre { font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }

.nx-champ {
  display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--b); border-radius: var(--r);
  background: var(--champ); color: var(--t); font: inherit; transition: border-color var(--tr);
}
.nx-champ:focus { outline: none; border-color: var(--p); }

.nx-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--r); padding: 10px 14px; background: var(--p); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: filter var(--tr);
}
.nx-bouton:hover { filter: brightness(1.08); }
.nx-bouton-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--b); border-radius: var(--r); padding: 9px 14px; background: var(--sf3); color: var(--t);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color var(--tr), color var(--tr);
}
.nx-bouton-2:hover { border-color: var(--p); color: var(--p); }
.nx-danger { background: transparent !important; color: var(--err) !important; border: 1px solid var(--err) !important; }

.nx-badge {
  font-family: var(--mono); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: var(--pd); color: var(--p); border-radius: 99px; padding: 1px 7px;
}
.nx-erreur { color: var(--err); }
.nx-succes { color: var(--ok); }

/* Choix du thème et de la couleur d'accent (même rendu partout) */
.nx-choix-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nx-choix-theme button {
  padding: 9px 6px; border-radius: var(--r); border: 1px solid var(--b); background: var(--sf3); color: var(--t);
  font: inherit; font-weight: 500; cursor: pointer;
}
.nx-choix-theme button.actif { background: var(--pd); border-color: var(--p); color: var(--p); font-weight: 700; }
.nx-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-pastille {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); transition: transform var(--tr);
}
.nx-pastille:hover { transform: scale(1.1); }
.nx-pastille.actif { border-color: var(--t); transform: scale(1.1); }

/* Bouton « Applications » (retour au portail) — inséré par neuro-theme.js */
.nx-portail {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px;
  background: var(--sf3); border: 1px solid var(--b); color: var(--td); font: 600 12px/1.2 var(--sans);
  text-decoration: none; white-space: nowrap; transition: border-color var(--tr), color var(--tr);
}
.nx-portail:hover { border-color: var(--p); color: var(--p); }
.nx-portail > span[aria-hidden] { font-size: 14px; }
/* Emplacement commun à toutes les applications : sous le logo, en haut de la barre latérale (ordinateur) ;
   à côté du logo dans l'en-tête (téléphone) */
.nx-portail.nx-portail-barre { display: flex; width: fit-content; margin: 12px; }
.nx-portail-flottant {
  position: fixed; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: .9;
}
@media (max-width: 860px) {
  .nx-portail .nx-portail-texte { display: none; }
  .nx-portail-flottant { bottom: calc(84px + env(safe-area-inset-bottom)); }
}