/* =============================================================================
   DATE DIFF — styles
   Ambiance cosy : sable, abricot, terracotta. Quelques clins d'œil à Valorant
   (réticule, dash du bouton NON, petits losanges), rien de plus.
   Mobile d'abord. Les couleurs sont surchargées par config.js au chargement.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ease-dash: cubic-bezier(.15, 0, .85, 1);
  --bg: #F5EFE6;
  --panel: #FFFDF9;
  --accent: #C94F34;
  --ink: #2B2A33;
  --muted: #6E6A72;

  --accent-deep: #AD3F28;
  --blush: #F7E3D2;
  --rose: #EDBE9B;
  --peach: #F6D7AF;
  --on-accent: #FFFFFF;
  --line: rgba(43, 42, 51, .10);
  --line-2: rgba(43, 42, 51, .18);
  --accent-08: rgba(201, 79, 52, .08);
  --accent-16: rgba(201, 79, 52, .16);
  --accent-35: rgba(201, 79, 52, .35);
  --accent-60: rgba(201, 79, 52, .60);
  --shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 26px 48px -30px rgba(140, 92, 62, .55), 0 3px 10px -4px rgba(140, 92, 62, .16);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 24px -18px rgba(140, 92, 62, .5), 0 2px 6px -3px rgba(140, 92, 62, .14);

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2, .9, .1, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  --pad: clamp(15px, 4.4vw, 30px);
  --r-lg: 28px;
  --r-md: 20px;
  --maxw: 720px;

  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 6 2.9 8.3 10.5 10.5-7.600 2.200-9.800 4.500-10.500 10.500-.7-6-2.900-8.300-10.500-10.500 7.600-2.200 9.800-4.500 10.500-10.500z'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 1.500v4M12 18.500v4M1.500 12h4M18.500 12h4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Décor de fond ---------- */
.bg-glow,
.bg-float {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-glow {
  background:
    radial-gradient(62% 44% at 94% -6%, rgba(246, 200, 152, .55), transparent 70%),
    radial-gradient(58% 42% at -10% 104%, rgba(196, 212, 192, .55), transparent 72%),
    radial-gradient(44% 30% at 8% 4%, rgba(255, 228, 200, .8), transparent 70%),
    radial-gradient(40% 30% at 104% 84%, rgba(250, 222, 190, .6), transparent 70%);
}

/* Petits cœurs et étincelles qui flottent — et un seul réticule perdu au milieu */
.bg-float i {
  position: absolute;
  width: var(--s, 18px);
  height: var(--s, 18px);
  background: var(--c, var(--rose));
  opacity: var(--o, .5);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: floaty var(--t, 9s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}

.bg-float i:nth-child(1) { left: 7%; top: 13%; --s: 20px; --r: -14deg; --t: 9s; }
.bg-float i:nth-child(2) { right: 9%; top: 24%; --s: 13px; --r: 12deg; --c: var(--accent); --o: .28; --t: 11s; --dl: -3s; }
.bg-float i:nth-child(3) { left: 13%; bottom: 16%; --s: 15px; --r: 18deg; --c: var(--peach); --o: .9; --t: 10s; --dl: -5s; }
.bg-float i:nth-child(4) { right: 6%; bottom: 9%; --s: 24px; --r: -10deg; --t: 12s; --dl: -2s; }
.bg-float i:nth-child(5) { left: 46%; top: 5%; --s: 14px; --c: var(--peach); --o: .95; --t: 8s; --dl: -4s; -webkit-mask-image: var(--spark); mask-image: var(--spark); }
.bg-float i:nth-child(6) { right: 22%; bottom: 30%; --s: 12px; --c: #fff; --o: .9; --t: 7s; --dl: -1s; -webkit-mask-image: var(--spark); mask-image: var(--spark); }
.bg-float i:nth-child(7) { left: 4%; top: 52%; --s: 22px; --r: 8deg; --c: var(--accent); --o: .22; --t: 13s; --dl: -6s; -webkit-mask-image: var(--cross); mask-image: var(--cross); }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 8deg)); }
}

/* ---------- Stage & écrans ---------- */
.stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding:
    calc(var(--pad) + env(safe-area-inset-top))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}

.screen[hidden] { display: none; }
.screen:focus { outline: none; }

