:root{
  --nuit: #0B1330;
  --nuit-profond: #060912;
  --nuit-carte: #131C42;
  --ambre: #F4A93C;
  --ambre-clair: #FBD695;
  --creme: #F3ECDA;
  --lavande: #9099BE;
  --rouge: #C1443C;
  --vert: #6FAE7F;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--nuit-profond);
  color: var(--creme);
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,.marquee{
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
a{color: var(--ambre);}

/* ===== Guirlande lumineuse ===== */
.guirlande{
  width:100%;
  height:56px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--nuit-profond), var(--nuit));
}
.guirlande svg{display:block; width:100%; height:100%;}
.ampoule{ animation: clignote 3.2s ease-in-out infinite; transform-origin:center; }
@keyframes clignote{
  0%,100%{ opacity:0.45; }
  50%{ opacity:1; }
}

/* ===== Hero ===== */
.hero{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,169,60,0.10), transparent 60%),
    linear-gradient(180deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  padding: 48px 24px 40px;
  text-align:center;
  border-bottom: 1px solid rgba(244,236,218,0.08);
}
.eyebrow{
  color: var(--ambre);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 600;
}
h1{
  font-size: clamp(38px, 8vw, 72px);
  margin: 0 0 6px;
  line-height: 0.95;
  color: var(--creme);
}
h1 span{ color: var(--ambre); }
.lieu-hero{
  font-family: 'Anton', sans-serif;
  font-size: clamp(16px, 3vw, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lavande);
  margin: 4px 0 0;
}
.sous-titre{
  font-size: 17px;
  color: var(--lavande);
  max-width: 480px;
  margin: 14px auto 28px;
  line-height:1.5;
}

