/* Cadeau d'anniversaire de Maman : style « La serre » (plantes vertes et kaki).
   --s est l'unité de base : tout est proportionnel à elle, du petit téléphone au grand écran.
   --c est la largeur de la carte. */
:root {
  --fond-clair: #4f5429;
  --fond-sombre: #2c3016;
  --creme: #f4efdc;
  --s: min(100vw, 62vh);
  --c: min(86vw, calc(var(--s) * .88));
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
}
@supports (height: 1dvh) {
  :root { --s: min(100vw, 62dvh); }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fond-sombre);
}
body {
  position: fixed;
  inset: 0;
  font-family: Fraunces, Georgia, 'Times New Roman', serif;
  color: var(--creme);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  background: radial-gradient(95% 62% at 50% 44%, var(--fond-clair), var(--fond-sombre));
}
#sonde { position: absolute; left: 0; top: 0; width: var(--s); height: 0; visibility: hidden; }

/* ---------- Plantes ---------- */
#decor, #pousses, #pluie { position: absolute; inset: 0; pointer-events: none; }
#decor { z-index: 1; }
#pousses { z-index: 4; }
#pluie { z-index: 30; overflow: hidden; }

.plante {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform;
  pointer-events: none;
}
.plante svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: balance var(--d, 7s) ease-in-out var(--del, 0s) infinite alternate;
  filter: drop-shadow(0 0 calc(var(--s) * .018) rgba(16, 18, 8, .55));
}
@keyframes balance {
  from { transform: rotate(-1.5deg); }
  to { transform: rotate(1.5deg); }
}
.feuille-tombe { position: absolute; left: 0; top: 0; width: calc(var(--s) * .07); height: calc(var(--s) * .09); will-change: transform; }
.feuille-tombe svg { display: block; width: 100%; height: 100%; }

/* ---------- Lueur qui sort de la boîte ---------- */
#lueur {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 1.5);
  margin: calc(var(--s) * -.75) 0 0 calc(var(--s) * -.75);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 243, 201, .95), rgba(232, 216, 154, .34) 55%, rgba(232, 216, 154, 0));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- Boîte (trois calques pour que les plantes sortent entre le fond et l'avant) ---------- */
.calque {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * .86);
  height: calc(var(--s) * .86 * 1.2);
  margin-left: calc(var(--s) * -.43);
  margin-top: calc(var(--s) * -.5);
  display: none;
  pointer-events: none;
  will-change: transform;
}
.calque.montre { display: block; }
.calque svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 90%; will-change: transform; }
#repere { display: block; visibility: hidden; }
#boite-fond { z-index: 3; }
#boite-avant { z-index: 5; }
#couvercle { z-index: 6; }

.anneau {
  fill: none;
  stroke: var(--creme);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: anneau 1.7s ease-out infinite;
}
@keyframes anneau {
  0% { transform: scale(.55); opacity: .95; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- Écrans de texte ---------- */
.ecran {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--haut) + 16px) 16px calc(var(--bas) + 16px);
  visibility: hidden;
  pointer-events: none;
}
.ecran.actif { visibility: visible; }

.apparait {
  opacity: 0;
  transform: translateY(calc(var(--s) * .028));
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.apparait.vu { opacity: 1; transform: none; }
.ecran.sort .apparait { opacity: 0; transform: translateY(calc(var(--s) * -.03)); transition-duration: .45s; }

.titre { font-weight: 500; font-style: italic; text-shadow: 0 2px 18px rgba(20, 22, 8, .55); }
.titre span { display: block; }
.ligne { font-size: calc(var(--s) * .092); line-height: 1.2; }
.maman {
  font-size: calc(var(--s) * .215);
  line-height: 1.12;
  margin-top: calc(var(--s) * .004);
}
.sous {
  margin-top: calc(var(--s) * .05);
  font-size: calc(var(--s) * .056);
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(20, 22, 8, .7);
}
.bouton {
  margin-top: calc(var(--s) * .1);
  min-height: 52px;
  padding: calc(var(--s) * .038) calc(var(--s) * .11);
  border: 0;
  border-radius: 999px;
  background: var(--creme);
  color: var(--fond-sombre);
  font: 700 calc(var(--s) * .058) Fraunces, Georgia, serif;
  box-shadow: 0 calc(var(--s) * .018) calc(var(--s) * .05) rgba(16, 18, 8, .5);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.bouton:active { transform: scale(.97); }
.lien {
  margin-top: calc(var(--s) * .03);
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(28, 30, 14, .62);
  color: var(--creme);
  font: 500 max(15px, calc(var(--s) * .04)) Fraunces, Georgia, serif;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }

.titre-haut {
  font-weight: 500;
  font-style: italic;
  font-size: calc(var(--s) * .094);
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(20, 22, 8, .8);
}
.consigne {
  font-size: calc(var(--s) * .05);
  line-height: 1.3;
  padding: calc(var(--s) * .018) calc(var(--s) * .05);
  border-radius: 999px;
  background: rgba(28, 30, 14, .58);
}

/* Écran du paquet */
#ecran-paquet { justify-content: flex-start; }
#ecran-paquet .titre-haut {
  position: absolute;
  left: 16px;
  right: 16px;
  top: max(calc(var(--haut) + 16px), calc(50% - var(--s) * .72));
}
#ecran-paquet .consigne {
  position: absolute;
  top: min(calc(100% - var(--bas) - var(--s) * .2), calc(50% + var(--s) * .56));
  display: flex;
  align-items: center;
  gap: .4em;
}
.chevrons {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: var(--creme);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: tire 1.5s ease-in-out infinite;
}
@keyframes tire {
  50% { transform: translateY(.22em); }
}
#zone-tirage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  touch-action: none;
  cursor: grab;
}
#ecran-paquet.actif #zone-tirage { pointer-events: auto; }
#ecran-paquet.sort #zone-tirage { pointer-events: none; }

