/* =====================================================================
   AMANI CHALLENGE — habillage 2ᵉ édition (2027)
   Feuille commune aux 4 pages, chargée APRÈS leurs styles internes.
   Ne touche à aucune logique : couleurs, typographie, surfaces, barres.

   Palette « Nuit du fleuve »
     --ink      #0B1424  fond (bleu encre, plus noir pur)
     --slate    #14203A  surfaces / cartes
     --gold     #D9B05C  or Amani (marque)
     --ivory    #F4ECDC  texte
     --river    #4CB3F0  bleu Congo : direct, info, état actif secondaire
     --garnet   #9E1B32  danger / suppression
   Typo : Marcellus (titres, esprit lettres gravées) + Manrope (texte)
   ===================================================================== */

/* Polices chargées par <link> dans chaque page (plus rapide qu'un @import en chaîne) */

:root {
  --ink: #0B1424;
  --ink-2: #0F1A2E;
  --slate: #14203A;
  --slate-2: #1A2946;
  --ivory: #F4ECDC;
  --ivory-dim: rgba(244, 236, 220, 0.62);
  --ivory-faint: rgba(244, 236, 220, 0.38);
  --river: #4CB3F0;
  --garnet: #9E1B32;
  --line: rgba(217, 176, 92, 0.18);
  --line-strong: rgba(217, 176, 92, 0.42);

  /* Variables historiques des pages, redirigées vers la nouvelle palette */
  --gold: #D9B05C;
  --gold-light: #ECCB85;
  --dark: #0B1424;
  --dark2: #0F1A2E;
  --dark3: #14203A;
  --dark4: #1A2946;
  --text: #F4ECDC;
  --red: #5C1324;
  --red-bright: #9E1B32;
  --glow: rgba(217, 176, 92, 0.30);

  --display: 'Marcellus', 'Cinzel', Georgia, serif;
  --sans: 'Manrope', 'Raleway', system-ui, -apple-system, sans-serif;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

[hidden] { display: none !important; }
html { background: var(--ink); }
body {
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(76, 179, 240, 0.16), transparent 60%),
    radial-gradient(90% 40% at 85% -5%, rgba(217, 176, 92, 0.14), transparent 65%),
    var(--ink) !important;
  background-attachment: fixed !important;
  color: var(--ivory) !important;
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { opacity: 0 !important; }

/* ---------- Typographie ---------- */
/* Tout ce qui était en Cinzel (souvent en capitales très espacées) passe
   en Marcellus, casse normale, espacement mesuré. */
[style*="Cinzel"],
.card-title, .sec-title, .section-label, .section-title, .a-section-title,
.login-title, .topbar-title, .upload-title, .success-title, .closed-title,
.video-slide-title, .crown-name, .pod-name, .lb-name, .home-title,
.pay-title, .price-big, .btn-title, .stat-num, .stat-number {
  font-family: var(--display) !important;
}
[style*="letter-spacing:2px"], [style*="letter-spacing:3px"], [style*="letter-spacing: 2px"] {
  letter-spacing: 0.06em !important;
}
.card-title, .sec-title, .section-label, .a-section-title, .login-sub,
.stat-lbl, .stat-label, .topbar-title {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
.card-title { font-size: 17px !important; color: var(--ivory) !important; }
.card-title::after, .sec-title::after, .section-label::after, .a-section-title::after { background: var(--line) !important; }
.sec-title, .section-label { font-size: 16px !important; color: var(--ivory) !important; }
.stat-lbl, .stat-label { font-family: var(--sans) !important; font-size: 11px !important; color: var(--ivory-faint) !important; }

button, input, select, textarea { font-family: var(--sans) !important; }
p, .step-text, .upload-sub, .pay-hint, .video-slide-sub { line-height: 1.6 !important; }

/* ---------- Surfaces ---------- */
.card, .pay-card, .steps-card, .vote-info-card, .login-box, .pay-form,
.province-card, .vote-card, .stat-box, .stats-bar,
[style*="background:var(--dark3)"] {
  background: linear-gradient(180deg, rgba(26, 41, 70, 0.92), rgba(20, 32, 58, 0.92)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
}
.stats-bar { border-radius: var(--r-md) !important; overflow: hidden; }
.stat-box { border-radius: 0 !important; border-width: 0 1px 0 0 !important; background: transparent !important; }
.stat-box:last-child { border-right: 0 !important; }

/* En-têtes de page */
.vote-header, .topbar, #home-header {
  background: rgba(11, 20, 36, 0.72) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line) !important;
}
.peace-msg { color: var(--ivory-dim) !important; font-size: 13px !important; }

/* Barre de progression des étapes */
.prog-step { height: 3px !important; background: rgba(244, 236, 220, 0.10) !important; }
.prog-step.done { background: var(--gold) !important; }
.prog-step.active { background: linear-gradient(90deg, var(--gold), var(--river)) !important; }

/* ---------- Boutons ---------- */
.btn-primary, .login-btn, .vote-form-btn, .main-btn, .save-prov-btn, .save-pay-btn {
  background: linear-gradient(180deg, #E4BE6C, #C99A3F) !important;
  color: #1A1206 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: 0 10px 26px -12px rgba(217, 176, 92, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform .15s ease, filter .15s ease;
}
.btn-primary:active, .login-btn:active, .main-btn:active { transform: scale(0.98); filter: brightness(0.95); }
.btn-primary:disabled { opacity: 0.35 !important; box-shadow: none !important; }
.btn-secondary, .change-btn, .back-btn, .province-back-btn, .logout-btn {
  border: 1px solid var(--line-strong) !important;
  color: var(--ivory-dim) !important;
  background: transparent !important;
  border-radius: 999px !important;
}
.back-btn { border-radius: 50% !important; }

/* Champs */
.input-field, input[type="text"], input[type="number"], input[type="password"], select, textarea {
  background: rgba(11, 20, 36, 0.65) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  color: var(--ivory) !important;
}
.input-field:focus, input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(217, 176, 92, 0.18) !important;
}
:focus-visible { outline: 2px solid var(--river) !important; outline-offset: 2px; }

/* Zone d'envoi de la capture */
.upload-zone {
  border: 1.5px dashed var(--line-strong) !important;
  border-radius: var(--r-lg) !important;
  background: rgba(76, 179, 240, 0.04) !important;
}

/* Tableau des montants */
.conv-table th { font-family: var(--sans) !important; font-size: 11px !important; letter-spacing: 0.04em !important; color: var(--gold) !important; text-transform: none !important; }
.conv-table td { border-color: rgba(244, 236, 220, 0.07) !important; font-variant-numeric: tabular-nums; }
.price-big { color: var(--gold) !important; }

/* ---------- Vote : choix du mode ---------- */
#mode-choice button {
  border-radius: 24px !important;
  border: 1px solid var(--line-strong) !important;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(217, 176, 92, 0.16), transparent 60%),
    linear-gradient(180deg, var(--slate-2), var(--slate)) !important;
}
#mode-choice button + button {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(76, 179, 240, 0.18), transparent 60%),
    linear-gradient(180deg, var(--slate-2), var(--slate)) !important;
}

