/* Pack réaliste (js/pack-realiste.js), chargé seulement quand il est activé
   dans /admin. Sachet en aluminium : bords sertis, coussin d'air sur les
   côtés, impression, perforation et encoches à la ligne de déchirure (15 %
   de la hauteur, la même valeur que LIGNE dans le script). Tailles en cqi
   (% de la largeur du sachet). */

/* ---------- le pack de la page : on garde sa place et son flottement ---------- */
.eg-pack-realiste .pack {
  width: 236px;
  aspect-ratio: 100 / 150;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  overflow: visible;
  display: block;
}
.eg-pack-realiste .pack:hover {
  border: 0;
}
.eg-pack-realiste .pack:focus-visible {
  outline: 2px solid #e8843a;
  outline-offset: 6px;
}
.egp-sachet {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: inline-size;
  filter: drop-shadow(0 22px 26px rgb(0 0 0 / 0.55)) drop-shadow(0 0 40px rgb(232 132 58 / 0.18));
}

/* ---------- le sachet ---------- */
.egp-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #e7e6e3;
  text-align: center;
  background:
    /* coussin d'air : les côtés plongent dans l'ombre, un liseré brille juste avant */
    linear-gradient(90deg, rgb(0 0 0 / 0.6) 0, rgb(0 0 0 / 0) 6%, rgb(255 255 255 / 0.07) 11%, transparent 24% 76%, rgb(255 255 255 / 0.06) 89%, rgb(0 0 0 / 0) 94%, rgb(0 0 0 / 0.6) 100%),
    /* bande imprimée */
    linear-gradient(122deg, transparent 0 56%, #e8843a 56% 62.5%, #a9561c 62.5% 64%, transparent 64%),
    /* aluminium sombre */
    radial-gradient(120% 80% at 30% 28%, #3a3f4b, #1b1d23 58%, #0f1013);
}
/* bandes serties, striées par la presse */
.egp-sertissage {
  position: absolute;
  left: 0;
  right: 0;
  height: 6.5%;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.16) 0 0.55cqi, rgb(0 0 0 / 0.28) 0.55cqi 1.35cqi),
    linear-gradient(#4a4f5b, #23262d);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.egp-sertissage-haut {
  top: 0;
}
.egp-sertissage-bas {
  bottom: 0;
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.5), inset 0 -1px 0 rgb(255 255 255 / 0.12);
}
.egp-ici {
  position: absolute;
  top: 8.3%;
  left: 8%;
  font: 600 3.3cqi/1 var(--font-mono, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1.4cqi;
}
.egp-ciseaux {
  width: 3.8cqi;
  height: 3.8cqi;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.egp-perfo {
  position: absolute;
  top: 15%;
  left: 5%;
  right: 5%;
  border-top: 1.5px dashed rgb(255 255 255 / 0.38);
}
.egp-impression {
  position: absolute;
  inset: 21% 8% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2cqi;
}
/* éventail de cartes imprimé */
.egp-eventail {
  position: relative;
  width: 44cqi;
  aspect-ratio: 1.15;
}
.egp-eventail span {
  position: absolute;
  left: 30%;
  top: 4%;
  width: 40%;
  aspect-ratio: 5 / 7;
  border-radius: 1.4cqi;
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--c) 85%, #fff), color-mix(in oklab, var(--c) 70%, #000));
  border: 0.6cqi solid rgb(255 255 255 / 0.55);
  box-shadow: 0 1.5cqi 3cqi rgb(0 0 0 / 0.5);
  transform-origin: 50% 110%;
}
.egp-eventail span:nth-child(1) {
  transform: rotate(-19deg);
}
.egp-eventail span:nth-child(2) {
  transform: rotate(19deg);
}
.egp-eventail span:nth-child(3) {
  transform: translateY(-4%);
}
.egp-logo svg {
  display: block;
  width: 15cqi;
  height: 15cqi;
}
.egp-titre {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 9.2cqi;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 0.6cqi 1.6cqi rgb(0 0 0 / 0.6);
}
.egp-titre b {
  color: #e8843a;
  font-weight: 800;
}
.egp-serie {
  font: 600 3.8cqi/1 var(--font-mono, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9bcc3;
  padding: 1.3cqi 2.6cqi;
  border: 1px solid rgb(255 255 255 / 0.22);
}
/* plis de l'aluminium et reflet qui suit la souris */
.egp-plis {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(172deg, transparent 38%, rgb(255 255 255 / 0.06) 46%, transparent 53%),
    repeating-linear-gradient(98deg, transparent 0 11cqi, rgb(255 255 255 / 0.035) 11cqi 11.7cqi, transparent 11.7cqi 23cqi),
    repeating-linear-gradient(8deg, transparent 0 17cqi, rgb(0 0 0 / 0.08) 17cqi 18cqi, transparent 18cqi 31cqi);
}
.egp-reflet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(55% 38% at calc(var(--egp-mx, 0.32) * 100%) calc(var(--egp-my, 0.26) * 100%), rgb(255 255 255 / 0.24), transparent 70%),
    linear-gradient(115deg, transparent 36%, rgb(255 255 255 / 0.09) 45%, transparent 54%);
}

/* ---------- la scène de déchirure ---------- */
.egp-scene {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.6rem;
  padding: 1rem;
  background: rgb(4 4 6 / 0.88);
  backdrop-filter: blur(4px);
  animation: egp-voile 260ms ease both;
  transition: opacity 300ms ease;
}
.egp-scene.egp-fin {
  opacity: 0;
  pointer-events: none;
}
@keyframes egp-voile {
  from {
    opacity: 0;
  }
}
.egp-paquet {
  position: relative;
  width: min(66vw, 320px);
  aspect-ratio: 100 / 150;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  outline: none;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.65));
  animation: egp-arrivee 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
