/* ===================================================================
   Feuille de style COMMUNE au chat et à l'administration.
   Contient les couleurs et l'en-tête : un seul endroit à modifier.
   =================================================================== */
:root { --bg:#f6f4ef; --card:#fff; --ink:#1d1d1b; --muted:#6b6a64; --accent:#1f4d3f; --accent-ink:#fff; --line:#e4e0d6; --danger:#b3261e; --user:#1f4d3f; --hover:rgba(31,77,63,.08); }
@media (prefers-color-scheme: dark) {
  :root { --bg:#141513; --card:#1e201d; --ink:#ecebe5; --muted:#9a998f; --accent:#6fb59c; --accent-ink:#0f1a16; --line:#2e312c; --danger:#f2867f; --user:#2b5c4b; --hover:rgba(111,181,156,.14); }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
[hidden] { display:none !important; }

/* ---------------------------- en-tête ---------------------------- */
.top { position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px); }
.top-in { display:flex; align-items:center; gap:8px; min-height:56px;
          padding-left:max(10px,env(safe-area-inset-left,0px)); padding-right:max(10px,env(safe-area-inset-right,0px)); }
.top svg { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.top-home { display:inline-flex; align-items:center; gap:6px; min-width:44px; min-height:44px; padding:0 10px; border-radius:10px;
            color:var(--accent); text-decoration:none; font-weight:600; font-size:15px; justify-content:center; }
.top-home:hover { background:var(--hover); }
.top-home .lbl { display:none; }
.top-title { flex:1; min-width:0; padding:6px 0; }
.top-title strong { display:block; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-title small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
                   font-weight:400; color:var(--muted); font-size:13px; line-height:1.35; min-height:1.35em; }
.top-menu-btn { flex:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0;
                background:none; color:var(--ink); border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.top-menu-btn:hover { background:var(--hover); }
.top a:focus-visible, .top button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Téléphone : les liens sont dans un menu déroulant, une ligne par lien, faciles à toucher */
.top-nav { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column;
           background:var(--card); border-bottom:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.12);
           padding:4px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px)); }
.top-nav.open { display:flex; }
.top-nav > a, .top-nav > button { display:flex; align-items:center; width:100%; min-height:50px; padding:0 8px; text-align:left;
        background:none; border:0; border-top:1px solid var(--line); border-radius:0; color:var(--accent);
        text-decoration:none; font:inherit; font-size:16px; font-weight:500; cursor:pointer; }
.top-nav > :first-child { border-top:0; }
.top-nav > a:active, .top-nav > button:active { background:var(--hover); }

/* Ordinateur et grande tablette : liens en ligne, plus de bouton menu */
@media (min-width:720px) {
  .top { display:flex; align-items:center; padding-right:max(16px,env(safe-area-inset-right,0px)); }   /* titre à gauche, liens à droite, sur la même ligne */
  .top-in { flex:1; min-width:0; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:0; gap:12px; }
  .top-home .lbl { display:inline; }
  .top-menu-btn { display:none !important; }
  .top-nav { display:flex; position:static; flex-direction:row; align-items:center; gap:4px; padding:0; border:0; box-shadow:none; background:none; }
  .top-nav > a, .top-nav > button { width:auto; min-height:40px; padding:0 12px; border:0; border-radius:10px; font-size:14px; white-space:nowrap; }
  .top-nav > a:hover, .top-nav > button:hover { background:var(--hover); }
}