/* ==========================================================================
   FPS VALORIA — Refonte V3 Ultra Premium (ESPACE CLIENT + ADMINISTRATION)
   Surcouche additive : ne redéfinit aucune classe JS-critique, ne fait que
   restyler les éléments déjà présents dans compte.html et admin.html avec
   la même direction artistique que public-v3.css (mêmes variables --violet,
   --surface, --radius, --shadow issues de style.css).
   ========================================================================== */

/* -- Garde-fou : ne jamais laisser une regle ci-dessous repasser un
   element [hidden] en visible (meme specificite que la feuille UA). -- */
[hidden] { display: none !important }

/* -- Boutons (compte.html + admin.html) -------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-700));
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid #ffffff14;
  box-shadow: 0 14px 30px -12px #8b5cf680;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px #a855f7aa; color: #fff }
.button.outline {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--text-dim);
}
.button.outline:hover { border-color: var(--violet-300); color: var(--violet-200); transform: translateY(-2px); box-shadow: var(--shadow-sm) }
.button.small { padding: 9px 16px; font-size: 13px; border-radius: 10px }
.button.danger { background: linear-gradient(135deg, #e14f6b, #a52a46); box-shadow: 0 14px 30px -12px #e14f6b70 }
.button:disabled, .button[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none }

/* -- Cartes génériques (admin .card + client .panel/.auth-card) -------- */
.card, .panel, .auth-card, .side-card, .quick-link, .connected-app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card, .panel { padding: 26px 28px }
.card:hover, .panel:hover { border-color: #332a4d }
.eyebrow {
  color: var(--violet-200);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
h1, h2, h3 { letter-spacing: -0.2px }
.muted { color: var(--muted) }

/* -- Badges / statuts ---------------------------------------------------- */
.badge, .tier-badge, .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 30px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line-soft);
  background: linear-gradient(135deg, #1c1430, #120e1e 70%);
  color: var(--violet-200);
}
.status.good, .good { color: var(--teal); border-color: #2a5f4d80 }
.status.bad, .bad, .danger { color: var(--rose); border-color: #6b2f3c80 }
.tier-badge.founder { background: linear-gradient(135deg, #3a2460, #1c1430); color: #e8d9ff; border-color: #6d44b84d }
.tier-badge.premium { color: var(--teal) }

/* -- Formulaires ---------------------------------------------------------- */
input, select, textarea {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 11px 14px;
  font: inherit;
  font-size: 14.5px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--violet-300);
  box-shadow: 0 0 0 3px #8b5cf633;
}
label { font-size: 13.5px; color: var(--text-dim); font-weight: 600 }

/* -- Espace client : hero, onglets, accueil ------------------------------ */
.hero-client {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1c1430 0%, #120e1e 75%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}
.hero-client-glow {
  position: absolute; inset: -40% -10% auto auto; width: 420px; height: 420px;
  background: radial-gradient(circle, #8b5cf64a, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.account-hello { font-size: 34px; margin: 6px 0 2px }
.auth-card { padding: 40px 36px; max-width: 440px; margin: 40px auto }
.auth-card .avatar { display: block; margin: 0 auto 18px; border-radius: 50%; box-shadow: var(--glow-line) }
.auth-card .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 22px 0 20px }
.auth-card .tabs button { background: none; border: none; color: var(--muted); font-weight: 700; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent }
.auth-card .tabs button.selected { color: var(--violet-200); border-color: var(--violet) }
.auth-card .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 12.5px; margin: 18px 0 }
.auth-card .auth-divider::before, .auth-card .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.auth-card .google-auth-button { width: 100%; background: #fff; color: #1f1b2e; border: none; box-shadow: none; font-weight: 700 }
.auth-card .google-auth-button:hover { color: #1f1b2e; box-shadow: var(--shadow-sm) }
.auth-card form label { display: block; margin: 14px 0 6px }
.auth-card form input { width: 100%; margin-bottom: 2px }
.auth-card .check { display: flex; align-items: center; gap: 8px; font-size: 13.5px }
.auth-card #submit-auth { width: 100%; margin-top: 18px }

.account-tabs { display: flex; gap: 6px; margin: 28px 0 22px; flex-wrap: wrap }
.account-tabs button {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.account-tabs button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8 }
.account-tabs button:hover { color: var(--text); border-color: #3a3156 }
.account-tabs button.selected { color: #fff; background: linear-gradient(135deg, #8b5cf633, #6d3fd622); border-color: #6d44b84d; box-shadow: inset 0 0 0 1px #8b5cf640 }

.overview-layout { display: grid; grid-template-columns: 1fr 280px; gap: 22px }
.quick-links { display: flex; flex-direction: column; gap: 10px }
.quick-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--text-dim); font-weight: 600; transition: all var(--dur-fast) var(--ease) }
.quick-link:hover { border-color: var(--violet-300); transform: translateY(-2px); color: var(--text) }
.quick-link svg { width: 20px; height: 20px; stroke: var(--violet-200); fill: none; stroke-width: 1.7; flex-shrink: 0 }
.quick-link i { margin-left: auto; opacity: .6; font-style: normal }
.loyalty-banner { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(135deg, #241735, #16121f); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px 26px; margin-top: 18px }
.loyalty-main { display: flex; align-items: center; gap: 14px }
.loyalty-main svg { width: 26px; height: 26px; stroke: var(--violet-200); fill: none; flex-shrink: 0 }
.loyalty-tagline { color: var(--muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; white-space: nowrap }
.account-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px }

@media (max-width: 900px) {
  .overview-layout { grid-template-columns: 1fr }
  .account-summary { grid-template-columns: repeat(2, 1fr) }
}

/* -- Bug preexistant (confirme present en production avant ce correctif) :
   client-shell.js transforme <header> en sidebar fixe des le chargement du
   script, meme avant connexion, ecrasant l'ecran d'authentification. Un
   MutationObserver pose deja body.client-authenticated une fois connecte ;
   on reutilise le mode "sidebar repliee" existant (prevu pour le mobile)
   tant que ce n'est pas le cas, a toutes les largeurs. -- */
body.client-panel:not(.client-authenticated) .client-sidebar {
  position: relative;
  width: 100%;
  height: auto;
  padding: 18px 24px;
  border-right: 0;
  border-bottom: 1px solid var(--line-soft);
  flex-direction: row;
  align-items: center;
  overflow: visible;
}
body.client-panel:not(.client-authenticated) .client-sidebar .sidebar-caption,
body.client-panel:not(.client-authenticated) .client-sidebar #account-nav,
body.client-panel:not(.client-authenticated) .client-sidebar .sidebar-bottom,
body.client-panel:not(.client-authenticated) .client-toolbar {
  display: none;
}
body.client-panel:not(.client-authenticated) .portal {
  margin-left: 0;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

/* -- Administration : sidebar, toolbar, stats ---------------------------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.sidebar .brand { padding: 22px 20px; border-bottom: 1px solid var(--line-soft) }
.sidebar .brand small { color: var(--muted-2); display: block; font-size: 10.5px; letter-spacing: 1.4px }
#admin-nav a {
  display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 11px 18px; font-weight: 600; font-size: 14px;
  border-left: 2px solid transparent; transition: all var(--dur-fast) var(--ease);
}
#admin-nav a:hover { color: var(--text); background: #ffffff08 }
#admin-nav a.active { color: var(--violet-200); background: linear-gradient(90deg, #8b5cf622, transparent); border-left-color: var(--violet) }
.sidebar-bottom { border-top: 1px solid var(--line-soft); padding: 16px 18px }
.sidebar-bottom .identity { display: flex; align-items: center; gap: 10px; margin-top: 12px }
.sidebar-bottom .identity img { width: 34px; height: 34px; border-radius: 50%; box-shadow: var(--glow-line) }

.toolbar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 14px;
}
#global-search { flex: 1; max-width: 480px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px }
#global-search input { background: none; border: none; flex: 1; padding: 11px 0 }
#global-search input:focus { box-shadow: none }
#global-search kbd { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-size: 11px; color: var(--muted-2) }

.page-heading { margin: 26px 0 }
.page-heading h1 { font-size: 30px; margin: 6px 0 8px }
.stats, .overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.stat:hover { transform: translateY(-3px); border-color: #4a3d7a }
.stat strong, .stat .value { font-size: 30px; display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius) }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th { text-align: left; color: var(--muted-2); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; padding: 12px 16px; border-bottom: 1px solid var(--line) }
td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft) }
tr:last-child td { border-bottom: none }
tr:hover td { background: #ffffff05 }

@media (max-width: 1000px) {
  .stats, .overview-grid { grid-template-columns: repeat(2, 1fr) }
}