/**
 * Senego Account — Modales (auth + abonnement) et menus utilisateur.
 *
 * Migré depuis themes/senego/assets/css/header.css le 23/05/2026.
 * Objectif : que le plugin reste autonome côté UI si on change de thème.
 *
 * Contenu :
 *  - Bouton de connexion topbar (.topbar-login)
 *  - Avatars utilisateur (.avatar, .avatar.premium, .av)
 *  - Boutons CTA abonnement header (.cta-sub, .compact-cta, .compact-login, .compact-premium, .premium-badge-main)
 *  - Menu déroulant compte (.account-wrap, .account-menu)
 *  - Boutons partagés (.oauth-btn, .submit-btn, .modal-close) réutilisés par le drawer mobile
 *  - Tabs partagés (.tabs) réutilisés par le plugin football (team-single, match-single)
 *  - Visibilité par état utilisateur (.when-anon, .when-loggedin, .when-premium)
 *
 * Les variables CSS (--orange, --ease, --shadow-md, …) restent définies dans header.css du thème.
 */

  /* ============ Bouton login topbar ============ */
  .topbar-login {
    color: #fff;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background .15s var(--ease);
  }
  .topbar-login:hover { background: rgba(255,255,255,.1); }

  /* ============ Avatars utilisateur ============ */
  .avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--senego-color-primary), var(--senego-color-accent));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    border: 1.5px solid rgba(255,255,255,.15);
    cursor: pointer;
    transition: transform .15s var(--ease);
  }
  .avatar:hover { transform: scale(1.05); }
  .avatar.premium {
    background: linear-gradient(135deg, #ffd27a, var(--senego-color-premium));
    border-color: rgba(255,255,255,.3);
  }

  /* ============ CTA abonnement (mainbar) ============ */
  .cta-sub {
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .005em;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 16px rgba(255,153,0,.28);
    transition: all .18s var(--ease);
    white-space: nowrap;
  }
  .cta-sub:hover {
    background: var(--orange-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 10px 22px rgba(255,153,0,.35);
  }
  .cta-sub:active { transform: translateY(0); }
  .cta-sub .sparkle {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
  }
  .cta-sub.accent {
    background: var(--red);
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 16px rgba(230,57,0,.32);
  }
  .cta-sub.accent:hover { background: #c93300; }

  /* ============ Badge Premium (mainbar) ============ */
  .premium-badge-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 4px;
    border-radius: 999px;
    background: var(--premium-bg);
    border: 1px solid rgba(201,138,23,.25);
    color: var(--gold);
    font-weight: 600;
    font-size: 13px;
  }
  .premium-badge-main .av {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd27a, var(--senego-color-premium));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ============ CTA / login / premium dans la compactbar ============ */
  .compact-cta {
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--orange);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s var(--ease);
  }
  .compact-cta:hover { background: var(--orange-dark); }
  .compact-cta.accent { background: var(--red); }
  .compact-cta.accent:hover { background: #c93300; }
  .compact-login {
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-weight: 500;
    font-size: 13px;
    transition: all .15s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }
  .compact-login:hover { background: var(--bg-soft); }
  /* Compactbar + mainbar mobile (≤767px) : style Yahoo épuré.
     On retire les CTA "Sans pub" (accessibles depuis le drawer/page abonnement)
     et "Se connecter" devient un bouton rond avec juste l'icône personne,
     côté mainbar comme côté compactbar (cohérence). */
  @media (max-width: 767px) {
    .compactbar .compact-cta,
    .mainbar .cta-sub { display: none !important; }
    .compactbar .compact-login .label-full,
    .mainbar .topbar-login .label-full { display: none; }
    .compactbar .compact-login,
    .mainbar .topbar-login {
      width: 36px !important;
      height: 36px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      justify-content: center;
      gap: 0;
    }
  }
  .compact-premium {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px 0 3px;
    border-radius: 999px;
    background: var(--premium-bg);
    border: 1px solid rgba(201,138,23,.25);
    color: var(--gold);
    font-size: 12px; font-weight: 600;
  }
  .compact-premium .av {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd27a, var(--senego-color-premium)); color: #fff;
    font-size: 10px; font-weight: 700;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* ============ Account dropdown ============ */
  .account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--soft-radius);
    box-shadow: var(--shadow-md);
    min-width: 240px;
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
    z-index: 110;
  }
  .account-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .account-menu .header {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .account-menu .name { font-weight: 600; font-size: 14px; }
  .account-menu .email { font-size: 12px; color: var(--meta); margin-top: 2px; }
  .account-menu a, .account-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--ink);
    background: none;
    border: none;
    text-align: left;
    transition: background .12s var(--ease);
  }
  .account-menu a:hover, .account-menu button:hover { background: var(--bg-soft); }
  .account-menu .divider { height: 1px; background: var(--line); margin: 6px 0; }
  .account-menu .logout { color: var(--red); }

  .account-wrap { position: relative; }

  .modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-soft);
    color: var(--meta);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
  }
  .modal-close:hover { background: var(--line); color: var(--ink); }
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 18px;
    position: relative;
  }
  .tabs button {
    background: transparent;
    border: none;
    height: 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--meta);
    transition: all .2s var(--ease);
    position: relative;
    z-index: 1;
  }
  .tabs button.active { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); font-weight: 600; }

  .oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    transition: all .15s var(--ease);
  }
  .oauth-btn:hover { background: var(--bg-soft); border-color: #c8c8c8; }
  .oauth-btn.apple { background: #000; color: #fff; border-color: #000; }
  .oauth-btn.apple:hover { background: var(--senego-color-text); }
  .oauth-btn svg { flex-shrink: 0; }

  .submit-btn {
    width: 100%;
    height: 46px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border: none;
    transition: background .15s var(--ease);
    margin-top: 4px;
  }
  .submit-btn:hover { background: var(--orange-dark); }
  /* ============ Visibilité par état utilisateur ============ */
  body[data-user="anon"] .when-loggedin,
  body[data-user="anon"] .when-premium { display: none !important; }
  body[data-user="loggedin"] .when-anon,
  body[data-user="loggedin"] .when-premium { display: none !important; }
  body[data-user="premium"] .when-anon,
  body[data-user="premium"] .when-loggedin { display: none !important; }

  /* ============ Responsive ============ */
  @media (max-width: 980px) {
    .cta-sub { padding: 0 12px; font-size: 12.5px; height: 38px; }
    .cta-sub .label-full { display: none; }
    .cta-sub .label-short { display: inline !important; }
  }
  @media (max-width: 540px) {
    .cta-sub .label-short { display: inline; }
    .cta-sub .label-full { display: none; }
  }