/* Pack 2027 — le cadeau en 3D (CSS pur, aucune bibliothèque) et sa fenêtre.
   Utilisé par pack-2027-cadeau.js (accueil, tous les onglets) et par pack-2027.html.

   Le cadeau : un pavé (6 faces) + un couvercle (6 faces) + un nœud, dans une scène en
   perspective. --s fixe sa taille, tout le reste en découle.

   Boucle « feu d'artifice » (demande d'Alexandre du 21/10/2026), durée --t :
     0-24 %  le cadeau flotte et tourne         24-34 %  il frémit et gonfle
     34-38 % il éclate (couvercle projeté, éclair) 36-70 %  trois gerbes de feu d'artifice
     40-84 % « 2027 » brille à sa place          88-100 % le cadeau réapparaît
   --phase décale la boucle (négatif = l'explosion arrive plus tôt après l'affichage). */

.g27{--s:120px;--t:6s;--phase:0s;--or1:#B8892E;--or2:#D4A853;--or3:#F5E0A0;position:relative;width:calc(var(--s)*2);height:calc(var(--s)*2);perspective:calc(var(--s)*7);pointer-events:none}
.g27-float{position:absolute;inset:0;animation:g27-float 4.5s ease-in-out infinite}
.g27-boite{position:absolute;inset:0;animation:g27-boite var(--t) linear var(--phase) infinite}
.g27-scene{position:absolute;left:50%;top:58%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-32deg);animation:g27-spin 16s linear infinite}

/* Pavé générique : --w largeur, --h hauteur, --d profondeur */
.g27-cub{position:absolute;left:0;top:0;transform-style:preserve-3d}
.g27-cub>i{position:absolute;left:0;top:0;display:block;box-shadow:inset 0 0 0 1px rgba(212,168,83,.28)}
.g27-cub>.fr{width:var(--w);height:var(--h);transform:translate(-50%,-50%) translateZ(calc(var(--d)/2))}
.g27-cub>.bk{width:var(--w);height:var(--h);transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2))}
.g27-cub>.rt{width:var(--d);height:var(--h);transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--w)/2))}
.g27-cub>.lf{width:var(--d);height:var(--h);transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2))}
.g27-cub>.tp{width:var(--w);height:var(--d);transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h)/2))}
.g27-cub>.bt{width:var(--w);height:var(--d);transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2))}