.screen.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.screen.is-leaving {
  opacity: 0;
  transform: translateY(-10px) scale(.995);
}

/* ---------- Briques réutilisables ---------- */
.ping {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .42em .95em .42em .8em;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.ping__dot {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: beat 1.5s ease-in-out infinite;
}

.ping--lost { color: var(--muted); }
.ping--lost .ping__dot { background: var(--muted); animation: none; }

@keyframes beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.28); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); }
  56% { transform: scale(1); }
}

.label {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1;
  color: var(--accent);
  transform: rotate(-2deg);
  transform-origin: 0 50%;
}

.label__tick {
  width: 13px;
  height: 13px;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}

.rule {
  display: block;
  width: 20px;
  height: 20px;
  margin: clamp(14px, 3vw, 20px) auto;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}

.rule--dim { background: var(--rose); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .55em 1em;
  background: rgba(255, 255, 255, .6);
  border: 1px dashed var(--accent-35);
  border-radius: 999px;
}

/* le petit losange : clin d'œil discret */
.tag__tick {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
}

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 clamp(22px, 6vw, 32px);
  font-weight: 800;
  font-size: clamp(1rem, 3.8vw, 1.08rem);
  letter-spacing: .01em;
  white-space: nowrap;
  border-radius: 999px;
  transition: transform .18s var(--ease), background-color .18s linear, box-shadow .18s linear;
  touch-action: manipulation;
}

.btn__txt { position: relative; z-index: 2; }

.btn--yes {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 28px -14px var(--accent-60);
  overflow: hidden;
}

.btn--yes::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity .2s linear;
}

.btn--yes:hover::after { opacity: 1; }
.btn--yes:hover { transform: translateY(-2px); }
.btn--yes:active { transform: translateY(0) scale(.98); }

.btn--no {
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2), 0 10px 20px -16px rgba(140, 92, 62, .6);
}

.btn--block {
  width: 100%;
  max-width: 420px;
}

/* ---------- 1 · INTRO ---------- */
.screen--intro { justify-content: center; align-items: center; }

.intro {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}

.intro__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 7.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: clamp(16px, 4vw, 22px) 0 .35em;
  text-wrap: balance;
}

.intro__sub {
  color: var(--muted);
  font-size: 1rem;
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(22px, 5vw, 32px) 0 16px;
}

.bar__track {
  position: relative;
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, .75);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--rose), var(--accent));
  border-radius: 999px;
}

.bar__pct {
  font-weight: 800;
  font-size: .78rem;
  color: var(--muted);
  min-width: 3em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.log {
  display: inline-grid;
  gap: 7px;
  text-align: left;
}

.log li {
  display: flex;
  align-items: center;
  gap: .65em;
  font-weight: 700;
  font-size: .88rem;
  color: var(--muted);
  opacity: .35;
  transition: opacity .25s linear, color .25s linear;
}

.log li i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--muted);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  transition: background-color .25s linear, transform .3s var(--ease-pop);
}

.log li.is-on { opacity: 1; color: var(--ink); }
.log li.is-on i { background: var(--accent); transform: scale(1.2); }

.intro__hint {
  margin-top: clamp(24px, 6vw, 36px);
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--muted);
  animation: blink 2.4s ease-in-out infinite;
}

@keyframes blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- Petit bandeau au-dessus des écrans ---------- */
.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto clamp(14px, 2.8vw, 22px);
  flex: 0 0 auto;
}

.hud__item {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  font-size: .8rem;
  color: var(--muted);
}

.hud__item--live {
  padding: .3em .85em .3em .7em;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.hud__dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: beat 1.5s ease-in-out infinite;
}

/* ---------- 2 · LA CARTE ---------- */
.screen--proposal { justify-content: flex-start; }

.card {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  flex: 0 0 auto;
  padding: clamp(18px, 4.6vw, 32px) clamp(18px, 4.8vw, 34px) clamp(16px, 4.2vw, 28px);
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}

/* Le sticker cœur posé de travers sur le coin de la carte */
.card__sticker {
  position: absolute;
  right: 22px;
  top: -13px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--blush);
  border: 3px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 8px 16px -10px rgba(140, 92, 62, .7);
  transform: rotate(12deg);
}

.card__sticker::before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: beat 1.5s ease-in-out infinite;
}

