/* ==========================================================================
   ARAWO AWARDS — styles propres à la page Vote
   ========================================================================== */

body.vote-page { background: #07070b; -webkit-font-smoothing: antialiased; }
.vote-page #bgfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.vote-page .page { position: relative; z-index: 1; }

/* --- en-tête ------------------------------------------------------------
   Même barre de navigation que sur l'accueil : bande sombre pleine, logo et
   bouton lisibles. La toile animée est en position fixe et couvre tout l'écran,
   il lui faut donc un fond opaque et un empilement franchement au-dessus du
   contenu — sans quoi les étincelles passent par-dessus le menu. */
body.vote-page > header {
  position: sticky;        /* réaffirmé : le passer en `relative` décrocherait
                              la barre et la ferait passer sous la toile */
  top: 0;
  z-index: 60;             /* franchement au-dessus du canvas (0) et du contenu (1) */
  background-color: #0d0906;
}
body.vote-page #mobileMenu { background-color: #0d0906; }
.vote-page :focus-visible { outline: 2px solid #d9a53c; outline-offset: 2px; }
.vote-page ::selection { background: rgba(217,165,60,.35); }

.goldline { background: linear-gradient(90deg, transparent, #c08d2c, transparent); }

/* --- cartes de nominés -------------------------------------------------- */
.card {
  background: linear-gradient(170deg, rgba(38,23,10,.92), rgba(12,8,5,.94));
  border: 1px solid rgba(222,130,9,.65);
  box-shadow: 0 0 0 1px rgba(222,130,9,.10) inset, 0 16px 40px -22px rgba(0,0,0,.9);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.card:hover { transform: translateY(-5px); border-color: rgb(222,130,9); box-shadow: 0 0 26px -6px rgba(222,130,9,.45), 0 22px 44px -20px rgba(0,0,0,.9); }
.card.voted { border-color: rgb(222,130,9); box-shadow: 0 0 30px -8px rgba(222,130,9,.6); }

/* Le bouton porte un fond dès le repos : posé sur la carte sombre, un simple
   contour se lisait mal et ne se distinguait pas assez du reste. Le survol
   l'intensifie, et l'état « voté » garde son aplat plein. */
.voteBtn {
  border: 1px solid rgb(222,130,9);
  background: linear-gradient(170deg, rgba(222,130,9,.32), rgba(222,130,9,.14));
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.voteBtn:hover {
  background: linear-gradient(170deg, rgba(222,130,9,.62), rgba(222,130,9,.34));
  box-shadow: 0 0 18px -4px rgba(222,130,9,.6);
}
.voteBtn:active { background: rgba(222,130,9,.72); }
.voteBtn.is-voted { background: rgb(222,130,9); color: #2a1004; border-color: rgb(222,130,9); box-shadow: none; }

.rank { background: linear-gradient(140deg,#ff8a1e,#ffd166); box-shadow: 0 0 18px -2px rgba(255,140,30,.75); }

/* --- photo du nominé cliquable dans la fenêtre de vote ------------------ */
.photo-zoom { cursor: zoom-in; }
#photoPreview { animation: mdIn .2s ease both; }

/* --- drapeaux -----------------------------------------------------------
   Le pays est déduit du libellé du nominé renvoyé par l'API et rendu en image :
   les emoji drapeaux ne s'affichent pas sous Windows. */
.flag {
  width: 22px; height: 15px; flex: none; display: inline-block;
  border-radius: 2px; object-fit: cover;
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* --- bandeau catégorie défilant sur la photo ---------------------------- */
.catbar {
  position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.85));
}
.catrun { display: flex; width: max-content; gap: 2.5rem; white-space: nowrap; }
.catwrap { flex: 1; min-width: 0; overflow: hidden; }
.catrun.is-scroll { animation: catmove var(--dur, 9s) linear infinite; }
@keyframes catmove { from { transform: translateX(0) } to { transform: translateX(calc(-50% - 1.25rem)) } }
.card:hover .catrun.is-scroll { animation-play-state: paused; }

/* --- animations --------------------------------------------------------- */
@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.16)} 100%{transform:scale(1)} }
.pop { animation: pop .45s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.fadeUp { animation: fadeUp .6s ease both; }

/* --- fenêtre de vote ---------------------------------------------------- */
@keyframes mdIn  { from { opacity:0 } to { opacity:1 } }
@keyframes mdCard { from { opacity:0; transform: translateY(26px) scale(.94) } to { opacity:1; transform: none } }
@keyframes mdOut { to { opacity:0 } }
@keyframes mdCardOut { to { opacity:0; transform: translateY(18px) scale(.96) } }
#modal { animation: mdIn .25s ease both; }
#modal .md-card { animation: mdCard .42s cubic-bezier(.2,.85,.25,1) both; }
#modal.closing { animation: mdOut .22s ease both; }
#modal.closing .md-card { animation: mdCardOut .22s ease both; }

@keyframes scoreBeat {
  0%,100% { transform: scale(1); opacity: 1; text-shadow: 0 0 12px rgba(217,165,60,.35) }
  45%     { transform: scale(1.16); opacity: .9; text-shadow: 0 0 22px rgba(233,200,119,.85) }
  70%     { transform: scale(.97); opacity: 1 }
}
#mdScore { display: inline-block; animation: scoreBeat 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .pop, .fadeUp, #mdScore, #modal, #modal .md-card, #photoPreview { animation: none !important; }
  .catrun.is-scroll { animation: none; }
  .photo-zoom img { transition: none; }
}

/* --- bouton de partage sur la photo du nominé --------------------------- */
.shareBtn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(217,165,60,.65);
  background: rgba(8,5,3,.62);
  color: #e9c877;
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.9);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.shareBtn:hover,
.shareBtn:focus-visible {
  background: #d9a53c;
  color: #2a1004;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 20px -4px rgba(217,165,60,.8);
}
.shareBtn:active { transform: translateY(-50%) scale(.96); }

/* --- panneau de partage -------------------------------------------------- */
#shareModal { animation: mdIn .22s ease both; }
#shareModal .sh-card { animation: mdCard .38s cubic-bezier(.2,.85,.25,1) both; }
#shareModal.closing { animation: mdOut .2s ease both; }
#shareModal.closing .sh-card { animation: mdCardOut .2s ease both; }

.shNet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 4px 10px;
  border-radius: 16px;
  border: 1px solid rgba(217,165,60,.3);
  background: rgba(0,0,0,.45);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.shNet:hover { border-color: rgba(233,200,119,.85); background: rgba(217,165,60,.14); transform: translateY(-2px); }
.shNet-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(217,165,60,.16);
  color: #e9c877;
  transition: background .22s ease, color .22s ease;
}
.shNet:hover .shNet-icon { background: #d9a53c; color: #2a1004; }
.shNet-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: rgba(244,232,210,.8); }

@media (prefers-reduced-motion: reduce) {
  #shareModal, #shareModal .sh-card { animation: none !important; }
  .shareBtn, .shNet { transition: none; }
}

/* --- champ téléphone international (intl-tel-input) ---------------------- */
:root {
  --iti-hover-color: rgba(217,165,60,.18);
  --iti-border-color: rgba(217,165,60,.4);
  --iti-country-selector-bg: #150e08;
  --iti-icon-color: #e9c877;
  --iti-spacer-horizontal: 12px;
}
.iti { display: block; width: 100%; }
.iti .iti__tel-input { padding-left: 92px !important; }
.iti--separate-dial-code .iti__selected-country-primary { padding-left: 16px; }
.iti__selected-dial-code { color: #f4e8d2; font-size: 14px; }
.iti__selected-country:hover .iti__selected-country-primary,
.iti__selected-country[aria-expanded="true"] .iti__selected-country-primary { border-radius: 999px 0 0 999px; }

/* liste des pays, en superposition au-dessus de la fenêtre de vote */
.iti--detached-country-selector { z-index: 1200; }
.iti__country-selector { color: #f4e8d2; }
.iti__country-list { background: #150e08; }
.iti__country { color: rgba(244,232,210,.9); }
.iti__country .iti__dial-code { color: rgba(244,232,210,.55); }
.iti__search-input {
  background: #0d0906;
  color: #fdf8ef;
  border-radius: 12px 12px 0 0;
}
.iti__search-input::placeholder { color: rgba(244,232,210,.45); }
.iti__no-results { color: rgba(244,232,210,.6); }
.iti--fullscreen-popup.iti--detached-country-selector { background-color: rgba(0,0,0,.75); }

/* Le fond animé (#bgfx) est fixé en z-index 0 : le contenu et le pied de page
   doivent rester au-dessus.

   `main` ne prend surtout pas de z-index : la toile animée vit à l'intérieur,
   et lui donner un contexte d'empilement ferait passer tout le bloc — canvas
   compris — par-dessus l'en-tête. Ce dernier garde son `position: sticky`
   d'origine (le forcer en `relative` casserait la navigation collante) ; son
   empilement est réglé plus haut, avec son fond. */
.vote-page > footer { position: relative; z-index: 1; }