:root{
  --pink-600:#d6336c; --pink-700:#c2185b; --ink-700:#333; --muted:#666;
  --bg1:rgb(254,216,232); --bg2:rgb(255,240,248);
  --card-w:280px; --card-h:390px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink-700);min-height:100vh;display:flex;flex-direction:column;
  background:url("images/background.png") center/cover no-repeat fixed
}
a{color:var(--pink-600);text-decoration:none}
a:hover{color:var(--pink-700)}

/* HEADER */
/* Logo fixe (sans fond) en haut-gauche */
.brand.brand-fixed{
  position:fixed;top:12px;left:12px;z-index:1001;display:flex;align-items:center;
}
.brand.brand-fixed img{height:52px;width:auto;object-fit:contain}

/* En-tête nav (fond translucide) en haut-droite */
header.nav-header{
  position:fixed;top:12px;right:12px;height:52px;
  display:flex;align-items:center;gap:16px;justify-content:flex-start;
  padding:6px 12px;z-index:1000;backdrop-filter:blur(6px);
  background: rgba(255,255,255,0.6);
  border-radius: 999px;
}

nav.primary{display:none;gap:18px}
nav.primary a{padding:8px 12px;border-radius:10px;font-weight:600}
nav.primary a:hover{background:rgba(0,0,0,.04)}

.burger{width:28px;height:22px;display:grid;place-items:center;cursor:pointer}
.burger span,.burger::before,.burger::after{content:"";display:block;height:3px;background:#222;border-radius:2px;transition:.25s}
.burger span{width:100%}.burger::before,.burger::after{width:100%}
.burger.active span{opacity:0}.burger.active::before{transform:translateY(9px) rotate(45deg)}
.burger.active::after{transform:translateY(-9px) rotate(-45deg)}

.drawer{
  position:fixed;top:calc(12px + 52px);right:12px;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.15);
  padding:10px;display:none;flex-direction:column;gap:6px;z-index:1000;min-width:200px
}
.drawer.open{display:flex}
.drawer a{padding:10px 12px;border-radius:10px;font-weight:600;color:var(--pink-600)}
.drawer a:hover{background:#fde2ec;color:var(--pink-700)}

/* MAIN */
main.hero{flex:1;display:grid;place-items:center;padding:92px 16px 0;position:relative;overflow:hidden}
.copy{text-align:center;margin-bottom:12px;position:relative;z-index:50}
.copy h1{font-size:clamp(26px,4vw,44px);letter-spacing:.12em;color:var(--pink-600);text-transform:uppercase}
.copy .tag{
  margin-top:40px;
  color:#fff;
  font-size:clamp(20px,4vw,36px);
  font-weight:900;
  font-style:normal;
  line-height:1.2;
  letter-spacing:1px;
  text-shadow:0 2px 12px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25);
  animation: taglineIn 720ms cubic-bezier(.17,.84,.44,1) both;
}
.copy .tag .emph{ color: var(--pink-700); display:inline-block; }
/* Lettres animées subtilement (inspiré vague) */
.copy .tag .emph .l{
  display:inline-block;
  transform-origin: 50% 80%;
  animation: wobbleY 2600ms ease-in-out infinite;
  animation-delay: calc(var(--i) * 120ms);
}
@keyframes wobbleY{
  0%   { transform: translateY(0)   rotate(0deg); }
  50%  { transform: translateY(-3px) rotate(-1deg); }
  100% { transform: translateY(0)   rotate(0deg); }
}

@keyframes taglineIn{
  from{ opacity:0; transform: translateY(8px) scale(.98); }
  to  { opacity:1; transform: translateY(0)  scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .copy .tag{ animation:none; }
  .copy .tag .emph .l{ animation:none; }
}

/* SCENE */
.scene{position:absolute;inset:0;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 40%);z-index:1}

/* Monstre qui flotte dans les nuages */
.sky-monster{
  position:absolute;
  top: 15%;                  /* hauteur de base (à ajuster) */
  width: clamp(40px, 5vw, 90px);
  pointer-events:auto;
  cursor: grab;
  user-select: none;
  transition: transform .2s, filter .2s;
  z-index: 3;                /* au-dessus des nuages visuels */
}
.sky-monster:hover{
  transform: scale(1.06);
}

.clouds, .sky{ display:none !important; }

/* GRASS (avec décalage horizontal par plan) */
.grass{
  position:absolute;
  left:0; right:0; bottom:0;
  height:22vh;
  pointer-events:none;
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position: 0 bottom; /* base */
  transform:translateX(0);
  will-change: transform;
}

/* back = pas de décalage, mid = +20px, front = +40px */
.grass.back{
  z-index:10;
  background-image:url("images/decor/grass_back.png");
  background-position: 0px bottom;
  animation:swayBack 16s ease-in-out infinite alternate;
}
.grass.mid{
  z-index:30;
  background-image:url("images/decor/grass_mid.png");
  background-position: 40px bottom;
  animation:swayMid 13s ease-in-out infinite alternate;
}
.grass.front{
  z-index:70;
  background-image:url("images/decor/grass_front.png");
  background-position: 80px bottom;
  animation:swayFront 10s ease-in-out infinite alternate;
}