/* Velours aubergine + ruban d'or vertical au milieu de chaque face */
.g27-cub>i{
  --rb:calc(var(--s)*.075);
  background:
    linear-gradient(90deg,transparent calc(50% - var(--rb)),var(--or1) calc(50% - var(--rb)),var(--or3) 50%,var(--or1) calc(50% + var(--rb)),transparent calc(50% + var(--rb))),
    radial-gradient(circle at 30% 20%,rgba(167,139,250,.18),transparent 60%),
    linear-gradient(165deg,#2b1747 0%,#1a0f2e 55%,#100a1f 100%)}
.g27-cub>.rt,.g27-cub>.lf{filter:brightness(.72)}
.g27-cub>.bk{filter:brightness(.6)}
.g27-cub>.bt{filter:brightness(.45)}
/* Dessus du couvercle : ruban en croix */
.g27-lid>.tp{background:
  linear-gradient(90deg,transparent calc(50% - var(--rb)),var(--or1) calc(50% - var(--rb)),var(--or3) 50%,var(--or1) calc(50% + var(--rb)),transparent calc(50% + var(--rb))),
  linear-gradient(0deg,transparent calc(50% - var(--rb)),var(--or1) calc(50% - var(--rb)),var(--or3) 50%,var(--or1) calc(50% + var(--rb)),transparent calc(50% + var(--rb))),
  linear-gradient(165deg,#3a2160 0%,#22133d 100%);filter:brightness(1.15)}
.g27-lid>.fr,.g27-lid>.bk,.g27-lid>.rt,.g27-lid>.lf{filter:brightness(1.05)}
.g27-lid>.rt,.g27-lid>.lf{filter:brightness(.8)}

.g27-base{--w:var(--s);--h:calc(var(--s)*.78);--d:var(--s);transform:translateY(calc(var(--s)*.12))}
.g27-lid{--w:calc(var(--s)*1.1);--h:calc(var(--s)*.22);--d:calc(var(--s)*1.1);transform:translateY(calc(var(--s)*-.38));animation:g27-couvercle var(--t) linear var(--phase) infinite}

/* Nœud : deux plans croisés posés sur le couvercle, chacun avec deux boucles */
.g27-bow{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translateY(calc(var(--s)*-.11))}
.g27-bow>b{position:absolute;left:0;top:0;width:calc(var(--s)*.7);height:calc(var(--s)*.34);transform:translate(-50%,-100%)}
.g27-bow>b+b{transform:translate(-50%,-100%) rotateY(90deg)}
.g27-bow>b::before,.g27-bow>b::after{content:"";position:absolute;bottom:0;width:46%;height:92%;border:calc(var(--s)*.055) solid var(--or2);border-radius:60% 60% 12% 60%;box-sizing:border-box;background:radial-gradient(circle at 50% 70%,rgba(245,224,160,.25),transparent 70%)}
.g27-bow>b::before{left:2%;transform:rotate(-28deg);transform-origin:100% 100%}
.g27-bow>b::after{right:2%;transform:rotate(28deg) scaleX(-1);transform-origin:0 100%}

/* Halo au sol */
.g27::after{content:"";position:absolute;left:50%;bottom:6%;width:calc(var(--s)*1.5);height:calc(var(--s)*.28);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(212,168,83,.32),rgba(124,58,237,.12) 55%,transparent 72%);filter:blur(4px)}

/* Éclair au moment où le cadeau éclate */
.g27-eclair{position:absolute;left:50%;top:52%;width:calc(var(--s)*1.6);height:calc(var(--s)*1.6);margin:calc(var(--s)*-.8) 0 0 calc(var(--s)*-.8);border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,235,.95) 0%,rgba(245,224,160,.6) 22%,rgba(167,139,250,.25) 48%,transparent 70%);opacity:0;animation:g27-eclair var(--t) linear var(--phase) infinite}

/* « 2027 » à la place du cadeau — hors du groupe qui tourne, toujours face au visiteur */
.g27-annee{position:absolute;left:0;right:0;top:50%;margin-top:calc(var(--s)*-.4);text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:calc(var(--s)*.8);line-height:1;letter-spacing:-.02em;
  background:linear-gradient(135deg,#B8892E 0%,#D4A853 30%,#F5E0A0 55%,#D4A853 80%,#8C6416 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#D4A853;
  filter:drop-shadow(0 0 calc(var(--s)*.14) rgba(212,168,83,.6));opacity:0;animation:g27-annee var(--t) linear var(--phase) infinite}

/* Feu d'artifice : trois gerbes décalées, chacune une couronne de traînées ou de points */
.g27-feux{position:absolute;left:50%;top:50%;width:0;height:0}
.g27-gerbe{position:absolute;left:0;top:0;transform:translate(var(--ox),var(--oy))}
.g27-gerbe>i{position:absolute;left:0;top:0;opacity:0;animation:g27-etincelle var(--t) linear calc(var(--phase) + var(--d)) infinite}
/* traînée : un trait qui part du centre, orienté vers l'extérieur */
.g27-gerbe>.tr{width:calc(var(--s)*.26);height:calc(var(--s)*.035);margin:calc(var(--s)*-.0175) 0 0 0;border-radius:99px;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--c) 70%,#fff);box-shadow:0 0 calc(var(--s)*.08) var(--c)}
/* point : une étincelle ronde qui scintille */
.g27-gerbe>.pt{width:calc(var(--s)*.06);height:calc(var(--s)*.06);margin:calc(var(--s)*-.03) 0 0 calc(var(--s)*-.03);border-radius:50%;background:var(--c);box-shadow:0 0 calc(var(--s)*.1) var(--c)}

@keyframes g27-spin{from{transform:rotateX(-20deg) rotateY(-32deg)}to{transform:rotateX(-20deg) rotateY(328deg)}}
@keyframes g27-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--s)*-.06))}}
@keyframes g27-boite{
  0%,24%{opacity:1;transform:scale(1) rotate(0)}
  26%{transform:scale(1.02) rotate(-7deg)}
  28%{transform:scale(1.04) rotate(7deg)}
  30%{transform:scale(1.06) rotate(-6deg)}
  32%{transform:scale(1.1) rotate(5deg)}
  34%{opacity:1;transform:scale(1.18) rotate(0)}
  38%{opacity:0;transform:scale(1.6)}
  88%{opacity:0;transform:scale(.4)}
  95%{opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}}
