/* ===========================================================================
   SECRETES ET MYTHIQUES (v38, DECISIONS §89)

   Repris de la maquette validee par Benja (marque/sources/maquette-illu.css et
   maquette-rangs.css ; films « secrete-tigre-bande » et « mythique-lion-bande »).
   Une Secrete est une scene en couches qui glissent a l'inclinaison, dans un
   cadre de platine paillete d'argent ; une Mythique est une fenetre sur son
   diorama — une boucle video dans les grilles, la 3D vivante en grand — dans
   un cadre de diamant, paillete lui aussi.

   La lumiere : le client Steam pose les variables du Prisme (--hx, --hy,
   --h-bx, --h-by, --h-tache) ; le site web ne connait que --pointer-x/y et
   --bg-x/y (carte.mjs). Chaque usage porte donc son repli, une fois, ici.

   Rien de ce fichier ne touche une carte qui n'est pas une edition : toutes
   les regles visent .carte.edition, que seul editions.mjs pose.
   =========================================================================== */
:root{
  --r-secrete:#DCE4F7; --r-mythique:#9EF3FF;
  /* L'eclat : l'etoile a quatre branches du logo. */
  --m-eclat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.9 6.6 4.5 10.6 12 12-7.5 1.4-11.1 5.4-12 12-.9-6.6-4.5-10.6-12-12 7.5-1.4 11.1-5.4 12-12z' fill='%23fff'/%3E%3C/svg%3E");
  --m-iris:#4fe3d0,#5aa8ff,#a97bff,#ff77c4,#ffc46b,#4fe3d0;
}

.carte.edition{
  --e-bx:var(--h-bx,var(--bg-x,50%));
  --e-by:var(--h-by,var(--bg-y,50%));
  --e-tache:var(--h-tache,radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),
    #000 0,#000a 22%,#0000 50%));
  --mf:.05; --mc:0;
}

/* ---------------------------------------------------------------------------
   La scene en couches. La profondeur --z decide du glissement : le lointain
   glisse a l'oppose de la main, le premier plan avec elle.
   --------------------------------------------------------------------------- */
.carte.edition.illustree .vitre>img{visibility:hidden}
.carte.edition .p-scene{position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:inherit}
.carte.edition .p-plan{position:absolute;pointer-events:none;--z:0;--amp:3.4%;
  transform:translate(calc(var(--hx,0) * var(--z) * -1 * var(--amp)),calc(var(--hy,0) * var(--z) * -1 * var(--amp)))}
/* `.carte .vitre img` (style.css) impose 100 % x 100 % a toute image de la
   fenetre : sans ces lignes, le sujet ne tomberait plus sur sa copie hors cadre. */
.carte.edition .vitre .p-scene>img.p-plan{padding:0;max-width:none;max-height:none;object-fit:fill}
.carte.edition .vitre .p-scene>.p-large{left:calc(var(--mf) * -100%);top:calc(var(--mf) * -100%);
  width:calc(100% + var(--mf) * 200%);height:calc(100% + var(--mf) * 200%)}
/* Le sujet a 14,97 % de marge AU-DESSUS (c'est par la qu'il sort du cadre), et
   --mc de marge sur chaque cote. */
.carte.edition .vitre .p-scene>.p-sujet,.e-hors .p-sujet{position:absolute;
  left:calc(var(--mc) * -100%);top:-14.97%;width:calc(100% + var(--mc) * 200%);height:114.97%;
  padding:0;max-width:none;object-fit:fill}
.carte.edition .p-braises{mix-blend-mode:screen}
/* La gravure : des traits fins qui ne s'allument que sous la lumiere. */
.carte.edition .p-graves{left:calc(var(--mf) * -100%);top:calc(var(--mf) * -100%);
  width:calc(100% + var(--mf) * 200%);height:calc(100% + var(--mf) * 200%);
  -webkit-mask-image:var(--p-graves),var(--e-tache);-webkit-mask-size:100% 100%,100% 100%;
  -webkit-mask-composite:source-in;
  mask-image:var(--p-graves),var(--e-tache);mask-size:100% 100%,100% 100%;mask-composite:intersect;
  background:linear-gradient(115deg,#ffe7a3,#ffffff,#ffb36b,#ff9ed2,#9ef3ff,#ffe7a3) 0 0/300% 300%;
  background-position:var(--e-bx) var(--e-by);mix-blend-mode:color-dodge;opacity:calc(var(--opa) * .9)}
/* Particules : poussiere d'or ou lucioles, figees en grille, vivantes en grand. */
.carte.edition .p-points{left:0;top:0;width:100%;height:100%}
.carte.edition .p-points i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  border-radius:50%;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);opacity:var(--o,.6);
  background:radial-gradient(circle,var(--k) 0,color-mix(in srgb,var(--k) 40%,transparent) 35%,transparent 70%);
  mix-blend-mode:screen}
