/*
Theme Name: Atsamag Ambassadrices
Theme URI: https://atsamag.com
Description: Thème standalone pour la plateforme Atsamag Ambassadrices. Squelette pur — toute la logique métier vit dans les plugins. Aucun thème parent.
Version: 1.0.8
Author: Nnama
Text Domain: atsamag-ambassadrices
*/

/* ============================================================
   DESIGN SYSTEM — variables alignées sur les maquettes
   ============================================================ */
:root {
  --pink:        #c4507a;
  --pink-pale:   #f5e6ed;
  --text:        #1a1a1a;
  --text-muted:  #6b6b6b;
  --text-hint:   #9e9e9e;
  --bg:          #ffffff;
  --bg-surface:  #f7f7f5;
  --border:      rgba(0,0,0,0.10);
  --border-md:   rgba(0,0,0,0.18);
  --radius:      8px;
  --radius-lg:   12px;
  --sidebar-w:   72px;
  --topnav-h:    56px;
  --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg-surface);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font); cursor: pointer; }

/* ============================================================
   LAYOUT DESKTOP
   ============================================================ */
.atsa-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top navbar */
.atsa-topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topnav-h);
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.atsa-topnav__logo {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.atsa-topnav__logo span { color: var(--pink); }
.atsa-topnav__actions { display: flex; gap: 8px; align-items: center; }

/* Page body = sidebar + main */
.atsa-body {
  display: flex;
  flex: 1;
}

/* Sidebar */
.atsa-sidebar {
  width: var(--sidebar-w);
  background: var(--bg);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 4px;
  flex-shrink: 0;
  position: sticky;
  top: var(--topnav-h);
  height: calc(100vh - var(--topnav-h));
  overflow-y: auto;
}
.atsa-sidebar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  width: 60px;
  text-align: center;
  color: var(--text-hint);
  font-size: 10px;
  background: none;
  border: none;
  transition: background 0.15s;
}
.atsa-sidebar__item:hover { background: var(--bg-surface); color: var(--text); }
.atsa-sidebar__item.active { color: var(--pink); }
.atsa-sidebar__item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Main content */
.atsa-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 40px 48px;
}

/* ============================================================
   LAYOUT MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .atsa-topnav { padding: 0 16px; height: 52px; }
  .atsa-sidebar { display: none; }
  .atsa-main { padding: 14px 16px 80px; }

  /* Bottom navbar mobile */
  .atsa-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--bg);
    border-top: 0.5px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 8px 0 20px;
    z-index: 100;
  }
  .atsa-mobile-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-hint);
    cursor: pointer;
    padding: 4px 12px;
    background: none;
    border: none;
  }
  .atsa-mobile-nav__item.active { color: var(--pink); }
  .atsa-mobile-nav__item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
}
@media (min-width: 769px) {
  .atsa-mobile-nav { display: none; }
}

/* ============================================================
   COMPOSANTS COMMUNS
   ============================================================ */
.atsa-btn {
  font-size: 13px;
  padding: 7px 16px;
  border-radius: var(--radius);
}
.atsa-btn--ghost {
  background: transparent;
  border: 0.5px solid var(--border-md);
  color: var(--text);
}
.atsa-btn--pink {
  background: var(--pink);
  border: none;
  color: #fff;
}

/* Search bar */
.atsa-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius);
  padding: 11px 18px;
  font-size: 14px;
  color: var(--text-hint);
}
.atsa-search input {
  border: none;
  background: transparent;
  flex: 1;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.atsa-search input::placeholder { color: var(--text-hint); }
.atsa-search svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* Filter pills */
.atsa-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.atsa-pill {
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 0.5px solid var(--border-md);
  color: var(--text-muted);
  background: var(--bg);
  cursor: pointer;
  white-space: nowrap;
}
.atsa-pill.active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

/* Section label */
.atsa-section-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 20px 0 14px;
}

/* Ambassador card */
.atsa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .atsa-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .atsa-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.atsa-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}
.atsa-card__cover { height: 90px; position: relative; }
@media (max-width: 768px) { .atsa-card__cover { height: 68px; } }

.atsa-card__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 500;
  position: absolute; bottom: -26px; left: 16px;
}
@media (max-width: 768px) {
  .atsa-card__avatar { width: 38px; height: 38px; font-size: 13px; bottom: -19px; left: 10px; border-width: 2px; }
}

