/* =========================================================
   Mail club : enveloppe verte à liserés dorés + sceau de cire
   Chorégraphie (≈ 2,4 s) :
   0,00 s  le sceau se soulève et s'efface
   0,15 s  le rabat bascule en 3D (il s'assombrit en passant la tranche)
   0,70 s  la lettre glisse tout droit hors de la poche, puis se pose
   0,85 s+ carte, recette, stickers suivent, un par un, en bouquet
   Fermeture = l'inverse (≈ 1,6 s) :
   0,00 s+ les éléments rentrent dans la poche, stickers d'abord, lettre en dernier
   0,60 s  le contenu s'estompe pendant que le rabat se rabat
   1,15 s  le sceau se recolle
   Le contenu .is-secret reste flouté (surprise du mois).
   ========================================================= */

.envelope-stage{
  --env-w:min(440px,82vw);
  position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:calc(var(--env-w) * .5) 0 34px;overflow-x:clip;
}
.envelope-stage::before{content:"";position:absolute;left:50%;bottom:30px;width:calc(var(--env-w) * 1.7);aspect-ratio:1.7;translate:-50% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,207,91,.18),rgba(38,96,72,.12) 55%,transparent);opacity:.45;transition:opacity 1.2s ease}
.envelope-stage:has(.envelope.open)::before{opacity:1}

.envelope{position:relative;width:var(--env-w);aspect-ratio:1.55;cursor:pointer;perspective:1100px;perspective-origin:50% 0;
  filter:drop-shadow(0 26px 34px rgba(4,16,10,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.3));
  transition:transform .6s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent;outline:none}
.envelope:not(.open):hover{transform:translateY(-5px) rotate(-1deg)}
.envelope:focus-visible{outline:2px dashed #f2cf5b;outline-offset:10px;border-radius:12px}

/* neutralise les styles globaux des icônes svg du site */
.envelope svg{stroke:none;fill:none;max-width:none}
.envelope .env-seal{height:auto}

/* dos de l'enveloppe (visible au-dessus de la poche) */
.env-back{position:absolute;inset:0;z-index:0;border-radius:3px;background:linear-gradient(180deg,#1d4c37,#1a4532 70%)}

/* contenu : invisible tant que l'enveloppe est fermée */
.env-contents{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .28s ease .6s}
.envelope.open .env-contents{opacity:1;pointer-events:auto;transition:opacity 0s linear .45s}
.env-contents::before{content:"";position:absolute;left:50%;top:0;width:130%;aspect-ratio:1.5;translate:-50% -45%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,228,150,.3),transparent 70%);opacity:0;transition:opacity .4s ease}
.envelope.open .env-contents::before{opacity:1;transition:opacity 1.4s ease .8s}

.env-piece{position:absolute;left:50%;bottom:4%;padding:0;border:0;cursor:zoom-in;border-radius:6px;overflow:hidden;background:#f6efe2;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  transform:translate(calc(-50% + var(--cx,0%)),0) rotate(var(--cr,0deg));
  transition:transform .5s cubic-bezier(.5,0,.35,1) var(--cd,0s),box-shadow .3s ease}
.env-piece img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}

/* Sortie : on tire l'élément tout droit (un peu plus haut que sa place),
   puis on le pose doucement en éventail. Pas de rebond. */
@keyframes pieceOut{
  0%  {transform:translate(calc(-50% + var(--cx,0%)),0) rotate(var(--cr,0deg));animation-timing-function:cubic-bezier(.45,0,.2,1)}
  58% {transform:translate(calc(-50% + var(--cx,0%) + (var(--x) - var(--cx,0%)) * .25),calc(var(--y) - 14%)) rotate(calc(var(--r) * .2));animation-timing-function:cubic-bezier(.3,0,.15,1)}
  100%{transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r))}
}
.envelope.open .env-piece{animation:pieceOut 1.15s var(--d) both}
/* une fois posé : position figée, le survol devient possible */
.envelope.open.settled .env-piece{animation:none;transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r));
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.envelope.open.settled .env-piece:hover,.envelope.open.settled .env-piece:focus-visible{
  transform:translate(calc(-50% + var(--x)),calc(var(--y) - 6%)) rotate(calc(var(--r) * .7)) scale(1.04);
  box-shadow:0 20px 32px -10px rgba(0,0,0,.6),0 0 0 2px rgba(246,220,140,.65);z-index:9}

/* bouquet : lettre au fond, carte et recette de chaque côté, stickers devant.
   Le bas de chaque élément reste glissé dans la poche. */