.card.is-leaving {
  opacity: 0;
  transform: translateY(-14px) scale(.97);
}

/* L'accroche — pièce maîtresse */
.hook {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 7.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: clamp(8px, 2vw, 14px) 0 clamp(10px, 2.8vw, 18px);
}

.hook__part { white-space: nowrap; }

.hook em {
  font-style: italic;
  color: var(--accent);
  text-decoration: underline wavy var(--accent-35);
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
}

/* Les sauts de ligne pilotés (voir config.js -> proposal.hook) */
.brk { display: block; height: 0; }

@media (min-width: 600px) {
  .brk--sm { display: none; }
  .hook { font-size: clamp(2rem, 5.2vw, 2.4rem); }
}

@media (min-width: 760px) {
  .brk--md { display: none; }
  .hook { font-size: 2.45rem; }
}

.transition {
  color: var(--muted);
  font-size: clamp(.98rem, 3.7vw, 1.08rem);
  max-width: 46ch;
  text-wrap: pretty;
}

.question {
  margin: clamp(12px, 3.2vw, 20px) 0 clamp(9px, 2.2vw, 14px);
  padding: clamp(9px, 2.6vw, 14px) clamp(14px, 3.6vw, 20px);
  background: linear-gradient(100deg, var(--blush), rgba(246, 215, 175, .45));
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 6.4vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.objective {
  font-weight: 700;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
  text-wrap: balance;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: clamp(10px, 2.6vw, 16px);
}

.stats li {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .32em .8em;
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--accent-08);
  border-radius: 999px;
}

.stats li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
  flex: 0 0 auto;
}

/* ---------- Zone de jeu ---------- */
.arena {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(10px, 2.6vw, 20px) auto 0;
  min-height: max(248px, 40dvh);
  flex: 1 1 auto;
  background: rgba(255, 255, 255, .4);
  border: 2px dashed var(--accent-35);
  border-radius: var(--r-lg);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}

.arena__label {
  position: absolute;
  left: 18px;
  top: 9px;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--muted);
  opacity: .8;
  pointer-events: none;
}

/* un mini réticule au centre de la zone */
.arena__cross {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  background: var(--accent);
  opacity: .16;
  -webkit-mask: var(--cross) center / contain no-repeat;
  mask: var(--cross) center / contain no-repeat;
}

.arena__field { position: absolute; inset: 32px 10px 60px; }

.arena__field .btn--yes {
  position: absolute;
  left: 50%;
  top: 29%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.arena__field .btn--yes::after { border-radius: inherit; }

/* halo qui respire derrière le OUI */
.arena__field .btn--yes::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--accent-35);
  animation: halo 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes halo {
  0% { box-shadow: 0 0 0 0 var(--accent-35); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

.arena__field .btn--yes:hover { transform: translate(-50%, calc(-50% - 2px)); }
.arena__field .btn--yes:active { transform: translate(-50%, -50%) scale(.98); }

.arena__field .btn--no {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 48px;
  font-size: clamp(.94rem, 3.5vw, 1rem);
}

.btn--no.is-dashing { transition: transform var(--dash, 900ms) var(--ease-dash); }

.btn--no.is-caught {
  box-shadow: inset 0 0 0 1.5px var(--accent-35);
  background: var(--blush);
}

/* Effets de dash */
.fx { position: absolute; inset: 0; pointer-events: none; }

.ghost {
  position: absolute;
  border: 1.5px dashed var(--accent-35);
  background: var(--accent-08);
  border-radius: 999px;
  animation: ghostOut var(--dash, 900ms) var(--ease-dash) forwards;
}

@keyframes ghostOut {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(.88); }
}

.streak {
  position: absolute;
  height: 3px;
  border-radius: 3px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-60), rgba(237, 190, 155, 0));
  animation: streakOut calc(var(--dash, 900ms) * .8) var(--ease-dash) forwards;
}

@keyframes streakOut {
  0% { opacity: .85; transform: rotate(var(--a)) scaleX(.15); }
  45% { opacity: .7; transform: rotate(var(--a)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--a)) scaleX(1); }
}

.mark {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: markOut calc(var(--dash, 900ms) * 1.05) var(--ease-dash) forwards;
}

@keyframes markOut {
  0% { opacity: .8; transform: scale(.5) translateY(0); }
  100% { opacity: 0; transform: scale(1.4) translateY(-16px); }
}

