/* Pop-up bon cadeau de Noël Trott'Explore — version Père Noël : traîneau tiré par deux trottinettes, l'enveloppe s'ouvre toute seule, le bon cadeau en sort, à retourner.
   Polices attendues (Google Fonts) : Anton, Archivo, Barlow Condensed 700. */
.gift, .gift-test{
  --gut: clamp(16px, 4vw, 56px); --ease: cubic-bezier(.22,.61,.36,1);
  --citron:#C8D400; --ecorce-2:#33281F; --craie:#F4F2E9;
  --f-display:'Anton','Impact','Arial Narrow',sans-serif; --f-body:'Archivo','Helvetica Neue',Arial,sans-serif; --f-label:'Barlow Condensed','Arial Narrow',sans-serif;
}
.gift [hidden], .gift[hidden], .gift-test[hidden]{display:none!important}
.gift .btn{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:999px;background:#E1251B;color:#fff}
/* pop-up bon cadeau de Noël (25 octobre → 6 janvier) : la vidéo sous la neige, l'enveloppe qui s'ouvre seule, le bon cadeau */
.gift{position:fixed;inset:0;z-index:58;display:grid;place-items:center;padding:calc(84px + env(safe-area-inset-top,0px)) var(--gut) calc(40px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(ellipse at 50% 45%,rgba(22,32,52,.74),rgba(12,14,22,.9));opacity:0;transition:opacity .5s var(--ease);perspective:1100px}
.gift.on{opacity:1}
/* pendant le pop-up, la page derrière ne défile pas */
html.gift-open,html.gift-open body{overflow:hidden;overscroll-behavior:none}
.gift{overscroll-behavior:contain;touch-action:none}
.gift__snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gift__snow--f{z-index:4}
.gift__stage{position:relative;z-index:2;display:grid;justify-items:center;gap:30px;transform-style:preserve-3d;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gift__stage.away{opacity:0;transform:scale(.92);pointer-events:none;visibility:hidden;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.gift__frame{position:relative;transform:scale(.94) translateY(16px);opacity:0;transition:transform .8s var(--ease),opacity .6s}
.gift.on .gift__frame{transform:none;opacity:1}
.gift__vid{display:block;height:min(64vh,600px);aspect-ratio:9/16;max-width:100%;border-radius:14px;object-fit:cover;background:#1d2230;pointer-events:none;
  border:5px solid #EEF3F8;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(170,215,255,.25)}
.gift__vid::-webkit-media-controls{display:none!important}
.gift__spark{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:10px;pointer-events:none}
.gift__pile{position:absolute;pointer-events:none;z-index:3}
.gift__x{position:absolute;top:-20px;right:-20px;z-index:5;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ecorce-2);font:700 24px/1 var(--f-body);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.gift__cta{position:relative;z-index:3;font-size:18px;padding:17px 32px;box-shadow:0 16px 36px rgba(225,37,27,.5)}
.gift__card{position:fixed;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:16px;padding:calc(84px + env(safe-area-inset-top,0px)) var(--gut) calc(40px + env(safe-area-inset-bottom,0px));pointer-events:none}
.gift__card.on{pointer-events:auto}
.gift__card > *{opacity:0;transition:opacity .4s var(--ease)}
.gift__card.on > *{opacity:1}
.gift__card.on .gift__tip,.gift__card.on .gift__actions{transition-delay:.7s}
.gift__flip{position:relative;width:min(88vw,680px);aspect-ratio:1743/833;border:0;padding:0;background:none;cursor:pointer;perspective:1400px}
.gift__flip::before{content:"";position:absolute;inset:-9px;border:3px solid var(--citron);border-radius:14px;pointer-events:none;
  box-shadow:0 0 18px rgba(200,212,0,.4),inset 0 0 12px rgba(200,212,0,.25)}   /* contour vert citron, détaché du bon */
.gift__flip:focus-visible{outline:none}
.gift__flip:focus-visible::before{box-shadow:0 0 26px rgba(200,212,0,.75),inset 0 0 14px rgba(200,212,0,.35)}
.gift__in{position:absolute;inset:0}
.gift__face{position:absolute;inset:0;border-radius:8px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.5),0 0 50px rgba(255,226,150,.35)}
.gift__face img{display:block;width:100%;height:100%;object-fit:cover}
.gift__face{z-index:2}
.gift__face--back{z-index:1}
/* retourner le bon : un trait de lumière passe de gauche à droite et révèle l'autre face sur son passage */
.gift__laser{position:absolute;top:-7%;bottom:-7%;left:0;width:3px;margin-left:-1.5px;border-radius:3px;pointer-events:none;z-index:4;opacity:0;
  background:linear-gradient(transparent,#fff 18%,#fff 82%,transparent);box-shadow:0 0 8px 2px rgba(255,238,180,.95),0 0 26px 8px rgba(200,212,0,.45)}
.gift__shine{position:absolute;inset:0;border-radius:8px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0}
.gift__card.on .gift__shine{animation:giftShine 1.4s .5s var(--ease) both}
@keyframes giftShine{to{background-position:-50% 0}}
.gift__tip{margin:0;font:700 13px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:#E8F4FF}
.gift__actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
/* bouton « Offrir une balade » : comme dans la version drone, reflet qui passe, légère impulsion, halo */
.gift__go{position:relative;font-size:18px;padding:17px 34px;box-shadow:0 14px 34px rgba(225,37,27,.45);will-change:transform}
.gift__card.on .gift__go{animation:giftIn .6s .75s var(--ease) both,giftBeat 1.5s 1.4s linear infinite}
.gift__go::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 34px 10px rgba(255,120,90,.6);opacity:0;pointer-events:none;will-change:opacity}
.gift__card.on .gift__go::before{animation:giftGlow 1.5s 1.4s ease-in-out infinite}
.gift__go::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);background-size:300% 100%;background-position:130% 0;animation:giftGlint 2.6s 1.2s ease-in-out infinite;pointer-events:none}
@keyframes giftIn{from{transform:translateY(14px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes giftBeat{0%{transform:scale(1);animation-timing-function:ease-out}25%{transform:scale(1.035);animation-timing-function:ease-in}50%,100%{transform:scale(1)}}
@keyframes giftGlow{50%{opacity:1}}
@keyframes giftGlint{0%{background-position:130% 0}45%,100%{background-position:-30% 0}}
.gift__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
@media (max-width:760px){
  .gift,.gift__card{padding:calc(84px + env(safe-area-inset-top,0px)) 16px calc(98px + env(safe-area-inset-bottom,0px))}
  .gift__stage{gap:26px}
  .gift__vid{height:auto;width:min(68vw,calc((100dvh - 300px) * 9 / 16))}
  .gift__x{top:-16px;right:-14px}
}
.gift-test{position:fixed;right:16px;top:calc(76px + env(safe-area-inset-top,0px));z-index:57;font:700 13px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;background:#E8F4FF;color:var(--ecorce-2);border:0;border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}

/* la première image de la vidéo, même avant que la vidéo soit chargée (jamais d'écran noir) */
.gift__vid{background:#1d2230 url(media/pere-noel-debut.jpg) center/cover no-repeat}
.gift:focus{outline:none}
/* le son : un petit haut-parleur barré sur la vidéo ; un toucher met le son, un autre le coupe */
.gift__son{position:absolute;left:-10px;top:-20px;z-index:5;width:42px;height:42px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 40% 35%,#fff,#e4ecf6 70%,#cfdbe9);color:#3a4a66;box-shadow:0 3px 8px rgba(8,16,34,.35),inset 0 -2px 3px rgba(120,140,170,.35);transition:transform .2s}
/* la croix : même boule de neige que le son, dans l'angle opposé ; elle apparaît 5 s après l'ouverture */
.gift__frame .gift__x{left:auto;right:-10px;top:-20px;width:42px;height:42px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 40% 35%,#fff,#e4ecf6 70%,#cfdbe9);color:#3a4a66;box-shadow:0 3px 8px rgba(8,16,34,.35),inset 0 -2px 3px rgba(120,140,170,.35);
  opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s cubic-bezier(.2,1.6,.4,1)}
.gift__frame .gift__x[hidden]{display:none}
.gift__frame .gift__x.vue{opacity:1;transform:none}
.gift__frame .gift__x.vue:hover{transform:scale(1.06)}
.gift__frame .gift__x:focus-visible{outline:3px solid var(--citron);outline-offset:3px}
.gift__frame .gift__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.gift__son:hover{transform:scale(1.06)}
.gift__son:focus-visible{outline:3px solid var(--citron);outline-offset:3px}
.gift__son svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gift__son .hp{fill:currentColor;stroke:none}
.gift__son .on{display:none}
.gift__son[aria-pressed="true"] .on{display:inline}
.gift__son[aria-pressed="true"] .off{display:none}
/* lien « Fermer » (seulement à la fin) */
.gift__fermer{display:block;flex-basis:100%;margin:2px auto 0;background:none;border:0;padding:8px 12px;font:600 14px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,233,.75);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.gift__fermer:hover{color:#fff}