/* pas de rectangle gris de Safari au toucher */
.eg-pack-realiste .pack,
.egp-paquet {
  -webkit-tap-highlight-color: transparent;
}
.egp-paquet:focus-visible {
  outline: 2px solid #e8843a;
  outline-offset: 8px;
}
@keyframes egp-arrivee {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.75) rotate(-4deg);
  }
}
.egp-morceau {
  position: absolute;
  inset: 0;
  container-type: inline-size;
}
.egp-corps {
  z-index: 2;
}
.egp-languette-fixe {
  z-index: 5;
}
.egp-languette {
  z-index: 6;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.45));
}
/* bord arraché : l'intérieur argenté de l'aluminium apparaît */
.egp-bord {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.egp-bord polyline {
  fill: none;
  stroke: #e3e7ef;
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgb(255 230 190 / 0.9));
}
/* la lumière s'échappe par l'ouverture */
.egp-lueur {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 11.5%;
  height: 8%;
  width: calc(var(--egp-p, 0) * 100%);
  background: radial-gradient(closest-side, rgb(255 244 220 / 0.95), rgb(232 132 58 / 0.55) 55%, transparent);
  filter: blur(4px);
  opacity: calc(0.25 + var(--egp-p, 0) * 0.75);
  pointer-events: none;
}
/* le pack frémit un instant avant que la languette ne cède */
.egp-fremit {
  animation:
    egp-arrivee 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both,
    egp-fremit 380ms 520ms ease-in-out both;
}
@keyframes egp-fremit {
  20% { transform: rotate(-1.4deg) translateX(-2px); }
  40% { transform: rotate(1.2deg) translateX(2px); }
  60% { transform: rotate(-0.8deg) translateX(-1px); }
  80% { transform: rotate(0.5deg); }
}
/* les cartes, cachées dans le sachet sous la ligne de déchirure */
.egp-cartes {
  position: absolute;
  z-index: 1;
  left: 10%;
  right: 10%;
  top: 17%;
  aspect-ratio: 5 / 7;
}
.egp-cartes > span {
  position: absolute;
  inset: 0;
  border-radius: 0.35rem;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 12px), #16171a;
  border: 1px solid rgb(232 132 58 / 0.45);
  box-shadow: 0 -6px 18px rgb(0 0 0 / 0.5);
  transition: transform 620ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.egp-cartes .carte-dos {
  border-radius: inherit;
}
/* la languette arrachée s'envole */
.egp-arrachee .egp-languette {
  transition:
    transform 680ms cubic-bezier(0.3, 0.7, 0.2, 1),
    opacity 680ms ease-in;
  transform: translate(-28%, -150%) rotate(-62deg) !important;
  opacity: 0;
}
.egp-arrachee .egp-bord polyline {
  stroke: #fff;
}
/* puis les cartes sortent par le haut */
.egp-sortie .egp-cartes > span:nth-child(1) {
  transform: translateY(-34%) rotate(-7deg);
}
.egp-sortie .egp-cartes > span:nth-child(2) {
  transform: translateY(-40%) rotate(6deg);
  transition-delay: 60ms;
}
.egp-sortie .egp-cartes > span:nth-child(3) {
  transform: translateY(-48%);
  transition-delay: 120ms;
}
.egp-sortie .egp-lueur {
  width: 100%;
  opacity: 1;
  height: 16%;
  top: 7%;
  transition: all 400ms ease;
}
.egp-aide {
  margin: 0;
  max-width: 22rem;
  text-align: center;
  color: #b9bcc3;
  font-size: 0.95rem;
  line-height: 1.5;
}
.egp-scene:has(.egp-arrachee) .egp-aide {
  opacity: 0;
  transition: opacity 250ms;
}