.arena.is-leaving {
  opacity: 0;
  transform: translateY(16px);
}

/* Message d'esquive — emplacement réservé à hauteur fixe, dans la zone */
.dodge-msg {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.22rem, 5.2vw, 1.42rem);
  line-height: 1.02;
  color: var(--ink);
}

.dodge-msg span {
  display: inline-block;
  animation: msgIn 320ms var(--ease-pop) both;
}

.dodge-msg--final span { color: var(--accent); }

@keyframes msgIn {
  0% { opacity: 0; transform: translateY(8px) rotate(-1.5deg) scale(.96); }
  100% { opacity: 1; transform: none; }
}

/* Emoji remis à l'échelle (enveloppés par script.js) : dessinés par le
   système, ils écrasent la typo dès qu'ils sont dans un grand titre. */
.emo { font-size: .95em; line-height: 1; letter-spacing: 0; vertical-align: -.06em; font-style: normal; }
.win__title .emo { font-size: .5em; vertical-align: .22em; }
.hook .emo, .h-title .emo, .question .emo { font-size: .7em; vertical-align: .06em; }

/* ---------- 3 · VICTOIRE / 5 · SORTIE ---------- */
.screen--victory, .screen--exit { justify-content: center; }

.win {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.win__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4rem, 21vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  margin: clamp(14px, 3vw, 20px) 0 0;
  color: var(--accent);
}

.screen--victory.is-active .win__title { animation: pop 620ms var(--ease-pop) 120ms both; }

@keyframes pop {
  0% { opacity: 0; transform: scale(.7) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}

.win__title--lost { color: var(--ink); font-size: clamp(2.4rem, 11vw, 3.6rem); letter-spacing: -.02em; }

.win__sub {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.6rem, 6.6vw, 2rem);
  line-height: 1.1;
  color: var(--ink);
  margin-top: .2em;
}

.win__line {
  font-size: clamp(1rem, 3.9vw, 1.12rem);
  color: var(--ink);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.win__line + .win__line { margin-top: .4em; }
.win__line--dim { color: var(--muted); }

.win .tag { margin: clamp(18px, 4vw, 26px) 0 clamp(20px, 4.5vw, 28px); }
.win .btn--block { display: flex; margin: 0 auto; }

.linkish {
  margin-top: clamp(22px, 5vw, 30px);
  padding: 10px 4px;
  font-weight: 800;
  font-size: .95rem;
  color: var(--accent);
  text-decoration: underline wavy var(--accent-35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
  transition: color .18s linear;
}

.linkish:hover { color: var(--accent-deep); }

/* ---------- 4 · CHOIX DU DATE ---------- */
.screen--pick { justify-content: flex-start; }

.h-title {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 8.2vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.h-sub {
  width: 100%;
  max-width: var(--maxw);
  margin: .45em auto 0;
  color: var(--muted);
  font-size: clamp(.98rem, 3.7vw, 1.08rem);
}

.picks {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(18px, 4vw, 26px) auto 0;
}

.pick {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  align-items: start;
  text-align: left;
  padding: 16px clamp(14px, 3.8vw, 20px);
  min-height: 56px;
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm), inset 0 0 0 1.5px transparent;
  transition: background-color .18s linear, box-shadow .18s linear, transform .18s var(--ease);
}

.pick:hover { transform: translateY(-2px); }

.pick__icon {
  grid-row: 1 / span 3;
  width: 46px;
  height: 46px;
  padding: 11px;
  color: var(--accent);
  background: var(--blush);
  border-radius: 50%;
  transition: color .18s linear, background-color .18s linear, transform .3s var(--ease-pop);
}

.pick__icon svg { width: 100%; height: 100%; display: block; }

.pick__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  padding-right: 4.6em;
}

.pick__desc {
  font-size: .95rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 2px;
  text-wrap: pretty;
}

.pick__detail {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 800;
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 9px;
}

.pick__detail::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
}

.pick.is-selected {
  background: linear-gradient(120deg, #FBF1E6, var(--panel) 70%);
  box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--accent);
}

.pick.is-selected .pick__icon { color: var(--on-accent); background: var(--accent); transform: rotate(-8deg) scale(1.06); }

