/* Concept : un cahier Seyès d'élève, envahi par la Garde royale.
   Fond quadrillé façon cahier, bandeau Union Jack, cartes posées comme des pages collées. */
:root {
  --navy: #0b1f4d;
  --red: #c8102e;
  --gold: #e8b923;
  --paper: #fbfcff;
  --ink: #1b2340;
  --seyes: #b9c9ee;
  --seyes-strong: #8fa6dc;
  --margin: #e8828f;
  --muted: #5a6385;
  --tea: #a8661c;
  --f-display: "Bowlby One SC", "Arial Black", Impact, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --f-hand: "Caveat", "Comic Sans MS", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--f-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 0 calc(max(16px, env(safe-area-inset-left, 0px)) + 18px), var(--margin) 0 calc(max(16px, env(safe-area-inset-left, 0px)) + 20px), transparent 0),
    linear-gradient(var(--seyes-strong) 1px, transparent 1px),
    linear-gradient(var(--seyes) 1px, transparent 1px),
    linear-gradient(90deg, var(--seyes) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 8px 8px, 32px 32px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Bandeau */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding-block: 40px 44px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: 10px solid var(--red);
}
.flag {
  position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 44%, #fff 44% 56%, transparent 56%),
    linear-gradient(transparent 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(33deg, transparent 47%, #fff 47% 53%, transparent 53%),
    linear-gradient(-33deg, transparent 47%, #fff 47% 53%, transparent 53%);
}
.hero-in { position: relative; max-width: 760px; margin: 0 auto; }
.kicker {
  margin: 0 0 6px; font: 700 1.6rem/1 var(--f-hand); color: var(--gold);
  transform: rotate(-3deg); transform-origin: left;
}
h1 {
  margin: 0; font: 400 clamp(2rem, 7vw, 4rem)/1.02 var(--f-display);
  text-wrap: balance; letter-spacing: .01em;
  text-shadow: 4px 4px 0 var(--red);
}
.intro { margin: 18px 0 0; font-size: 1.08rem; max-width: 60ch; }
.intro strong { color: var(--gold); }
.how {
  margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s;
  display: grid; gap: 6px; font-size: .95rem; color: #d7def4;
}
.how li { counter-increment: s; display: flex; gap: 10px; align-items: baseline; }
.how li::before {
  content: counter(s); flex: none; width: 1.6em; height: 1.6em; border-radius: 50%;
  display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 800; font-size: .85em;
}
.guard {
  position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: -6px;
  width: 120px; height: auto; animation: march 2.6s ease-in-out infinite;
}
@keyframes march { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 860px) { .guard { width: 74px; opacity: .9; } .hero-in { padding-right: 70px; } }
@media (max-width: 420px) { .guard { display: none; } .hero-in { padding-right: 0; } }

/* ---------- Classement */
.board {
  max-width: 1800px; margin: 28px auto 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.board-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.board h2 { margin: 0; font: 400 1.5rem/1.1 var(--f-display); color: var(--navy); }
.voters { margin: 0; font: 700 1.35rem/1 var(--f-hand); color: var(--red); }
.podium { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.step {
  background: #fff; border: 3px solid var(--navy); border-radius: 10px;
  padding: 10px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center;
  box-shadow: 5px 5px 0 var(--navy); text-align: left; color: inherit;
}
.step img { width: 56px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid var(--seyes); }
.step .rank { font: 400 1.05rem/1 var(--f-display); color: var(--navy); }
.step .pts { font-weight: 800; color: var(--muted); font-size: .92rem; }
.step.first { background: var(--gold); box-shadow: 5px 5px 0 var(--red); }
.step.first .rank { color: var(--ink); }
.step.first .pts { color: var(--ink); }
.step .crown { width: 30px; height: 22px; fill: var(--red); vertical-align: -3px; margin-right: 4px; }
.podium .empty { grid-column: 1 / -1; margin: 0; font: 700 1.4rem/1.2 var(--f-hand); color: var(--muted); }
.champion {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: center;
  background: var(--navy); color: #fff; border-radius: 14px; padding: 18px; border: 4px solid var(--gold);
}
.champion img { border-radius: 8px; border: 4px solid #fff; transform: rotate(-2deg); }
.champion .crown { width: 64px; height: 48px; fill: var(--gold); }
.champion h3 { margin: 6px 0; font: 400 clamp(1.4rem, 4vw, 2.3rem)/1.05 var(--f-display); color: var(--gold); }
.champion p { margin: 0; }
@media (max-width: 640px) {
  .podium { grid-template-columns: minmax(0, 1fr); }
  .champion { grid-template-columns: minmax(0, 1fr); }
  .champion img { max-width: 220px; }
}

/* ---------- Grille des pages de garde */
main {
  max-width: 1800px; margin: 32px auto 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 30px 24px; }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
.card {
  position: relative; background: #fff; border-radius: 6px; padding: 10px 10px 12px;
  box-shadow: 0 1px 0 var(--seyes), 0 10px 22px -12px rgba(11, 31, 77, .45);
  transform: rotate(var(--tilt, 0deg)); transition: transform .2s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.card::before { /* bout de scotch */
  content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; translate: -50% 0;
  background: rgba(232, 185, 35, .55); transform: rotate(-4deg); border-radius: 2px;
}
.card:hover { transform: rotate(0deg) translateY(-3px); }
.card.rated { box-shadow: 0 0 0 3px var(--navy), 0 10px 22px -12px rgba(11, 31, 77, .45); }
.thumb { border: 0; padding: 0; background: none; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.thumb:hover img { transform: scale(1.04); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-no { font: 400 1.05rem/1 var(--f-display); color: var(--navy); }
.card-pts { font-size: .85rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Tasses */
.cups { display: flex; gap: 2px; justify-content: space-between; }
.cup {
  flex: 1 1 0; min-width: 0; border: 0; background: none; padding: 4px 1px; border-radius: 6px;
  display: grid; place-items: center;
}
.cup svg {
  width: 100%; max-width: 46px; aspect-ratio: 52 / 44; height: auto; transition: transform .15s ease;
  --line: var(--seyes-strong); --gold-c: var(--seyes-strong);
}
.cup.on svg {
  --line: var(--navy); --porcelain: #fff; --gold-c: var(--gold); --tea-c: var(--tea);
  --deco: #2a4fa8; --steam-c: var(--muted);
}
.cup:hover svg { transform: translateY(-2px) rotate(-6deg); }
.cups.closed .cup { cursor: default; }
.cups.closed .cup:hover svg { transform: none; }

/* ---------- Barre de vote */
.ballot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  background: var(--navy); border-top: 5px solid var(--red);
  padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.progress { color: #fff; font: 700 1.3rem/1 var(--f-hand); font-variant-numeric: tabular-nums; }
.ballot button {
  border: 0; border-radius: 8px; padding: 11px 18px; background: var(--red); color: #fff;
  font-weight: 800; box-shadow: 3px 3px 0 var(--gold);
}
.ballot button:disabled { opacity: .6; cursor: default; }
.ballot.done .progress { display: none; }
.ballot.done button { background: var(--gold); color: var(--ink); box-shadow: 3px 3px 0 var(--red); opacity: 1; }
.ballot button.confirm { background: var(--gold); color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.toast {
  position: fixed; left: 50%; translate: -50% 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  margin: 0; max-width: calc(100% - 32px); background: var(--gold); color: var(--ink);
  font-weight: 800; padding: 10px 16px; border-radius: 10px; box-shadow: 3px 3px 0 var(--navy);
}
.toast.err { background: var(--red); color: #fff; }

/* ---------- Grande image : plein écran sur PC comme sur téléphone */
.lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #050b1d; color: #fff; overflow: hidden;
}
.lightbox::backdrop { background: #050b1d; }
.lightbox[open] { display: flex; flex-direction: column; }
.lb-top {
  display: flex; align-items: center; gap: 12px; background: var(--navy); border-bottom: 4px solid var(--red);
  padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.lb-title { font: 400 1.2rem/1 var(--f-display); }
.lb-hint { flex: 1; min-width: 0; font: 700 1.15rem/1 var(--f-hand); color: var(--gold); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-close { flex: none; border: 0; background: var(--red); color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; }
.lb-stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
.lb-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transform-origin: center; cursor: zoom-in; will-change: transform; user-select: none; -webkit-user-drag: none;
}
.lb-stage.zoomed img { cursor: grab; }
.lb-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 50px; height: 50px; border-radius: 50%; border: 0;
  display: grid; place-items: center; padding: 0 0 4px;
  background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 2rem; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.lb-nav.prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.lb-nav.next { right: max(12px, env(safe-area-inset-right, 0px)); }
.lightbox.is-zoomed .lb-nav { display: none; }
.lb-cups {
  background: var(--navy); border-top: 4px solid var(--red);
  padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.lb-cups .cups { max-width: 380px; margin: 0 auto; }
.lb-cups .cup svg { --line: #6f80b3; --gold-c: #6f80b3; }
.lb-cups .cup.on svg { --line: #fff; --steam-c: #c9d3f0; }
@media (max-width: 480px) {
  .ballot { gap: 10px; }
  .progress { font-size: 1.15rem; white-space: nowrap; }
  .ballot button { padding: 10px 14px; white-space: nowrap; }
  .lb-nav { width: 42px; height: 42px; font-size: 1.7rem; }
}

.foot { text-align: center; margin: 48px 0 0; font: 700 1.25rem/1 var(--f-hand); color: var(--muted); padding-inline: 16px; }

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

@media (min-width: 1500px) { .grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.card.rated .card-pts { color: var(--red); }
.toast.in-lb { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }