/* ==========================================================================
   LE BOULIER DE BINGO — style aquarelle
   Palette chaleureuse :
     papier       #f6eedd
     eau chaude   #f3ddc0
     coquelicot   #d96a4b
     framboise    #c2506d
     encre brune  #4a382c
   ========================================================================== */

:root {
  --papier:       #f6eedd;
  --papier-ombre: #eadfc8;
  --coquelicot:   #d96a4b;
  --framboise:    #c2506d;
  --soleil:       #e8a13c;
  --encre:        #4a382c;
  --encre-douce:  rgba(74, 56, 44, .55);

  --duree-flou: .55s;

  /* Curseur "langue de cartoon" (zone de déplacement des stickers) */
  --curseur-langue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M8 6 Q17 2 26 6' fill='none' stroke='%234a382c' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M11 6 h12 v4 q0 2 -1.5 3.5 V24 a4.5 4.5 0 0 1 -9 0 V13.5 Q11 12 11 10 z' fill='%23f2758b' stroke='%237a2436' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M17 12 v9' stroke='%23c9526b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 17 6, grab;

  /* Langue "qui tire" pendant le déplacement */
  --curseur-langue-tire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='rotate(-14 17 17)'%3E%3Cpath d='M8 7 Q17 3 26 7' fill='none' stroke='%234a382c' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M11 7 h12 v3.5 q0 2 -1.5 3.5 V27 a4.5 4.5 0 0 1 -9 0 V14 Q11 13 11 10.5 z' fill='%23ef5f7a' stroke='%237a2436' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M17 13 v11' stroke='%23b8455e' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 17 7, grabbing;

  /* Curseur "goutte de peinture" (zone de clic du boulier) */
  --curseur-goutte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15 3 C19 9 24 13 24 18 a9 9 0 1 1 -18 0 C6 13 11 9 15 3 z' fill='%23d96a4b' stroke='%237a3a22' stroke-width='2.2' stroke-linejoin='round'/%3E%3Ccircle cx='12.5' cy='18' r='2.4' fill='%23f6eedd'/%3E%3C/svg%3E") 15 15, pointer;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--encre);
  background: var(--papier);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

body.deplacement-en-cours { cursor: var(--curseur-langue-tire); }

/* ==========================================================================
   1. LA FEUILLE DE PAPIER — grain d'aquarelle + lavis chauds
   ========================================================================== */

.papier {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, #fbf5e8 0%, var(--papier) 55%, var(--papier-ombre) 100%);
}

/* Grain granulé du papier (bruit fractal SVG, deux couches) */
.papier::before,
.papier::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.papier::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: .16;
}

/* Fibres plus larges, comme un papier torchon */
.papier::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .02' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 420px 420px;
  mix-blend-mode: overlay;
  opacity: .22;
}

/* Lavis : grandes taches d'aquarelle diluée qui respirent doucement */
.tache {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  animation: respiration 14s ease-in-out infinite alternate;
}

.tache-1 { width: 55vmax; height: 40vmax; left: -12vmax; top: -10vmax;  background: var(--soleil); }
.tache-2 { width: 48vmax; height: 44vmax; right: -14vmax; bottom: -16vmax; background: var(--coquelicot); animation-delay: -5s; }
.tache-3 { width: 34vmax; height: 30vmax; left: 30vw; bottom: -14vmax; background: var(--framboise); opacity: .18; animation-delay: -9s; }

@keyframes respiration {
  from { transform: scale(1)    translateY(0); }
  to   { transform: scale(1.08) translateY(-2vmax); }
}

/* ==========================================================================
   2. LES STICKERS — découpe blanche, décollage, ombres, dépôt
   ========================================================================== */

.toile {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.sticker {
  position: absolute;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: var(--curseur-langue);
  will-change: transform, filter;
  transition: filter var(--duree-flou) ease;
}

.sticker img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  /* Liseré blanc découpé au cutter + ombre posée sur le papier */
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 4px 5px rgba(74, 56, 44, .28));
  transition: filter .25s ease, transform .25s ease;
}

.sticker-logo    { width: clamp(84px, 13vw, 150px); }
.sticker-boulier { width: clamp(180px, 32vw, 380px); }

/* Décollage : le sticker se soulève, pivote un peu, l'ombre s'élargit */
.sticker.decolle { z-index: 40; }

.sticker.decolle img {
  transform: scale(1.07) rotate(-2.5deg);
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 20px 22px rgba(74, 56, 44, .38));
}