.atsa-card__body { padding: 32px 16px 16px; }
@media (max-width: 768px) { .atsa-card__body { padding: 24px 10px 10px; } }

.atsa-card__name { font-size: 14px; font-weight: 500; }
@media (max-width: 768px) { .atsa-card__name { font-size: 12px; } }

.atsa-card__sector { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
@media (max-width: 768px) { .atsa-card__sector { font-size: 10px; } }

.atsa-card__stats { display: flex; gap: 14px; margin-top: 10px; }
@media (max-width: 768px) { .atsa-card__stats { gap: 8px; margin-top: 6px; } }

.atsa-stat { font-size: 11px; color: var(--text-hint); }
@media (max-width: 768px) { .atsa-stat { font-size: 10px; } }
.atsa-stat strong { font-weight: 500; color: var(--text); }

.atsa-quota { margin-top: 12px; }
@media (max-width: 768px) { .atsa-quota { margin-top: 8px; } }
.atsa-quota__head { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-hint); margin-bottom: 5px; }
.atsa-quota__track { height: 4px; background: var(--bg-surface); border-radius: 4px; overflow: hidden; }
@media (max-width: 768px) { .atsa-quota__track { height: 3px; } }
.atsa-quota__fill { height: 100%; background: var(--pink); border-radius: 4px; }

/* Color variants for card covers/avatars */
.atsa-c-pink   { background: #f5e6ed; } .atsa-av-pink   { background: #f4c0d1; color: #72243e; }
.atsa-c-blue   { background: #e6edf5; } .atsa-av-blue   { background: #b5d4f4; color: #0c447c; }
.atsa-c-green  { background: #e6f5ee; } .atsa-av-green  { background: #9fe1cb; color: #085041; }
.atsa-c-amber  { background: #faeeda; } .atsa-av-amber  { background: #fac775; color: #633806; }
.atsa-c-purple { background: #eeedfe; } .atsa-av-purple { background: #cecbf6; color: #3c3489; }
.atsa-c-teal   { background: #e1f5ee; } .atsa-av-teal   { background: #9fe1cb; color: #085041; }
.atsa-c-rose   { background: #fde8f0; } .atsa-av-rose   { background: #f9b8d4; color: #7a1a44; }
.atsa-c-sky    { background: #e0f0fb; } .atsa-av-sky    { background: #9fd4f5; color: #0b3f6e; }

/* ============================================================
   PROFIL AMBASSADRICE — single-ambassadrice.php
   ============================================================ */

/* Topnav variante profil — back-link */
.atsa-back-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-muted); cursor: pointer;
  background: none; border: none; padding: 0;
}
.atsa-back-link:hover { color: var(--text); }
.atsa-back-link svg { flex-shrink: 0; }
.atsa-back-link--mobile { display: none; }
@media (max-width: 768px) {
  .atsa-back-link--mobile  { display: flex; }
  .atsa-back-link--desktop { display: none; }
  .atsa-topnav--profile .atsa-topnav__actions { gap: 6px; }
}

/* Layout profil — 2 colonnes desktop */
.atsa-main--profile { padding: 24px 40px 48px; }
@media (max-width: 768px) { .atsa-main--profile { padding: 0 0 80px; } }

.atsa-profile-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  .atsa-profile-layout { grid-template-columns: 1fr; gap: 0; }
}

/* Carte profil gauche */
.atsa-profile-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 900px) {
  .atsa-profile-card { border-radius: 0; border-left: none; border-right: none; }
}

/* Cover */
.atsa-profile-cover {
  height: 140px;
  position: relative;
}
@media (max-width: 768px) { .atsa-profile-cover { height: 100px; } }

/* Avatar profil */
.atsa-profile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 500;
  position: absolute; bottom: -40px; left: 20px;
}
@media (max-width: 768px) {
  .atsa-profile-avatar { width: 64px; height: 64px; font-size: 20px; bottom: -32px; left: 16px; }
}

/* Body profil */
.atsa-profile-body {
  padding: 48px 20px 20px;
}
@media (max-width: 768px) { .atsa-profile-body { padding: 38px 16px 16px; } }

.atsa-profile-name { font-size: 20px; font-weight: 500; }
@media (max-width: 768px) { .atsa-profile-name { font-size: 16px; } }

.atsa-profile-handle { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
@media (max-width: 768px) { .atsa-profile-handle { font-size: 12px; margin-top: 2px; } }

.atsa-validated { color: var(--pink); }

.atsa-profile-bio {
  font-size: 13px; color: var(--text-muted);
  margin-top: 10px; line-height: 1.6;
}
@media (max-width: 768px) { .atsa-profile-bio { font-size: 12px; margin-top: 8px; line-height: 1.5; } }

/* Tags */
.atsa-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 768px) { .atsa-tag-row { gap: 5px; margin-top: 8px; } }
.atsa-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 20px;
  background: var(--bg-surface); color: var(--text-muted);
  border: 0.5px solid var(--border);
}
@media (max-width: 768px) { .atsa-tag { font-size: 10px; padding: 3px 9px; } }

/* Stats profil */
.atsa-profile-stats {
  display: flex;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  margin-top: 16px;
}
@media (max-width: 768px) { .atsa-profile-stats { margin-top: 12px; } }

.atsa-pstat { flex: 1; text-align: center; padding: 14px 8px; }
@media (max-width: 768px) { .atsa-pstat { padding: 10px 6px; } }
.atsa-pstat + .atsa-pstat { border-left: 0.5px solid var(--border); }
.atsa-pstat__val { font-size: 18px; font-weight: 500; }
@media (max-width: 768px) { .atsa-pstat__val { font-size: 15px; } }
.atsa-pstat__lbl { font-size: 11px; color: var(--text-hint); margin-top: 3px; }
@media (max-width: 768px) { .atsa-pstat__lbl { font-size: 10px; margin-top: 2px; } }

/* Quota box */
.atsa-quota-box {
  margin: 16px 0; padding: 14px;
  background: var(--bg-surface); border-radius: var(--radius);
}
@media (max-width: 768px) { .atsa-quota-box { margin: 12px 0; padding: 10px 12px; } }
.atsa-quota-box__head {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
@media (max-width: 768px) { .atsa-quota-box__head { font-size: 11px; margin-bottom: 6px; } }
.atsa-quota-box__head strong { color: var(--text); }
.atsa-quota-box__track {
  height: 6px; background: var(--border); border-radius: 6px; overflow: hidden;
}
@media (max-width: 768px) { .atsa-quota-box__track { height: 5px; } }
.atsa-quota-box__fill { height: 100%; background: var(--pink); border-radius: 6px; }

/* Bouton abonnement */
.atsa-sub-btn {
  width: 100%; padding: 13px; border-radius: var(--radius);
  background: var(--pink); border: none; color: #fff;
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font);
}
@media (max-width: 768px) { .atsa-sub-btn { padding: 12px; font-size: 13px; } }

/* Tip bar */
.atsa-tip-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding: 10px 14px;
  background: var(--bg-surface); border-radius: var(--radius);
  font-size: 13px; color: var(--text-muted);
}
@media (max-width: 768px) { .atsa-tip-bar { margin-top: 8px; padding: 8px 12px; font-size: 12px; } }
.atsa-tip-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px;
}
@media (max-width: 768px) { .atsa-tip-btn { font-size: 11px; gap: 4px; } }

