/* ==========================================================================
   SpeakPro Academy — coque d'application (administration et espace coach)
   Inspiration : mise en page « Frame / Navigation » de Shopify Polaris —
   navigation latérale groupée par domaine, contenu dans une colonne principale.
   Ordinateur (≥ 1100 px) : barre latérale fixe. Tablette / mobile : en-tête
   collant avec navigation horizontale défilante (même liens, même ordre).
   Présentation uniquement : liens, identifiants et comportements inchangés.
   ========================================================================== */
body.sp-shell{ --sh-w:256px; --sh-line:#E5DBCF; --sh-ink:#1E2430; --sh-ink-2:#4A505B; --sh-mute:#6B707A; --sh-copper:#A9552F; background:#FBF8F3; }

/* En-tête (base commune, y compris pages sans la classe sp-admin) */
body.sp-shell .sp-adm-head{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.97); border-bottom:1px solid var(--sh-line); }
body.sp-shell .sp-adm-head .nav{ position:static; border:0; box-shadow:none; background:transparent; }
body.sp-shell .sp-adm-head .nav-in{ display:flex; align-items:center; gap:12px; max-width:1200px; margin:0 auto; padding:12px 24px; min-height:0; }
body.sp-shell .sp-adm-head .brand-block{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--sh-ink); }
body.sp-shell .sp-adm-head .brand-mark{ width:36px; height:36px; flex-shrink:0; }
body.sp-shell .sp-adm-head .brand{ font-family:var(--display-serif, Georgia, serif); font-size:17px; font-weight:600; color:var(--sh-ink); }
body.sp-shell .sp-adm-head .brand-tag{ color:var(--sh-copper); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; }
body.sp-shell .sp-adm-site{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--sh-ink) !important; text-decoration:none; padding:8px 14px; border:1.5px solid #CDBFAE; border-radius:999px; white-space:nowrap; background:#fff; }
body.sp-shell .sp-adm-site:hover{ border-color:var(--sh-ink); }
body.sp-shell .sp-adm-head .spn-bell{ margin-left:auto; }
body.sp-shell .sp-adm-head .spn-bell + .sp-adm-site{ margin-left:0; }
body.sp-shell .sp-adm-sub{ max-width:1200px; margin:0 auto; padding:0 24px 10px; }

/* Navigation : horizontale par défaut */
body.sp-shell .sp-shell-nav{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
body.sp-shell .sp-shell-nav::-webkit-scrollbar{ display:none; }
body.sp-shell .sp-shell-group{ display:none; }
body.sp-shell .sp-shell-nav a{ flex-shrink:0; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; background:#fff; color:var(--sh-ink-2) !important; border:1px solid var(--sh-line); text-decoration:none !important; white-space:nowrap; }
body.sp-shell .sp-shell-nav a svg{ width:16px; height:16px; flex-shrink:0; opacity:.75; }
body.sp-shell .sp-shell-nav a[aria-current="page"]{ background:var(--sh-ink); border-color:var(--sh-ink); color:#fff !important; }
body.sp-shell .sp-shell-nav a[aria-current="page"] svg{ opacity:1; }
body.sp-shell .sp-shell-nav a:focus-visible, body.sp-shell .sp-adm-site:focus-visible{ outline:3px solid rgba(169,85,47,.4); outline-offset:2px; }

@media (max-width:640px){
  body.sp-shell .sp-adm-head .nav-in{ padding:10px 16px; }
  body.sp-shell .sp-adm-sub{ padding:0 16px 10px; }
  body.sp-shell .sp-adm-site span{ display:none; }
  body.sp-shell .sp-adm-site{ padding:8px 10px; }
  body.sp-shell .sp-adm-head .brand-tag{ font-size:9.5px; }
}

/* ---- Ordinateur : barre latérale fixe ---- */
@media (min-width:1100px){
  body.sp-shell{ padding-left:var(--sh-w); }
  body.sp-shell .sp-adm-head{
    position:fixed; left:0; top:0; bottom:0; width:var(--sh-w); z-index:300;
    display:flex; flex-direction:column; background:#fff; border-bottom:0; border-right:1px solid var(--sh-line);
  }
  body.sp-shell .sp-adm-head .nav-in{ max-width:none; padding:22px 20px 18px; flex-wrap:wrap; row-gap:14px; border-bottom:1px solid #EFE7DC; }
  body.sp-shell .sp-adm-head .brand-block{ flex:1 1 100%; min-width:0; }
  body.sp-shell .sp-adm-head .spn-bell{ margin-left:0; order:4; flex-shrink:0; }
  body.sp-shell .sp-adm-site{ order:5; flex:1 1 0; justify-content:center; margin:0; padding:8px 12px; font-size:13px; }
  body.sp-shell .sp-adm-sub{ flex:1; overflow-y:auto; margin:0; max-width:none; padding:12px 12px 24px; }
  body.sp-shell .sp-shell-nav{ flex-direction:column; gap:2px; overflow:visible; }
  body.sp-shell .sp-shell-group{ display:block; margin:18px 10px 6px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sh-mute); }
  body.sp-shell .sp-shell-group:first-child{ margin-top:6px; }
  body.sp-shell .sp-shell-nav a{ border:0; background:transparent; border-radius:10px; padding:9px 10px; font-size:14px; color:var(--sh-ink-2) !important; gap:11px; }
  body.sp-shell .sp-shell-nav a svg{ width:18px; height:18px; }
  body.sp-shell .sp-shell-nav a:hover{ background:#F6F1EA; color:var(--sh-ink) !important; }
  body.sp-shell .sp-shell-nav a[aria-current="page"]{ background:#F4EEE6; color:var(--sh-ink) !important; box-shadow:inset 3px 0 0 var(--sh-copper); }
  body.sp-shell .sp-shell-nav a[aria-current="page"] svg{ color:var(--sh-copper); }
  /* Le panneau de notifications s'ouvre à droite de la barre latérale */
  body.sp-shell .spn-panel{ left:calc(var(--sh-w) + 16px) !important; right:auto !important; }
  /* Contenu : colonne principale alignée à gauche, largeur de lecture */
  body.sp-shell .admin-hero{ text-align:left !important; }
  body.sp-shell .ft .wrap{ max-width:1100px; }
}
@media (prefers-reduced-motion: reduce){ body.sp-shell .sp-shell-nav a{ transition:none; } }
@media (max-width:480px){
  body.sp-shell .sp-adm-head .nav-in{ gap:8px; }
  body.sp-shell .sp-adm-head .brand{ font-size:15px; }
  body.sp-shell .sp-adm-head .brand-mark{ width:32px; height:32px; }
  body.sp-shell #coach-logout-btn{ font-size:12px; padding:7px 10px; }
}
body.sp-coach .section-head{ margin-bottom:14px !important; }