/* La Tablée Acidulée — bordeaux et noir, néons violet et bleu, une pointe de vert acidulé. */
:root {
  --nuit: #14080c;
  --bordeaux: #4a0d1c;
  --bordeaux-clair: #7a1630;
  --carte: rgba(36, 12, 20, .78);
  --bord: rgba(255, 255, 255, .08);
  --texte: #f6e9ee;
  --doux: #c9a9b5;
  --violet: #b25cff;
  --bleu: #4fb3ff;
  --acide: #c6ff4a;
  --rose: #ff5fa8;
  --encre: #5b2d91;
  --titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --corps: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 70% at 50% -10%, var(--bordeaux-clair) 0%, var(--bordeaux) 35%, var(--nuit) 75%) fixed, var(--nuit);
  color: var(--texte); font: 16px/1.5 var(--corps);
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; cursor: pointer; }

/* Le ciel : de petites lueurs qui flottent (néons violet et bleu). */
.ciel { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.ciel i { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .55; animation: flotte linear infinite; }
@keyframes flotte { from { transform: translateY(105vh) } to { transform: translateY(-10vh) } }

/* En-tête */
.tete { display: flex; align-items: center; gap: 12px; padding: calc(18px + env(safe-area-inset-top)) 16px 8px; max-width: 760px; margin: 0 auto; }
.marque { flex: 1; min-width: 0; }
h1 { font: 600 30px/1.1 var(--titre); margin: 0; letter-spacing: .3px; }
h1 em {
  font-style: italic; background: linear-gradient(90deg, var(--acide), var(--rose) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tete p { margin: 2px 0 0; color: var(--doux); font-size: 14px; }
.rond { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bord); background: var(--carte); font-weight: 700; }

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; }
.section-titre { margin: 18px 0 2px; font: 600 24px/1.2 var(--titre); }
.section-sens { color: var(--doux); margin: 0 0 14px; font-size: 14px; }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; padding: 14px 16px; margin: 0 0 12px;
  backdrop-filter: blur(6px); animation: monte .35s ease both; }
@keyframes monte { from { opacity: 0; transform: translateY(8px) } }
.carte h3 { margin: 0 0 2px; font: 600 18px var(--titre); }
.carte .quand { color: var(--doux); font-size: 13px; margin-bottom: 8px; }

/* Barre d'avancement */
.avance { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 0 2px; }
.avance i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--rose), var(--acide)); transition: width .4s ease; }
.avance-texte { font-size: 13px; color: var(--doux); }

/* Lignes à cocher */
.ligne { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--bord); width: 100%;
  background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; }
.ligne:first-of-type { border-top: 0; }
.case { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--violet); display: grid; place-items: center;
  transition: background .2s, transform .2s; }
.ligne.faite .case { background: var(--acide); border-color: var(--acide); transform: rotate(-6deg); }
.ligne.faite .case::after { content: "✓"; color: var(--nuit); font-weight: 900; font-size: 15px; }
.ligne.faite .libelle { color: var(--doux); text-decoration: line-through; text-decoration-color: rgba(198,255,74,.6); }
.libelle { flex: 1; }
.qte { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--acide); white-space: nowrap; }
.etiquette { font-size: 12px; color: var(--doux); border: 1px solid var(--bord); border-radius: 99px; padding: 1px 8px; white-space: nowrap; }

/* Compteur de convives */
.compteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compteur b { font: 600 34px var(--titre); min-width: 2ch; text-align: center; }
.pas { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--bord); background: rgba(178,92,255,.18); font-size: 24px; }