/* Une carte illustree garde sa scene lisible : le voile du texte commence plus bas. */
.carte.edition.illustree.pleine .vitre::after{
  background:linear-gradient(#0000 50%,#0B0A14A8 64%,#0B0A14EE 78%,#0B0A14 92%)}
/* Le relief tire de la photo (Prisme du client Steam) decrocherait des couches. */
.carte.edition.illustree .vitre>:is(.h-l,.h-foil){display:none}
/* Le foil raye du site web passerait sur la scene peinte (des stries sur le
   sujet) : une edition porte sa propre matiere — la gravure, l'encre UV, les
   paillettes du cadre. Le reflet de la lumiere reste, adouci. */
.carte.edition.illustree:not(.prisme) :is(.brillance,.texture,.micro){display:none}
.carte.edition.illustree .reflet{opacity:calc(var(--opa) * .45)}

/* ---------------------------------------------------------------------------
   SECRETE — le platine. Un metal froid qui suit la lumiere, la ou la
   Legendaire est en or ; pailletes d'argent dans le cadre (Benja, 2026-10-14 :
   « j'adore les paillettes argentees ») ; sous la lumiere, une encre UV.
   --------------------------------------------------------------------------- */
.carte.edition.r-secrete .liseré{border-width:2.2cqw;
  background:
    radial-gradient(circle,#ffffff 0 .12cqw,#0000 .26cqw) calc(var(--e-bx) * .6) .3cqw/1.3cqw 1.7cqw,
    radial-gradient(circle,#dff3ff 0 .16cqw,#0000 .3cqw) .7cqw calc(var(--e-by) * -.5)/2.3cqw 1.9cqw,
    radial-gradient(circle,#ffffff 0 .2cqw,#0000 .38cqw) calc(var(--e-by) * .9) 1.1cqw/3.7cqw 3.1cqw,
    linear-gradient(118deg,#3a3f4c,#9aa3b8 calc(var(--e-bx) - 22%),#f6f8ff var(--e-bx),
      #8d96ab calc(var(--e-bx) + 20%),#2d313b) border-box}
.carte.edition.r-secrete .e-encre{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:var(--e-tache);mask-image:var(--e-tache);mix-blend-mode:screen;
  opacity:calc(.95 * var(--opa));
  background:
    radial-gradient(circle,#e9fbff 0 .2cqw,#0000 .27cqw) 0 0/1.05cqw 1.05cqw,
    repeating-radial-gradient(circle at 28% 30%,#6cf6ff00 0 .48cqw,#8ff8ff .6cqw,#6cf6ff00 .74cqw 1.2cqw),
    repeating-radial-gradient(circle at 72% 62%,#a98bff00 0 .48cqw,#c3aaff .6cqw,#a98bff00 .74cqw 1.2cqw)}
/* L'inscription du bord, comme la securite d'un billet : elle n'apparait qu'a
   la lumiere. */
.carte.edition .s-voile{position:absolute;inset:0;z-index:7;pointer-events:none;
  -webkit-mask-image:var(--e-tache);mask-image:var(--e-tache);opacity:var(--opa)}
.carte.edition .s-voile span{position:absolute;top:9cqw;left:1.9cqw;writing-mode:vertical-rl;
  transform:rotate(180deg);font:800 3cqw/1 "JetBrains Mono",monospace;letter-spacing:.42em;color:#b8fbff;
  text-shadow:0 0 .6cqw #6cf6ff,0 0 1.6cqw #6cf6ff,0 0 3.2cqw #a98bff}
.carte.edition .s-voile span+span{left:auto;right:1.9cqw;transform:none}

/* Le Prisme du client Steam (holo.css) : la matiere du platine, telle que
   validee sur la maquette (maquette-rangs.css). Ces regles ne visent que
   .carte.prisme : le site web ne les voit pas. */
.carte.edition.prisme.r-secrete{--h-force:.5;--h-ombre:.32;--h-foil:1;--h-halo:46%}
.carte.edition.prisme.r-secrete .h-lum{background:#e8eeff;mix-blend-mode:soft-light}
.carte.edition.prisme.r-secrete .h-cadre{
  background:
    radial-gradient(circle,#ffffff 0 .5px,#0000 1px) calc(var(--h-bx) * .4) 0/7px 9px,
    radial-gradient(circle,#e6f4ff 0 .7px,#0000 1.2px) calc(var(--h-by) * -.5) 3px/13px 11px,
    radial-gradient(circle,#ffffff 0 .9px,#0000 1.6px) 5px calc(var(--h-bx) * .7)/23px 19px,
    repeating-linear-gradient(90deg,#ffffff26 0 .15cqw,#0000 .15cqw .45cqw),
    linear-gradient(118deg,#4b5060,#f4f7ff var(--h-bx),#4b5060);
  mix-blend-mode:screen;opacity:calc(.35 + .65 * var(--opa))}
.carte.edition.prisme.r-secrete .vitre>.h-sceau{
  background:linear-gradient(115deg,#8d96ab,#ffffff,#b8c2d8,#f6f8ff,#7d8699) 0 0/400% 400%;
  background-position:var(--h-bx) var(--h-by);mix-blend-mode:screen}
.carte.edition.prisme.r-mythique .vitre>:is(.h-l,.h-foil){display:none}
.carte.edition.prisme.r-mythique .vitre>.h-sceau{opacity:.9;mix-blend-mode:screen;
  background:conic-gradient(from var(--m-angle,0deg),var(--m-iris))}

/* ---------------------------------------------------------------------------
   MYTHIQUE — une fenetre. La boucle (ou le diorama) vit en profondeur derriere
   le cadre de diamant, qui reste devant.
   --------------------------------------------------------------------------- */
.carte.edition.r-mythique{--amp:5%;box-shadow:0 12px 34px #000A,0 0 0 1px #FFFFFF22}
.carte.edition.r-mythique .vitre>.m-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  transform:translate(calc(var(--hx,0) * -2.6%),calc(var(--hy,0) * -2.6%)) scale(1.08)}
.carte.edition.r-mythique .vitre>canvas.d-art{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.carte.edition.r-mythique .vitre::after{
  background:radial-gradient(130% 95% at 50% 36%,#0000 52%,#05040c99 100%),
    linear-gradient(#0000 40%,#0B0A14B8 62%,#0B0A14F2 80%,#0B0A14 92%)}
/* Le cadre de diamant : un biseau clair qui suit la lumiere, et les paillettes
   d'argent de la Secrete par-dessus. */
.carte.edition.r-mythique .liseré{border-width:1.7cqw;
  background:
    radial-gradient(circle,#ffffff 0 .12cqw,#0000 .26cqw) calc(var(--e-bx) * .6) .3cqw/1.3cqw 1.7cqw,
    radial-gradient(circle,#e8f2ff 0 .16cqw,#0000 .3cqw) .7cqw calc(var(--e-by) * -.5)/2.3cqw 1.9cqw,
    radial-gradient(circle,#ffffff 0 .2cqw,#0000 .38cqw) calc(var(--e-by) * .9) 1.1cqw/3.7cqw 3.1cqw,
    linear-gradient(118deg,#141033,#7fe9ff calc(var(--e-bx) - 22%),#ffffff var(--e-bx),
      #c9b3ff calc(var(--e-bx) + 14%),#ff9ed2 calc(var(--e-bx) + 30%),#141033) border-box}
.carte.edition .m-diamant{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit}
.carte.edition .m-diamant::before{content:'';position:absolute;inset:2.3cqw;border-radius:3.4% / 2.4%;
  border:.3cqw solid #ffffff4d;box-shadow:inset 0 0 1.6cqw #9ef3ff40,0 0 1.2cqw #a97bff38}
.carte.edition .m-diamant>i{position:absolute;width:6cqw;height:6cqw;margin:-3cqw 0 0 -3cqw;
  -webkit-mask:var(--m-eclat) center/contain no-repeat;mask:var(--m-eclat) center/contain no-repeat;
  background:conic-gradient(from var(--m-angle,0deg),var(--m-iris))}
.carte.edition .m-diamant>i.c1{left:3.4%;top:2.5%}
.carte.edition .m-diamant>i.c2{left:96.6%;top:2.5%}
.carte.edition .m-diamant>i.c3{left:3.4%;top:97.5%}
.carte.edition .m-diamant>i.c4{left:96.6%;top:97.5%}

/* Les symboles du pied : un trou de serrure (Secrete), l'eclat irise (Mythique). */
.carte.edition .sym .sym-g svg.s-serrure{width:3.4cqw;height:3.8cqw}
.carte.edition .sym .sym-g svg.m-sym{width:4.2cqw;height:4.2cqw}
.carte.edition.r-mythique .sym{filter:drop-shadow(0 0 .9cqw #9ef3ff)}

/* ---------------------------------------------------------------------------
   EN GRAND (fiche, revelation) : le sujet sort du cadre. Une copie du sujet,
   hors de la carte, qui ne montre que l'anneau au-dela du liseré et suit
   l'inclinaison de la carte. Pour la Mythique, les toiles du diorama.
   --------------------------------------------------------------------------- */
.e-pose-rel{position:relative}
.slot.sous-sceau{cursor:default}
.e-hors{position:absolute;left:0;top:0;width:100%;aspect-ratio:734/1024;z-index:3;
  pointer-events:none;--z:.32;--amp:3.4%;
  clip-path:polygon(evenodd,-30% -30%,130% -30%,130% 130%,-30% 130%,-30% -30%,
    2.6% 1.9%,2.6% 98.1%,97.4% 98.1%,97.4% 1.9%,2.6% 1.9%);
  transform:perspective(1100px) rotateY(var(--rot-x,0deg)) rotateX(var(--rot-y,0deg))}
.e-hors .p-plan{position:absolute;border-radius:0;
  transform:translate(calc(var(--hx,0) * var(--z) * -1 * var(--amp)),calc(var(--hy,0) * var(--z) * -1 * var(--amp)))}
/* Dans la fiche, le sujet hors cadre tourne avec la carte : il ne se voit pas de dos. */
.faces>.e-hors{backface-visibility:hidden}
.e-hors.d-hors canvas{position:absolute;left:-14%;top:-12%;width:128%;height:124%}

.carte.edition .m-video.cachee{visibility:hidden}

/* ---------------------------------------------------------------------------
   LE SCEAU a la sortie du sachet (sceau.mjs) : une toile plein ecran, fixe, au
   dessus de tout ; et, sans 3D, un voile irise sur la carte. Le bouton
   « Révéler » arrache le sceau d'un geste — un tirage ne bloque jamais.
   --------------------------------------------------------------------------- */
canvas.e-sceau{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147483000;touch-action:none;cursor:grab}
.carte .e-sceau-voile{position:absolute;inset:0;z-index:20;border-radius:inherit;cursor:pointer;
  background:
    radial-gradient(circle,#ffffff 0 .14cqw,#0000 .3cqw) 0 0/1.3cqw 1.6cqw,
    linear-gradient(118deg,#3a3f4c,#c7cfe2 38%,#f6f8ff 50%,#a6aec2 62%,#2d313b);
  transition:opacity .4s ease,transform .4s ease}
.carte .e-sceau-voile.e-mythique{
  background:
    radial-gradient(circle,#ffffff 0 .14cqw,#0000 .3cqw) 0 0/1.3cqw 1.6cqw,
    conic-gradient(from 210deg at 50% 45%,var(--m-iris))}
.carte .e-sceau-voile.gl{visibility:hidden}
.carte .e-sceau-voile>canvas.e-sceau-face{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.carte .e-sceau-voile.part{opacity:0;transform:translate(-8%,-6%) rotate(-6deg)}
button.e-reveler{position:fixed;z-index:2147483001;transform:translateX(-50%);
  font:700 14px/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0B0A14;
  padding:10px 18px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(118deg,#dce4f7,#ffffff,#9ef3ff);box-shadow:0 6px 18px #0008}

/* ---------------------------------------------------------------------------
   SOBRE, LEGER, MOUVEMENT REDUIT : l'affiche seule, a plat. La carte garde son
   rang, son cadre et son symbole ; la scene, la boucle et la 3D s'eteignent.
   --------------------------------------------------------------------------- */
html:is(.sobre,.leger-holo,.leger-tout) .carte.edition .vitre>img{visibility:visible}
html:is(.sobre,.leger-holo,.leger-tout) .carte.edition :is(.p-scene,.m-video,canvas.d-art,.e-encre,.s-voile),
html:is(.sobre,.leger-holo,.leger-tout) .e-hors{display:none}
@media (prefers-reduced-motion:reduce){
  .carte.edition .p-plan,.carte.edition.r-mythique .vitre>.m-video{transform:none}
}

/* ==========================================================================
   LES OMBRES DU LOBBY (§89) : ce que la collection choisie cache, DANS LE
   FOND. Deux cartes fantomes derriere l'eventail et le sachet, a peine
   visibles : un liseret de la couleur du rang, la silhouette du sujet en
   lueur (le sujet sert de masque), un reflet qui passe de loin en loin. Pas
   d'etiquette : la ligne au-dessus du bouton dit le reste. Rien ne bouge en
   mode sobre ni en rendu leger (collec-rendu-logiciel).
   ========================================================================== */
.ombres-editions{position:absolute;inset:0;pointer-events:none;z-index:0}
.ombre{--c:var(--r-secrete);--sens:-1;
  position:absolute;left:50%;top:50%;width:clamp(150px,13.5vw,210px);aspect-ratio:734/1024;
  transform:translate(calc(-50% + var(--sens) * clamp(110px,9vw,150px)),-64%) rotate(calc(var(--sens) * 13deg));
  opacity:.5;animation:ombre-souffle 9s ease-in-out infinite;animation-delay:calc(var(--i) * -4.5s)}
.ombre:nth-child(2){--sens:1}
.ombre.r-mythique{--c:var(--r-mythique)}
@keyframes ombre-souffle{0%,100%{opacity:.34}50%{opacity:.62}}
.o-carte{position:absolute;inset:0;border-radius:7%;
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 8%,transparent),transparent 65%);
  box-shadow:0 0 26px color-mix(in srgb,var(--c) 14%,transparent)}
.o-fantome,.o-reflet{position:absolute;bottom:0;left:calc(var(--mc) * -100%);width:calc(100% * (1 + 2 * var(--mc)));pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.o-fantome{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 42%,transparent),color-mix(in srgb,var(--c) 12%,transparent) 80%);opacity:.6}
.o-reflet{background:linear-gradient(115deg,transparent 35%,#ffffff70 50%,transparent 65%) 0 0/280% 100% no-repeat;
  animation:ombre-reflet 11s ease-in-out infinite;animation-delay:calc(var(--i) * -5s)}
.ombre.r-mythique .o-reflet{background-image:linear-gradient(115deg,transparent 30%,#9EF3FF80 42%,#C9B6FF90 48%,#FFD7A390 53%,transparent 66%)}
@keyframes ombre-reflet{0%,55%{background-position:120% 0}85%,100%{background-position:-20% 0}}
.annonce-editions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 7px;margin:0 0 12px;
  font-size:13px;line-height:1.35;font-weight:500;color:#C9D1E0;text-align:center}
.annonce-editions small{flex-basis:100%;font:500 10.5px/1.3 "JetBrains Mono",ui-monospace,monospace;color:#8C96AA;letter-spacing:.02em}
.sigil-editions,.a-editions b::after{display:inline-block;width:10px;height:10px;flex:none;
  background:conic-gradient(from 20deg,#9EF3FF,#C9B6FF,#FFD7A3,#DCE4F7,#9EF3FF);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.a-editions b::after{content:'';width:9px;height:9px;margin-left:6px;vertical-align:.12em;opacity:.85}
/* Le client Steam : la ligne vit dans la colonne de gauche, alignee a gauche ;
   les ombres sont au fond du volume 2,5D et reculent avec la camera. */
.client-steam .annonce-editions{justify-content:flex-start;text-align:left;margin:2px 0 10px}
.client-steam .annonce-editions small{text-align:left}
.client-steam .jeu-volume>.ombres-editions{transform:translateZ(-80px)}
.client-steam .ombre{width:clamp(140px,12vw,190px);transform:translate(calc(-50% + var(--sens) * clamp(100px,8.5vw,140px)),-70%) rotate(calc(var(--sens) * 13deg))}
@media (max-width:720px){
  .ombre{width:118px;transform:translate(calc(-50% + var(--sens) * 80px),-74%) rotate(calc(var(--sens) * 13deg))}
  .annonce-editions{font-size:12.5px;padding:0 14px}
}
html.sobre .ombre,html.sobre .o-reflet,html.leger-holo .ombre,html.leger-holo .o-reflet,
html.leger-tout .ombre,html.leger-tout .o-reflet{animation:none}