.ep-lettre{--cd:.24s}.ep-fiche{--cd:.2s}.ep-carte{--cd:.15s}.ep-marque{--cd:.12s}.ep-recette{--cd:.08s}.ep-st1{--cd:.04s}.ep-st2{--cd:0s}
.ep-lettre {width:42%;aspect-ratio:1400/1980;z-index:1;--cr:0deg;  --x:-1%;  --y:-56%;--r:-2deg; --d:.7s}
.ep-marque {width:15%;aspect-ratio:533/1600;z-index:2;--cx:18%;--cr:2deg;--x:105%;--y:-62%;--r:5deg;--d:.8s}
.ep-marque img{object-fit:contain;background:#fff}
.ep-carte  {width:30%;aspect-ratio:900/1347; z-index:2;--cx:-30%;--cr:-2deg;--x:-100%;--y:-78%;--r:-12deg;--d:.86s}
.ep-recette{width:31%;aspect-ratio:1200/1703;z-index:1;--cx:30%;--cr:2deg; --x:96%;  --y:-73%;--r:10deg; --d:1s}
.ep-st1    {width:24%;aspect-ratio:800/928;  z-index:3;--cx:-30%;--cr:-3deg;--x:-96%;--y:-96%;--r:-9deg; --d:1.14s}
.ep-st2    {width:28%;aspect-ratio:800/648;  z-index:3;--cx:30%;--cr:3deg; --x:88%;  --y:-112%;--r:8deg;  --d:1.26s}
/* fiche recette : dépasse derrière la recette, côté droit */
.ep-fiche  {width:30%;aspect-ratio:1400/1980;z-index:0;--cx:15%;--cr:1deg;--x:58%;--y:-108%;--r:7deg;--d:.78s}
/* stickers sans fond : seulement le dessin découpé, avec une ombre portée */
.env-piece.ep-sticker{background:none;box-shadow:none;border-radius:0;overflow:visible}
.ep-sticker img{object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.ep-sticker::after{display:none}
.envelope.open.settled .env-piece.ep-sticker:hover{box-shadow:none}
.env-piece.ep-sticker.is-secret img{filter:blur(7px) drop-shadow(0 8px 10px rgba(0,0,0,.45))}

/* contenu secret : flouté, avec un léger voile givré */
.env-piece.is-secret img{filter:blur(7px) saturate(1.15);transform:scale(1.15)}
.env-piece.is-secret::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%,rgba(255,255,255,.1))}
.ep-tag{position:absolute;left:50%;top:26%;translate:-50% -50%;z-index:2;white-space:nowrap;padding:6px 12px;border-radius:999px;
  font-size:clamp(10px,2.6vw,12.5px);font-weight:800;letter-spacing:.04em;color:#3b2a06;
  background:linear-gradient(135deg,#fbe6a2,#e0b450 55%,#f6dc8c);box-shadow:0 6px 14px -4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.envelope.open .ep-tag{opacity:1;transform:none;transition:opacity .5s ease 2.1s,transform .6s cubic-bezier(.22,1,.36,1) 2.1s}
.envelope.open.settled .ep-tag{transition:none}

/* poche avant */
.env-front{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.env-front .fold{fill:none;stroke:rgba(0,0,0,.28);stroke-width:1px;vector-effect:non-scaling-stroke}
.env-front .gold,.env-flap .gold{fill:none;stroke:url(#envGold);stroke-width:2.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}

/* rabat : bascule 3D, s'assombrit en passant la tranche */
.env-flap{position:absolute;left:0;right:0;top:0;height:56%;z-index:4;transform-origin:50% 0;transform-style:preserve-3d;pointer-events:none;
  transition:transform .6s cubic-bezier(.65,0,.35,1) .6s,z-index 0s .9s}
.env-flap>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-out{filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)) brightness(1);transition:filter .3s ease .9s}
.flap-in{transform:rotateY(180deg);filter:brightness(.55);transition:filter .3s ease .6s}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1;transition:transform .7s cubic-bezier(.65,0,.35,1) .15s,z-index 0s .5s}
.envelope.open .flap-out{filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)) brightness(.55);transition:filter .35s ease .15s}
.envelope.open .flap-in{filter:brightness(1);transition:filter .4s ease .5s}

/* sceau de cire doré */
.env-seal{position:absolute;left:50%;top:54%;width:20%;aspect-ratio:1;translate:-50% -50%;z-index:5;pointer-events:none;overflow:visible;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.4)) drop-shadow(0 1px 1px rgba(0,0,0,.3));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1) 1.15s,opacity .2s ease 1.15s}
.envelope:not(.open):hover .env-seal{transform:rotate(-6deg) scale(1.04);transition-delay:0s}
.envelope.open .env-seal{opacity:0;transform:translateY(-12%) scale(1.12) rotate(-8deg);
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .22s ease .08s}

/* légende */
.js-env-hint{min-height:1.4em;transition:opacity .3s ease}

@media (max-width:760px){
  .envelope-stage{--env-w:min(400px,76vw);padding-top:calc(var(--env-w) * .42)}
  .ep-tag{padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){
  .envelope,.env-piece,.env-flap,.env-flap>svg,.env-seal,.ep-tag,.env-contents,.env-contents::before{transition-duration:.01s!important;transition-delay:0s!important;animation-duration:.01s!important;animation-delay:0s!important}
}

/* Grand aperçu d'un élément secret : reste flouté */
.lightbox img.is-secret{filter:blur(14px) saturate(1.1);transform:scale(.96)}
.lightbox .lb-wrap{overflow:hidden;border-radius:14px}

/* =========================================================
   Comment ça marche : parcours en 4 étapes + « quel courrier ? »
   ========================================================= */
.howto{margin-top:34px}
.howto .sub{margin-bottom:8px}
.howto-lead{font-size:15.5px;line-height:1.6;font-weight:600;color:var(--ink-2);max-width:62ch;margin-bottom:22px}

.hw-steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:hw}
/* fil pointillé qui relie les étapes */
.hw-steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:31px;height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(246,220,140,.55) 0 6px,transparent 6px 12px);
  transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease) .2s}
