/* ==========================================================
   Le site des anniversaires — page d'accueil
   ========================================================== */

:root {
  --beige: #F3E8D8;
  --beige-light: #FBF6EE;
  --beige-deep: #E9DAC5;
  --cream: #FFF9F1;
  --cocoa: #4B3428;
  --cocoa-soft: #7A5E4E;
  --terracotta: #D8735A;
  --terracotta-deep: #C25E46;
  --blush: #F0AAA2;
  --sage-deep: #5C8A5E;
  --mustard: #E8B954;

  --font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-script: "Pacifico", "Brush Script MT", cursive;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--beige);
  color: var(--cocoa);
  font-family: var(--font-display);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

/* ---------- Fond beige, grain de papier ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 42%, var(--beige-light) 0%, var(--beige) 55%, var(--beige-deep) 100%);
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .6;
  mix-blend-mode: multiply;
}

/* ---------- Guirlande lumineuse ---------- */

.lights {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 90px;
  z-index: 2;
  pointer-events: none;
}
.lights svg { display: block; overflow: visible; }
.lights__wire { fill: none; stroke: #6B5444; stroke-width: 1.4; stroke-opacity: .5; }
.bulb__cap { fill: #85705F; }
.bulb__glass { fill: #FFE6A3; }
.bulb__glow { animation: twinkle var(--t) ease-in-out var(--o) infinite alternate; }
@keyframes twinkle { from { opacity: 1; } to { opacity: .4; } }

/* ---------- Confettis posés sur les côtés ---------- */

.floaties {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.floaty {
  position: absolute;
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  background: var(--c);
  opacity: .8;
  rotate: var(--rot);
  animation: floaty var(--dur) ease-in-out var(--delay) infinite alternate;
}
@keyframes floaty {
  from { translate: 0 -7px; }
  to { translate: 0 7px; }
}

/* ---------- La page ---------- */

.page {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.3rem, 1.2vh, .9rem);
  gap: clamp(.3rem, 1.2svh, .9rem);
  padding: clamp(56px, 8vh, 96px) 16px max(40px, env(safe-area-inset-bottom));
  padding-top: clamp(56px, 8svh, 96px);
  text-align: center;
}

/* ---------- Le gâteau qui louche ---------- */

.buddy {
  flex: none;
  width: clamp(160px, min(56vw, 28vh), 250px);
  width: clamp(160px, min(56vw, 28svh), 250px);
  aspect-ratio: 320 / 360;
}
.buddy__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: buddy-in .9s var(--spring) both;
}
@keyframes buddy-in {
  from { opacity: 0; translate: 0 18px; scale: .85; }
}

.cheek { fill: #EC8F87; opacity: .4; transition: opacity .3s ease; }

.brow {
  fill: none;
  stroke: #3B2A22;
  stroke-width: 3;
  stroke-linecap: round;
  transition: translate .3s var(--spring);
}

.pupil { transition: transform .14s ease-out; }

/* --lift (posé par le script) relève la paupière quand il regarde vers le haut */
.lid {
  translate: 0 var(--lift, 0px);
  transform: translateY(1px);
  transition: transform .28s var(--spring), translate .14s ease-out;
}

.mouth { transition: opacity .2s ease; }
.mouth--hmm { fill: none; stroke: #3B2A22; stroke-width: 2.6; stroke-linecap: round; }
.mouth--happy { opacity: 0; }

/* content : yeux grands ouverts et sourire */
.buddy.is-happy .lid { transform: translateY(-17px); }
.buddy.is-happy .brow { translate: 0 -4px; }
.buddy.is-happy .brow--left { translate: 0 -7px; }
.buddy.is-happy .mouth--hmm { opacity: 0; }
.buddy.is-happy .mouth--happy { opacity: 1; }
.buddy.is-happy .cheek { opacity: .7; }
.buddy.is-happy { animation: hop .5s var(--spring); }
@keyframes hop { 40% { translate: 0 -8px; } }

/* clignement */
.buddy.is-blinking .lid { transform: translateY(22px); transition-duration: .07s; }

.flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flicker 1.1s ease-in-out infinite alternate;
}
@keyframes flicker {
  0% { transform: scale(1, 1) skewX(0deg); }
  30% { transform: scale(.94, 1.07) skewX(2.5deg); }
  60% { transform: scale(1.04, .95) skewX(-2deg); }
  100% { transform: scale(.97, 1.04) skewX(1.5deg); }
}
.flame-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: glow 2.2s ease-in-out infinite alternate;
}
@keyframes glow {
  from { transform: scale(.9); }
  to { transform: scale(1.12); }
}

/* ---------- Les textes ---------- */

.title {
  margin: .2rem 0 0;
  font-weight: 400;
  animation: rise .7s ease .15s both;
}
.title__lead {
  display: block;
  font: 600 clamp(1.25rem, 1rem + 1.6vw, 2rem) / 1.2 var(--font-display);
  color: var(--cocoa);
}
.title__big {
  display: block;
  padding: 0 .3em;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.4rem, min(1.2rem + 7vw, 10vh), 5.2rem);
  font-size: clamp(2.4rem, min(1.2rem + 7vw, 10svh), 5.2rem);
  line-height: 1.25;
  color: var(--terracotta-deep);
  text-shadow: .04em .045em 0 var(--blush);
}

.aside {
  margin: -.3rem 0 .2rem;
  font: 700 clamp(1.6rem, 1.3rem + 1.8vw, 2.4rem) / 1 var(--font-hand);
  color: var(--cocoa-soft);
  rotate: -2.5deg;
  animation: rise .7s ease .35s both;
}

.pitch {
  max-width: 30ch;
  margin: .5rem 0 .1rem;
  font: 500 clamp(1.05rem, .95rem + .5vw, 1.25rem) / 1.45 var(--font-display);
  color: var(--cocoa);
  text-wrap: balance;
  animation: rise .7s ease .5s both;
}

@keyframes rise {
  from { opacity: 0; translate: 0 10px; }
}

/* ---------- Le contact ---------- */

.contact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  max-width: 100%;
  margin-top: .35rem;
  animation: rise .7s ease .65s both;
}