/* Colonne droite — contenu */
.atsa-content-col {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 900px) {
  .atsa-content-col { border-radius: 0; border-left: none; border-right: none; margin-top: 10px; }
}

/* Tabs */
.atsa-profile-tabs { display: flex; border-bottom: 0.5px solid var(--border); }
.atsa-ptab {
  flex: 1; padding: 14px; text-align: center;
  font-size: 13px; color: var(--text-muted);
  border-bottom: 2px solid transparent; cursor: pointer;
}
@media (max-width: 768px) { .atsa-ptab { padding: 12px; font-size: 12px; } }
.atsa-ptab--active { color: var(--pink); border-bottom-color: var(--pink); }

/* Grille de contenu */
.atsa-content-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.atsa-content-cell {
  aspect-ratio: 1; background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
}
.atsa-content-cell svg { color: #999; }
.atsa-content-cell--locked {
  background: #111; flex-direction: column; gap: 6px;
}
@media (max-width: 768px) { .atsa-content-cell--locked { gap: 4px; } }
.atsa-content-cell--locked svg { color: rgba(255,255,255,.7); }
.atsa-content-cell--locked span {
  font-size: 11px; color: rgba(255,255,255,.55);
}
@media (max-width: 768px) { .atsa-content-cell--locked span { font-size: 9px; } }

/* Carte cliquable */
a.atsa-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.atsa-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  transition: box-shadow 0.2s, transform 0.2s;
}