/* ===========================================================
   AGENCE MOMAËL — En-tête « SaaS » et menus déroulants
   Chargé par render_theme_head(). Les valeurs ci-dessous sont celles du
   thème sombre ; le thème jour les redéfinit juste après.
   =========================================================== */
:root{
  --sh-line:rgba(255,255,255,.10);
  --sh-hover:rgba(255,255,255,.07);
  --sh-chip:rgba(255,255,255,.06);
  --sh-pop-bg:#1A1740;
  --sh-pop-shadow:0 18px 44px rgba(0,0,0,.5);
}
html[data-themeable][data-theme="dark"]{color-scheme:dark}
html[data-themeable][data-theme="light"]{
  --sh-line:rgba(20,18,43,.12);
  --sh-hover:rgba(20,18,43,.06);
  --sh-chip:rgba(20,18,43,.06);
  --sh-pop-bg:#FFFFFF;
  --sh-pop-shadow:0 18px 44px rgba(20,18,43,.16);
}

/* ---------- Marque : nom + ligne des plateformes ---------- */
.sh-brand{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.sh-brand-sub{display:none;align-items:center;gap:6px;font-size:.64rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sh-brand-sub i{width:6px;height:6px;border-radius:50%;background:#10B981;flex-shrink:0;animation:shPulse 2s ease-in-out infinite}
@keyframes shPulse{50%{opacity:.45;transform:scale(.8)}}
@media (min-width:700px){.sh-brand-sub{display:flex}}

/* ---------- Navigation centrale (ordinateur) ---------- */
.sh-center{display:none}
@media (min-width:900px){
  .sh-center{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--sh-chip);border:1px solid var(--sh-line)}
  .sh-center a{padding:7px 14px;border-radius:10px;font-size:.78rem;font-weight:700;color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease}
  .sh-center a:hover{color:var(--text);background:var(--sh-hover)}
  .sh-center a.active{background:linear-gradient(120deg,var(--gold-soft),var(--gold));color:#2A1D02}
}

/* ---------- Lien d'administration (staff seulement, décidé côté serveur) ---------- */
.sh-admin-pill{display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(232,184,75,.4);background:rgba(232,184,75,.1);color:var(--gold-ink,var(--gold-soft));font-size:.72rem;font-weight:800;text-decoration:none}
.sh-admin-pill i{width:6px;height:6px;border-radius:50%;background:#10B981}
@media (min-width:640px){.sh-admin-pill{display:inline-flex}}

/* ---------- Bouton Apparence : l'icône suit le choix (auto / jour / nuit) ---------- */
.sh-theme,.sh-account{position:relative}
.sh-theme-btn svg{display:none}
.sh-theme-btn .i-auto{display:block}
html[data-theme-pref="light"] .sh-theme-btn .i-auto,html[data-theme-pref="dark"] .sh-theme-btn .i-auto{display:none}
html[data-theme-pref="light"] .sh-theme-btn .i-light{display:block}
html[data-theme-pref="dark"] .sh-theme-btn .i-dark{display:block}

/* ---------- Menus déroulants ---------- */
.sh-popover{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;max-width:min(300px,calc(100vw - 24px));background:var(--sh-pop-bg);border:1px solid var(--sh-line);border-radius:16px;box-shadow:var(--sh-pop-shadow);padding:6px;z-index:970;animation:shPop .16s ease-out}
.sh-popover[hidden]{display:none!important}
@keyframes shPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sh-popover-title{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px 4px}

.sh-opt,.sh-menu-link{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;font-size:.82rem;text-align:left;text-decoration:none;cursor:pointer;transition:background .15s ease}
.sh-opt:hover,.sh-menu-link:hover,.sh-opt:focus-visible,.sh-menu-link:focus-visible{background:var(--sh-hover);outline:none}
.sh-opt-ico{width:34px;height:34px;border-radius:10px;background:var(--sh-chip);display:grid;place-items:center;flex-shrink:0;color:var(--text)}
.sh-opt-text{display:flex;flex-direction:column;min-width:0;flex:1}
.sh-opt-text b{font-weight:700}
.sh-opt-text small{font-size:.68rem;color:var(--text-muted);line-height:1.3}
.sh-check{opacity:0;color:var(--gold-ink,var(--gold-soft));flex-shrink:0}
.sh-opt[aria-checked="true"] .sh-check{opacity:1}
.sh-opt[aria-checked="true"] .sh-opt-ico{background:rgba(232,184,75,.18);color:var(--gold-ink,var(--gold-soft))}

/* ---------- Compte : avatar + menu ---------- */
.sh-avatar-btn{display:flex;align-items:center;gap:4px;padding:3px 7px 3px 3px;border-radius:999px;border:1px solid var(--sh-line);background:var(--sh-chip);color:var(--text);cursor:pointer}
.sh-avatar-btn:hover{background:var(--sh-hover)}
.sh-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--purple),var(--gold));display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;flex-shrink:0}
.sh-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sh-avatar-btn svg{color:var(--text-muted)}
.sh-account-menu{min-width:250px}
.sh-account-head{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--sh-line);margin-bottom:4px}
.sh-account-head .sh-avatar{width:40px;height:40px;font-size:1rem}
.sh-account-head b{display:block;font-size:.86rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.sh-account-head small{font-size:.7rem;color:var(--text-muted)}
.sh-menu-link svg{flex-shrink:0;color:var(--text-muted)}
.sh-menu-link.sh-admin{color:var(--gold-ink,var(--gold-soft));font-weight:700}
.sh-menu-link.sh-admin svg{color:inherit}
.sh-menu-link.sh-danger{color:var(--danger-ink,var(--danger))}
.sh-menu-link.sh-danger svg{color:inherit}
.sh-menu-sep{height:1px;background:var(--sh-line);margin:4px 6px}


/* ---------- Panneau de notifications (sous la cloche) ---------- */
.sh-notif{position:relative}
.sh-notif-panel{width:360px;max-width:min(360px,calc(100vw - 24px));padding:0;overflow:hidden}
.sh-notif-head{padding:13px 16px 10px;font-family:var(--font-display);font-size:.95rem;color:var(--text);border-bottom:1px solid var(--sh-line)}
.sh-notif-list{max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px}
.sh-notif-empty{margin:0;padding:26px 14px;text-align:center;font-size:.82rem;color:var(--text-muted)}
.sh-notif-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;text-decoration:none;color:var(--text);transition:background .15s ease}
a.sh-notif-item:hover,a.sh-notif-item:focus-visible{background:var(--sh-hover);outline:none}
.sh-notif-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:transparent}
.sh-notif-item.unread{background:rgba(232,184,75,.09)}
.sh-notif-item.unread .sh-notif-dot{background:var(--gold)}
.sh-notif-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sh-notif-text b{font-size:.84rem;font-weight:700;line-height:1.35}
.sh-notif-text small{font-size:.76rem;color:var(--text-muted);line-height:1.4;overflow-wrap:anywhere}
.sh-notif-text em{font-style:normal;font-size:.68rem;color:var(--text-muted);opacity:.85}
.sh-notif-all{display:block;padding:11px 16px;text-align:center;font-size:.78rem;font-weight:700;color:var(--gold-ink,var(--gold-soft));text-decoration:none;border-top:1px solid var(--sh-line)}
.sh-notif-all:hover{background:var(--sh-hover)}
@media (max-width:520px){
  /* L'en-tête est le repère de position : le panneau occupe la largeur de l'écran, juste sous la barre. */
  .sh-notif-panel{position:fixed;left:12px;right:12px;width:auto;max-width:none;top:calc(env(safe-area-inset-top,0px) + 60px)}
}

/* ---------- Petits écrans : on garde l'essentiel dans la barre ---------- */
@media (max-width:420px){
  .ph-header--saas .ph-support-btn{display:none}
  .ph-header--saas .ph-right{gap:4px}
  .ph-header--saas .ph-bar1{padding-left:10px;padding-right:10px;gap:6px}
}

/* ---------- Dans le parcours « Vendre mes points » (barre du haut) ---------- */
.buyback-topbar .sh-theme .ph-icon-btn{width:38px;height:38px;border-radius:13px;background:rgba(124,77,255,.12);border:1px solid rgba(167,123,255,.22);color:var(--gold-ink,var(--gold-soft))}
.buyback-topbar .sh-popover{right:0}

@media (prefers-reduced-motion:reduce){
  .sh-popover,.sh-brand-sub i{animation:none}
  .sh-notif-item{transition:none}
  .sh-opt,.sh-menu-link,.sh-center a{transition:none}
}