/* Vote musique — Camp Patro Don Bosco Verviers
   Palette officielle reprise du site patro. */

:root {
  --blanc: #FAFAF7;
  --encre: #1A1A1A;
  --vert-patro: #2E7D4F;
  --vert-fonce: #256741;
  --jaune-patro: #F0C040;
  --rouge-vif: #D94F3D;
  --gris-doux: #E8E6DF;
  --gris-texte: #5A5A52;

  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --radius: 14px;
  --shadow: 0 4px 18px rgba(26, 26, 26, .08);
  --esp-s: 1rem;
  --esp-m: 1.5rem;
  --esp-l: 2.5rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--encre);
  background:
    radial-gradient(1200px 400px at 80% -100px, rgba(240, 192, 64, .18), transparent),
    var(--blanc);
  line-height: 1.55;
}

.wrap { width: min(960px, 92vw); margin-inline: auto; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }

a { color: var(--vert-fonce); }

/* ---------- En-tête ---------- */
.site-header {
  background: linear-gradient(135deg, var(--vert-patro), var(--vert-fonce));
  color: #fff;
  padding: 2.2rem 0 1.8rem;
  text-align: center;
}
.site-header h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; }
.site-header .subtitle { margin: .3rem 0 0; opacity: .92; font-weight: 500; }
.badge {
  display: inline-block; margin-top: .9rem; padding: .25rem .8rem;
  border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.badge.open  { background: rgba(255,255,255,.2); }
.badge.closed { background: var(--rouge-vif); }

/* ---------- Cartes ---------- */
main { padding: var(--esp-l) 0 3rem; display: grid; gap: var(--esp-m); }
.card {
  background: #fff;
  border: 1px solid var(--gris-doux);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--esp-m);
}
.card h2 { margin-top: 0; color: var(--vert-fonce); }

.section-head { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; }

.intro .steps { margin: .4rem 0 0; padding-left: 1.2rem; }
.intro .steps li { margin-bottom: .4rem; }

.chip {
  display: inline-block; padding: .05rem .5rem; border-radius: 8px;
  font-size: .8rem; font-weight: 700; color: #fff; margin: 0 .15rem;
}
.chip.rank-1 { background: var(--vert-patro); }
.chip.rank-2 { background: var(--jaune-patro); color: var(--encre); }
.chip.rank-3 { background: var(--rouge-vif); }

.hint { color: var(--gris-texte); font-size: .9rem; }
.muted { color: var(--gris-texte); font-size: .9rem; }
.loading { color: var(--gris-texte); font-style: italic; }

/* ---------- Totem ---------- */
.totem-box { display: flex; flex-direction: column; gap: .25rem; }
.totem-box label { font-weight: 600; font-size: .85rem; }
input[type=text], input[type=url], input[type=password], input[type=file] {
  font: inherit; padding: .55rem .7rem; border: 1.5px solid var(--gris-doux);
  border-radius: 10px; background: #fff; width: 100%;
}
input:focus { outline: none; border-color: var(--vert-patro); box-shadow: 0 0 0 3px rgba(46,125,79,.15); }
#totem { min-width: 220px; }

.my-vote-info {
  background: #fff7e0; border: 1px solid var(--jaune-patro);
  border-radius: 10px; padding: .5rem .8rem; font-size: .9rem; margin-top: .8rem;
}

/* Barre de validation du vote (totem + bouton), bien visible en bas des propositions. */
.vote-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem;
  margin-top: var(--esp-m); padding: 1rem 1.1rem;
  background: #f0f8f2; border: 1.5px solid var(--vert-patro); border-radius: 12px;
}
.vote-bar .totem-box { flex: 1 1 240px; }
.vote-bar .btn { flex: 0 0 auto; }

/* ---------- Grille de propositions ---------- */
.prop-grid { display: grid; gap: var(--esp-s); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: var(--esp-s); }

.prop {
  border: 1.5px solid var(--gris-doux); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.prop.selected { border-color: var(--vert-patro); box-shadow: 0 0 0 2px rgba(46,125,79,.2); }

.prop-media { position: relative; aspect-ratio: 16/9; background: #000; }
.prop-media img, .prop-media iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.prop-media .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); border: 0; cursor: pointer; color: #fff; font-size: 3rem;
}
.prop-media .play:hover { background: rgba(0,0,0,.4); }
.prop-media.audio { aspect-ratio: auto; background: linear-gradient(135deg, var(--vert-patro), var(--vert-fonce)); padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; align-items: center; justify-content: center; }
.prop-media.audio .ico { font-size: 2.4rem; }
.prop-media.audio audio { width: 100%; }