.pick__check {
  position: absolute;
  right: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .22em .7em;
  font-weight: 800;
  font-size: .68rem;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s linear, transform .3s var(--ease-pop);
}

.pick__check::before {
  content: '';
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}

.pick.is-selected .pick__check { opacity: 1; transform: none; }

/* Sous-choix : type de nourriture (n'apparaît que pour les cartes qui le
   prévoient dans config.js, ex. le resto)                                    */
.foodpicker {
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(14px, 3vw, 18px) auto 0;
  animation: foodIn 260ms var(--ease-out) both;
}

.foodpicker[hidden] { display: none; }

@keyframes foodIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

.foodpicker__label {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 9px;
}

.foodpicker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.foodchip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 800;
  font-size: .92rem;
  color: var(--ink);
  background: var(--panel);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background-color .18s linear, box-shadow .18s linear, transform .18s var(--ease), color .18s linear;
}

.foodchip:hover { box-shadow: inset 0 0 0 1.5px var(--accent-35); }
.foodchip:active { transform: scale(.97); }

.foodchip.is-selected {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 18px -12px var(--accent-60);
}

/* Étape facultative : pseudos (n'apparaît que pour les cartes qui prévoient
   des `fields` dans config.js, ex. la duoQ)                                   */
.handles {
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(14px, 3vw, 18px) auto 0;
  animation: foodIn 260ms var(--ease-out) both;
}

.handles[hidden] { display: none; }

.handles__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.handle { display: block; min-width: 0; }

.handle__label {
  display: block;
  margin: 0 0 5px 14px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.handle__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;          /* 16px mini : pas de zoom automatique sur iOS */
  color: var(--ink);
  background: var(--panel);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  outline: none;
  transition: box-shadow .18s linear;
}

.handle__input::placeholder { color: var(--muted); opacity: .55; font-weight: 600; }
.handle__input:hover { box-shadow: inset 0 0 0 1.5px var(--accent-35); }
.handle__input:focus { box-shadow: inset 0 0 0 2px var(--accent); }

.handles__note {
  margin-top: 8px;
  font-size: .82rem;
  color: var(--muted);
}

.handles__note:empty { display: none; }

.pick-msg {
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(12px, 3vw, 16px) auto;
  min-height: 3.1em;
  font-size: clamp(.96rem, 3.6vw, 1.04rem);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
}

.pick-msg span { animation: msgIn 320ms var(--ease-pop) both; }
.pick-msg--warn span { color: var(--accent); }

.screen--pick .btn--block {
  flex: 0 0 auto;
  width: min(420px, 100%);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Fenêtre « message copié » ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding:
    calc(var(--pad) + env(safe-area-inset-top))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));
  overflow-y: auto;
  background: rgba(43, 42, 51, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .24s linear;
}

.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 40px clamp(18px, 5vw, 28px) clamp(18px, 5vw, 26px);
  text-align: center;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 70px -30px rgba(43, 42, 51, .6);
  transform: translateY(14px) scale(.94);
  transition: transform .42s var(--ease-pop);
}

.modal.is-open .modal__card { transform: none; }

.modal__icon {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  display: grid;
  place-items: center;
  background: var(--blush);
  border: 4px solid var(--panel);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.modal__icon::before {
  content: '';
  width: 24px;
  height: 24px;
  background: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: beat 1.5s ease-in-out infinite;
}

.modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 6.6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.modal__title .emo { font-size: .7em; vertical-align: .06em; }

.copy-ok {
  margin-top: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--muted);
  text-wrap: balance;
}

.copy-ok:empty { display: none; }

.modal__quote {
  margin-top: 16px;
  padding: 13px 16px;
  text-align: left;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--ink);
  background: linear-gradient(100deg, var(--blush), rgba(246, 215, 175, .45));
  border-radius: 18px 18px 18px 5px;
}

.modal__quote[hidden] { display: none; }

.modal .btn--block { display: flex; max-width: none; margin-top: 18px; }

.copybox {
  width: 100%;
  margin: 14px auto 0;
  text-align: left;
}

.copybox[hidden] { display: none; }

.copybox__label {
  display: block;
  font-weight: 800;
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: 7px;
}

.copybox__area {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  border: 1.5px dashed var(--accent-35);
  border-radius: 16px;
  resize: none;
}

.copybox__area:focus-visible { outline: none; border-style: solid; border-color: var(--accent); }