@keyframes g27-couvercle{
  0%,33%{transform:translateY(calc(var(--s)*-.38))}
  38%{transform:translateY(calc(var(--s)*-1.3)) translateX(calc(var(--s)*.35)) rotateZ(40deg)}
  60%,100%{transform:translateY(calc(var(--s)*-.38))}}
@keyframes g27-eclair{
  0%,33%{opacity:0;transform:scale(.2)}
  36%{opacity:1;transform:scale(1)}
  46%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(1.9)}}
@keyframes g27-annee{
  0%,38%{opacity:0;transform:translateY(calc(var(--s)*.15)) scale(.3)}
  44%{opacity:1;transform:translateY(0) scale(1.14)}
  49%{opacity:1;transform:scale(1)}
  66%{opacity:1;transform:scale(1.05)}
  80%{opacity:1;transform:scale(1)}
  88%{opacity:0;transform:scale(1.3)}
  100%{opacity:0;transform:scale(1.3)}}
@keyframes g27-etincelle{
  0%,35%{opacity:0;transform:translateY(0) rotate(var(--a)) translateX(0) scale(.2)}
  36%{opacity:1;transform:translateY(0) rotate(var(--a)) translateX(0) scale(1);animation-timing-function:cubic-bezier(.12,.8,.3,1)}
  54%{opacity:1;transform:translateY(0) rotate(var(--a)) translateX(var(--r)) scale(.9);animation-timing-function:ease-in}
  70%{opacity:0;transform:translateY(calc(var(--s)*.35)) rotate(var(--a)) translateX(var(--r)) scale(.3)}
  100%{opacity:0;transform:translateY(calc(var(--s)*.35)) rotate(var(--a)) translateX(var(--r)) scale(.3)}}

/* Mouvements réduits : pas de boucle, le cadeau reste fermé avec « 2027 » posé dessus */
@media (prefers-reduced-motion:reduce){
  .g27-scene,.g27-float,.g27-boite,.g27-lid,.g27-eclair,.g27-gerbe>i{animation:none}
  .g27-annee{animation:none;opacity:1;transform:none;top:auto;bottom:0;margin:0;font-size:calc(var(--s)*.5)}
}