/* Dépôt : petite retombée élastique quand on recolle le sticker */
.sticker.recolle img { animation: recollage .42s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes recollage {
  0%   { transform: scale(1.07) rotate(-2.5deg); }
  55%  { transform: scale(.97)  rotate(.8deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Frémissement à l'effleurement, comme un coin qui se soulève */
@media (hover: hover) {
  .sticker:not(.decolle):hover img { transform: rotate(-1deg) translateY(-2px); }
}

/* Hitbox de clic au cœur du boulier (≈ moitié centrale) */
.hitbox-clic {
  position: absolute;
  left: 26%;
  top: 26%;
  width: 48%;
  height: 48%;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: var(--curseur-goutte);
}

.hitbox-clic:focus-visible {
  outline: 3px dashed var(--coquelicot);
  outline-offset: 6px;
}

/* ==========================================================================
   3. LE VOILE — flou et assombrissement progressifs (étapes 0 → 5)
   ========================================================================== */

.voile {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: rgba(46, 30, 22, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    background var(--duree-flou) ease,
    backdrop-filter var(--duree-flou) ease,
    -webkit-backdrop-filter var(--duree-flou) ease;
}

.voile[data-etape="1"] { background: rgba(46,30,22,.22); backdrop-filter: blur(3px);  -webkit-backdrop-filter: blur(3px); }
.voile[data-etape="2"] { background: rgba(46,30,22,.34); backdrop-filter: blur(6px);  -webkit-backdrop-filter: blur(6px); }
.voile[data-etape="3"] { background: rgba(46,30,22,.46); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.voile[data-etape="4"] { background: rgba(46,30,22,.58); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.voile[data-etape="5"] { background: rgba(46,30,22,.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }

/* ==========================================================================
   4. LA SCÈNE — boules d'état, boule finale, fenêtre de texte
   ========================================================================== */

.scene {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(14px, 3vh, 28px);
  padding: 16px;
}

.scene[hidden] { display: none; }

.sticker-etape {
  position: static;
  background: none;
  border: 0;
  padding: 0;
  width: clamp(140px, 30vmin, 300px);
  cursor: var(--curseur-goutte);
  animation: pose-sticker .5s cubic-bezier(.34, 1.56, .64, 1);
}

.sticker-etape:focus-visible { outline: 3px dashed var(--papier); outline-offset: 8px; border-radius: 50%; }

/* Chaque boule d'état grossit un peu plus que la précédente */
.sticker-etape[data-taille="2"] { width: clamp(160px, 34vmin, 340px); }
.sticker-etape[data-taille="3"] { width: clamp(185px, 39vmin, 390px); }
.sticker-etape[data-taille="4"] { width: clamp(215px, 45vmin, 450px); }

.sticker-finale {
  position: static;
  width: clamp(200px, 42vmin, 430px);
  cursor: default;
  animation: pose-sticker .55s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pose-sticker {
  0%   { transform: scale(.55) rotate(-9deg); opacity: 0; }
  70%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0); }
}

.finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vh, 26px);
  width: 100%;
}

.finale[hidden] { display: none; }

/* Fenêtre de texte façon dialogue de jeu, repeinte à l'aquarelle */
.boite-texte {
  position: relative;
  width: min(620px, 94vw);
  min-height: 96px;
  padding: 18px 44px 18px 22px;
  background:
    linear-gradient(rgba(255,255,255,0), rgba(233, 214, 183, .5)),
    #fdf8ec;
  border: 3px solid var(--encre);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 3px #fdf8ec,
    inset 0 0 0 5px var(--coquelicot),
    0 14px 30px rgba(20, 12, 8, .45);
  animation: monte-boite .45s cubic-bezier(.34, 1.4, .64, 1);
}

@keyframes monte-boite {
  from { transform: translateY(26px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.boite-texte p {
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.5;
}

.boite-texte .cadeau {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.35em;
  color: var(--framboise);
  white-space: nowrap;
}

/* Curseur d'écriture pendant l'effet machine à écrire */
.boite-texte.ecrit p::after {
  content: "❙";
  color: var(--coquelicot);
  animation: clignote .8s steps(2) infinite;
}

.fleche-suite {
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-size: 1.5rem;
  color: var(--coquelicot);
  opacity: 0;
}

.boite-texte.fini .fleche-suite {
  opacity: 1;
  animation: rebond-fleche 1s ease-in-out infinite;
}

@keyframes clignote      { 50% { opacity: 0; } }
@keyframes rebond-fleche { 50% { transform: translateY(5px); } }

/* ==========================================================================
   5. DIVERS — placeholders, noscript, accessibilité, mobile
   ========================================================================== */

/* Image manquante dans assets/import : pastille aquarelle avec le nom du fichier */
img.absente {
  min-height: 90px;
  background:
    radial-gradient(circle at 35% 30%, #f3ddc0, #e9c39a 70%);
  border-radius: 22% 78% 61% 39% / 45% 30% 70% 55%;
  border: 2px dashed var(--encre-douce);
}

.noscript {
  position: fixed;
  inset: auto 0 20px 0;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 600px) {
  .boite-texte { padding: 14px 36px 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}