.infos-billet{
  display:inline-flex;
  gap: 0;
  background: var(--creme);
  color: var(--nuit-profond);
  border-radius: 10px;
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  max-width: 92vw;
}
.infos-billet .champ{
  padding: 16px 20px;
  text-align:left;
  border-right: 2px dashed rgba(11,19,48,0.2);
}
.infos-billet .champ:last-child{ border-right:none; }
.infos-billet .label{
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11,19,48,0.55);
  margin: 0 0 2px;
  font-weight: 700;
}
.infos-billet .valeur{
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

/* ===== Sélecteur de langue ===== */
.lang-switch{
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 13px;
  z-index: 2;
}
.lang-switch a{
  color: var(--lavande);
  text-decoration: none;
  margin: 0 0.25rem;
}
.lang-switch a.active{
  color: var(--ambre);
  font-weight: 700;
}

/* ===== Section vote ===== */
.section{
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 20px 20px;
}
.section h2{
  font-size: 30px;
  color: var(--creme);
  text-align:center;
  margin: 0 0 6px;
}
.section-desc{
  text-align:center;
  color: var(--lavande);
  font-size: 15px;
  margin: 0 0 36px;
}

.grille-films{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.billet{
  position: relative;
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  background: var(--nuit-carte);
  border: 1px solid rgba(244,236,218,0.10);
  border-radius: 14px;
  padding: 20px 20px 18px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  text-align:left;
}
.billet:disabled{ cursor: default; }
.billet:disabled:hover{ transform: none; border-color: rgba(244,236,218,0.10); }
.billet:hover{
  transform: translateY(-3px);
  border-color: rgba(244,169,60,0.4);
}
.billet:focus-visible{
  outline: 2px solid var(--ambre);
  outline-offset: 2px;
}
.billet.choisi{
  background: rgba(244,169,60,0.12);
  border-color: var(--ambre);
}
.billet.non-choisi{
  opacity: 0.55;
}
.billet .encoche{
  position:absolute;
  width:16px; height:16px;
  background: var(--nuit-profond);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.billet .encoche.gauche{ left:-9px; }
.billet .encoche.droite{ right:-9px; }

.film-genre{
  display:block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambre);
  font-weight: 700;
  margin: 0 0 8px;
}
.film-titre{
  display:block;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--creme);
}
.film-desc{
  display:block;
  font-size: 13.5px;
  color: var(--lavande);
  margin: 0 0 16px;
  line-height:1.45;
  min-height: 38px;
}

.barre-fond{
  display:block;
  height: 8px;
  background: rgba(244,236,218,0.08);
  border-radius: 999px;
  overflow:hidden;
  margin-bottom: 8px;
}
.barre-remplie{
  display:block;
  height:100%;
  background: linear-gradient(90deg, var(--ambre), var(--ambre-clair));
  border-radius: 999px;
  transition: width 0.5s ease;
  width:0%;
}
.resultat-ligne{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-size: 13px;
  color: var(--lavande);
}
.resultat-ligne strong{ color: var(--creme); font-size:14px; }

.marque-selection{
  display:block;
  margin-top: 14px;
  text-align:center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ambre);
  padding: 9px;
  border: 1.5px solid var(--ambre);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.billet.selectionne .marque-selection{ opacity: 1; }
.billet.choisi .marque-selection{
  opacity: 1;
  border-color: var(--vert);
  color: var(--vert);
}
.billet.choisi .marque-selection::after{ content: " \2713"; }

.zone-validation{
  display:flex;
  justify-content:center;
  margin: 26px 0 0;
}
.bouton-valider{
  background: var(--ambre);
  border: 1.5px solid var(--ambre);
  color: var(--nuit-profond);
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: 8px;
  cursor:pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.bouton-valider:hover:not(:disabled){ background: var(--ambre-clair); border-color: var(--ambre-clair); }
.bouton-valider:disabled{
  background: transparent;
  color: var(--lavande);
  border-color: rgba(244,236,218,0.2);
  cursor:default;
}

.statut-vote{
  text-align:center;
  margin: 30px auto 0;
  font-size: 14px;
  color: var(--lavande);
  max-width: 480px;
}
.statut-vote strong{ color: var(--ambre); }

.compteur-total{
  text-align:center;
  color: var(--lavande);
  font-size: 13px;
  margin-top: 6px;
}

/* ===== Pratique ===== */
.pratique{
  max-width: 860px;
  margin: 60px auto 0;
  padding: 0 20px 60px;
}
.pratique-grille{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px;
}
.pratique-carte{
  background: var(--nuit-carte);
  border: 1px solid rgba(244,236,218,0.08);
  border-radius: 12px;
  padding: 18px;
}
.pratique-carte .titre{
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform:uppercase;
  color: var(--ambre);
  font-weight:700;
  margin:0 0 6px;
}
.pratique-carte p{
  margin:0;
  font-size: 14.5px;
  color: var(--creme);
  line-height:1.5;
}

footer{
  text-align:center;
  padding: 30px 20px 50px;
  color: var(--lavande);
  font-size: 13px;
  border-top: 1px solid rgba(244,236,218,0.06);
}

@media (prefers-reduced-motion: reduce){
  .ampoule{ animation:none; opacity:0.85; }
}

@media (max-width: 640px){
  .hero{ padding: 36px 16px 32px; }
  .infos-billet{
    display:grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 100%;
  }
  .infos-billet .champ{
    border-right: none;
    border-bottom: 2px dashed rgba(11,19,48,0.2);
    padding: 14px 16px;
  }
  .infos-billet .champ:nth-child(2n){
    border-left: 2px dashed rgba(11,19,48,0.2);
  }
  .infos-billet .champ:nth-last-child(-n+2){
    border-bottom: none;
  }
  .section{ padding: 40px 16px 20px; }
  .section h2{ font-size: 24px; }
  .pratique{ margin-top: 44px; padding: 0 16px 44px; }
  .grille-films{ grid-template-columns: 1fr; }
}

@media (max-width: 380px){
  .infos-billet{ grid-template-columns: 1fr; }
  .infos-billet .champ{
    border-left: none !important;
    border-bottom: 2px dashed rgba(11,19,48,0.2);
  }
  .infos-billet .champ:last-child{ border-bottom:none; }
}

/* ===== Thème coucher de soleil (surcharge) ===== */
:root{--nuit:#7b2445;--nuit-profond:#40172e;--nuit-carte:#fff6e7;--ambre:#ef7c38;--ambre-clair:#ffd28a;--creme:#fff8ed;--lavande:#ffe0bf;--vert:#4c8264}
body{font-family:Georgia,serif;background:radial-gradient(circle at 50% 0,#ffcb7a 0,#df6b4a 35%,#66203c 75%)}
h1,h2,.marquee{font-family:Georgia,serif;letter-spacing:.03em}
.hero{background:linear-gradient(180deg,rgba(255,195,105,.32),rgba(78,20,47,.86));border-bottom-color:#ffd28a55}
.eyebrow{color:#ffe19c}
.film-genre,.pratique-carte .titre{color:#a8460a}
.lieu-hero,.sous-titre,.section-desc,.statut-vote,.compteur-total{color:#ffe2c3}
.infos-billet{border-radius:2px;background:#fff2da;box-shadow:12px 12px 0 #6b2541}
.section{max-width:960px}
.grille-films{grid-template-columns:repeat(2,minmax(230px,330px));justify-content:center}
.billet{background:#fff8ed;border:2px solid #ffca8b;color:#54223b;border-radius:2px;box-shadow:7px 7px 0 #b64e4b}
.billet:hover{border-color:#7b2445}
.film-titre{color:#7b2445}
.film-desc,.resultat-ligne{color:#935b62}
.barre-fond{background:#f3d6be}
.pratique-carte{background:#fff2de;border-color:#ffc986}
.pratique-carte p{color:#54223b}
.bouton-valider{border-radius:2px;box-shadow:4px 4px 0 #702345}
.guirlande{background:#40172e}
footer{color:#ffe0bf}
body{background:linear-gradient(rgba(64,16,43,.62),rgba(64,16,43,.82)),url('/static/coucher-soleil-cinema.png') center/cover fixed}
.hero{min-height:510px;display:flex;flex-direction:column;justify-content:center;isolation:isolate;background:linear-gradient(180deg,rgba(39,10,34,.06),rgba(64,16,43,.2));position:relative}
.hero::before,.hero::after{content:"\2726";position:absolute;z-index:-1;color:#ffe5a7;font-size:clamp(2rem,5vw,4rem);text-shadow:0 0 18px #ffbd62}
.hero::before{left:9%;top:16%}
.hero::after{right:11%;top:28%;font-size:2rem}
.infos-billet{display:grid;grid-template-columns:repeat(4,1fr);margin:10px auto 0}
.infos-billet .champ{text-align:center;padding:14px 12px}
.infos-billet .label{font-family:Arial,sans-serif}
.section-badge{display:block;width:max-content;max-width:100%;margin:0 auto 18px;padding:7px 14px;border:1px solid #ffd28a;border-radius:99px;color:#ffd28a;font:700 11px Arial,sans-serif;letter-spacing:.15em;text-align:center}
.pratique-grille{grid-template-columns:repeat(4,1fr)}
.pratique-carte{position:relative;overflow:hidden}
.pratique-carte::after{content:"\2726";position:absolute;right:12px;bottom:7px;color:#ef7c38;font-size:2rem;opacity:.45}
.section,.pratique{background:rgba(64,16,43,.12)}

@media(max-width:640px){
  .hero{min-height:460px}
  .grille-films{grid-template-columns:1fr}
  .infos-billet{grid-template-columns:1fr 1fr}
  .pratique-grille{grid-template-columns:1fr 1fr}
  .lang-switch{ top: 10px; right: 12px; }
}

.log-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: #fff2de;
  border: 1px solid #ffc986;
  border-radius: 8px;
  overflow: hidden;
}
.log-table th, .log-table td{
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #ffc986;
  color: #54223b;
}
.log-table th{
  color: #7b2445;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.log-table tr:last-child td{ border-bottom: none; }
.log-delete-btn{
  background: transparent;
  border: 1px solid #b64e4b;
  color: #b64e4b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.log-delete-btn:hover{ background: #b64e4b; color: #fff8ed; }