/* La Veillée */
.decompte { text-align: center; padding: 18px 12px; }
.decompte b { display: block; font: 600 46px/1 var(--titre); color: var(--acide); text-shadow: 0 0 18px rgba(198,255,74,.35); }
.programme { list-style: none; margin: 0; padding: 0; }
.programme li { display: grid; grid-template-columns: 56px 28px 1fr; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--bord); }
.programme li:first-child { border-top: 0; }
.programme time { font-variant-numeric: tabular-nums; color: var(--bleu); font-weight: 700; }
.btn-orage { width: 100%; padding: 18px; border-radius: 18px; border: 0; font: 700 19px var(--corps); color: var(--nuit);
  background: linear-gradient(135deg, var(--acide), #fff6a8); box-shadow: 0 0 28px rgba(198,255,74,.35); }
.btn-orage:active { transform: scale(.98); }
.note { font-size: 13px; color: var(--doux); margin: 8px 2px 0; }
.bientot { border-style: dashed; text-align: center; color: var(--doux); }

/* Onglets du bas */
.onglets { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: rgba(20,8,12,.92); border-top: 1px solid var(--bord); backdrop-filter: blur(10px); z-index: 5; }
.onglets button { flex: 1; max-width: 140px; border: 0; background: none; padding: 6px 2px; border-radius: 14px; display: grid; justify-items: center; gap: 1px; }
.onglets .ico { font-size: 22px; line-height: 1.1; transition: transform .2s; }
.onglets .nom { font-size: 11.5px; font-weight: 600; }
.onglets .sens { font-size: 10px; color: var(--doux); }
.onglets button[aria-current="page"] { background: rgba(178,92,255,.2); }
.onglets button[aria-current="page"] .ico { transform: translateY(-2px) scale(1.12); }

/* L'éclair (écran blanc bref) */
.eclair { position: fixed; inset: 0; background: #f4f0ff; z-index: 50; opacity: 0; pointer-events: none; }

/* Fenêtres : à propos, tutoriel, estampille */
.voile { position: fixed; inset: 0; z-index: 40; background: rgba(10,4,7,.88); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(6px); }
.fenetre { background: #1f0a12; border: 1px solid var(--bord); border-radius: 22px; padding: 22px 18px; width: min(460px, 100%); text-align: center; }
.fenetre img { width: 150px; opacity: .9; }
.btn { border: 0; border-radius: 14px; padding: 12px 20px; font-weight: 700; background: var(--violet); color: #fff; }
.btn.discret { background: rgba(255,255,255,.08); }

.tampon { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--nuit); transition: opacity .35s; }
.tampon img { width: min(70vw, 300px); animation: tchac .4s cubic-bezier(.2,1.6,.4,1) both; filter: drop-shadow(0 0 0 transparent) brightness(1.6); }
@keyframes tchac { 0% { transform: scale(1.8) rotate(-12deg); opacity: 0 } 70% { opacity: 1 } 100% { transform: scale(1) rotate(0) } }

.tuto { position: fixed; inset: 0; z-index: 45; background: radial-gradient(100% 60% at 50% 0%, var(--bordeaux), var(--nuit)); display: flex; flex-direction: column; padding: 16px; }
.tuto-passer { align-self: flex-end; background: none; border: 0; color: var(--doux); padding: 8px; }
.tuto-scene { flex: 1; display: grid; place-items: center; font-size: 84px; min-height: 180px; }
.tuto-texte { text-align: center; max-width: 460px; margin: 0 auto; }
.tuto-texte h2 { font: 600 26px var(--titre); margin: 0 0 6px; }
.tuto-texte p { color: var(--doux); margin: 0; }
.tuto-pied { display: flex; justify-content: space-between; align-items: center; max-width: 460px; width: 100%; margin: 22px auto 8px; }
.tuto-points i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); margin-right: 6px; }
.tuto-points i.actif { background: var(--acide); width: 22px; border-radius: 99px; }
.tuto-estampille { width: 92px; opacity: .55; margin: 0 auto; display: block; filter: brightness(1.6); }
/* Les animations des pages du tutoriel */
.sc-bonbon { animation: dandine 1.6s ease-in-out infinite; }
@keyframes dandine { 50% { transform: rotate(14deg) scale(1.08) } }
.sc-coche { display: grid; gap: 10px; font-size: 18px; }
.sc-coche span { display: flex; gap: 10px; align-items: center; }
.sc-coche span i { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--violet); animation: coche 2.4s infinite; }
.sc-coche span:nth-child(2) i { animation-delay: .5s } .sc-coche span:nth-child(3) i { animation-delay: 1s }
@keyframes coche { 30%, 100% { background: var(--acide); border-color: var(--acide) } }
.sc-chiffres { font: 600 64px var(--titre); color: var(--acide); }
.sc-orage { animation: zeus 2.2s infinite; }
@keyframes zeus { 0%, 60%, 72%, 100% { filter: none; opacity: .7 } 64%, 76% { filter: drop-shadow(0 0 30px #fff) brightness(2); opacity: 1 } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 700px) { h1 { font-size: 36px; } }

.choix-hote { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.choix-hote .btn { flex: 1; padding: 10px 8px; font-size: 14px; }
.sc-cadenas { animation: cadenas 2.4s ease-in-out infinite; }
@keyframes cadenas { 0%, 40% { transform: rotate(0) } 45% { transform: rotate(-12deg) } 50% { transform: rotate(10deg) } 55% { transform: rotate(-6deg) } 60%, 100% { transform: rotate(0) } }