/* ---------- Écran de la carte ---------- */
#ecran-carte {
  gap: calc(var(--s) * .07);
  padding-bottom: calc(var(--bas) + var(--s) * .26);
  touch-action: none;
}
#ecran-carte.actif { pointer-events: auto; cursor: grab; }
#ecran-carte #astuce { transition-delay: .1s; }
#ecran-carte #astuce.parti { opacity: 0; }
#revoir {
  position: absolute;
  bottom: calc(var(--bas) + 14px);
  margin: 0;
}

#carte-scene {
  position: relative;
  flex: none;
  width: var(--c);
  height: calc(var(--c) / 1.586);
  perspective: calc(var(--c) * 3);
}
#carte-pose { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; transform-style: preserve-3d; }
#carte-ombre {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 11, 5, .62), rgba(10, 11, 5, 0));
  will-change: transform;
}
#carte {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.tranche, .face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--c) * .05);
}
.tranche { background: #d3cdaa; }
.tranche:nth-child(1) { transform: translateZ(calc(var(--c) * -.0056)); }
.tranche:nth-child(2) { transform: translateZ(calc(var(--c) * -.0028)); }
.tranche:nth-child(3) { transform: translateZ(0); }
.tranche:nth-child(4) { transform: translateZ(calc(var(--c) * .0028)); }
.tranche:nth-child(5) { transform: translateZ(calc(var(--c) * .0056)); }
.face {
  overflow: hidden;
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.avant {
  transform: translateZ(calc(var(--c) * .0072));
  background: linear-gradient(150deg, #4d522a, #363a1b 72%);
  color: var(--creme);
  box-shadow: 0 calc(var(--c) * .03) calc(var(--c) * .09) rgba(10, 11, 5, .55);
}
.dos {
  transform: rotateY(180deg) translateZ(calc(var(--c) * .0072));
  background: #2f3318;
  color: var(--creme);
  box-shadow: 0 calc(var(--c) * .03) calc(var(--c) * .09) rgba(10, 11, 5, .55);
}
.couche { position: absolute; inset: 0; will-change: transform; }
.couche svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(var(--c) * .007) calc(var(--c) * .012) rgba(16, 18, 8, .58));
}
.carte-pour {
  position: absolute;
  left: 7.2%;
  top: 6.8%;
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--c) * .07);
}
.carte-montant {
  position: absolute;
  left: 6.6%;
  top: 25%;
  font-weight: 700;
  font-size: calc(var(--c) * .225);
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 calc(var(--c) * .005) calc(var(--c) * .02) rgba(20, 22, 8, .45);
}
.carte-fete {
  position: absolute;
  left: 7.4%;
  bottom: 9%;
  font-weight: 500;
  font-size: calc(var(--c) * .034);
  letter-spacing: .07em;
}
.couche-texte { z-index: 2; }
.dos-texte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--c) * .028);
  padding: 0 11%;
  text-align: center;
}
.dos-texte p {
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--c) * .068);
  line-height: 1.28;
}
.dos-texte small {
  font-size: calc(var(--c) * .037);
  letter-spacing: .14em;
}
.reflet {
  position: absolute;
  z-index: 3;
  top: -30%;
  bottom: -30%;
  left: -60%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .05) 68%, transparent);
  pointer-events: none;
  will-change: transform;
}
.ombrage {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: #0f1106;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.sans-js { position: fixed; inset: auto 16px 40%; text-align: center; font-size: 20px; }

/* Activé automatiquement si le téléphone peine : on retire les effets coûteux, le reste ne change pas. */
.leger .plante svg { filter: none; animation: none; }
.leger .couche svg { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .plante svg, .chevrons, .anneau { animation: none; }
}