/* ════════════════════════════════════════════════════════════════════
   SydePlay — COQUILLE (shell) commune à toutes les pages
   ════════════════════════════════════════════════════════════════════
   Topbar (logo + recherche) + navigation responsive façon application :
     • Desktop : navigation dans la topbar.
     • Mobile  : barre de navigation fixe en bas (style app).
   Les couleurs de base viennent de styles.css. On surcharge ici la
   palette pour retrouver l'identité verte de l'ancienne webapp.
   ════════════════════════════════════════════════════════════════════ */

/* Thème CLAIR = défaut (identité SydePlay : fond rose, brun, accent corail). */
:root {
  --bg:        #FDDDEA;
  --surface:   #ffffff;
  --surface-2: #FCEBF1;
  --border:    rgba(74,39,33,0.10);
  --border-2:  rgba(74,39,33,0.18);
  --text:      #4A2721;
  --text-dim:  rgba(74,39,33,0.60);
  --text-mut:  rgba(74,39,33,0.38);
  --accent:    #FF7A58;
  --accent-bg: rgba(255,122,88,0.14);
  --purple:    #4A2721;
  --radius:    10px;
  --radius-lg: 16px;
}

/* Thème SOMBRE = choix de l'utilisateur (ou système). */
[data-theme="dark"] {
  --bg:        #1b1212;
  --surface:   #251a1a;
  --surface-2: #30201f;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  --text:      #FDE9F0;
  --text-dim:  rgba(255,255,255,0.55);
  --text-mut:  rgba(255,255,255,0.32);
  --accent:    #FF7A58;
  --accent-bg: rgba(255,122,88,0.16);
  --purple:    #4A2721;
}

/* ── Topbar ── */
.wp-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.wp-logo {
  font-size: 17px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--text); cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.wp-logo span { color: var(--accent); }

/* navigation desktop dans la topbar */
.wp-nav { display: flex; gap: 4px; margin-left: 8px; }
.wp-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  font-size: 13px; color: var(--text-dim); text-decoration: none;
  transition: background .15s, color .15s; white-space: nowrap;
}
.wp-nav a:hover { background: var(--surface-2); color: var(--text); }
.wp-nav a.active { background: var(--surface-2); color: var(--text); font-weight: 600; }

/* barre de recherche */
.wp-search { flex: 1; max-width: 340px; margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 8px 12px; }
.wp-search:focus-within { border-color: var(--accent); }
.wp-search input { flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 13px; font-family: inherit; }
.wp-search input::placeholder { color: var(--text-mut); }

/* ── Zone utilisateur ── */
.wp-login-btn { padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  background: var(--accent); color: #4A2721; font-size: 13px; font-weight: 700;
  text-decoration: none; }
.wp-login-btn:hover { filter: brightness(1.05); text-decoration: none; }

.wp-user { position: relative; display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 4px 6px; border-radius: 999px; }
.wp-user:hover { background: var(--surface-2); }
.wp-user-av { width: 28px; height: 28px; border-radius: 50%;
  background: var(--purple); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.wp-user-name { font-size: 13px; color: var(--text); max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px;
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 200;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.wp-user.open .wp-user-menu { display: flex; }
.wp-user-menu a, .wp-user-menu button { text-align: left; text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text); font-size: 13px; padding: 9px 11px; border-radius: 8px; }
.wp-user-menu a:hover, .wp-user-menu button:hover { background: var(--surface-2); }

@media (max-width: 720px) { .wp-user-name { display: none; } }

/* ── Contenu de page ── */
.wp-main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 96px; }

/* ── Navigation mobile (barre du bas, style app) ── */
.wp-tabbar { display: none; }

@media (max-width: 720px) {
  .wp-nav { display: none; }            /* on cache la nav desktop */
  .wp-search { max-width: none; }

  .wp-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 6px 4px env(safe-area-inset-bottom);
  }
  .wp-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 0; text-decoration: none;
    font-size: 10px; color: var(--text-dim);
  }
  .wp-tabbar a .ic { font-size: 18px; }
  .wp-tabbar a.active { color: var(--accent); }
}