/* ═══ Bouton flottant (accueil, tous les onglets) ═══ */
.p27-fab{position:fixed;left:max(18px,env(safe-area-inset-left,0px) + 12px);bottom:max(18px,env(safe-area-inset-bottom,0px) + 12px);z-index:9000;width:84px;height:84px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.p27-fab.is-in{opacity:1;transform:none}
.p27-fab .g27{--s:36px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.p27-fab::before{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(212,168,83,.26),rgba(124,58,237,.14) 50%,transparent 70%);animation:p27-pulse 2.8s ease-in-out infinite}
.p27-fab:focus-visible{outline:2px solid #E8C472;outline-offset:2px;border-radius:50%}
@keyframes p27-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* « Vos prédictions 2027 » : au survol (souris) ou au clavier ; sur écran tactile, il
   apparaît tout seul pendant que « 2027 » brille, à chaque boucle. */
.p27-fab-label{position:absolute;left:calc(100% - 4px);top:50%;white-space:nowrap;pointer-events:none;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:1.12rem;line-height:1;letter-spacing:.01em;color:#F5E0A0;
  padding:.5rem .95rem .55rem;border-radius:999px;background:rgba(10,10,15,.9);border:1px solid rgba(212,168,83,.55);
  box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 22px rgba(212,168,83,.18);
  opacity:0;transform:translate(-8px,-50%);transition:opacity .3s ease,transform .3s ease}
.p27-fab:hover .p27-fab-label,.p27-fab:focus-visible .p27-fab-label{opacity:1;transform:translate(0,-50%)}
@media (hover:none){
  .p27-fab-label{transition:none;animation:p27-label var(--t,6s) linear var(--phase,0s) infinite}
}
@keyframes p27-label{0%,40%{opacity:0;transform:translate(-8px,-50%)}46%,82%{opacity:1;transform:translate(0,-50%)}88%,100%{opacity:0;transform:translate(-8px,-50%)}}
@media (max-width:380px){.p27-fab-label{font-size:1rem;padding:.45rem .8rem .5rem}}
@media (prefers-reduced-motion:reduce){.p27-fab::before,.p27-fab-label{animation:none}}
@media print{.p27-fab,.p27-overlay{display:none!important}}

/* ═══ Fenêtre ═══ */
.p27-overlay{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,4,10,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease}
.p27-overlay.is-in{opacity:1}
.p27-card{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;text-align:center;color:#F0EBE3;background:radial-gradient(ellipse at 50% 0%,rgba(124,58,237,.22) 0%,transparent 60%),radial-gradient(ellipse at 50% 100%,rgba(212,168,83,.08) 0%,transparent 60%),#12121C;border:1px solid rgba(212,168,83,.32);border-radius:6px;padding:0 clamp(1.25rem,5vw,2.25rem) 1.75rem;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 80px rgba(124,58,237,.12);transform:translateY(16px) scale(.97);transition:transform .45s cubic-bezier(.2,1.2,.4,1)}
.p27-overlay.is-in .p27-card{transform:none}
.p27-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(135deg,#B8892E 0%,#D4A853 30%,#F5E0A0 55%,#D4A853 80%,#8C6416 100%)}
.p27-card .g27{--s:76px;margin:2.6rem auto -.2rem}
.p27-close{position:absolute;top:.6rem;right:.6rem;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(240,235,227,.14);background:rgba(10,10,15,.5);color:#BDB6C2;font-size:1.05rem;line-height:1;cursor:pointer;transition:color .2s,border-color .2s}
.p27-close:hover,.p27-close:focus-visible{color:#E8C472;border-color:#D4A853;outline:none}
.p27-when{font-family:'Cinzel',Georgia,serif;font-size:.68rem;letter-spacing:3px;color:#E8C472;opacity:.9;margin-bottom:.6rem}
.p27-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(1.9rem,6vw,2.3rem);line-height:1.1;color:#F0EBE3;margin:0 0 .8rem}
.p27-text{font-family:'Inter',system-ui,sans-serif;font-weight:300;font-size:.95rem;line-height:1.65;color:#BDB6C2;margin:0 auto 1.3rem;max-width:34ch}
.p27-price{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.1rem;line-height:1;margin-bottom:1.2rem;background:linear-gradient(135deg,#B8892E 0%,#D4A853 30%,#F5E0A0 55%,#D4A853 80%,#8C6416 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p27-price small{font-family:'Inter',system-ui,sans-serif;font-size:.8rem;-webkit-text-fill-color:#BDB6C2;color:#BDB6C2;margin-left:.5rem;letter-spacing:.3px}
.p27-cta{display:block;width:100%;padding:1.05rem 1.5rem;font-family:'Cinzel',Georgia,serif;font-size:.78rem;letter-spacing:2.5px;text-transform:uppercase;color:#0A0A0F;text-decoration:none;font-weight:700;background:linear-gradient(135deg,#B8892E 0%,#D4A853 30%,#F5E0A0 55%,#D4A853 80%,#8C6416 100%);border-radius:2px;box-shadow:0 12px 34px rgba(212,168,83,.3);transition:transform .25s,box-shadow .25s}
.p27-cta:hover,.p27-cta:focus-visible{transform:translateY(-2px);box-shadow:0 16px 42px rgba(212,168,83,.45);outline:none}
.p27-later{margin-top:.8rem;background:none;border:0;color:#BDB6C2;font-family:'Inter',system-ui,sans-serif;font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:.75}
.p27-later:hover,.p27-later:focus-visible{opacity:1;color:#E8C472;outline:none}