.mail {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  max-width: 100%;
  padding: .85em 1.4em;
  border-radius: 999px;
  background: var(--terracotta-deep);
  box-shadow: 0 4px 0 #9E4733, 0 14px 28px -10px rgba(194, 94, 70, .55);
  color: var(--cream);
  font: 600 clamp(1.02rem, .9rem + .7vw, 1.3rem) / 1.1 var(--font-display);
  text-decoration: none;
  transition: translate .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.mail:hover {
  background: #CF6A51;
  translate: 0 -2px;
  box-shadow: 0 6px 0 #9E4733, 0 18px 30px -10px rgba(194, 94, 70, .6);
}
.mail:active {
  translate: 0 3px;
  box-shadow: 0 1px 0 #9E4733, 0 8px 18px -10px rgba(194, 94, 70, .5);
}
.mail:focus-visible { outline: 3px solid var(--mustard); outline-offset: 4px; }
.mail__icon { flex: none; width: 1.25em; height: 1.25em; }
.mail__address { overflow-wrap: anywhere; }

.copy {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .55em 1em;
  border: 1.5px solid rgba(75, 52, 40, .25);
  border-radius: 999px;
  background: rgba(255, 249, 241, .6);
  font: 500 .95rem / 1 var(--font-display);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.copy:hover { background: var(--cream); border-color: rgba(75, 52, 40, .4); }
.copy:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.copy__icon { width: 1.1em; height: 1.1em; }

.toast {
  position: absolute;
  top: calc(100% + .45rem);
  left: 50%;
  margin: 0;
  white-space: nowrap;
  font: 700 1.35rem / 1 var(--font-hand);
  color: var(--sage-deep);
  opacity: 0;
  translate: -50% 4px;
  transition: opacity .25s ease, translate .25s ease;
}
.toast.is-visible { opacity: 1; translate: -50% 0; }

/* ---------- Confettis ---------- */

.fx {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Moins d'animations si l'appareil le demande ---------- */

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