.foot {
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(20px, 5vw, 30px) auto 0;
  font-size: .78rem;
  color: var(--muted);
  opacity: .85;
  text-wrap: balance;
}

/* ---------- Réticule, flash, particules ---------- */
.reticle { display: none; }

@media (pointer: fine) {
  .reticle {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transition: opacity .35s linear;
    will-change: transform;
  }

  .reticle.is-on { opacity: 1; }

  .reticle__ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--accent-35);
    border-radius: 50%;
  }

  .reticle__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    background: var(--accent);
    border-radius: 50%;
  }
}

.flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  opacity: 0;
  background: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .95), rgba(247, 227, 210, .7) 42%, transparent 70%);
}

.flash.is-on { animation: flashOut 380ms ease-out 1; }

@keyframes flashOut {
  0% { opacity: 0; }
  18% { opacity: .9; }
  100% { opacity: 0; }
}

.burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: ringOut 520ms var(--ease-out) forwards;
}

@keyframes ringOut {
  0% { opacity: .9; transform: translate(var(--x), var(--y)) scale(.3); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(3.2); }
}

/* confettis : des cœurs, et quelques étincelles */
.p {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 14px);
  height: var(--w, 14px);
  margin: calc(var(--w, 14px) / -2) 0 0 calc(var(--w, 14px) / -2);
  background: var(--c, var(--accent));
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: pOut var(--d, 900ms) var(--ease-out) forwards;
}

.p--spark { -webkit-mask-image: var(--spark); mask-image: var(--spark); }

@keyframes pOut {
  0% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(0deg) scale(.4); }
  25% { opacity: 1; }
  60% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--tx)), calc(var(--y) + var(--ty))) rotate(var(--r)) scale(1); }
}

/* ---------- noscript ---------- */
.noscript {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 18vh auto 0;
  padding: 24px;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.noscript p + p { margin-top: .8em; color: var(--muted); }

/* ---------- Grands écrans ---------- */
@media (min-width: 900px) {
  :root { --pad: 44px; }

  .arena { min-height: max(270px, 34vh); }
  .arena__field .btn--yes { top: 32%; }
  .win__title { font-size: clamp(6rem, 9vw, 7.5rem); }
  .screen--pick .picks { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
  .screen--pick .foot { margin-top: auto; padding-top: 34px; }
  .pick { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; gap: 0; padding: 22px; }
  .pick__detail { align-self: end; margin-top: 14px; }
  .pick__icon { grid-row: auto; margin-bottom: 14px; width: 50px; height: 50px; padding: 12px; }
  .pick__title { padding-right: 0; }
  .pick__desc { margin-top: 6px; }
  .pick__check { right: 16px; top: 16px; }
  /* nombre impair de cartes : la dernière prend toute la largeur */
  .pick:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Écrans courts ---------- */
@media (max-height: 740px) and (max-width: 560px) {
  :root { --pad: 14px; --r-lg: 22px; }

  .hud { margin-bottom: 12px; }
  .hud__item { font-size: .74rem; }
  .card { padding: 14px 16px 13px; }
  .card__sticker { width: 38px; height: 38px; top: -12px; right: 18px; }
  .card__sticker::before { width: 17px; height: 17px; }
  .label { font-size: 1.08rem; }
  .hook { font-size: clamp(1.45rem, 6.9vw, 1.9rem); margin: 6px 0 7px; }
  .transition { font-size: .9rem; line-height: 1.34; }
  .question { font-size: 1.32rem; margin: 9px 0 7px; padding: 8px 13px; border-radius: 15px; }
  .objective { font-size: .74rem; line-height: 1.4; }
  .stats { display: none; }
  /* pas moins de 256px : en dessous, le NON n'a plus de place libre sous le OUI */
  .arena { margin-top: 9px; min-height: max(256px, 38dvh); }
  .arena__field { inset: 28px 8px 52px; }
  .arena__label { top: 6px; font-size: .98rem; }
  .dodge-msg { height: 44px; bottom: 6px; font-size: 1.16rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .btn--no.is-dashing { transition: none !important; }
  .reticle { display: none !important; }
  .bg-float i { animation: none !important; }
  .arena__field .btn--yes::before { display: none; }
  .intro__hint { opacity: .8; }
}