.howto.in .hw-steps::before{transform:scaleX(1)}
.hw-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 4px;counter-increment:hw;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease calc(var(--i) * .15s + .1s),transform .6s var(--spring) calc(var(--i) * .15s + .1s)}
.howto.in .hw-step{opacity:1;transform:none}
.hw-ico{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;
  background:radial-gradient(circle at 35% 30%,#2f6d50,#173f2d);box-shadow:0 10px 20px -8px rgba(0,0,0,.6),inset 0 0 0 2px rgba(246,220,140,.55)}
.hw-ico::after{content:counter(hw);position:absolute;right:-4px;top:-4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:900;color:#fff;background:linear-gradient(145deg,#ff6b81,var(--red-2));box-shadow:0 3px 8px rgba(0,0,0,.35)}
.hw-ico svg{width:26px;height:26px;fill:none;stroke:#f6dc8c;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hw-step b{font-size:15px;color:var(--ink)}
.hw-step p{font-size:13px;line-height:1.45;font-weight:600;color:var(--ink-2);max-width:20ch}

/* Quel courrier vas-tu recevoir ? */
.hw-when{margin-top:30px;padding:20px 20px 18px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hw-when-head b{display:block;font-size:16px;margin-bottom:2px}
.hw-when-head p{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.hw-timeline{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;margin:44px 0 16px}
.hw-month{position:relative;height:46px;border-radius:12px;display:flex;align-items:center;padding:0 14px;font-weight:800;font-size:13.5px}
.hw-now{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1));color:var(--ink-2);border-radius:12px 4px 4px 12px}
.hw-next{background:linear-gradient(90deg,rgba(47,109,80,.55),rgba(47,109,80,.3));color:#f6dc8c;justify-content:flex-start;border-radius:4px 12px 12px 4px;box-shadow:inset 0 0 0 1px rgba(246,220,140,.35)}
.hw-cut{position:relative;width:3px;margin:0 6px;border-radius:2px;background:var(--red)}
.hw-cut span{position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;white-space:nowrap;font-size:11.5px;font-weight:800;color:var(--red)}
.hw-today{position:absolute;left:calc(var(--p) * 100%);top:-8px;bottom:-8px;width:2px;background:var(--ink);border-radius:2px}
.hw-today::before{content:"";position:absolute;top:-5px;left:50%;translate:-50% 0;width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.hw-today em{position:absolute;top:calc(100% + 4px);left:50%;translate:-50% 0;font-style:normal;font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap}
.hw-post{position:absolute;left:14px;top:50%;translate:0 -50%;width:0;height:0}
.hw-next span{padding-left:36px}
.hw-post svg{position:absolute;left:0;top:50%;translate:0 -50%;width:24px;height:24px;fill:none;stroke:#f6dc8c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.howto.in .hw-post svg{animation:hwPost 2.6s var(--ease) 1s infinite}
@keyframes hwPost{0%,60%,100%{transform:none}70%{transform:translateY(-4px) rotate(-8deg)}80%{transform:none}}
.hw-answer{margin-top:32px;font-size:14px;font-weight:600;color:var(--ink-2)}
.hw-answer b{color:#f6dc8c}

/* Bon à savoir */
.hw-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.hw-facts li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--line)}
.hw-fi{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,90,115,.15)}
.hw-fi svg{width:19px;height:19px;fill:none;stroke:#ff8095;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hw-facts b{font-size:13.5px;display:block}
.hw-facts p{font-size:12.5px;line-height:1.45;font-weight:600;color:var(--ink-2)}

@media (max-width:760px){
  .hw-steps{grid-template-columns:1fr;gap:0}
  .hw-steps::before{left:30px;right:auto;top:30px;bottom:30px;width:2px;height:auto;transform-origin:top;transform:scaleY(0);
    background:repeating-linear-gradient(180deg,rgba(246,220,140,.55) 0 6px,transparent 6px 12px)}
  .howto.in .hw-steps::before{transform:scaleY(1)}
  .hw-step{display:grid;grid-template-columns:62px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:8px 0}
  .hw-ico{grid-row:1/3;margin:0}
  .hw-step b{align-self:end}.hw-step p{align-self:start;max-width:none}
  .hw-facts{grid-template-columns:1fr}
  .hw-when{padding:16px}
  .hw-month{font-size:12.5px;padding:0 10px}
  .hw-cut span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .hw-step,.hw-steps::before{transition:none!important;opacity:1;transform:none}
  .howto.in .hw-post svg{animation:none}
}