/* Provinces (page Voter + Classement) */
.province-list-item, .province-pick-item {
  background: rgba(244, 236, 220, 0.03) !important;
  border: 1px solid rgba(244, 236, 220, 0.08) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}
#province-list { background: rgba(11, 20, 36, 0.55) !important; border-color: var(--line) !important; border-radius: var(--r-lg) !important; }
#phase-banner {
  background: rgba(76, 179, 240, 0.10) !important;
  border: 1px solid rgba(76, 179, 240, 0.35) !important;
  color: #BFE4FB !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-radius: 999px !important;
}

/* Cartes candidats */
.candidate-card { border-radius: var(--r-lg) !important; border-color: var(--line) !important; background: var(--slate) !important; }
.candidate-card.selected { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(217, 176, 92, 0.22) !important; }
.cand-vote-btn { border-radius: 999px !important; }

/* ---------- Classement ---------- */
.live-strip { background: linear-gradient(90deg, rgba(76, 179, 240, 0.18), rgba(76, 179, 240, 0.04)) !important; border-bottom: 1px solid rgba(76, 179, 240, 0.25) !important; }
.live-dot { background: var(--river) !important; box-shadow: 0 0 0 4px rgba(76, 179, 240, 0.2) !important; }
.lb-row { border-radius: var(--r-md) !important; background: rgba(244, 236, 220, 0.03) !important; border: 1px solid rgba(244, 236, 220, 0.07) !important; }
.lb-fill, .pod-fill, .row-fill { background: linear-gradient(90deg, var(--gold), #F1D38F) !important; }
.lb-bar, .pod-bar, .row-bar { background: rgba(244, 236, 220, 0.08) !important; }
.lb-votes, .pod-votes, .crown-points, .stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Accueil : fil vidéo ---------- */
.video-slide-placeholder {
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(217, 176, 92, 0.16), transparent 70%),
    radial-gradient(100% 80% at 50% 120%, rgba(76, 179, 240, 0.18), transparent 70%),
    var(--ink) !important;
}
.video-slide-title { font-size: 30px !important; color: var(--ivory) !important; letter-spacing: 0 !important; }
.video-slide-soon { border-radius: 999px !important; border-color: var(--line-strong) !important; text-transform: none !important; letter-spacing: 0.02em !important; font-family: var(--sans) !important; }
.video-feed-dots .dot.active { background: var(--gold) !important; }

/* ---------- Admin ---------- */
.tabs { gap: 6px !important; background: rgba(11, 20, 36, 0.6) !important; border-radius: 999px !important; padding: 4px !important; border: 1px solid var(--line) !important; }
.tab { border-radius: 999px !important; border: 0 !important; font-family: var(--sans) !important; font-weight: 600 !important; }
.tab.active { background: rgba(217, 176, 92, 0.16) !important; color: var(--gold) !important; }
.toast, .save-toast { border-radius: 999px !important; background: rgba(20, 32, 58, 0.96) !important; border: 1px solid var(--line-strong) !important; color: var(--ivory) !important; }
.pay-hint { border-radius: var(--r-md) !important; }

/* ---------- Barre d'onglets (signature) ---------- */
.bottom-tabbar {
  background: rgba(11, 20, 36, 0.78) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  border-top: 1px solid var(--line) !important;
}
.tab-item { position: relative; color: var(--ivory-faint) !important; transition: color .2s ease; }
.tab-item .tab-label { font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; font-size: 10.5px !important; }
.tab-item.active { color: var(--gold) !important; }
.tab-item.active::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 28px; height: 2px; margin-left: -14px;
  border-radius: 0 0 2px 2px;
  background: var(--gold);
  box-shadow: 0 0 14px 2px rgba(217, 176, 92, 0.55);
}
.tab-item:not(.active) .tab-icon { filter: grayscale(0.55) opacity(0.75); }