@keyframes swayBack  { from{ transform:translateX(-6px);}  to{ transform:translateX( 6px);} }
@keyframes swayMid   { from{ transform:translateX(-8px);}  to{ transform:translateX( 8px);} }
@keyframes swayFront { from{ transform:translateX(-10px);} to{ transform:translateX(10px);} }

/* MONSTERS */
.monsters-layer{position:absolute;inset:auto 0 6vh 0;height:18vh;z-index:50;pointer-events:none}
.monster{
  position:absolute;bottom:0;width:clamp(44px,6vw,106px);user-select:none;filter:brightness(0) contrast(1000);
  pointer-events:auto;transition:transform .2s,filter .2s;cursor:grab;
  touch-action:none; -webkit-user-drag: none;
}
.monster:hover{transform:scale(1.06);}

/* Retirer le filtre noir pour m1/m2/m3 uniquement */
#m1, #m2, #m3{ filter:none !important; }
#m1:hover, #m2:hover, #m3:hover{ filter:none !important; }

/* CARD */
.stage{
  position:relative;width:min(92vw,980px);height:min(66vh,620px);display:grid;place-items:center;z-index:60;
  translate: 0 -10vh; /* remonte légèrement la carte */
}
@media (max-width:768px){ .stage{ translate: 0 -3vh; } }

.ground{position:absolute;left:0;right:0;bottom:10vh;height:2px}
.card-bouncer{position:absolute;translate:0 0;will-change:transform}
.card-3d{
  width:var(--card-w);height:var(--card-h);position:relative;transform-style:preserve-3d;transition:transform .28s;cursor:grab
}
.card-3d:active{cursor:grabbing}
.face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;
  box-shadow:none !important;
}
.face.front{background:#000;display:grid;place-items:center}
.face.front img{width:100%;height:100%;object-fit:cover}
.face.back{background:#000 center/cover url("images/back_card.png") no-repeat;transform:rotateY(180deg)}
.card-3d.is-back{transform:rotateY(180deg)}

/* Ancienne ombre au sol : supprimée */
.card-shadow{ display:none !important; }

/* FOOTER */
footer{
  background:#fff;padding:14px 10px;text-align:center;box-shadow:inset 0 2px 4px rgba(0,0,0,.05);z-index:100
}
footer p,footer a{color:var(--muted);font-size:14px}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:2000}
.modal-content{background:#fff;padding:22px;border-radius:12px;width:min(420px,92vw);position:relative;box-shadow:0 30px 80px rgba(0,0,0,.2)}
.modal-content h2{margin-bottom:6px}
.modal-content input[type=email]{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:10px;margin:12px 0}
.modal-content button{width:100%;padding:12px;border:0;border-radius:10px;background:var(--pink-600);color:#fff;font-weight:800}
.modal .close{position:absolute;right:14px;top:10px;font-size:22px;color:#999;cursor:pointer}

/* POP ANIM */
.monster-pop{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:120}
.monster-pop img{width:94%;height:94%;object-fit:cover;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:popIn .18s ease-out}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

/* NAV visibilités */
@media (min-width:900px){nav.primary{display:flex}.burger,.drawer{display:none}}
@media (max-width:768px){:root{--card-w:200px;--card-h:280px}}
@media (max-width:420px){:root{--card-w:140px;--card-h:196px}}

/* Bouton newsletter dans le header */
.news-btn{
  margin-left:8px;padding:8px 12px;font-weight:700;border:0;border-radius:999px;background:var(--pink-600);color:#fff;cursor:pointer
}
.news-btn:hover{ background:var(--pink-700); }
@media (max-width:900px){ .news-btn{ display:none; } }


/* ===== CUSTOM CURSORS (with graceful fallback) ===== */
/* Base cursor for the whole site */
body {
  cursor: url("images/cursor/cursor.png") 16 16, auto;
}

/* Elements that should look grab-able by default */
body.has-custom-cursors .monster,
body.has-custom-cursors .card-3d {
  cursor: url("images/cursor/grab_cursor.png") 24 18, grab;
}

/* While dragging, JS toggles a class on <body> to force grabbing */
body.dragging-cursor {
  cursor: url("images/cursor/grabbing_cursor.png") 24 18, grabbing !important;
}

/* Buttons/links still get a pointer, but we can keep the base cursor */
/* Pointer state on links/buttons with the same base image */
a,
button,
.drawer a {
  cursor: url("images/cursor/cursor.png") 16 16, pointer;
}

/* ===== CLICK “SPLASH” EFFECT ===== */
.click-ripple {
  position: fixed;
  left: 0; top: 0;
  width: 120px; height: 120px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: ripple-appear 1000ms ease-out forwards;
  z-index: 9999;
}

/* Image splash (when splounsh.png is available) */
.click-ripple.img {
  background: center / contain no-repeat;
}

/* Fallback: simple radial splash if image missing */
.click-ripple.basic {
  border-radius: 50%;
  background: radial-gradient(rgba(214, 51, 108, 0.35), rgba(214, 51, 108, 0) 60%);
}

@keyframes ripple-appear {
  0%   { opacity: .75; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.4); }
}