:root{
    --fond:#FFF7F9;
    --blush:#FFE3EC;
    --rose:#F45B8C;
    --rose-fonce:#D6407A;
    --prune:#57323F;
    --blanc:#FFFFFF;
  }
  *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  [hidden]{ display:none !important; }
  html,body{ height:100%; overflow:hidden; }
  body{
    font-family:"Baloo 2", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
    background:
      radial-gradient(circle at 15% 20%, #FFE9F0 0%, transparent 45%),
      radial-gradient(circle at 85% 80%, #FFEDF3 0%, transparent 45%),
      var(--fond);
    color:var(--prune);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    position:fixed; inset:0;
  }

  /* ---------- écrans ---------- */
  .ecran{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1.4rem; padding:1.5rem;
    opacity:0; pointer-events:none; transform:translateY(12px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .ecran.actif{ opacity:1; pointer-events:auto; transform:none; }

  h1{ font-size:clamp(1.6rem, 6vw, 2.4rem); font-weight:800; line-height:1.25; text-wrap:balance; }
  .sous{ font-size:1.05rem; color:var(--rose-fonce); font-weight:600; }

  /* ---------- mascotte ---------- */
  #mascotte{
    position:fixed; z-index:50; left:50%; bottom:4.5vh;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center;
    pointer-events:none;
    transition:bottom .4s ease, opacity .3s ease;
  }
  #bulle{
    position:relative;
    background:var(--blanc); color:var(--prune);
    border:2.5px solid var(--rose);
    border-radius:18px; padding:.65rem 1.15rem;
    font-size:1.1rem; font-weight:800;
    box-shadow:0 6px 22px rgba(214,64,122,.35);
    margin-bottom:.7rem; max-width:78vw;
    opacity:0; transform:scale(.7); transform-origin:bottom center;
    transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  }
  #bulle::after{
    content:""; position:absolute; bottom:-9px; left:50%;
    width:14px; height:14px; background:var(--blanc);
    border-right:2.5px solid var(--rose); border-bottom:2.5px solid var(--rose);
    transform:translateX(-50%) rotate(45deg);
  }
  #bulle.visible{ opacity:1; transform:scale(1); }
  #chien{ font-size:3.2rem; line-height:1; display:inline-block; position:relative; animation:rebond 1.6s ease-in-out infinite; }
  #chien.triste::after{
    content:"💧"; position:absolute; top:.4em; right:-.15em;
    font-size:.35em; animation:larme 1s ease-in infinite;
  }
  @keyframes larme{
    0%{ opacity:0; transform:translateY(0); }
    30%{ opacity:1; }
    100%{ opacity:0; transform:translateY(.8em); }
  }
  @keyframes rebond{
    0%,100%{ transform:translateY(0) rotate(-4deg); }
    50%{ transform:translateY(-12px) rotate(4deg); }
  }
  #chien.triste{ animation:tremble .35s ease-in-out infinite; }
  @keyframes tremble{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-4px) rotate(-4deg); }
    75%{ transform:translateX(4px) rotate(4deg); }
  }
  #chien.fete{ animation:saute .5s ease-in-out infinite; }
  @keyframes saute{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-22px) scale(1.12) rotate(8deg); }
  }

  /* ---------- boutons ---------- */
  .btn{
    border:none; cursor:pointer; font-family:inherit; font-weight:800;
    border-radius:999px; padding:.9rem 2.4rem; font-size:1.25rem;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:active{ transform:scale(.95); }
  .btn:focus-visible{ outline:3px solid var(--rose-fonce); outline-offset:3px; }
  .btn-oui{
    background:linear-gradient(135deg, #FF7FA8, var(--rose));
    color:#fff;
    box-shadow:0 6px 20px rgba(244,91,140,.4);
    transition:all .45s cubic-bezier(.34,1.56,.64,1);
  }
  .btn-non{
    background:var(--blanc); color:var(--rose-fonce);
    border:2px solid var(--blush);
    box-shadow:0 4px 12px rgba(214,64,122,.12);
    transition:all .4s cubic-bezier(.34,1.56,.64,1);
  }
  .rangée-btn{ display:flex; gap:1.2rem; align-items:center; justify-content:center; flex-wrap:wrap; }

  /* Non qui fuit */
  .btn-non.fuite{ position:fixed; z-index:40; }
  .btn-non.n1{ transform:scale(.7); }
  .btn-non.n2{ transform:scale(.45); }
  .btn-non.pouf{ transform:scale(0) rotate(360deg); opacity:0; pointer-events:none; }

  /* Oui qui grandit */
  .btn-oui.g1{ font-size:1.7rem; padding:1.1rem 3rem; }
  .btn-oui.g2{ font-size:2.4rem; padding:1.5rem 3.8rem; }
  .btn-oui.g3{
    position:fixed; z-index:45;
    left:3vw; right:3vw; top:24vh; bottom:3vh;
    font-size:clamp(2.6rem, 12vw, 5rem);
    border-radius:36px;
    animation:pulse-oui 1.2s ease-in-out infinite;
  }
  @keyframes pulse-oui{
    0%,100%{ box-shadow:0 6px 20px rgba(244,91,140,.4); }
    50%{ box-shadow:0 6px 44px rgba(244,91,140,.75); transform:scale(1.015); }
  }
  .question-haut{
    position:fixed; z-index:46; top:5vh; left:1rem; right:1rem;
  }

  /* choix multiples */
  .choix{ display:flex; flex-direction:column; gap:.9rem; width:min(80vw, 330px); }
  .choix .btn{
    background:var(--blanc); color:var(--prune);
    border:2px solid var(--blush); font-size:1.1rem; font-weight:700;
    box-shadow:0 4px 12px rgba(214,64,122,.1);
  }
  .choix .btn:hover{ border-color:var(--rose); }

  /* ---------- énigme du coffre ---------- */
  #ecran-q2{ gap:.8rem; padding-bottom:14vh; }
  #ecran-q2 h1{ font-size:clamp(1.3rem, 5vw, 1.9rem); }
  #ecran-q2 .sous{ font-size:.95rem; max-width:min(85vw, 380px); }
  @media (max-height:640px){
    #ecran-q2{ gap:.5rem; }
    #coffre{ font-size:2.8rem !important; }
  }
  #coffre{
    font-size:4rem; line-height:1;
    filter:drop-shadow(0 8px 16px rgba(214,64,122,.25));
    transition:transform .3s ease;
  }
  #coffre.secoue{ animation:secousse .4s ease; }
  @keyframes secousse{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-10px) rotate(-6deg); }
    40%{ transform:translateX(10px) rotate(6deg); }
    60%{ transform:translateX(-8px) rotate(-4deg); }
    80%{ transform:translateX(8px) rotate(4deg); }
  }
  #coffre.ouvert{ animation:ouverture .8s cubic-bezier(.34,1.56,.64,1); }
  @keyframes ouverture{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.4) rotate(-8deg); }
    100%{ transform:scale(1.15); }
  }
  #code-affichage{ display:flex; gap:.7rem; }
  #code-affichage span{
    width:2.6rem; height:3.2rem;
    background:var(--blanc); border:2px solid var(--blush); border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; font-weight:800; color:var(--rose-fonce);
    box-shadow:0 4px 10px rgba(214,64,122,.1);
    transition:border-color .2s;
  }
  #code-affichage span.rempli{ border-color:var(--rose); }
  #code-affichage.erreur span{ border-color:#E05B5B; color:#E05B5B; }
  #clavier{
    display:grid; grid-template-columns:repeat(3, 4.2rem); gap:.55rem;
    justify-content:center;
  }
  .touche{
    padding:.7rem 0; font-size:1.25rem; border-radius:18px;
    background:var(--blanc); color:var(--prune);
    border:2px solid var(--blush);
    box-shadow:0 3px 8px rgba(214,64,122,.1);
  }
  .touche:hover{ border-color:var(--rose); }
  .touche.efface{ color:var(--rose-fonce); }
  #cadeau-carte, #cadeau2-carte{
    background:var(--blanc); border:2px solid var(--blush);
    border-radius:24px; padding:1.2rem 1.5rem;
    max-width:min(85vw, 380px);
    display:flex; flex-direction:column; align-items:center; gap:.8rem;
    font-size:1.1rem; font-weight:700; line-height:1.5;
    box-shadow:0 10px 30px rgba(214,64,122,.2);
    animation:apparition .5s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes apparition{
    from{ transform:scale(.5); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }

  /* ---------- puzzle-lettre ---------- */
  #ecran-puzzle{
    gap:.45rem; justify-content:flex-start;
    padding:3.2rem .8rem calc(4.5vh + 8rem);
  }
  #ecran-puzzle h1{ font-size:clamp(1.15rem, 4.5vw, 1.6rem); }
  #puzzle-aide{ font-size:.9rem; }
  #aire-pieces{ position:relative; flex:1; width:100%; min-height:0; align-self:stretch; }
  .piece{
    position:absolute;
    width:clamp(122px, 36vw, 175px); aspect-ratio:136/84;
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    padding:0 22px; font-weight:800; font-size:.8rem; color:var(--prune);
    text-align:center; line-height:1.1;
    cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
    transform:rotate(var(--rot, 0deg));
    filter:drop-shadow(0 4px 6px rgba(214,64,122,.28));
    transition:filter .3s ease;
  }
  .piece::before{
    content:""; position:absolute; inset:0;
    background-image:var(--tirets);
    background-size:100% 100%; background-repeat:no-repeat;
    pointer-events:none;
    transition:opacity .7s ease;
  }
  .piece.grande{
    width:clamp(215px, 64vw, 300px); aspect-ratio:244/84;
    padding:0 30px;
  }
  .piece.tiree{
    z-index:85; transform:scale(1.1);
    filter:drop-shadow(0 12px 16px rgba(214,64,122,.5));
    cursor:grabbing;
  }
  .piece.retour{ transition:left .3s ease, top .3s ease, filter .3s ease; }
  .piece.refus{ animation:secousse .4s ease; filter:drop-shadow(0 0 8px rgba(224,91,91,.85)); }
  .piece.posee{
    position:absolute; left:-18%; right:-18%; top:-37.5%; bottom:-37.5%;
    width:auto; height:auto; aspect-ratio:auto;
    cursor:default; transform:none; filter:none;
    transition:transform .7s ease;
  }
  .piece.grande.posee{ left:-8.7%; right:-8.7%; }
  .piece.explose{ animation:explose .5s ease-in forwards; }
  @keyframes explose{
    to{ transform:scale(1.9) rotate(25deg); opacity:0; }
  }
  .fente-large{ grid-column:1 / -1; }
  #plateau-zone{
    width:min(88vw, 340px); height:9.4rem; flex-shrink:0;
    perspective:1100px;
    transition:transform .9s cubic-bezier(.45,0,.2,1);
  }
  #plateau-zone.lettre{ height:min(78vh, 600px); width:min(94vw, 430px); }
  #plateau{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform 1.1s cubic-bezier(.45,0,.25,1);
  }
  #plateau.retourne{ transform:rotateY(180deg); }
  .face{
    position:absolute; inset:0; border-radius:20px;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .face-avant{
    display:block; padding:.55rem;
    background:var(--blush);
    box-shadow:0 8px 24px rgba(214,64,122,.18);
    transition:background-color .7s ease;
  }
  /* le plateau assemblé : un seul SVG, les pièces partagent leurs frontières
     → emboîtement parfait par construction */
  #plateau-svg{ width:100%; height:100%; display:block; overflow:visible; }
  .psvg{
    transform-box:fill-box; transform-origin:center;
    transition:transform .8s cubic-bezier(.34,1.2,.5,1);
  }
  .psvg-fente{
    fill:rgba(255,255,255,.55);
    stroke:#EFAFC8; stroke-width:2; stroke-dasharray:7 5;
    transition:opacity .7s ease;
  }
  .psvg-fond{ fill:#FFFFFF; opacity:0; transition:opacity .3s ease; }
  .psvg-tirets{
    fill:none; stroke:#F45B8C; stroke-width:2.6;
    stroke-dasharray:6 5; stroke-linecap:round;
    opacity:0; transition:opacity .7s ease;
  }
  .psvg text{
    font-family:inherit; font-weight:800; font-size:11px;
    fill:var(--prune); text-anchor:middle; dominant-baseline:middle;
    opacity:0; transition:opacity .3s ease;
  }
  .psvg.pose{ transform:scale(.93); }
  .psvg.pose .psvg-fond, .psvg.pose .psvg-tirets, .psvg.pose text{ opacity:1; }
  #plateau.soude .psvg.pose{ transform:scale(1); }
  #plateau.soude .psvg-tirets{ opacity:0; }
  #plateau.soude .psvg-fente{ opacity:0; }
  .fente{
    border:2px dashed #EFAFC8; border-radius:12px;
    background:rgba(255,255,255,.55); position:relative;
    transition:border-color .7s ease, background-color .7s ease;
  }
  #plateau.soude .face-avant{ gap:0; background:#FFFFFF; }
  #plateau.soude .fente{ border-color:transparent; background:transparent; }
  #plateau.soude .piece::before{ opacity:0; }
  /* les pièces se dilatent légèrement pour se chevaucher : plus aucun jour visible */
  #plateau.soude .piece.posee{ transform:scale(1.06); }
  #plateau:not(.retourne) .face-arriere{ pointer-events:none; }
  .face-arriere{
    transform:rotateY(180deg);
    background:
      repeating-linear-gradient(transparent 0 1.55em, rgba(244,91,140,.12) 1.55em calc(1.55em + 1px)),
      #FFFDFB;
    border:2px solid var(--blush);
    padding:1.3rem 1.2rem; overflow-y:auto;
    font-family:"Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
    text-align:left; font-size:1.02rem; line-height:1.55em;
    box-shadow:0 14px 40px rgba(214,64,122,.25);
  }
  #lettre-texte{ white-space:pre-line; }
  #lettre-signature{ margin-top:1.2rem; text-align:right; font-weight:700; color:var(--rose-fonce); }

  /* ---------- voile de transition ---------- */
  #voile{
    position:fixed; inset:0; z-index:90; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
  }
  #voile .coeur-forme{
    width:80px; height:74px; position:relative; transform:scale(0);
  }
  #voile .coeur-forme::before, #voile .coeur-forme::after{
    content:""; position:absolute; top:0; width:52px; height:80px;
    border-radius:50px 50px 0 0;
    background:linear-gradient(135deg, #FF8FB0, #F5638F);
  }
  #voile .coeur-forme::before{ left:40px; transform:rotate(-45deg); transform-origin:0 100%; }
  #voile .coeur-forme::after{ left:0; transform:rotate(45deg); transform-origin:100% 100%; }
  #voile.entre .coeur-forme{ animation:voile-in .45s cubic-bezier(.55,0,.8,.3) forwards; }
  #voile.sort .coeur-forme{ animation:voile-out .55s cubic-bezier(.2,.6,.35,1) forwards; }
  @keyframes voile-in{ from{ transform:scale(0) rotate(-12deg); } to{ transform:scale(60); } }
  @keyframes voile-out{ from{ transform:scale(60); } to{ transform:scale(0) rotate(12deg); } }

  /* ---------- jeu attrape-cœurs ---------- */
  #ecran-jeu{
    gap:.5rem; justify-content:flex-start;
    padding:3.4rem .8rem calc(4.5vh + 4.6rem);
  }
  #ecran-jeu.gagne{ justify-content:center; padding:1.5rem; }
  #ecran-jeu h1{ font-size:clamp(1.2rem, 4.5vw, 1.7rem); }
  #jeu-canvas{
    width:100%; max-width:560px; flex:1; min-height:0;
    background:linear-gradient(180deg, #FFF2F6, #FFE3EC);
    border:2px solid var(--blush); border-radius:24px;
    box-shadow:0 8px 24px rgba(214,64,122,.15);
    touch-action:none; cursor:none;
  }
  #jeu-score{ font-size:1.1rem; }
  #jeu-aide{ font-size:.78rem; opacity:.8; }

  /* ---------- ouverture magique ---------- */
  #ouverture{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background-color:var(--fond);
    animation:rideau-fond 3s ease forwards;
    transition:opacity .7s ease;
  }
  #ouverture.fini{ opacity:0; pointer-events:none; }
  @keyframes rideau-fond{
    0%, 78%{ background-color:#FFF7F9; }
    96%, 100%{ background-color:#F5638F; }
  }
  #coeur-magique{
    width:80px; height:74px; position:relative;
    animation:coeur-magique 3s cubic-bezier(.55,0,.75,.2) forwards;
  }
  #coeur-magique::before, #coeur-magique::after{
    content:""; position:absolute; top:0; width:52px; height:80px;
    border-radius:50px 50px 0 0;
    background:linear-gradient(135deg, #FF8FB0, #F5638F);
  }
  #coeur-magique::before{ left:40px; transform:rotate(-45deg); transform-origin:0 100%; }
  #coeur-magique::after{ left:0; transform:rotate(45deg); transform-origin:100% 100%; }
  @keyframes coeur-magique{
    0%{ transform:scale(0) rotate(-15deg); }
    16%{ transform:scale(1.15); }
    26%{ transform:scale(.92); }
    38%{ transform:scale(1.12); }
    50%{ transform:scale(.96); }
    64%{ transform:scale(1.3); }
    100%{ transform:scale(60); }
  }
  .etincelle{
    position:absolute; font-size:1.3rem; opacity:0;
    animation:scintille .9s ease-out forwards;
  }
  @keyframes scintille{
    0%{ opacity:0; transform:scale(0); }
    40%{ opacity:1; transform:scale(1.3) rotate(20deg); }
    100%{ opacity:0; transform:scale(.6) translateY(-20px); }
  }
  .zoom-revele{ animation:apparition .6s cubic-bezier(.34,1.56,.64,1); }

  /* intro */
  #coeur-start{
    background:none; border:none; cursor:pointer;
    font-size:5.5rem; line-height:1;
    animation:battement 1.1s ease-in-out infinite;
    filter:drop-shadow(0 8px 18px rgba(244,91,140,.35));
  }
  #coeur-start:focus-visible{ outline:3px solid var(--rose-fonce); outline-offset:6px; border-radius:20px; }
  @keyframes battement{
    0%,100%{ transform:scale(1); }
    12%{ transform:scale(1.15); }
    24%{ transform:scale(1); }
    36%{ transform:scale(1.12); }
  }
  .badge{
    background:var(--blush); color:var(--rose-fonce);
    border-radius:999px; padding:.35rem 1rem;
    font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  }

  /* progression pattes */
  #progression{
    position:fixed; top:1rem; left:50%; transform:translateX(-50%);
    display:flex; gap:.5rem; z-index:30; font-size:1.1rem;
    opacity:0; transition:opacity .4s ease;
  }
  #progression.visible{ opacity:1; }
  #progression span{ opacity:.25; transition:opacity .3s, transform .3s; }
  #progression span.fait{ opacity:1; transform:scale(1.15); }

  /* cœurs flottants */
  .coeur-vol{
    position:fixed; z-index:60; pointer-events:none;
    animation:envol 1.4s ease-out forwards;
  }
  @keyframes envol{
    0%{ transform:translateY(0) scale(.6); opacity:1; }
    100%{ transform:translateY(-42vh) scale(1.3) rotate(20deg); opacity:0; }
  }
  .coeur-pluie{
    position:fixed; top:-8vh; z-index:5; pointer-events:none;
    animation:chute linear forwards;
  }
  @keyframes chute{
    0%{ transform:translateY(0) rotate(0deg); opacity:1; }
    100%{ transform:translateY(115vh) rotate(300deg); opacity:.7; }
  }

  /* finale */
  #ecran-final h1{ font-size:clamp(2rem, 8vw, 3rem); color:var(--rose-fonce); }
  .gateau{ font-size:4rem; animation:battement 1.4s ease-in-out infinite; }
  .message-final{
    background:var(--blanc); border:2px solid var(--blush);
    border-radius:24px; padding:1.2rem 1.5rem;
    max-width:min(85vw, 420px); font-size:1.1rem; line-height:1.55; font-weight:600;
    box-shadow:0 10px 30px rgba(214,64,122,.15);
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition-duration:.01s !important; }
    #ouverture{ display:none !important; }
  }