/* L'enveloppe en 3D, commune aux deux pistes (13/09, demande de Fethi : « une lettre en 3D »).
   Technique de la carte Kamelia en CSS 3D (memoire objet-papier-3d-css) : un imprime reste net,
   et la 3D ne coute presque rien. Les pieges repris : epaisseur entre couches (jamais deux faces
   au meme plan), scene qui ne peut pas elargir la page, touch-action pan-y.
   Chaque piste regle les couleurs par les variables --env-*. */
.enveloppe-scene {
  --l: clamp(280px, 30vw, 440px);
  --h: calc(var(--l) / 2);
  position: relative; width: 100%; height: calc(var(--h) * 2.15);
  perspective: 1400px; touch-action: pan-y; overflow: clip;
  user-select: none; -webkit-user-select: none; cursor: grab;
}
.enveloppe-scene.glisse { cursor: grabbing; }
.enveloppe {
  position: absolute; left: 50%; bottom: 14%; width: var(--l); height: var(--h); margin-left: calc(var(--l) / -2);
  transform-style: preserve-3d; font-size: calc(var(--l) / 26);
  transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -16deg));
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.glisse .enveloppe { transition: none; }
.env-flotte {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: env-flotte 7s ease-in-out infinite; animation-play-state: var(--jeu-anim, running);
}
@keyframes env-flotte {
  0%, 100% { transform: translateY(0) rotateZ(-1deg); }
  50% { transform: translateY(-10px) rotateZ(1deg); }
}
.env-ombre {
  position: absolute; left: 50%; bottom: 4%; width: calc(var(--l) * 0.9); height: calc(var(--h) * 0.22);
  margin-left: calc(var(--l) * -0.45); border-radius: 50%;
  background: radial-gradient(closest-side, var(--env-ombre, rgba(0, 0, 0, 0.45)), transparent);
  animation: env-ombre 7s ease-in-out infinite; animation-play-state: var(--jeu-anim, running);
}
@keyframes env-ombre { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.75; } }

/* Les couches, de l'arriere vers l'avant, chacune a 1 px de la precedente */
.env-couche { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px; }
.env-fond { transform: translateZ(0); background: var(--env-interieur); }
.env-poche {
  transform: translateZ(3px);
  background: linear-gradient(160deg, var(--env-papier-clair), var(--env-papier) 60%);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
/* Les deux plis diagonaux de la poche, dessines en fines lignes */
.env-plis { transform: translateZ(3.5px); pointer-events: none; }
.env-plis svg { width: 100%; height: 100%; display: block; }
.env-plis path { fill: none; stroke: var(--env-pli); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* La lettre : elle sort par le haut. Deux faces pour qu'on voie son dos quand on tourne. */
.env-lettre-bloc {
  position: absolute; left: 4%; right: 4%; bottom: 5%; height: 92%;
  transform-style: preserve-3d;
  transform: translateZ(1.5px) translateY(var(--sortie, -86%));
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.45s;
}
.env-lettre, .env-lettre-dos {
  position: absolute; inset: 0; background: var(--env-lettre); border-radius: 2px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.env-lettre-dos { transform: rotateY(180deg); }
.env-lettre { padding: 0.9em 1.1em; color: var(--env-encre); display: grid; align-content: start; gap: 0.25em; }
.env-surtitre { margin: 0; font-size: 0.78em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--env-accent-encre); }
.env-ville { margin: 0; font: var(--env-titre-poids, 400) 1.9em/1.05 var(--env-titre); text-transform: var(--env-titre-casse, none); }
.env-heure { margin: 0; font-size: 1.05em; font-weight: 700; font-variant-numeric: tabular-nums; }
.env-detail { margin: 0; font-size: 0.82em; opacity: 0.8; }

/* Le rabat du haut : il bascule autour du bord superieur, et recule derriere la lettre une fois ouvert */
.env-rabat {
  position: absolute; left: 0; right: 0; top: 0; height: 57%;
  transform-style: preserve-3d; transform-origin: 50% 0;
  transform: translateZ(var(--rabat-z, 0.5px)) rotateX(var(--rabat, 180deg));
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.env-rabat-ext, .env-rabat-int { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env-rabat-ext { background: linear-gradient(180deg, var(--env-papier-clair), var(--env-papier)); }
.env-rabat-int { transform: rotateY(180deg); background: var(--env-interieur-clair); }

/* La face adresse, au dos de tout le reste */
.env-devant {
  transform: rotateY(180deg) translateZ(1px);
  background: linear-gradient(200deg, var(--env-papier-clair), var(--env-papier));
  color: var(--env-encre); padding: 1em 1.2em; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto;
}
.env-expediteur { margin: 0; font-size: 0.72em; line-height: 1.35; opacity: 0.85; }
.env-tampon {
  grid-column: 2; grid-row: 1 / 3; align-self: start; margin: 0; padding: 0.35em 0.6em;
  border: 0.18em double var(--env-tampon); color: var(--env-tampon); transform: rotate(-8deg);
  font: 900 1.05em/1 var(--env-titre); letter-spacing: 0.08em; text-transform: uppercase;
}
.env-destinataire { grid-column: 1 / -1; align-self: center; justify-self: end; margin: 0; text-align: right; }
.env-destinataire small { display: block; font-size: 0.72em; opacity: 0.8; }
.env-destinataire b { font: var(--env-titre-poids, 400) 1.6em/1.05 var(--env-titre); text-transform: var(--env-titre-casse, none); }
.env-code { grid-column: 1; height: 1.6em; width: 9em; background: repeating-linear-gradient(90deg, var(--env-encre) 0 2px, transparent 2px 4px, var(--env-encre) 4px 5px, transparent 5px 8px); opacity: 0.75; }

/* Seule la face tournee vers le visiteur existe ; l'autre est retiree (commun/enveloppe.js) */
.enveloppe-scene:not(.retournee) .env-devant { visibility: hidden; }
.enveloppe-scene.retournee .env-lettre { visibility: hidden; }
.env-devant { background: linear-gradient(200deg, var(--env-papier-clair), var(--env-devant, var(--env-papier))); }

/* Etats : sans JavaScript ou mouvement coupe, l'enveloppe reste OUVERTE (la lettre se lit) */
.enveloppe-scene.fermee { --rabat: 0deg; --rabat-z: 4px; --sortie: 0%; }
.enveloppe-scene.fermee .env-lettre-bloc { transition-delay: 0s; }
.enveloppe-scene.fermee .env-rabat { transition-delay: 0.55s; }

.env-commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 12px; }
.env-commandes button {
  font: 600 0.875rem/1 inherit; font-family: inherit; padding: 9px 14px; border-radius: 99px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid currentColor; opacity: 0.85;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.env-commandes button:active { transform: scale(0.96); }
@media (hover: hover) { .env-commandes button:hover { opacity: 1; } }

@media (max-width: 760px) {
  .enveloppe-scene { --l: min(84vw, 340px); }
}