:root{
    --blush:#FFF0F5;
    --rose:#F7C6D9;
    --rose-deep:#EE9BBB;
    --raspberry:#D6537E;
    --ink:#6E4453;
    --cream:#FFFAF7;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Nunito',sans-serif;
    background:linear-gradient(180deg,var(--blush) 0%,#FDE3ED 100%);
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
  }
  h1,h2,.btn{font-family:'Fredoka',sans-serif}

  /* ---------- écran principal ---------- */
  .hero{
    min-height:100vh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;padding:24px;position:relative;
  }
  .cat-video{
    width:min(230px,58vw);
    border-radius:22px;
    box-shadow:0 10px 30px rgba(214,83,126,.28);
    margin-bottom:16px;
  }
  h1{
    font-size:clamp(2rem,6vw,3.4rem);
    font-weight:600;color:var(--raspberry);
    margin:8px 0 6px;
  }
  .sub{font-size:1.05rem;opacity:.75;margin-bottom:34px}

  .buttons{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:120px}
  .btn{
    border:none;border-radius:999px;cursor:pointer;
    font-weight:500;transition:font-size .25s ease, padding .25s ease, transform .18s ease;
    box-shadow:0 6px 18px rgba(214,83,126,.25);
  }
  .btn:focus-visible{outline:3px solid var(--raspberry);outline-offset:3px}
  #yes{
    background:var(--raspberry);color:#fff;
    padding:16px 44px;font-size:1.4rem;
    max-width:92vw;
  }
  #yes:hover{transform:scale(1.04)}
  #no{
    background:#fff;color:var(--ink);
    padding:12px 30px;font-size:1rem;
  }
  #no.fleeing{position:fixed;z-index:5}
  .whisper{
    margin-top:26px;font-style:italic;opacity:0;
    transition:opacity .5s;min-height:1.4em;
  }
  .whisper.show{opacity:.8}

  /* cœurs qui tombent */
  .heart{
    position:fixed;top:-30px;z-index:9;pointer-events:none;
    animation:fall linear forwards;
  }
  @keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.2}}

  /* ---------- section souvenirs ---------- */
  #souvenirs{
    display:none;padding:70px 20px 90px;
    max-width:820px;margin:0 auto;
  }
  #souvenirs.revealed{display:block;animation:appear .8s ease both}
  @keyframes appear{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  .section-title{
    text-align:center;font-size:clamp(1.5rem,4.5vw,2.2rem);
    color:var(--raspberry);font-weight:500;margin-bottom:10px;
  }
  .section-note{text-align:center;opacity:.7;margin-bottom:46px;font-size:1.05rem}

  .label{
    font-family:'Fredoka',sans-serif;font-weight:500;
    letter-spacing:.06em;text-transform:uppercase;
    font-size:.85rem;color:var(--raspberry);
    text-align:center;margin:56px 0 20px;
  }
  .label::before,.label::after{content:" ♡ "}
  .label-no-hearts::before,.label-no-hearts::after{content:""}

  /* polaroids */
  .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
  .polaroid{
    background:#fff;padding:12px 12px 38px;border-radius:6px;
    box-shadow:0 8px 22px rgba(110,68,83,.15);
    transform:rotate(var(--tilt,0deg));
    transition:transform .25s;
  }
  .polaroid:hover{transform:rotate(0deg) scale(1.03)}
  .polaroid:nth-child(3n+1){--tilt:-2.2deg}
  .polaroid:nth-child(3n+2){--tilt:1.7deg}
  .polaroid:nth-child(3n){--tilt:-1deg}
  .polaroid .frame{
    aspect-ratio:1;background:var(--rose);border-radius:4px;overflow:hidden;
  }
  .polaroid img,.polaroid video{
    width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;
  }
  .polaroid figcaption{text-align:center;margin-top:10px;font-size:.9rem;font-style:italic;opacity:.8}

  /* sur téléphone : les polaroids deviennent un carousel */
  .photos-arrows{display:none}
  @media (max-width:700px){
    .photos{
      display:flex;overflow-x:auto;
      scroll-snap-type:x mandatory;
      gap:16px;padding:6px 4px 18px;
      scrollbar-width:none;
    }
    .photos::-webkit-scrollbar{display:none}
    .photos .polaroid{
      flex:0 0 76vw;scroll-snap-align:center;
    }
    .photos-arrows{display:flex;justify-content:center;gap:12px;margin-top:2px}
  }

  /* ---------- carousels ---------- */
  .carousel-wrap{position:relative}
  .carousel{
    display:flex;gap:18px;overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:6px 4px 18px;
    scrollbar-width:none;
  }
  .carousel::-webkit-scrollbar{display:none}
  .track-card{
    scroll-snap-align:center;
    flex:0 0 min(260px,78vw);
    background:var(--cream);border-radius:20px;
    padding:16px;box-shadow:0 6px 18px rgba(110,68,83,.12);
    display:flex;flex-direction:column;gap:12px;
  }
  .cover{
    aspect-ratio:1;border-radius:14px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    font-size:3rem;position:relative;
  }
  .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

  /* ---------- écran PIN ---------- */
  #lock{
    position:fixed;inset:0;z-index:20;
    background:linear-gradient(180deg,var(--blush) 0%,#FDE3ED 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:24px;
  }
  #lock.open{display:none}
  .lock-title{
    font-family:'Fredoka',sans-serif;font-weight:500;
    color:var(--raspberry);font-size:clamp(1.3rem,4.5vw,1.8rem);
    margin-bottom:6px;
  }
  .lock-sub{opacity:.7;margin-bottom:26px;font-size:.95rem}
  .dots{display:flex;gap:16px;margin-bottom:10px}
  .dot{
    width:16px;height:16px;border-radius:50%;
    border:2px solid var(--rose-deep);background:transparent;
    transition:background .15s, transform .15s;
  }
  .dot.filled{background:var(--raspberry);border-color:var(--raspberry);transform:scale(1.15)}
  .dots.shake{animation:shake .4s}
  @keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-9px)}40%{transform:translateX(9px)}
    60%{transform:translateX(-6px)}80%{transform:translateX(6px)}
  }
  .hint{
    min-height:1.5em;font-style:italic;color:var(--raspberry);
    opacity:0;transition:opacity .5s;margin-bottom:16px;font-size:.95rem;
  }
  .hint.show{opacity:.85}
  .keypad{
    display:grid;grid-template-columns:repeat(3,72px);gap:14px;
  }
  .key{
    width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
    background:#fff;color:var(--ink);
    font-family:'Fredoka',sans-serif;font-size:1.5rem;font-weight:500;
    box-shadow:0 5px 14px rgba(214,83,126,.18);
    transition:transform .1s, background .1s;
    position:relative;
  }
  .key:active{transform:scale(.92);background:var(--rose)}
  .key.util{font-size:1.2rem;background:transparent;box-shadow:none;color:var(--raspberry)}
  .key-emoji{
    position:fixed;z-index:30;pointer-events:none;font-size:1.3rem;
    animation:pop 1s ease-out forwards;
  }
  @keyframes pop{
    from{transform:translateY(0) scale(1);opacity:1}
    to{transform:translateY(-90px) scale(1.6);opacity:0}
  }
  .cover.smh{background:linear-gradient(135deg,#A8C7E8,#E8D5F0)}
  .cover.sienna{background:linear-gradient(135deg,#C94F3D,#F0A87E)}
  .cover.notebook{background:linear-gradient(160deg,#7FA8C9,#E8E3D5)}
  .cover.eternal{background:linear-gradient(160deg,#3D5A80,#98C1D9)}
  .track-info strong{display:block;font-size:1.05rem}
  .track-info span{opacity:.65;font-size:.9rem}
  .fakebar{
    height:4px;border-radius:2px;background:#EDD7DF;position:relative;overflow:hidden;
  }
  .fakebar::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:38%;
    background:var(--raspberry);border-radius:2px;
  }
  .playline{display:flex;align-items:center;justify-content:space-between}
  .playbtn{
    text-decoration:none;background:var(--raspberry);color:#fff;
    font-family:'Fredoka',sans-serif;font-size:.9rem;
    padding:8px 18px;border-radius:999px;
  }
  .playbtn.ghost{background:transparent;color:var(--raspberry);border:2px solid var(--rose-deep)}
  .times{font-size:.75rem;opacity:.55}
  .arrows{
    display:flex;justify-content:center;gap:12px;margin-top:2px;
  }
  .arrow{
    background:#fff;border:none;width:38px;height:38px;border-radius:50%;
    color:var(--raspberry);font-size:1.1rem;cursor:pointer;
    box-shadow:0 4px 12px rgba(214,83,126,.2);
  }

  /* ---------- machine à raisons ---------- */
  .machine-zone{display:flex;flex-direction:column;align-items:center;gap:0}
  .machine{
    width:min(300px,84vw);
    background:linear-gradient(180deg,#FBD3E2,#F7C6D9);
    border-radius:26px 26px 18px 18px;
    padding:26px 22px 0;
    box-shadow:0 12px 30px rgba(214,83,126,.25), inset 0 2px 0 rgba(255,255,255,.6);
    text-align:center;position:relative;z-index:2;
  }
  .machine-face{
    font-size:2.2rem;line-height:1;
    animation:bounce-soft 3s ease-in-out infinite;display:inline-block;
  }
  @keyframes bounce-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .machine-name{
    font-family:'Fredoka',sans-serif;font-weight:500;
    color:var(--raspberry);font-size:1.05rem;margin:8px 0 16px;
  }
  .machine-slot{
    height:12px;width:78%;margin:0 auto;
    background:#8C4A60;border-radius:8px 8px 0 0;
    box-shadow:inset 0 4px 6px rgba(0,0,0,.35);
  }
  .ticket-out{
    width:min(260px,74vw);min-height:96px;
    margin-top:-4px;z-index:1;
    background:var(--cream);
    border:2px dashed var(--rose-deep);
    border-radius:4px 4px 14px 14px;
    padding:16px 18px 14px;text-align:center;
    box-shadow:0 8px 20px rgba(110,68,83,.15);
    display:flex;flex-direction:column;justify-content:center;gap:6px;
  }
  .ticket-out.printing{animation:print .55s ease-out}
  @keyframes print{
    from{transform:translateY(-46px) rotate(-1.5deg);opacity:0;clip-path:inset(0 0 100% 0)}
    to{transform:translateY(0) rotate(0deg);opacity:1;clip-path:inset(0 0 0 0)}
  }
  .ticket-num{
    font-family:'Fredoka',sans-serif;font-size:.75rem;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--raspberry);opacity:.85;
  }
  .ticket-text{font-size:1.05rem;font-weight:600}
  .machine-btn{
    margin-top:20px;
    background:var(--raspberry);color:#fff;border:none;cursor:pointer;
    font-family:'Fredoka',sans-serif;font-size:1.05rem;font-weight:500;
    padding:13px 34px;border-radius:999px;
    box-shadow:0 6px 18px rgba(214,83,126,.3);
    transition:transform .15s;
  }
  .machine-btn:hover{transform:scale(1.05)}
  .machine-btn:active{transform:scale(.95)}
  .machine-btn:focus-visible{outline:3px solid var(--raspberry);outline-offset:3px}

  /* ---------- rangée des deux machines ---------- */
  .machines-row{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
    gap:32px 24px;
  }
  .machines-row .machine-zone{flex:0 0 auto}

  /* ---------- machine à polaroids ---------- */
  .ticket-out img{
    width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important}
    html{scroll-behavior:auto}
  }

/* ══════════════ pages du site couple ══════════════ */

/* ---------- barre de navigation ---------- */
.nav{
  position:sticky;top:0;z-index:15;
  display:flex;align-items:center;gap:4px;
  padding:12px 16px;
  background:rgba(255,240,245,.85);
  backdrop-filter:blur(10px);
  overflow-x:auto;scrollbar-width:none;
  white-space:nowrap;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-family:'Fredoka',sans-serif;font-weight:500;
  color:var(--ink);text-decoration:none;
  padding:7px 14px;border-radius:999px;font-size:.95rem;
  transition:background .15s;
}
.nav a:hover{background:var(--rose)}
.nav a.active{background:var(--raspberry);color:#fff}
.nav .sep{color:var(--rose-deep);font-size:.8rem;user-select:none}
.nav a.nav-future{
  margin-left:8px;
  border:1.5px solid var(--raspberry);
  border-radius:6px;
}
.nav a.nav-future:hover{background:var(--rose)}

.page-body{max-width:840px;margin:0 auto;padding:34px 20px 90px}
.page-body--wide{max-width:920px} /* our-songs : juste assez large pour laisser sortir les vinyles de l'étagère */
.page-title{
  font-family:'Fredoka',sans-serif;font-weight:500;
  text-align:center;color:var(--raspberry);
  font-size:clamp(1.6rem,5vw,2.3rem);margin-bottom:8px;
}
.page-note{text-align:center;opacity:.7;margin-bottom:40px}

/* ---------- hall : compteur ---------- */
.counter{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:26px 0 8px;
}
.count-box{
  background:var(--cream);border-radius:16px;
  padding:14px 10px;min-width:82px;text-align:center;
  box-shadow:0 6px 16px rgba(110,68,83,.12);
}
.count-box b{
  display:block;font-family:'Fredoka',sans-serif;
  font-size:1.8rem;color:var(--raspberry);font-variant-numeric:tabular-nums;
}
.count-box span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.since{text-align:center;opacity:.7;font-style:italic;margin-bottom:44px}

/* ---------- hall : tuiles ---------- */
.tiles{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px;margin-top:44px;
}
.tile{
  flex:1 1 150px;max-width:220px;
  background:var(--cream);border-radius:20px;
  padding:26px 16px;text-align:center;text-decoration:none;color:var(--ink);
  box-shadow:0 6px 16px rgba(110,68,83,.12);
  transition:transform .18s, box-shadow .18s;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(214,83,126,.22)}
.tile .em{font-size:2.2rem;display:block;margin-bottom:10px}
.tile b{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.05rem;color:var(--raspberry)}
.tile span{display:block;font-size:.82rem;opacity:.65;margin-top:4px}

/* ---------- carte à pins ---------- */
.map-wrap{position:relative;max-width:640px;margin:0 auto}
.map-wrap svg{width:100%;height:auto;display:block}
.pin{
  position:absolute;transform:translate(-50%,-92%);
  background:none;border:none;cursor:pointer;
  font-size:2rem;line-height:1;padding:4px;
  filter:drop-shadow(0 3px 4px rgba(110,68,83,.3));
  transition:transform .15s;
}
.pin:hover{transform:translate(-50%,-92%) scale(1.2)}
.pin-overlay{
  position:fixed;inset:0;z-index:4000;
  background:rgba(110,68,83,.35);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.pin-overlay.show{display:flex}
.pin-card{
  background:#fff;border-radius:6px;
  padding:12px 12px 18px;max-width:340px;width:100%;
  box-shadow:0 16px 40px rgba(110,68,83,.35);
  transform:rotate(-1.5deg);
  text-align:center;
}
.pin-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
.pin-card .pc-name{
  font-family:'Fredoka',sans-serif;font-weight:500;
  color:var(--raspberry);font-size:1.15rem;margin-top:12px;
}
.pin-card .pc-date{font-size:.8rem;opacity:.6;margin-top:2px}
.pin-card .pc-text{font-style:italic;margin-top:8px;font-size:.95rem}
.pin-close{
  background:var(--raspberry);color:#fff;border:2px solid var(--raspberry);
  font-family:'Fredoka',sans-serif;font-size:.95rem;line-height:1.3;
  padding:7px 18px;border-radius:999px;cursor:pointer;
}

/* ---------- journal ---------- */
.jpage{
  background:var(--cream);
  border:1px solid #F0DAE2;
  overflow:hidden;
}
.jpage-inner{
  height:100%;padding:22px 20px 14px;
  display:flex;flex-direction:column;gap:12px;
}
.jdate{
  border:none;background:transparent;
  font-family:'Fredoka',sans-serif;color:var(--raspberry);
  font-size:.95rem;width:100%;outline:none;
  white-space:nowrap;overflow:hidden;
}
.jdate:empty::before{content:attr(data-ph);color:var(--rose-deep);opacity:.7;font-style:italic}
.jtext-wrap{
  flex:1;overflow:hidden;
  background:repeating-linear-gradient(
    transparent, transparent calc(var(--line-h, 28px) - 1px),
    #F3DCE5 calc(var(--line-h, 28px) - 1px), #F3DCE5 var(--line-h, 28px)
  );
}
.jtext-wrap.locked{pointer-events:none}
.jline{
  height:var(--line-h, 28px);line-height:var(--line-h, 28px);outline:none;
  font-family:'Nunito',sans-serif;font-size:.95rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;
}
.jline:first-child:empty::before{content:attr(data-ph);color:var(--rose-deep);opacity:.6;font-style:italic}
.jdate{
  border-bottom:2px solid #F3DCE5;padding-bottom:4px;
}
.jdate span.author-nathan{background:rgba(143,199,163,.4);border-radius:3px}
.jdate span.author-sara{background:rgba(178,148,214,.4);border-radius:3px}
.jcover{
  background:linear-gradient(160deg,#EE9BBB,#D6537E);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  color:#fff;text-align:center;padding:34px 20px;
  position:relative;
}
.jcover p.jnames{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:100%;
  font-family:'Fredoka',sans-serif;font-weight:500;
  font-size:1.8rem;line-height:1.25;
  margin-top:0;
}
.jcover-bottom{opacity:.85;font-size:.9rem}
.jcover h3{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.5rem}
.jcover p{opacity:.85;font-size:.9rem;margin-top:8px}
.jcover-back{
  position:absolute;bottom:16px;right:16px;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);background:transparent;
  color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.jcover-back:active{background:rgba(255,255,255,.2)}
.jhelp{text-align:center;opacity:.6;font-size:.85rem;margin-top:18px;font-style:italic}

/* ---------- mur de post-its ---------- */
.wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:20px;
}
.postit{
  min-height:170px;padding:16px 14px 14px;
  border-radius:2px;position:relative;
  box-shadow:0 8px 18px rgba(110,68,83,.18);
  transform:rotate(var(--tilt,0deg));
  transition:transform .2s;
  display:flex;flex-direction:column;
}
.postit:hover{transform:rotate(0deg) scale(1.02)}
.postit::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:56px;height:18px;background:rgba(255,255,255,.55);
  box-shadow:0 2px 4px rgba(110,68,83,.15);
}
.postit .ptext{
  flex:1;outline:none;font-family:'Nunito',sans-serif;
  font-size:.95rem;line-height:1.45;color:#5D4550;
}
.postit .ptext:empty::before{content:"write something…";opacity:.5;font-style:italic}
.postit .pdel{
  position:absolute;top:6px;right:8px;border:none;background:none;
  cursor:pointer;color:#5D4550;opacity:.35;font-size:.9rem;
}
.postit .pdel:hover{opacity:.9}
.pi-yellow{background:#FFF3B8}
.pi-pink{background:#FFD9E8}
.pi-blue{background:#D4EAFF}
.pi-green{background:#DCF5DC}
.pi-lilac{background:#EBDCFF}
/* sur téléphone : 1, 2 ou 3 post-its par ligne, au choix */
@media (max-width:700px){
  .wall[data-view="1"]{grid-template-columns:1fr}
  .wall[data-view="2"]{grid-template-columns:repeat(2,1fr);gap:14px}
  .wall[data-view="3"]{grid-template-columns:repeat(3,1fr);gap:8px}
  .wall[data-view="3"] .postit{min-height:130px;padding:12px 10px 10px}
  .wall[data-view="3"] .ptext{font-size:.8rem}
  .wall[data-view="3"] .pdel{font-size:.75rem}
}
.wall-add{
  display:block;margin:0 auto 26px;
  background:var(--raspberry);color:#fff;border:none;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:1rem;
  padding:12px 30px;border-radius:999px;
  box-shadow:0 6px 18px rgba(214,83,126,.3);
}

/* ---------- bucket list ---------- */
.bucket{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}
.bucket li{
  display:flex;align-items:center;gap:14px;
  background:var(--cream);border-radius:16px;padding:14px 18px;
  box-shadow:0 4px 14px rgba(110,68,83,.1);
}
.bcheck{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  border:2px solid var(--rose-deep);background:#fff;cursor:pointer;
  font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s;color:transparent;
}
.bcheck.done{background:var(--raspberry);border-color:var(--raspberry);color:#fff;transform:scale(1.05)}
.btext{flex:1;outline:none;font-size:.98rem}
.btext.done{text-decoration:line-through;opacity:.5}
.bdel{border:none;background:none;cursor:pointer;opacity:.3;font-size:.9rem}
.bdel:hover{opacity:.9}
.bucket-add{
  display:flex;gap:10px;max-width:560px;margin:26px auto 0;
}
.bucket-add input{
  flex:1;border:2px solid var(--rose);border-radius:999px;
  padding:12px 18px;font-family:'Nunito',sans-serif;font-size:.95rem;
  outline:none;background:#fff;color:var(--ink);
}
.bucket-add input:focus{border-color:var(--rose-deep)}
.bucket-add button{
  background:var(--raspberry);color:#fff;border:none;cursor:pointer;
  font-family:'Fredoka',sans-serif;padding:0 26px;border-radius:999px;font-size:1rem;
}

/* ---------- capsule temporelle ---------- */
.capsule-zone{text-align:center}
.capsule-emoji{font-size:4.5rem;display:inline-block;animation:bounce-soft 3s ease-in-out infinite}
.capsule-msg{
  max-width:480px;margin:26px auto 0;
  background:var(--cream);border-radius:20px;padding:26px;
  box-shadow:0 8px 20px rgba(110,68,83,.12);
  font-style:italic;line-height:1.6;
}

/* ---------- carte Leaflet pastel ---------- */
#lmap{
  height:min(70vh,560px);
  border-radius:22px;
  box-shadow:0 10px 28px rgba(110,68,83,.2);
  border:4px solid #fff;
}
.leaflet-tile{
  filter:sepia(.12) hue-rotate(300deg) saturate(1.15) brightness(1.02) contrast(1.05);
}
.heart-pin{
  font-size:1.7rem;line-height:1;text-align:center;
  filter:drop-shadow(0 3px 4px rgba(110,68,83,.35));
  background:none;border:none;
}
.pin-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pin-ghost{
  background:transparent;color:var(--raspberry);
  border:2px solid var(--rose-deep);cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:.95rem;line-height:1.3;
  padding:7px 18px;border-radius:999px;
}
.pin-form input,.pin-form textarea{
  width:100%;border:2px solid var(--rose);border-radius:12px;
  padding:10px 14px;margin-top:10px;
  font-family:'Nunito',sans-serif;font-size:.92rem;color:var(--ink);
  outline:none;background:#fff;resize:none;
}
.pin-form input:focus,.pin-form textarea:focus{border-color:var(--rose-deep)}
.pin-form textarea{height:80px}
.file-label{
  display:inline-block;margin-top:12px;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:.9rem;color:var(--raspberry);
  border:2px dashed var(--rose-deep);border-radius:12px;padding:9px 16px;
}
#fPreview{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-top:10px}

/* ---------- journal : numéros de page ---------- */
.jnum{
  text-align:center;font-family:'Fredoka',sans-serif;
  font-size:.75rem;color:var(--rose-deep);padding-bottom:4px;
}

/* ---------- bucket : sections to-do / done ---------- */
.bucket-sec{
  font-family:'Fredoka',sans-serif;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  font-size:.85rem;color:var(--raspberry);
  text-align:center;margin:40px 0 16px;
}
.bucket li.moving{animation:hop .35s ease}
@keyframes hop{50%{transform:scale(1.04)}}
.bucket-empty{text-align:center;opacity:.5;font-style:italic;font-size:.9rem}


/* ---------- croix de fermeture des fiches ---------- */
.pin-card{position:relative}
.pc-x{
  position:absolute;top:8px;right:10px;z-index:1;
  border:none;background:#fff;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  color:var(--raspberry);font-size:1rem;line-height:1;
  box-shadow:0 3px 8px rgba(110,68,83,.25);
}

/* ---------- nav : encoche iPhone + version mobile compacte ---------- */
.nav{padding-top:calc(12px + env(safe-area-inset-top))}
@media (max-width:700px){
  .nav{
    flex-wrap:wrap;justify-content:center;
    overflow-x:visible;white-space:normal;
    gap:6px;padding-left:10px;padding-right:10px;
  }
  .nav .sep{display:none}
  .nav a{font-size:.82rem;padding:6px 11px}
}

/* ---------- flèches du journal ---------- */
.book-arrows{margin-top:18px}


/* ---------- tactile : pas de zoom au double-tap sur les boutons ---------- */
button, a, .btn, .key, .arrow, .bcheck, .pin, .machine-btn,
.pin-close, .pin-ghost, .pc-x, .wall-add, .tile, .heart-pin,
.jtool-btn, .jpen, .jswatch{
  touch-action:manipulation;
}
.js-handle, .js-mini{touch-action:none}

/* ---------- couverture du journal ---------- */
.jcover-top{opacity:.85;font-size:.95rem}



/* ---------- journal maison ---------- */
.cbook-wrap{
  display:flex;justify-content:center;
  perspective:1400px;
}
.cbook{
  width:min(380px,88vw);
  aspect-ratio:380/520;
  position:relative;
}
.cpage{
  position:absolute;inset:0;
  border-radius:6px 14px 14px 6px;
  box-shadow:0 12px 30px rgba(110,68,83,.22);
  background:var(--cream);
  overflow:hidden;
  opacity:1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.cfull{height:100%}
.cpage .jcover{border:none}
.cpage .jpage-inner{border-left:5px solid var(--rose-deep)}

/* tournage : sortie puis entrée, symétrique gauche/droite */
.fold-out-next{animation:foldOutNext .2s ease-in forwards}
.fold-in-next{animation:foldInNext .2s ease-out forwards}
.fold-out-prev{animation:foldOutPrev .2s ease-in forwards}
.fold-in-prev{animation:foldInPrev .2s ease-out forwards}
@keyframes foldOutNext{
  from{transform:rotateY(0)}
  to{transform:rotateY(-88deg)}
}
@keyframes foldInNext{
  from{transform:rotateY(88deg)}
  to{transform:rotateY(0)}
}
@keyframes foldOutPrev{
  from{transform:rotateY(0)}
  to{transform:rotateY(88deg)}
}
@keyframes foldInPrev{
  from{transform:rotateY(-88deg)}
  to{transform:rotateY(0)}
}
.fold-out-next,.fold-out-prev{transform-origin:left center}
.fold-in-next,.fold-in-prev{transform-origin:left center}

@media (prefers-reduced-motion: reduce){
  .fold-out-next,.fold-in-next,.fold-out-prev,.fold-in-prev{animation-duration:.01s}
}


/* page pleine : petite secousse de refus */
.cshake{animation:cshake .3s ease}
@keyframes cshake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px) rotate(-.4deg)}
  55%{transform:translateX(6px) rotate(.4deg)}
  80%{transform:translateX(-3px)}
}


/* rien ne se sélectionne sur le livre, sauf dans les zones d'écriture — ciblé
   élément par élément : bloquer la sélection au niveau de .cpage cassait le
   placement du curseur dans .jtext sur Safari/iOS (bug connu de l'imbrication
   user-select:none puis user-select:text) */
.jcover,.jnum,.jtoolbar,.jdraw-panel,.jemoji-picker,.jsticker,.jhelp,.jstorage,.page-note{
  user-select:none;-webkit-user-select:none;
}


/* ---------- cœur de regroupement des pins ---------- */
.cluster-heart-wrap{background:none;border:none}
.cluster-heart{
  width:40px;height:40px;border-radius:50% 50% 50% 6px;
  background:var(--raspberry);
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(110,68,83,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:600;
  color:#fff;font-size:1.05rem;
  transform:rotate(-45deg);
}
.cluster-heart span{transform:rotate(45deg)}


/* ---------- journal grand écran : deux pages indépendantes ---------- */
/* la feuille qui tourne passe au-dessus de celles qui restent posées */
.cpage{z-index:1}
.cpage.fold-out-next,.cpage.fold-in-next,
.cpage.fold-out-prev,.cpage.fold-in-prev{z-index:2}

@media (min-width:900px){
  .cbook{
    width:380px;height:520px;aspect-ratio:auto;
    transition:width .25s ease;           /* le livre se recentre en s'ouvrant */
  }
  .cbook.open{width:760px}
  .cp-left{right:50%;border-radius:14px 6px 6px 14px}
  .cp-right{left:50%}
  .cp-left .jpage-inner{border-left:none;border-right:5px solid var(--rose-deep)}
  /* la charnière des pages de gauche est sur leur bord droit (la reliure) */
  .cp-left.fold-out-next,.cp-left.fold-in-next,
  .cp-left.fold-out-prev,.cp-left.fold-in-prev{transform-origin:right center}
}


/* ══════════════ journal : outils (dessin, photos, stickers) ══════════════ */

/* le conteneur de page devient le repère de toutes les couches empilées */
.jpage-inner{position:relative}

/* ---------- barre d'outils : flotte en overlay, ne pousse jamais la page ---------- */
.jtoolbar{
  position:absolute;top:8px;right:8px;z-index:10;
  display:flex;align-items:center;gap:6px;
}
.jtool-btn{
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--raspberry);font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(110,68,83,.25);
  transition:transform .12s, background .12s;
  flex:0 0 auto;
}
.jtool-btn[hidden]{display:none}
.jtool-btn:active{transform:scale(.9)}
.jtool-btn.on{background:var(--raspberry);color:#fff}
.jtool-btn:disabled{opacity:.35;cursor:default}

/* ---------- panneau de dessin : flotte au-dessus de la page, ne la déplace pas ---------- */
.jdraw-panel{
  position:absolute;top:38px;right:0;z-index:10;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--blush);border-radius:14px;padding:9px 11px;
  width:min(210px, calc(100vw - 56px));
  box-shadow:0 10px 26px rgba(110,68,83,.3);
}
.jdraw-panel[hidden]{display:none}
.jpens{display:flex;gap:4px;flex-wrap:wrap}
.jpen{
  border:none;border-radius:999px;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:.68rem;
  padding:5px 9px;background:#fff;color:var(--ink);
  box-shadow:0 2px 6px rgba(110,68,83,.12);
}
.jpen.active{background:var(--raspberry);color:#fff}
.jsize{width:100%;accent-color:var(--raspberry)}
.jpalette{
  display:grid;grid-template-columns:repeat(9,16px);gap:4px;
}
.jswatch{
  width:16px;height:16px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(110,68,83,.25);cursor:pointer;padding:0;
}
.jswatch.active{box-shadow:0 0 0 2px var(--raspberry)}
.jdraw-done{width:100%;border-radius:999px;background:var(--raspberry);color:#fff;
  border:none;cursor:pointer;font-family:'Fredoka',sans-serif;font-size:.8rem;
  padding:6px 0;margin-top:2px;
}

/* ---------- canvas de dessin : toujours devant tout le reste (texte, photos),
   pour pouvoir dessiner par-dessus une photo ; seule sa capacité à recevoir
   les clics change selon le mode ---------- */
.jcanvas-wrap{
  position:absolute;inset:0;z-index:7;
  pointer-events:none;border-radius:4px;overflow:hidden;
}
.jcanvas-wrap.active{pointer-events:auto}
.jcanvas-wrap canvas{width:100%;height:100%;display:block;touch-action:none}

/* ---------- couche des stickers (photos + emojis) ---------- */
.jstickers-layer{
  position:absolute;inset:0;z-index:2;pointer-events:none;
}
.jsticker{
  position:absolute;top:0;left:0;
  pointer-events:auto;touch-action:none;cursor:grab;
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;
}
.jsticker:active{cursor:grabbing}
.jsticker.selected{z-index:5}
/* la photo elle-même est dans une couche interne qui recadre l'image ;
   les poignées restent en dehors, jamais rognées */
.js-photo-inner{
  width:100%;height:100%;overflow:hidden;border-radius:6px;
  background:#fff;padding:6px 6px 18px;
  box-shadow:0 6px 16px rgba(110,68,83,.28);
}
.js-photo-inner.no-border{padding:0;background:none;box-shadow:none;border-radius:4px}
.js-photo-inner img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}
.js-photo-inner.no-border img{border-radius:4px}
.jsticker.emoji{font-size:2.4rem;line-height:1}
.jsticker.selected{outline:2px dashed var(--rose-deep);outline-offset:6px}
/* petit ruban de scotch décoratif, optionnel, posé sur la photo */
.js-tape-strip{
  position:absolute;display:none;z-index:1;
  width:46px;height:16px;
  background:rgba(255,255,255,.6);
  box-shadow:0 1px 3px rgba(110,68,83,.25);
}
.jsticker.photo.taped .js-tape-strip{display:block}
.js-tape-l{top:-8px;left:6px;transform:rotate(-8deg)}
.js-tape-r{top:-8px;right:6px;transform:rotate(6deg)}
.js-tape-bl{bottom:-8px;left:6px;transform:rotate(6deg)}
.js-tape-br{bottom:-8px;right:6px;transform:rotate(-6deg)}
.js-handle{
  position:absolute;width:24px;height:24px;border-radius:50%;
  background:#fff;border:2px solid var(--raspberry);
  box-shadow:0 3px 10px rgba(110,68,83,.4);
  display:none;
  z-index:2;
}
.jsticker.selected .js-handle{display:block}
.js-resize-tl{top:-12px;left:-12px;cursor:nwse-resize}
.js-resize-tr{top:-12px;right:-12px;cursor:nesw-resize}
.js-resize-bl{bottom:-12px;left:-12px;cursor:nesw-resize}
.js-resize-br{bottom:-12px;right:-12px;cursor:nwse-resize}

/* mini-barre regroupée au-dessus du sticker : scotch / bordure / rotation / suppression */
.js-toolbar-mini{
  position:absolute;top:-38px;left:50%;transform:translateX(-50%);
  display:none;gap:4px;z-index:2;
}
.jsticker.selected .js-toolbar-mini{display:flex}
.js-mini{
  width:24px;height:24px;border-radius:50%;border:2px solid var(--raspberry);
  background:#fff;color:var(--raspberry);font-size:.75rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(110,68,83,.3);
}
.js-mini.js-rotate{cursor:grab}

/* ---------- sélecteur d'emoji : grille à taille fixe + pagination ---------- */
.jemoji-picker{
  position:absolute;z-index:11;top:38px;right:0;
  background:#fff;border-radius:16px;padding:10px;
  box-shadow:0 12px 30px rgba(110,68,83,.28);
  width:max-content;
}
.jemoji-picker[hidden]{display:none}
.jemoji-grid{
  display:grid;grid-template-columns:repeat(6,28px);grid-auto-rows:28px;gap:4px;
  max-height:180px;overflow-y:auto;
}
.jemoji-grid button{
  border:none;background:none;cursor:pointer;
  width:28px;height:28px;min-width:0;
  font-size:1.15rem;line-height:1;padding:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.jemoji-grid button:hover{background:var(--blush)}
.jemoji-nav{display:flex;justify-content:space-between;margin-top:6px}

/* ---------- indicateur de stockage ---------- */
.jstorage{
  text-align:center;font-size:.72rem;opacity:.55;margin-top:10px;
}
.jstorage b{color:var(--raspberry)}

/* ---------- recadrage d'une photo avant ajout au journal ---------- */
.jcrop-overlay{
  position:fixed;inset:0;z-index:5000;
  background:rgba(110,68,83,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.jcrop-modal{
  background:#fff;border-radius:20px;padding:18px;
  box-shadow:0 20px 50px rgba(110,68,83,.4);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:92vw;
}
.jcrop-stage{
  position:relative;touch-action:none;overflow:hidden;
  border-radius:8px;max-width:88vw;max-height:60vh;
}
.jcrop-img{display:block;max-width:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.jcrop-rect{
  position:absolute;border:2px solid var(--raspberry);
  box-shadow:0 0 0 999px rgba(0,0,0,.35);
  cursor:move;touch-action:none;
}
.jcrop-handle{
  position:absolute;width:24px;height:24px;
  border-radius:50%;background:var(--raspberry);border:2px solid #fff;
  touch-action:none;
}
.jcrop-tl{top:-12px;left:-12px;cursor:nwse-resize}
.jcrop-tr{top:-12px;right:-12px;cursor:nesw-resize}
.jcrop-bl{bottom:-12px;left:-12px;cursor:nesw-resize}
.jcrop-br{bottom:-12px;right:-12px;cursor:nwse-resize}
.jcrop-actions{display:flex;align-items:center;gap:12px}
.jcrop-use{
  background:var(--raspberry);color:#fff;border:none;border-radius:999px;
  font-family:'Fredoka',sans-serif;font-size:.85rem;font-weight:500;
  padding:10px 26px;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 16px rgba(110,68,83,.3);
}

/* ---------- accès rapide à une page du journal ---------- */
.jgoto-panel{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:min(420px,90vw);margin:14px auto 0;
  padding:14px;background:#fff;border-radius:18px;
  box-shadow:0 12px 30px rgba(110,68,83,.22);
}
.jgoto-panel[hidden]{display:none}
.jgoto-bubble{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:44px;padding:6px 2px;border:none;border-radius:12px;
  background:var(--blush);cursor:pointer;
}
.jgoto-bubble:active{transform:scale(.94)}
.jgoto-num{
  font-family:'Fredoka',sans-serif;font-size:.85rem;color:var(--raspberry);
}

/* ---------- show authors / show history ---------- */
.jtoggles{
  display:flex;justify-content:center;flex-wrap:wrap;gap:18px;
  margin:12px 0 4px;font-size:.82rem;color:var(--ink);opacity:.85;
}
.jtoggles label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.jtoggles input{accent-color:var(--raspberry);width:15px;height:15px}

.jline span.author-nathan{background:rgba(143,199,163,.4);border-radius:3px}
.jline span.author-sara{background:rgba(178,148,214,.4);border-radius:3px}

.jsticker.author-nathan{box-shadow:0 0 0 3px rgba(143,199,163,.9)}
.jsticker.author-sara{box-shadow:0 0 0 3px rgba(178,148,214,.9)}

.jhistory-panel{
  max-width:min(360px,90vw);margin:10px auto 0;
  background:#fff;border-radius:16px;padding:10px 16px;
  box-shadow:0 12px 30px rgba(110,68,83,.22);font-size:.82rem;
}
.jhistory-panel[hidden]{display:none}
.jhistory-entry{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--rose);
}
.jhistory-entry:last-child{border-bottom:none}
.jhistory-author{font-weight:600}
.jhistory-author.author-nathan{color:#5FA379}
.jhistory-author.author-sara{color:#8F6BC2}
.jhistory-time{opacity:.6;white-space:nowrap}
.jhistory-empty{opacity:.6;text-align:center;padding:4px 0}

/* ---------- our songs : tourne-disque ---------- */
.tt-page-layout{
  display:flex;gap:36px;align-items:flex-start;justify-content:center;
  flex-wrap:wrap;width:100%;max-width:1040px;margin:0 auto;
}

/* ---------- lecteur ---------- */
.tt-player{
  position:relative;flex:0 0 auto;
  background:var(--cream);border-radius:22px;padding:26px 26px 18px;
  box-shadow:0 14px 34px rgba(110,68,83,.15);width:min(320px,90vw);
  display:flex;flex-direction:column;align-items:center;
}

.tt-deck{position:relative;width:220px;height:220px;margin-bottom:6px}

.tt-platter{
  position:absolute;inset:0;border-radius:50%;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 50% 50%, #3a3038 0 40%, #241c21 41% 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.25) inset, 0 8px 18px rgba(110,68,83,.25);
}
.tt-platter:active{cursor:grabbing}

.tt-vinyl{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, #2b2126 0 30%, #1c1519 31% 100%);
}
.tt-vinyl::before{
  content:'';position:absolute;inset:6px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, #2b2126 0 2px, #241c21 3px 4px);
}
.tt-vinyl-label{
  position:absolute;top:50%;left:50%;width:96px;height:96px;
  transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
  border:3px solid var(--cream);box-shadow:0 0 0 2px var(--raspberry);
}
.tt-vinyl-label img{width:100%;height:100%;object-fit:cover;display:block}

.tt-spindle{
  position:absolute;top:50%;left:50%;width:10px;height:10px;pointer-events:none;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--rose);z-index:2;
}

.tt-tonearm{
  position:absolute;top:-8px;right:-6px;width:104px;height:104px;pointer-events:none;
  transform-origin:92px 12px;transform:rotate(-28deg);
  transition:transform .5s cubic-bezier(.4,1.6,.5,1);z-index:3;
}
.tt-tonearm.down{transform:rotate(4deg)}
.tt-tonearm svg{width:100%;height:100%;overflow:visible}

.tt-track-info{text-align:center;margin-top:10px}
.tt-track-info strong{display:block;font-size:1.05rem;color:var(--ink)}
.tt-track-info span{display:block;font-size:.85rem;opacity:.7;font-style:italic;margin-top:2px}

.tt-progress-row{width:100%;margin-top:14px}
.tt-progress{width:100%;height:5px;border-radius:3px;background:var(--rose);cursor:pointer;position:relative}
.tt-progress-fill{height:100%;width:0%;background:var(--raspberry);border-radius:3px;transition:width .15s linear}
.tt-progress-thumb{
  position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  background:var(--raspberry);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35);
  transform:translate(-50%,-50%);pointer-events:none;transition:left .15s linear;
}
.tt-times{display:flex;justify-content:space-between;font-size:.72rem;opacity:.6;margin-top:4px}

.tt-controls{display:flex;align-items:center;justify-content:flex-end;margin-top:14px;position:relative;width:100%}
.tt-playpause{
  position:absolute;left:50%;transform:translateX(-50%);
  background:var(--raspberry);color:#fff;border:none;border-radius:50%;
  width:52px;height:52px;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(214,83,126,.35);
}
.tt-playpause:active{transform:translateX(-50%) scale(.94)}

/* ---------- bouton volume ---------- */
.tt-volume-group{display:flex;flex-direction:column;align-items:center;gap:6px}
.tt-volume-btn{
  background:none;border:2px solid var(--rose-deep);color:var(--raspberry);
  border-radius:50%;width:44px;height:44px;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.tt-volume-btn:hover{background:var(--rose)}
.tt-volume-btn:active{transform:scale(.94)}
.tt-volume-slider{
  width:90px;accent-color:var(--raspberry);cursor:pointer;
}

.tt-lib-btn{
  margin-top:14px;background:none;border:2px solid var(--rose-deep);color:var(--raspberry);
  border-radius:999px;cursor:pointer;font-family:'Nunito',sans-serif;
  padding:8px 18px;font-size:.85rem;font-weight:600;
}
.tt-lib-btn:hover{background:var(--rose)}

.tt-scrub-hint{margin-top:14px;font-size:.72rem;opacity:.45;font-style:italic;text-align:center}

/* le lecteur Spotify réel est présent mais invisible : replié à 1px, hors du flux visuel.
   Il joue vraiment le son, mais ce n'est pas lui qu'on regarde. */
.tt-spotify-embed-wrap{
  position:absolute;width:1px;height:1px;overflow:hidden;
  opacity:0;pointer-events:none;
}

/* ---------- fenêtre vinylothèque ---------- */
.tt-lib-overlay{
  position:fixed;inset:0;background:rgba(110,68,83,.45);z-index:50;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.tt-lib-overlay.open{display:flex}
.tt-lib-panel{
  background:var(--cream);border-radius:20px;padding:22px 20px;width:min(340px,92vw);
  max-height:80vh;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.3);
  transform:scale(.92);opacity:0;transition:transform .25s cubic-bezier(.34,1.4,.4,1),opacity .2s ease-out;
}
.tt-lib-overlay.open .tt-lib-panel{transform:scale(1);opacity:1}
.tt-lib-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.tt-lib-head-actions{display:flex;align-items:center;gap:10px}
.tt-lib-grid.reorder-mode .tt-lib-item{cursor:grab;touch-action:none}
.tt-lib-grid.reorder-mode .tt-lib-item:active{cursor:grabbing}
.tt-lib-head strong{
  font-family:'Fredoka',sans-serif;color:var(--raspberry);font-weight:500;
  display:flex;align-items:center;gap:7px;
}
.tt-lib-close{background:none;border:none;font-size:1rem;opacity:.5;cursor:pointer;color:var(--ink)}
.tt-lib-close:hover{opacity:1}
.tt-lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px}
.tt-lib-item{
  background:none;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .15s ease;
  min-width:0; /* empêche un mot trop long de forcer sa colonne à s'élargir */
}
.tt-lib-item:hover, .tt-lib-item:focus-visible{transform:translateY(-3px)}

/* mini-vinyle : disque noir + rainures + petite pochette au centre, comme le vrai plateau */
.tt-lib-disc{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #2b2126 0 26%, #1c1519 27% 100%);
  box-shadow:0 4px 10px rgba(110,68,83,.25);
}
.tt-lib-disc::before{
  content:'';position:absolute;inset:4px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, #2b2126 0 1.5px, #241c21 2.5px 3px);
}
.tt-lib-cover{
  position:absolute;top:50%;left:50%;width:56%;height:56%;
  transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
  border:2px solid var(--cream);box-shadow:0 0 0 2px var(--rose-deep);
}
.tt-lib-item.active .tt-lib-cover{box-shadow:0 0 0 2px var(--raspberry)}
.tt-lib-cover img{width:100%;height:100%;object-fit:cover;display:block}

.tt-lib-now{
  display:none;align-items:center;gap:4px;color:var(--raspberry);
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.tt-lib-item.active .tt-lib-now{display:flex}
.tt-lib-now .tt-dot{
  width:6px;height:6px;border-radius:50%;background:var(--raspberry);
  animation:tt-pulse-dot 1.3s ease-in-out infinite;
}
@keyframes tt-pulse-dot{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}

.tt-lib-title{font-size:.72rem;text-align:center;opacity:.85;line-height:1.2;font-weight:600;overflow-wrap:anywhere}
.tt-lib-artist{opacity:.6;font-style:italic;font-size:.68rem;overflow-wrap:anywhere}

/* ---------- rayon réaliste, à côté du lecteur, toujours visible ---------- */
.tt-shelf-wall{
  flex:1 1 320px;min-width:220px;max-width:480px;
  background:var(--cream);border-radius:22px;padding:24px 20px 30px;
  box-shadow:0 14px 34px rgba(110,68,83,.15);
  display:flex;flex-direction:column;
}
@media (max-width:700px){
  .tt-shelf-wall{max-width:none;width:100%}
}
.tt-shelf-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:18px;
}
.tt-shelf-title{
  font-family:'Fredoka',sans-serif;color:var(--raspberry);font-weight:500;
  font-size:1.05rem;
}
.tt-shelf-rows{
  display:flex;flex-direction:column;gap:6px;
  overflow-x:hidden;overflow-y:auto;flex:1;min-height:0;
}
@media (min-width:701px){
  .tt-shelf-rows{padding:0 45px} /* place de chaque côté sur PC, pour que le disque sorte sans être coupé par la barre de défilement */
}
.tt-shelf-rows.reorder-mode .tt-shelf-record{cursor:grab;touch-action:none}
.tt-shelf-rows.reorder-mode .tt-shelf-record:active{cursor:grabbing}
.tt-shelf-row{
  display:flex;gap:14px;align-items:flex-end;justify-content:center;
  padding:16px 10px 16px 10px;
  overflow:visible;
  border-bottom:6px solid var(--rose);
}
@media (max-width:700px){
  .tt-shelf-row{gap:12px;padding:16px 8px}
}
.tt-shelf-record{
  position:relative;flex:0 0 auto;width:78px;cursor:pointer;
  transform:rotate(-4deg);transition:transform .18s ease;
}
@media (max-width:700px){
  .tt-shelf-record{width:calc((100% - 36px)/4)} /* toujours exactement 4 par ligne, quelle que soit la largeur */
}
.tt-shelf-record:nth-child(even){transform:rotate(-2deg)}
.tt-shelf-record:hover, .tt-shelf-record:focus-visible{
  transform:rotate(-4deg) translateY(-8px);z-index:6;
}
.tt-shelf-record:nth-child(even):hover, .tt-shelf-record:nth-child(even):focus-visible{
  transform:rotate(-2deg) translateY(-8px);z-index:6;
}
.tt-shelf-sleeve{
  position:relative;z-index:2;width:100%;aspect-ratio:1/1.02;
  border-radius:5px;overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.tt-shelf-sleeve img{width:100%;height:100%;object-fit:cover;display:block}
.tt-shelf-record.active .tt-shelf-sleeve{outline:3px solid var(--raspberry);outline-offset:1px}

/* le vinyle sort de sous la pochette, à moitié, plus haut pour donner l'impression
   qu'il glisse depuis l'intérieur de la pochette plutôt que d'apparaître du vide */
.tt-shelf-disc{
  position:absolute;top:26%;left:50%;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #2b2126 0 55%, #1c1519 56% 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  transform:translate(-40px,-50%);opacity:0;
  transition:transform .3s cubic-bezier(.34,1.4,.4,1),opacity .25s ease;
  z-index:1;pointer-events:none;
}
.tt-shelf-disc::before{
  content:'';position:absolute;inset:8%;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, #2b2126 0 1.5px, #241c21 2.5px 3px);
}
.tt-shelf-disc-label{
  position:absolute;top:50%;left:50%;width:38%;height:38%;
  transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
  border:2px solid var(--cream);box-shadow:0 0 0 2px var(--rose-deep);
}
.tt-shelf-disc-label img{width:100%;height:100%;object-fit:cover;display:block}
.tt-shelf-record:hover .tt-shelf-disc, .tt-shelf-record:focus-visible .tt-shelf-disc{
  transform:translate(0,-50%);opacity:1;
}
/* le vinyle déjà sur le tourne-disque ne peut plus sortir de sa pochette */
.tt-shelf-record.active:hover .tt-shelf-disc, .tt-shelf-record.active:focus-visible .tt-shelf-disc{
  transform:translate(-40px,-50%);opacity:0;
}

.tt-shelf-caption{
  display:block;margin-top:8px;font-size:.66rem;text-align:center;opacity:.85;line-height:1.25;
}
.tt-shelf-caption .tt-shelf-artist{display:block;opacity:.65;font-style:italic;font-size:.9em}

.tt-shelf-now{
  display:none;align-items:center;justify-content:center;gap:4px;margin-top:4px;
  color:var(--raspberry);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.tt-shelf-record.active .tt-shelf-now{display:flex}
.tt-shelf-now .tt-dot{
  width:5px;height:5px;border-radius:50%;background:var(--raspberry);
  animation:tt-pulse-dot 1.3s ease-in-out infinite;
}
.tt-shelf-hint{margin-top:16px;font-size:.72rem;opacity:.5;font-style:italic;text-align:center}
.tt-note{margin-top:26px;font-size:.8rem;opacity:.55;font-style:italic;text-align:center;max-width:340px;margin-left:auto;margin-right:auto}

/* ---------- memories : en-tête galerie (vue à gauche, "Us" au centre, ajout à droite) ---------- */
.gallery-head{position:relative;z-index:20;display:flex;align-items:center;justify-content:center;margin:56px 0 20px}
.gallery-head .label{margin:0}
.gallery-right{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.add-photo-btn{
  background:var(--raspberry);color:#fff;border:none;border-radius:999px;
  padding:8px 16px;font-size:.82rem;font-family:'Fredoka',sans-serif;font-weight:500;
  cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;
  box-shadow:0 6px 14px rgba(214,83,126,.3);
}
.add-photo-btn:active{transform:scale(.94)}
.reorder-round-btn{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;padding:0;
  background:#fff;color:var(--raspberry);border:2px solid var(--rose-deep);
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.reorder-round-btn:active{transform:scale(.92)}
.reorder-round-btn.active{
  background:var(--raspberry);color:#fff;border-color:var(--raspberry);
  box-shadow:0 6px 14px rgba(214,83,126,.35);
}

/* menu "combien par ligne" façon boutique — visible seulement sur téléphone, à gauche de "Us" */
.view-menu-wrap{position:absolute;left:0;top:50%;transform:translateY(-50%);display:none}
@media (max-width:700px){.view-menu-wrap{display:block}}
.view-toggle-btn{
  background:#fff;color:var(--raspberry);border:2px solid var(--rose-deep);
  border-radius:999px;padding:8px 14px;font-size:.8rem;font-weight:600;
  font-family:'Fredoka',sans-serif;cursor:pointer;white-space:nowrap;
}
.view-menu{
  position:absolute;top:120%;left:0;background:#fff;border-radius:14px;
  box-shadow:0 12px 28px rgba(110,68,83,.3);padding:6px;
  display:none;flex-direction:column;gap:2px;z-index:30;min-width:150px;
}
.view-menu.open{display:flex}
.view-menu button{
  background:none;border:none;text-align:left;cursor:pointer;
  padding:9px 12px;border-radius:9px;color:var(--ink);
  font-family:'Nunito',sans-serif;font-size:.85rem;
}
.view-menu button:hover{background:var(--blush)}
.view-menu button.active{background:var(--rose);color:var(--raspberry);font-weight:700}

@media (max-width:560px){
  .add-photo-btn{padding:7px 12px;font-size:.76rem}
  .view-toggle-btn{padding:7px 11px;font-size:.75rem}
  .reorder-round-btn{width:32px;height:32px;font-size:.9rem}
}

/* ---------- memories : bouton voir plus / voir moins ---------- */
.photos-tools{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.see-more-btn{
  background:var(--raspberry);color:#fff;border:none;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:.9rem;font-weight:500;
  padding:10px 26px;border-radius:999px;
  box-shadow:0 6px 18px rgba(214,83,126,.3);
}
.see-more-btn:hover{transform:scale(1.03)}
.see-more-btn:active{transform:scale(.96)}
.see-more-btn:disabled{
  background:var(--rose);color:#fff;opacity:.65;cursor:default;
  box-shadow:none;transform:none;
}
.see-less-btn{
  background:#fff;color:var(--raspberry);border:2px solid var(--rose-deep);cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:.9rem;font-weight:500;
  padding:9px 24px;border-radius:999px;display:none;
}
.see-less-btn:active{transform:scale(.96)}
.see-less-btn.show{display:inline-block}
.photos.reorder-mode .polaroid{cursor:grab;touch-action:none}
.photos.reorder-mode .polaroid:active{cursor:grabbing}
.reorder-ghost{opacity:.35}
.reorder-chosen{outline:3px solid var(--raspberry);outline-offset:2px}
.reorder-dragging{opacity:.9;box-shadow:0 14px 30px rgba(110,68,83,.4)!important}

/* sur téléphone : 2 ou 3 photos par ligne, au lieu du carousel */
@media (max-width:700px){
  .photos[data-view="2"]{
    display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
    overflow-x:visible;padding:6px 4px 16px;
  }
  .photos[data-view="2"] .polaroid{width:100%;padding:9px 9px 30px}

  .photos[data-view="3"]{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    overflow-x:visible;padding:6px 4px 16px;
  }
  .photos[data-view="3"] .polaroid{width:100%;padding:6px 6px 22px}
  .photos[data-view="3"] .polaroid figcaption{font-size:.68rem;margin-top:6px}

  .photos[data-view="2"] ~ .photos-arrows,
  .photos[data-view="3"] ~ .photos-arrows{display:none}
}

/* le polaroid se voit désormais cliquable */
.polaroid{cursor:pointer}
.polaroid .frame{position:relative}

/* ---------- memories : fiche agrandie (lightbox) ---------- */
.mem-overlay{
  position:fixed;inset:0;z-index:4500;
  background:rgba(110,68,83,.55);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.mem-overlay.show{display:flex}
.mem-card{
  background:#fff;padding:16px 16px 20px;border-radius:8px;
  max-width:360px;width:100%;position:relative;text-align:center;
  box-shadow:0 24px 60px rgba(110,68,83,.45);
  animation:mem-pop .25s cubic-bezier(.34,1.4,.4,1);
}
@keyframes mem-pop{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.mem-frame{
  aspect-ratio:1;background:var(--rose);border-radius:4px;overflow:hidden;position:relative;
}
.mem-frame-media{position:absolute;inset:0}
.mem-frame-media img,.mem-frame-media video{display:block}
.mem-card .pc-x{z-index:6}
.mem-frame-hint{
  position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;
  background:rgba(110,68,83,.5);color:#fff;font-size:.85rem;font-family:'Fredoka',sans-serif;
  text-align:center;padding:10px;cursor:pointer;
}
.mem-card.editing .mem-frame{cursor:pointer}
.mem-card.editing .mem-frame-hint{display:flex}
.mem-caption-view{margin-top:12px;font-style:italic;opacity:.8;font-size:.95rem}
.mem-card.editing .mem-caption-view{display:none}
.mem-caption-input{display:none}
.mem-card.editing .mem-caption-input{
  display:block;width:100%;margin-top:12px;border:2px solid var(--rose);
  border-radius:12px;padding:8px 12px;font-family:'Nunito',sans-serif;font-size:.9rem;
  color:var(--ink);resize:none;height:56px;outline:none;
}
.mem-caption-input:focus{border-color:var(--rose-deep)}
.mem-edit-actions{display:none;margin-top:14px;justify-content:center;gap:10px}
.mem-card.editing .mem-edit-actions{display:flex}
.mem-pencil{
  position:absolute;right:-10px;bottom:-10px;
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:var(--raspberry);color:#fff;font-size:1.05rem;
  box-shadow:0 6px 14px rgba(214,83,126,.35);
}
.mem-card.editing .mem-pencil{display:none}
.machine-zone{position:relative}
.machine-zone .mem-pencil{
  z-index:5;width:22px;height:22px;font-size:.65rem;
  box-shadow:0 3px 8px rgba(214,83,126,.3);opacity:.55;
}
.machine-zone .mem-pencil:hover{opacity:1}

/* boutons du popup d'édition des photos de la home : même gabarit pour les deux */
.pin-actions .file-label{
  margin-top:0;padding:9px 18px;font-size:.9rem;line-height:1.3;
  border-radius:999px;display:inline-flex;align-items:center;
}

/* aperçu carré pour le formulaire d'ajout (photo ou vidéo) */
.mem-preview-frame{
  width:100%;aspect-ratio:1;border-radius:12px;margin-top:10px;
  background:var(--rose);overflow:hidden;position:relative;
}
.mem-preview-frame img,.mem-preview-frame video{display:block}

/* tactile */
button, a, .btn, .key, .arrow, .bcheck, .pin, .machine-btn,
.pin-close, .pin-ghost, .pc-x, .wall-add, .tile, .heart-pin,
.jtool-btn, .jpen, .jswatch, .see-more-btn, .see-less-btn, .reorder-round-btn, .view-toggle-btn,
.add-photo-btn, .mem-pencil, .mem-frame, .polaroid, .view-menu button{
  touch-action:manipulation;
}

/* volume Spotify : bouton fonctionnel seulement sur souris/trackpad (PC, Mac), le SDK ne gère pas le volume sur tactile */
@media (pointer: coarse) {
  .tt-volume-group {
    display: none !important;
  }
  .tt-controls {
    min-height: 52px;
  }
}

/* écran "qui es-tu ?" après le PIN, avant le hall */
.who-screen{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:22px;
  background:var(--rose);
}
.who-screen.open{display:flex}
.who-title{font-family:'Fredoka',sans-serif;font-size:1.4rem;color:var(--ink)}
.who-buttons{display:flex;gap:16px}
.who-btn{
  background:#fff;border:2px solid var(--rose-deep);color:var(--raspberry);
  border-radius:999px;padding:14px 38px;font-size:1.05rem;font-weight:600;
  font-family:'Nunito',sans-serif;cursor:pointer;
}
.who-btn:hover{background:var(--raspberry);color:#fff}

/* petit bouton "changer de profil" dans la nav */
.switch-profile-btn{
  background:none;border:none;color:var(--raspberry);opacity:.5;
  font-size:.95rem;cursor:pointer;margin-left:10px;padding:2px 6px;
  vertical-align:middle;
}
.switch-profile-btn:hover{opacity:1}

/* sur PC et iPad paysage : bouton rond, fixe, en haut à droite de l'écran */
@media (min-width:701px){
  .switch-profile-btn{
    position:fixed;top:16px;right:18px;z-index:70;
    background:#fff;border:2px solid var(--rose-deep);
    border-radius:50%;width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;opacity:1;margin-left:0;
    box-shadow:0 4px 10px rgba(214,83,126,.25);
  }
  .switch-profile-btn:hover{background:var(--rose);opacity:1}
}