/* Révision du 4 octobre 2026 : en-têtes de cache revus côté serveur. */
/* ═══ Écran d'accueil : l'enveloppe ═══════════════════════════════════════
   Une enveloppe terracotta cachetée de cire ; au clic, le cachet saute, le
   rabat bascule, la carte sort de la poche, puis l'écran s'efface sur
   l'invitation. Tout est en CSS, le script ne fait que poser les classes. */

.env-verrou,
.env-verrou body { overflow: hidden; }

.env-ecran {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, #FDF6EC 0%, #F6EADB 55%, #EBDAC6 100%);
  transition: opacity .9s ease, transform .9s cubic-bezier(.4, 0, .2, 1);
}

/* ── L'angle fleuri, repris du compte à rebours ── */
.env-coin {
  position: absolute;
  top: 0;
  width: clamp(76px, 14vw, 128px);
  height: auto;
  pointer-events: none;
}
.env-coin--g { left: 0; }

/* ── La pluie de pétales ──
   Des coeurs pâles qui tombent en se balançant. Ils restent derrière la scène
   et sous 30 % d'opacité : un fond qui vit, pas un spectacle. */
.env-pluie { position: absolute; inset: 0; pointer-events: none; }
.env-petale {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: calc(16px * var(--taille));
  height: calc(16px * var(--taille));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12C19 16.4 12 21 12 21z' fill='%23C65A3A'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .28;
  animation: env-chute var(--duree) linear var(--retard) infinite;
}
@keyframes env-chute {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(18px, 28vh) rotate(40deg); }
  50%  { transform: translate(-14px, 56vh) rotate(-20deg); }
  75%  { transform: translate(16px, 84vh) rotate(30deg); }
  100% { transform: translate(-6px, 112vh) rotate(-10deg); }
}

/* ── La scène ── */
.env-scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
}

.env-invites {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
}

.env-noms {
  margin: 0 0 clamp(22px, 5vh, 40px);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(40px, 11vw, 58px);
  line-height: 1.1;
  color: var(--terracotta-ink);
}
.env-noms span { font-size: .7em; color: var(--terracotta); }

.env-date {
  margin: clamp(22px, 4.5vh, 36px) 0 18px;
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

.env-bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border: 1px solid var(--terracotta-btn);
  border-radius: 999px;
  background: var(--terracotta-btn);
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(126, 58, 34, .8);
  transition: background-color .2s, transform .2s, box-shadow .2s, opacity .4s;
}
.env-bouton:hover { background: var(--roux); transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(126, 58, 34, .85); }
.env-bouton:active { transform: translateY(0); }
.env-bouton:focus-visible { outline: 2px solid var(--terracotta-btn); outline-offset: 4px; border-radius: 999px; }

/* ── L'enveloppe ── */
.env-flotte { animation: env-flotte 4.5s ease-in-out infinite; }
@keyframes env-flotte {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-7px) rotate(.6deg); }
}

.env {
  position: relative;
  width: min(340px, 82vw);
  aspect-ratio: 3 / 2;
  perspective: 900px;
  cursor: pointer;
  filter: drop-shadow(0 22px 26px rgba(91, 59, 46, .32));
  transition: transform 1s cubic-bezier(.4, 0, .2, 1);
}

/* L'intérieur, visible une fois le rabat ouvert : une doublure crème à fin
   motif de losanges terracotta, comme les enveloppes de faire-part. */
.env-dos {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, rgba(198, 90, 58, .13) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(198, 90, 58, .13) 0 1px, transparent 1px 9px),
    #F7E8D8;
  box-shadow: inset 0 0 0 6px #A4472B;
}

.env-carte {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 7%;
  height: 86%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding-top: 7%;
  background: var(--cream);
  border: 1px solid rgba(198, 90, 58, .35);
  box-shadow: inset 0 0 0 5px var(--cream), inset 0 0 0 6px rgba(198, 90, 58, .3);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.env-carte img { width: 34%; height: auto; }
.env-carte-texte { font-family: var(--font-script); font-size: clamp(18px, 5vw, 24px); color: var(--terracotta-ink); line-height: 1.1; }
.env-carte-date { font-family: var(--font-heading); font-size: 11px; letter-spacing: .26em; color: var(--ink-soft); }

.env-poche {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.env-poche-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  z-index: 4;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(253, 246, 236, .78);
  transition: opacity .4s;
}

/* Le rabat bascule autour de son bord haut. Deux faces dos à dos : le
   terracotta dehors, la doublure dedans. Son plan passe derrière la carte à
   mi-course — d'où le z-index qui ne change qu'après un délai. */
.env-rabat {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  z-index: 5;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.45, 0, .25, 1), z-index 0s linear .45s;
}

.env-rabat-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.env-rabat-face--dessus {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #B9583A 0%, #A9492C 100%);
}
.env-rabat-face--dessus::after {
  /* Le liseré du pli, à peine plus clair. */
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 97%, 97.5% 1.2%, 2.5% 1.2%, 50% 97%, 50% 100%);
  background: rgba(253, 246, 236, .2);
}
.env-rabat-face--dessous {
  /* Triangle inversé puis retourné sur lui-même : une fois le rabat basculé,
     la doublure se retrouve exactement à la place de la face terracotta. */
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  transform: rotateX(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(198, 90, 58, .13) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(198, 90, 58, .13) 0 1px, transparent 1px 9px),
    #F7E8D8;
}

.env-cachet {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 6;
  width: 24%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 3px rgba(60, 22, 10, .45));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease;
}
.env-cachet-texte {
  font-family: var(--font-script);
  font-size: 25px;
  fill: rgba(255, 228, 210, .82);
}

/* ═══ L'ouverture ═══ */
.env-ecran.ouverture .env-flotte { animation-play-state: paused; }
.env-ecran.ouverture .env { transform: translateY(18%); cursor: default; }
.env-invites, .env-noms { transition: opacity .6s ease .5s; }
/* Le rabat ouvert et la carte montent jusqu'aux prénoms : ils s'effacent pour
   leur laisser la place. */
.env-ecran.ouverture .env-invites,
.env-ecran.ouverture .env-noms { opacity: 0; }
.env-ecran.ouverture .env-bouton,
.env-ecran.ouverture .env-date,
.env-ecran.ouverture .env-poche-date { opacity: 0; pointer-events: none; }

/* 1. le cachet se soulève et disparaît */
.env-ecran.ouverture .env-cachet { transform: translate(-50%, -50%) scale(1.25) rotate(-8deg); opacity: 0; }

/* 2. le rabat bascule */
.env-ecran.ouverture .env-rabat {
  transform: rotateX(180deg);
  z-index: 2;
  transition-delay: .3s, .75s;
}

/* 3. la carte sort de la poche */
.env-ecran.ouverture .env-carte { transform: translateY(-62%); transition-delay: 1.05s; }

/* 4. l'écran s'efface sur l'invitation */
.env-ecran.depart { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* ── Écrans bas : on resserre pour que tout tienne sans défiler ── */
@media (max-height: 640px) {
  .env-noms { font-size: 38px; margin-bottom: 18px; }
  .env { width: min(280px, 76vw); }
  .env-date { margin: 18px 0 12px; }
}

/* ── Mouvement réduit : pas de chute, pas de flottement, pas de bascule ── */
@media (prefers-reduced-motion: reduce) {
  .env-petale, .env-flotte { animation: none; }
  .env-petale { display: none; }
  .env, .env-carte, .env-rabat, .env-cachet { transition: none; }
  .env-ecran { transition: opacity .3s ease; }
  .env-ecran.depart { transform: none; }
}