.prop-body { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.prop-title { font-weight: 600; font-family: var(--font-display); }
.prop-author { font-size: .8rem; color: var(--gris-texte); }
.prop-score { font-size: .8rem; color: var(--vert-fonce); font-weight: 700; }

.rank-buttons { display: flex; gap: .4rem; margin-top: auto; padding-top: .4rem; }
.rank-btn {
  flex: 1; padding: .45rem 0; border: 1.5px solid var(--gris-doux); background: #fff;
  border-radius: 9px; font: 700 .95rem var(--font-display); cursor: pointer; color: var(--gris-texte);
  transition: all .12s;
}
.rank-btn:hover { border-color: var(--vert-patro); }
.rank-btn.active-1 { background: var(--vert-patro); border-color: var(--vert-patro); color: #fff; }
.rank-btn.active-2 { background: var(--jaune-patro); border-color: var(--jaune-patro); color: var(--encre); }
.rank-btn.active-3 { background: var(--rouge-vif); border-color: var(--rouge-vif); color: #fff; }

.admin-del {
  align-self: flex-start; background: none; border: 0; color: var(--rouge-vif);
  cursor: pointer; font-size: .85rem; padding: 0;
}

/* ---------- Boutons / actions ---------- */
.vote-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: var(--esp-s); }
.btn {
  font: 700 1rem var(--font-display); padding: .7rem 1.4rem; border: 0; border-radius: 11px;
  cursor: pointer; color: #fff; transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--vert-patro); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn-secondary { background: var(--encre); }
.btn-secondary:hover { filter: brightness(1.3); }

.feedback { font-size: .9rem; font-weight: 600; }
.feedback.ok { color: var(--vert-fonce); }
.feedback.err { color: var(--rouge-vif); }

/* ---------- Résultats ---------- */
.results { display: grid; gap: .6rem; margin-top: .6rem; }
.result-row { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .6rem; align-items: center; }
.result-rank { font-family: var(--font-display); font-weight: 800; color: var(--gris-texte); text-align: right; }
.result-bar-wrap { background: var(--gris-doux); border-radius: 999px; overflow: hidden; height: 1.7rem; position: relative; }
.result-bar { height: 100%; background: linear-gradient(90deg, var(--vert-patro), var(--jaune-patro)); border-radius: 999px; min-width: 2px; transition: width .4s; }
.result-label { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 .6rem; font-size: .85rem; font-weight: 600; gap: .4rem; }
.result-pts { font-family: var(--font-display); font-weight: 800; color: var(--vert-fonce); min-width: 3.5rem; text-align: right; }
.result-detail { font-size: .72rem; color: var(--gris-texte); font-weight: 500; }

.voters-details { margin-top: .9rem; }
.voters-list { margin: .4rem 0 0; }

/* ---------- Proposer ---------- */
.propose-form .field { margin-bottom: .9rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.req { color: var(--rouge-vif); }
.tabs { display: flex; gap: .5rem; margin: .4rem 0 .9rem; }
.tab {
  flex: 1; padding: .55rem; border: 1.5px solid var(--gris-doux); background: #fff;
  border-radius: 10px; cursor: pointer; font: 600 .95rem var(--font-body);
}
.tab.active { border-color: var(--vert-patro); background: #f0f8f2; color: var(--vert-fonce); }

/* ---------- Bandeau d'ouverture des votes ---------- */
.vote-gate {
  margin: 0 0 .8rem; padding: .8rem 1rem; border-radius: 12px;
  background: #fff4d6; border: 1.5px solid var(--jaune-patro);
  font-size: .95rem; line-height: 1.5;
}
.vote-gate .count { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--vert-fonce); }
.vote-gate.closed { background: #fbe3df; border-color: var(--rouge-vif); }

/* ---------- Animateurs ---------- */
.admin-card summary { cursor: pointer; font-weight: 600; }
.admin-body { margin-top: .9rem; display: grid; gap: .8rem; max-width: 420px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-small { font-size: .9rem; padding: .5rem .9rem; border-radius: 9px; }
.btn-ghost { background: #fff; color: var(--vert-fonce); border: 1.5px solid var(--gris-doux); }
.btn-danger { background: var(--rouge-vif); }
.admin-card code { background: var(--gris-doux); padding: .05rem .35rem; border-radius: 5px; font-size: .85em; }

/* ---------- Pied ---------- */
.site-footer { text-align: center; padding: 1.5rem; color: var(--gris-texte); font-size: .85rem; }

@media (max-width: 560px) {
  .section-head { flex-direction: column; align-items: stretch; }
  #totem { min-width: 0; }
}