/* L'espace connecté de Sonar : UNE feuille pour la barre, la page, les cartes et les boutons (27 sept 2026, maquette
   validée par Malik : « C, mais sans mettre deux fois les mêmes infos »). Chaque page garde ses règles propres ;
   celle-ci se charge après et fixe ce qui est commun. Palette = celle des pages existantes, rien de nouveau.
   Aucun glyphe nulle part : des icônes dessinées ou des mots. */
:root { --bg:#0b141c; --panel:#101d28; --line:#1b2f3d; --cyan:#35d3e0; --text:#dbe7ee; --dim:#6d8494; --err:#e07b7b; --ok:#7be0a3; --warm:#e0b35a; --champ:#0d1a24; --menu-h:56px; }
html { color-scheme:dark; }
body, body.avec-menu { background:var(--bg); color:var(--text); font-family:"Segoe UI", Inter, system-ui, -apple-system, sans-serif; font-size:15px; line-height:1.45; margin:0; padding:var(--menu-h) 0 0 !important; min-height:100vh; }
body.admin { padding:calc(var(--menu-h) + 1.5rem) 1.5rem 1.5rem !important; }
a { color:var(--cyan); }

/* ── La barre ───────────────────────────────────────────────────────────────── */
.menu-sonar { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--menu-h); background:var(--panel); border-bottom:1px solid var(--line); font-family:inherit; }
.menu-sonar .menu-in { max-width:68rem; margin:0 auto; height:100%; padding:0 1.25rem; display:flex; align-items:center; gap:1.5rem; }
.menu-sonar .menu-marque { display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.28em; font-size:.95rem; white-space:nowrap; }
.menu-sonar .menu-marque svg { width:26px; height:26px; color:var(--cyan); flex-shrink:0; }
.menu-sonar .menu-nav { display:flex; gap:.15rem; height:100%; }
.menu-sonar .menu-nav a { display:flex; align-items:center; height:var(--menu-h); padding:0 .9rem; color:var(--dim); text-decoration:none; font-weight:500; font-size:.95rem; border-bottom:2px solid transparent; box-sizing:border-box; white-space:nowrap; }
.menu-sonar .menu-nav a:hover { color:var(--text); }
.menu-sonar .menu-nav a.on { color:var(--text); border-bottom-color:var(--cyan); }
.menu-sonar .menu-nav a[hidden] { display:none; }
.menu-sonar .menu-droite { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.menu-sonar .menu-externe { color:var(--dim); font-size:.9rem; text-decoration:none; white-space:nowrap; }
.menu-sonar .menu-externe:hover { color:var(--text); }
.menu-sonar .menu-compte { position:relative; }
.menu-sonar .menu-avatar { width:34px; height:34px; border-radius:50%; background:#16303c; color:var(--cyan); border:1px solid var(--line); font:inherit; font-weight:600; font-size:.8rem; display:flex; align-items:center; justify-content:center; letter-spacing:.02em; cursor:pointer; }
.menu-sonar .menu-liste { position:absolute; right:0; top:44px; width:17rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.5rem; display:none; box-shadow:0 12px 32px rgba(0,0,0,.45); }
.menu-sonar .menu-compte.ouvert .menu-liste { display:block; }
.menu-sonar .menu-liste .menu-qui { padding:.55rem .7rem .7rem; border-bottom:1px solid var(--line); margin-bottom:.35rem; }
.menu-sonar .menu-liste .menu-qui b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.menu-sonar .menu-liste .menu-qui span { color:var(--dim); font-size:.85rem; display:block; overflow:hidden; text-overflow:ellipsis; }
.menu-sonar .menu-liste a, .menu-sonar .menu-liste button { display:block; width:100%; text-align:left; padding:.5rem .7rem; border-radius:7px; color:var(--text); background:none; border:none; font:inherit; font-size:.92rem; text-decoration:none; cursor:pointer; }
.menu-sonar .menu-liste a:hover, .menu-sonar .menu-liste button:hover { background:#16232f; }
.menu-sonar .menu-burger { display:none; width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:none; color:var(--text); align-items:center; justify-content:center; cursor:pointer; }
.menu-sonar .menu-burger svg { width:20px; height:20px; }
.menu-sonar .menu-connexion { color:var(--text); text-decoration:none; font-weight:500; font-size:.95rem; padding:.5rem .9rem; border:1px solid var(--line); border-radius:8px; }
@media (max-width: 900px) {
  .menu-sonar .menu-in { gap:.8rem; }
  .menu-sonar .menu-nav { display:none; position:absolute; top:var(--menu-h); left:0; right:0; background:var(--panel); border-bottom:1px solid var(--line); flex-direction:column; height:auto; padding:.4rem; gap:.1rem; }
  .menu-sonar.ouvert .menu-nav { display:flex; }
  .menu-sonar .menu-nav a { height:44px; border-bottom:none; border-radius:7px; }
  .menu-sonar .menu-nav a.on { background:#14212c; }
  .menu-sonar .menu-burger { display:inline-flex; margin-left:auto; }
  .menu-sonar .menu-droite { margin-left:0; }
  .menu-sonar .menu-externe { display:none; }
}

/* ── La page ────────────────────────────────────────────────────────────────── */
.page { max-width:68rem; margin:0 auto; padding:2rem 1.25rem 4rem; box-sizing:border-box; }
.page.etroite { max-width:48rem; }
.entete { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; margin:0 0 1.6rem; }
.entete > div { flex:1; min-width:0; max-width:44rem; }
.entete .btn { margin-top:.25rem; }
.page h1 { font-size:1.55rem; font-weight:600; letter-spacing:-.01em; text-indent:0; text-align:left; margin:0; line-height:1.25; color:var(--text); }
.sous { color:var(--dim); margin:.3rem 0 0; font-size:.95rem; text-align:left; line-height:1.5; }
.card, .carte { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.25rem; margin:0 0 1rem; }
.card h2, .carte h2 { font-size:1rem; font-weight:600; color:var(--text); margin:0 0 .9rem; letter-spacing:0; }
.hint { color:var(--dim); font-size:.88rem; line-height:1.5; }
.msg { margin-top:.6rem; font-size:.9rem; min-height:1.2rem; white-space:pre-line; }
.msg.err { color:var(--err); } .msg.ok { color:var(--ok); }
.vide { color:var(--dim); font-size:.92rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.62rem 1rem; border-radius:8px; background:var(--cyan); color:#062026; font:inherit; font-weight:600; font-size:.92rem; border:none; white-space:nowrap; cursor:pointer; text-decoration:none; }
.btn.second { background:transparent; color:var(--text); border:1px solid var(--line); font-weight:500; }
.btn.second:hover { border-color:#2b4557; }
.btn.danger { background:transparent; color:var(--err); border:1px solid #4a2a30; font-weight:500; }
.btn.small { padding:.42rem .7rem; font-size:.85rem; }
.btn:disabled { opacity:.5; cursor:default; }

/* ── Accueil : une tuile = une ligne ; une teinte légère par famille ─────────── */
.org-c { display:grid; grid-template-columns:minmax(0,2fr) minmax(16rem,1fr); gap:1.25rem; align-items:start; }
.org-c .gauche { display:grid; gap:1.3rem; }
.famille { display:grid; gap:.7rem; align-content:start; }
.famille h2 { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 .1rem .15rem; font-weight:600; }
.tuile-r { display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; align-items:center; padding:.9rem 1.1rem; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--text); text-decoration:none; transition:border-color .15s; }
.tuile-r[hidden] { display:none; }
.tuile-r .ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--champ); border:1px solid var(--line); flex-shrink:0; }
.tuile-r .ico svg { width:20px; height:20px; }
.tuile-r .txt { display:grid; gap:.15rem; min-width:0; }
.tuile-r b { font-size:1rem; font-weight:600; color:var(--text); }
.tuile-r .txt span { color:var(--dim); font-size:.88rem; line-height:1.4; }
.tuile-r.ecoute { background:#122833; border-color:#1c3f4c; } .tuile-r.ecoute .ico { color:var(--cyan); border-color:#1e4450; background:#0f2632; } .tuile-r.ecoute:hover { border-color:#2a5f70; }
.tuile-r.compose { background:#16292f; border-color:#22453c; } .tuile-r.compose .ico { color:var(--ok); border-color:#25443a; background:#122a2a; } .tuile-r.compose:hover { border-color:#2f6353; }
.tuile-r.moi { background:var(--panel); } .tuile-r.moi .ico { color:var(--text); } .tuile-r.moi:hover { border-color:#2b4557; }
.tuile-r.gerer { background:#1c262b; border-color:#4a3f26; } .tuile-r.gerer .ico { color:var(--warm); border-color:#4a3f26; background:#22262a; } .tuile-r.gerer:hover { border-color:#6b5a34; }
.etat-carte { padding:1.1rem 1.2rem; }
.etat-carte h2 { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 .6rem; font-weight:600; }
.etat-carte .l { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-top:1px solid var(--line); font-size:.9rem; }
.etat-carte .l:first-of-type { border-top:none; }
.etat-carte .l span:first-child { color:var(--dim); flex-shrink:0; }
.etat-carte .l b { font-weight:500; text-align:right; }
.etat-carte .l b.ok { color:var(--ok); }
.etat-carte .l b.dim { color:var(--dim); font-weight:400; }

/* ── Tableaux et états ──────────────────────────────────────────────────────── */
.tableau { width:100%; border-collapse:collapse; font-size:.92rem; }
.tableau th { text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:.4rem .5rem; border-bottom:1px solid var(--line); font-weight:500; }
.tableau td { padding:.55rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
.tableau tr:last-child td { border-bottom:none; }
.pastille { font-size:.75rem; font-weight:600; border-radius:999px; padding:.08rem .55rem; border:1px solid var(--line); color:var(--dim); white-space:nowrap; }
.pastille.pub { color:var(--ok); border-color:#25443a; }
.pastille.brouillon { color:var(--warm); border-color:#5a4a2a; }

/* ── Les pages d'administration gardent leur mise en page, sous la barre ───── */
body.admin .topbar { top:var(--menu-h); }
body.admin .topbar .brand, body.admin #logoutBtn { display:none; }

@media (max-width: 900px) { .org-c { grid-template-columns:1fr; } }
@media (max-width: 560px) { .entete { flex-direction:column; gap:.8rem; } .page { padding:1.4rem 1rem 3rem; } }