/* Logos d'en-tête : anneau doré fin */
.logo-circle, .header-logo { box-shadow: 0 0 0 1px var(--line-strong), 0 8px 24px -10px rgba(217, 176, 92, 0.5) !important; }

/* Couleurs rouges historiques → grenat */
[style*="#ff6b6b"] { color: #F08A98 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Compléments ---------- */
.pay-title { text-transform: none !important; letter-spacing: 0.02em !important; font-size: 17px !important; color: var(--ivory) !important; }
.live-badge { font-family: var(--sans) !important; letter-spacing: 0.02em !important; text-transform: none !important; color: #BFE4FB !important; font-weight: 700 !important; }
.topbar-title { color: var(--ivory) !important; font-size: 17px !important; }

/* Bandeau « Installer sur iPhone » : carte flottante au lieu d'un bloc noir */
#ios-hint {
  left: 12px !important; right: 12px !important; width: auto !important;
  bottom: calc(68px + var(--safe-bottom, 0px)) !important;
  border-radius: 20px !important;
  border: 1px solid var(--line-strong) !important;
  background: rgba(20, 32, 58, 0.94) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8) !important;
}
#ios-hint > div:first-child { font-family: var(--display) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--ivory) !important; }
#ios-hint strong { color: var(--gold) !important; }
#ios-hint button { border-radius: 999px !important; font-size: 12px !important; padding: 8px 20px !important; }