/* ==================================================================
   RISE TCG : styles du site public
   Palette derivee du logo officiel (cuivre, bronze, creme, braise)
   ================================================================== */

:root{
  --ink:#0C0809;
  --void:#170F11;
  --panel:#201417;
  --panel-2:#2C1B1D;
  --line:rgba(237,209,185,.15);
  --copper:#A76953;
  --copper-dk:#884934;
  --copper-lt:#EDD1B9;
  --ember:#C4442A;
  --ether:#2FBFB6;
  --paper:#F2EAE6;
  --muted:#A2908C;

  /* code couleur officiel des fiches de jeu */
  --passif:#2E8FC4;
  --actif:#C4442A;
  --phase:#4BAE6E;
  --pr1:#4BAE6E;
  --pr2:#8B5CF6;
  --pr3:#E8762B;
  --pr4:#2FBFB6;

  --display:'Big Shoulders Display',system-ui,-apple-system,sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --maxw:1220px;
  --pad:clamp(18px,5vw,60px);

  /* encoches et barres systeme iOS et Android */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  --hdr-h:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* empeche iOS de gonfler le texte en paysage */
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overscroll-behavior-y:none;      /* pas de rebond blanc en haut sur iOS */
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
  -webkit-tap-highlight-color:transparent;
}

img,picture,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(167,105,83,.2)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ether);outline-offset:3px;border-radius:3px}

h1,h2,h3{font-family:var(--display);margin:0;line-height:.94;letter-spacing:.005em;text-transform:uppercase;font-weight:800}
h2{font-size:clamp(30px,5vw,60px)}
h3{font-size:21px;line-height:1.06}
.h2--sm{font-size:clamp(24px,3.4vw,38px)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--copper);color:#2A1108;padding:12px 18px;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(50px,8vw,100px)}
.section--tight{padding-top:0}
.page-head{padding-block:clamp(34px,6vw,68px) 10px}
.page-h1{font-size:clamp(36px,7vw,72px);margin-bottom:14px}
.lede{font-size:clamp(15.5px,1.5vw,18px);color:#CFBFB9;max-width:64ch;line-height:1.7}
.note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:16px;letter-spacing:.04em}
.sec-head{max-width:66ch;margin-bottom:clamp(28px,4vw,42px)}
.sec-head .lede{margin-top:12px}

/* ===================== AMBIANCE DU SITE =====================
   Le fond superpose des halos colores, une texture et un vignettage.
   Tout est en CSS : aucune image n'est telechargee. L'intensite est
   pilotee par une seule variable, --fx.
   =========================================================== */

.fx-soft{--fx:.55}
.fx-normal{--fx:1}
.fx-strong{--fx:1.5}

.bg{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--ink)}
.bg__l{position:absolute;inset:0;display:block}

.bg-vignette{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 35%, transparent 45%, rgba(6,4,5,.75) 100%);
  opacity:calc(.85 * var(--fx));
}
/* Texture. Elle est dessinee par un filtre SVG en ligne : aucune image
   n'est telechargee, et le motif ne se repete pas de facon visible.

   Deux precautions :
   . le bruit est force en niveaux de gris, sinon feTurbulence produit
     des pixels colores qui teintent le fond ;
   . le motif est agrandi et renforce sur les ecrans a forte densite,
     ou chaque grain se retrouve lisse sur deux ou trois pixels
     physiques et disparait. */
.bg-grain{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  --tx:.22;
  --tx-boost:1;
  --tx-scale:1;
  opacity:calc(var(--tx) * var(--tx-boost));
}
.tx-soft   .bg-grain{--tx:.11}
.tx-normal .bg-grain{--tx:.22}
.tx-strong .bg-grain{--tx:.36}
.tx-max    .bg-grain{--tx:.54}

/* Grain fin, proche d'un tirage argentique */
.tex-grain .bg-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .33 .33 .33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.4' amplitude='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:calc(180px * var(--tx-scale)) calc(180px * var(--tx-scale));
}
/* Grain epais, plus present */
.tex-sable .bg-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .33 .33 .33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.4' amplitude='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size:calc(220px * var(--tx-scale)) calc(220px * var(--tx-scale));
}
/* Toile, trame tissee */
.tex-toile .bg-grain{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .33 .33 .33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.4' amplitude='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,   rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  background-size:calc(200px * var(--tx-scale)) calc(200px * var(--tx-scale)), auto, auto;
}
/* Papier, fibres irregulieres */
.tex-papier .bg-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .45' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .33 .33 .33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.4' amplitude='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:calc(420px * var(--tx-scale)) calc(420px * var(--tx-scale));
}
.tex-none .bg-grain{display:none}

/* Ecrans a forte densite : le grain est lisse sur plusieurs pixels
   physiques. On agrandit le motif et on remonte l'opacite pour
   retrouver la meme presence qu'a l'ecran. */
@media (min-resolution:2dppx){
  .bg-grain{--tx-boost:1.35;--tx-scale:1.5}
}
@media (min-resolution:3dppx){
  .bg-grain{--tx-boost:1.5;--tx-scale:1.9}
}
/* Petit ecran : moins de surface, donc moins de texture percue.
   Les valeurs ne se cumulent pas avec celles de la densite, elles
   les remplacent, sans quoi le grain deviendrait envahissant. */
@media (max-width:620px){
  .bg-grain{--tx-boost:1.5;--tx-scale:1.3}
}
@media (max-width:620px) and (min-resolution:2dppx){
  .bg-grain{--tx-boost:1.7;--tx-scale:1.7}
}
@media (max-width:620px) and (min-resolution:3dppx){
  .bg-grain{--tx-boost:1.85;--tx-scale:2.1}
}

/* ---- Portail ----
   Le halo tourne en permanence et sa teinte parcourt les metaux :
   cuivre, or, argent, bronze. La rotation se fait autour du centre du
   portail, pas de celui de l'ecran, sinon les rayons decrivent un
   cercle decale au lieu de tourner sur eux-memes. */
.fx-portail .bg{animation:portal-metal 54s linear infinite}

.fx-portail .bg__l--1{
  background:
    radial-gradient(circle at 50% 30%, rgba(167,105,83,calc(.34 * var(--fx))) 0%, transparent 46%),
    radial-gradient(circle at 50% 30%, rgba(47,191,182,calc(.12 * var(--fx))) 0%, transparent 30%),
    linear-gradient(180deg,#100A0C,#080506);
}
.fx-portail .bg__l--2{
  opacity:calc(.34 * var(--fx));
  background:repeating-conic-gradient(from 0deg at 50% 30%,
    rgba(237,209,185,.2) 0deg 2deg, transparent 2deg 11deg);
  -webkit-mask:radial-gradient(circle at 50% 30%, #000 0%, transparent 62%);
  mask:radial-gradient(circle at 50% 30%, #000 0%, transparent 62%);
  transform-origin:50% 30%;
  animation:bg-spin 42s linear infinite;
  will-change:transform;
}
/* Un second jeu de rayons, plus fin et tournant en sens inverse,
   donne de la profondeur au mouvement. */
.fx-portail .bg__l--3{
  opacity:calc(.5 * var(--fx));
  background:
    radial-gradient(circle at 50% 30%,
      transparent 21.4%, rgba(237,209,185,.34) 21.8%, transparent 22.6%),
    repeating-conic-gradient(from 0deg at 50% 30%,
      rgba(237,209,185,.09) 0deg 1deg, transparent 1deg 23deg);
  -webkit-mask:radial-gradient(circle at 50% 30%, #000 0%, transparent 55%);
  mask:radial-gradient(circle at 50% 30%, #000 0%, transparent 55%);
  transform-origin:50% 30%;
  animation:bg-spin-rev 68s linear infinite, bg-breathe 12s ease-in-out infinite alternate;
  will-change:transform;
}

/* Parcours des metaux. Le filtre porte sur le conteneur du fond, une
   seule couche est donc recomposee au lieu de trois. */
@keyframes portal-metal{
  0%   {filter:hue-rotate(0deg)   saturate(1)    brightness(1)}
  22%  {filter:hue-rotate(16deg)  saturate(1.35) brightness(1.1)}   /* or */
  46%  {filter:hue-rotate(-4deg)  saturate(.14)  brightness(1.24)}  /* argent */
  70%  {filter:hue-rotate(-16deg) saturate(1.15) brightness(.94)}   /* bronze */
  100% {filter:hue-rotate(0deg)   saturate(1)    brightness(1)}     /* cuivre */
}

/* ---- Ether ---- */
.fx-ether .bg__l--1{
  background:
    radial-gradient(880px 620px at 78% -6%, rgba(167,105,83,calc(.34 * var(--fx))), transparent 62%),
    radial-gradient(700px 540px at 6% 14%,  rgba(47,191,182,calc(.13 * var(--fx))), transparent 60%),
    radial-gradient(1000px 660px at 50% 106%, rgba(196,68,42,calc(.14 * var(--fx))), transparent 66%);
}
.fx-ether .bg__l--2{
  background:
    radial-gradient(520px 420px at 20% 40%, rgba(139,92,246,calc(.16 * var(--fx))), transparent 65%),
    radial-gradient(620px 460px at 85% 68%, rgba(47,191,182,calc(.12 * var(--fx))), transparent 62%);
  animation:bg-drift 34s ease-in-out infinite alternate;
}
.fx-ether .bg__l--3{
  opacity:calc(.75 * var(--fx));
  background-image:
    radial-gradient(1.5px 1.5px at 14% 20%, rgba(255,240,230,.55), transparent),
    radial-gradient(1.2px 1.2px at 66% 12%, rgba(255,240,230,.4), transparent),
    radial-gradient(1.6px 1.6px at 36% 66%, rgba(255,240,230,.35), transparent),
    radial-gradient(1.1px 1.1px at 86% 54%, rgba(255,240,230,.45), transparent),
    radial-gradient(1.3px 1.3px at 54% 88%, rgba(255,240,230,.3), transparent),
    radial-gradient(1.2px 1.2px at 24% 46%, rgba(255,240,230,.28), transparent);
  animation:bg-twinkle 9s ease-in-out infinite alternate;
}

/* ---- Grimoire ---- */
.fx-grimoire .bg__l--1{
  background:
    radial-gradient(900px 700px at 50% 0%, rgba(93,58,40,calc(.5 * var(--fx))), transparent 70%),
    linear-gradient(180deg,#140E0F,#0A0708);
}
.fx-grimoire .bg__l--2{
  opacity:calc(.5 * var(--fx));mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .65 0 0 0 0 .45 0 0 0 0 .33 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)'/%3E%3C/svg%3E");
}
.fx-grimoire .bg__l--3{
  opacity:calc(.16 * var(--fx));
  transform-origin:50% 42%;
  background:repeating-conic-gradient(from 0deg at 50% 42%,
    transparent 0deg 7deg, rgba(237,209,185,.5) 7deg 7.4deg);
  -webkit-mask:radial-gradient(circle at 50% 42%, transparent 26%, #000 27%, #000 30%, transparent 31%);
  mask:radial-gradient(circle at 50% 42%, transparent 26%, #000 27%, #000 30%, transparent 31%);
  animation:bg-spin 120s linear infinite;
}

/* ---- Cristal ---- */
.fx-cristal .bg__l--1{
  background:
    linear-gradient(180deg,#0E0A12,#0A0708 60%),
    radial-gradient(800px 600px at 20% 10%, rgba(47,191,182,calc(.16 * var(--fx))), transparent 60%);
}
.fx-cristal .bg__l--2{
  opacity:calc(.5 * var(--fx));
  background-image:
    linear-gradient(115deg, transparent 45%, rgba(237,209,185,.09) 46%, transparent 47%),
    linear-gradient(65deg,  transparent 60%, rgba(47,191,182,.1) 61%, transparent 62%),
    linear-gradient(160deg, transparent 30%, rgba(167,105,83,.12) 31%, transparent 33%);
  background-size:1400px 1400px,1100px 1100px,900px 900px;
}
.fx-cristal .bg__l--3{
  background:
    radial-gradient(600px 500px at 80% 30%, rgba(139,92,246,calc(.18 * var(--fx))), transparent 62%),
    radial-gradient(500px 420px at 12% 76%, rgba(196,68,42,calc(.14 * var(--fx))), transparent 62%);
  animation:bg-pulse 18s ease-in-out infinite alternate;
}

/* ---- Aucun ---- */
.fx-none .bg__l--1{background:linear-gradient(180deg,#0C0809,#150E10 48%,#0C0809)}

@keyframes bg-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes bg-spin-rev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes bg-breathe{0%{transform:scale(.985);opacity:calc(.25 * var(--fx))}100%{transform:scale(1.02);opacity:calc(.6 * var(--fx))}}
@keyframes bg-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.08)}}
@keyframes bg-twinkle{0%{opacity:calc(.45 * var(--fx))}100%{opacity:calc(.85 * var(--fx))}}
@keyframes bg-pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:1;transform:scale(1.06)}}

/* ---- Eclairs ----
   Deux impulsions rapprochees, comme un vrai eclair. Le calque reste
   inerte le reste du temps : aucune animation ne tourne en continu.
   La puissance est pilotee par --flash, independante de --fx pour que
   l'eclair reste franc meme sur un fond discret. */
.bg-flash{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;
  --flash:1.4;
  /* Les trois teintes sont posees par le script a chaque eclair. */
  --fc1:255,250,242;
  --fc2:237,209,185;
  --fc3:214,232,255;
  background:
    radial-gradient(circle at 50% 24%, rgba(var(--fc1),.95) 0%, rgba(var(--fc2),.5) 18%, transparent 46%),
    radial-gradient(120% 70% at 50% 0%, rgba(var(--fc3),.42), transparent 60%),
    linear-gradient(180deg, rgba(var(--fc1),.5), transparent 52%);
}
/* Un second calque donne la nervosite : une lueur laterale breve. */
.bg-flash::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 100% at 8% 30%, rgba(var(--fc3),.5), transparent 62%),
    radial-gradient(60% 100% at 92% 26%, rgba(var(--fc2),.45), transparent 62%);
  opacity:0;
}
.bg-flash.is-on{animation:bg-strike 780ms cubic-bezier(.2,.9,.3,1)}
.bg-flash.is-on::after{animation:bg-strike-side 780ms cubic-bezier(.2,.9,.3,1)}

@keyframes bg-strike{
  0%   {opacity:0}
  3%   {opacity:calc(.85 * var(--flash))}
  8%   {opacity:calc(.12 * var(--flash))}
  13%  {opacity:calc(.7 * var(--flash))}
  22%  {opacity:calc(.08 * var(--flash))}
  32%  {opacity:calc(.4 * var(--flash))}
  55%  {opacity:calc(.1 * var(--flash))}
  100% {opacity:0}
}
@keyframes bg-strike-side{
  0%  {opacity:0}
  5%  {opacity:calc(.5 * var(--flash))}
  16% {opacity:calc(.06 * var(--flash))}
  30% {opacity:calc(.3 * var(--flash))}
  100%{opacity:0}
}

/* Le contenu recoit un souffle de lumiere, sinon l'eclair reste
   derriere la page et ne se remarque pas. */
.is-striking .hdr,
.is-striking .slider,
.is-striking .showcase,
.is-striking .fan{
  animation:bg-lit 780ms cubic-bezier(.2,.9,.3,1);
}
@keyframes bg-lit{
  0%   {filter:none}
  4%   {filter:brightness(calc(1 + .3 * var(--flash, 1.4)))}
  12%  {filter:brightness(1.02)}
  18%  {filter:brightness(calc(1 + .22 * var(--flash, 1.4)))}
  40%  {filter:brightness(1.01)}
  100% {filter:none}
}

/* ===================== EN-TETE ===================== */
.hdr{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--line);
  padding-top:var(--safe-t);
}
/* Fond vitre porte par un pseudo-element : un backdrop-filter directement
   sur .hdr ferait du header le bloc conteneur du menu mobile en
   position:fixed, ce qui reduisait sa hauteur a zero. */
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(12,8,9,.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.hdr__in{display:flex;align-items:center;gap:16px;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand__mark{height:26px;width:auto}
.brand__ch{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ether);border:1px solid rgba(47,191,182,.4);padding:3px 5px;border-radius:3px}
.brand-text{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:.06em;
  background:linear-gradient(100deg,var(--copper-lt),var(--copper) 55%,var(--copper-dk));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.nav{display:flex;gap:2px;margin-left:auto}
.nav a{
  font-family:var(--display);font-size:17px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;color:var(--muted);padding:9px 12px;border-radius:6px;
  transition:color .2s,background .2s;
}
.nav a:hover{color:var(--paper);background:rgba(167,105,83,.16)}
.nav a[aria-current="page"]{color:var(--copper-lt)}
.nav a[aria-current="page"]::after{content:"";display:block;height:2px;margin-top:3px;border-radius:2px;background:linear-gradient(90deg,var(--copper-lt),var(--copper))}
.nav__mobile-extra{display:none}

.hdr__right{display:flex;align-items:center;gap:10px}

/* selecteur de langue a drapeaux */
.langsel{display:flex;align-items:center;gap:4px}
.langsel__i{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:7px;
  border:1px solid transparent;opacity:.55;
  transition:opacity .18s,border-color .18s,transform .18s;
}
.langsel__i:hover{opacity:1;transform:translateY(-1px)}
.langsel__i.is-on{opacity:1;border-color:rgba(237,209,185,.45);background:rgba(167,105,83,.18)}
.flag{border-radius:2.5px;display:block}
.langsel--stack{gap:8px;margin-bottom:14px}
.langsel--stack .langsel__i{width:44px;height:38px}

.btn-shop{
  font-family:var(--body);font-weight:700;font-size:13px;white-space:nowrap;
  background:linear-gradient(100deg,var(--copper-lt),var(--copper) 55%,var(--copper-dk));
  color:#2A1108;padding:10px 16px;border-radius:7px;
  box-shadow:0 6px 20px -9px rgba(167,105,83,.95);
  transition:transform .18s,filter .18s;
}
.btn-shop:hover{transform:translateY(-1px);filter:brightness(1.06)}

.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;border-radius:8px}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--paper);border-radius:2px;transition:transform .25s,opacity .2s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===================== BOUTONS ===================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper-lt);margin-bottom:14px;
}
.eyebrow::before{
  content:"";width:26px;height:3px;flex:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--copper) 40%,var(--copper-lt));
  clip-path:polygon(0 50%,14% 0,100% 22%,100% 78%,14% 100%);
}
.eyebrow--dark{color:var(--copper-lt)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:8px;
  min-height:46px;                 /* cible tactile confortable */
  transition:transform .18s,filter .18s,background .18s,border-color .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-p{background:linear-gradient(100deg,var(--copper-lt),var(--copper) 55%,var(--copper-dk));color:#2A1108;box-shadow:0 8px 26px -12px rgba(167,105,83,.95)}
.btn-p:hover{filter:brightness(1.06)}
.btn-g{border:1px solid var(--line);color:var(--paper);background:rgba(167,105,83,.1)}
.btn-g:hover{border-color:rgba(47,191,182,.5);background:rgba(47,191,182,.09)}
.btn-sm{padding:9px 15px;font-size:13px;min-height:40px}
.btn-lg{font-size:16px;padding:16px 28px;min-height:54px}
.btn-mt{margin-top:22px}

/* ===================== HERO ===================== */
.hero{padding-top:clamp(30px,5vw,72px);padding-bottom:clamp(34px,5vw,64px)}
/* minmax(0,...) est indispensable : sans lui une colonne de grille refuse
   de descendre sous la largeur de son contenu et deborde sur sa voisine. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(20px,3.5vw,44px);align-items:center}
.hero__text{min-width:0}
/* Le titre est dimensionne d'apres la largeur de sa colonne, pas de l'ecran. */
.hero__h1{font-size:clamp(40px,6.6vw,98px);font-weight:900;line-height:.84;margin-bottom:18px}
.hero__h1 span{display:block}
.hero__accent{background:linear-gradient(96deg,var(--copper-lt) 0%,var(--copper) 44%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 28px}

.facts{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);margin:0;padding:0}
.fact{padding:14px 22px 2px 0;margin-right:22px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0;margin-right:0}
.fact dd{margin:0;font-family:var(--display);font-size:30px;font-weight:800;line-height:1}
.fact dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ===================== CARTES HOLOGRAPHIQUES ===================== */
/* L'eventail se dimensionne en proportion de sa colonne. Les decalages sont
   exprimes en pourcentage de la carte, donc tout se reduit ensemble et rien
   ne vient mordre sur le texte ni sortir de l'ecran. */
.fan{position:relative;min-width:0;height:clamp(250px,29vw,400px)}
.card{
  --mx:50%;--my:50%;
  position:relative;width:clamp(104px,14vw,180px);aspect-ratio:63/88;border-radius:13px;overflow:hidden;flex:none;
  border:1px solid rgba(237,209,185,.3);
  box-shadow:0 26px 58px -24px #000,0 0 0 1px rgba(0,0,0,.6);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.card__art,.card picture,.card picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__frame{
  position:absolute;inset:0;border:5px solid transparent;border-radius:13px;pointer-events:none;
  background:linear-gradient(160deg,rgba(237,209,185,.75),rgba(167,105,83,.2) 42%,rgba(196,68,42,.5)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card__lbl{position:absolute;left:0;right:0;bottom:0;padding:9% 7% 7%;background:linear-gradient(180deg,transparent,rgba(8,4,5,.94) 55%)}
.card__lbl b{display:block;font-family:var(--display);font-size:clamp(13px,1.5vw,21px);font-weight:800;text-transform:uppercase}
.card__lbl span{font-family:var(--mono);font-size:clamp(7px,.75vw,9.5px);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-lt)}
.card__cost{
  position:absolute;top:6%;left:6%;width:clamp(20px,3vw,30px);height:clamp(20px,3vw,30px);z-index:2;
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FBEFC6,var(--copper) 52%,var(--copper-dk));
  color:#2A1108;font-family:var(--display);font-weight:800;font-size:clamp(12px,1.8vw,18px);
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
/* Les cartes sont empilees au centre du conteneur, puis ecartees. */
.fan .card{position:absolute;top:50%;left:50%}
.fan .card:nth-child(1){transform:translate(-50%,-50%) translateX(-54%) rotate(-13deg)}
.fan .card:nth-child(2){transform:translate(-50%,-50%) translateY(-4%) scale(1.05);z-index:3}
.fan .card:nth-child(3){transform:translate(-50%,-50%) translateX(54%) rotate(13deg)}
.fan .card:nth-child(1):hover{transform:translate(-50%,-50%) translateX(-57%) rotate(-9deg) scale(1.03)}
.fan .card:nth-child(2):hover{transform:translate(-50%,-50%) translateY(-9%) scale(1.09)}
.fan .card:nth-child(3):hover{transform:translate(-50%,-50%) translateX(57%) rotate(9deg) scale(1.03)}

/* reflet holographique, pilote par le curseur ou l'inclinaison de l'appareil */
.holo::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(210px 210px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.34), transparent 62%),
    repeating-linear-gradient(112deg,
      rgba(255,0,140,.3) 0%, rgba(255,214,0,.3) 9%, rgba(0,255,190,.3) 18%,
      rgba(0,140,255,.3) 27%, rgba(190,0,255,.3) 36%, rgba(255,0,140,.3) 45%);
  background-blend-mode:overlay;
  mix-blend-mode:color-dodge;
  opacity:0;transition:opacity .3s;
}
.holo:hover::after,.holo:focus-within::after,.holo.is-tilt::after{opacity:.72}

/* aplats de substitution tant que les artworks officiels ne sont pas en place */
.ph-1,.ph-2,.ph-3,.ph-4,.ph-5,.ph-6{display:block;width:100%;height:100%;min-height:100%}
.ph-1{background:radial-gradient(120% 80% at 32% 18%,#8B4A34,transparent 60%),radial-gradient(90% 70% at 78% 82%,#3B2A5E,transparent 62%),linear-gradient(200deg,#2A1512,#0A0607)}
.ph-2{background:radial-gradient(115% 78% at 60% 20%,#C08A5A,transparent 58%),radial-gradient(90% 70% at 20% 82%,#7A3216,transparent 60%),linear-gradient(190deg,#2E1A0A,#0A0607)}
.ph-3{background:radial-gradient(120% 80% at 40% 22%,#1F8C86,transparent 60%),radial-gradient(90% 70% at 82% 78%,#4A2140,transparent 62%),linear-gradient(210deg,#0A2422,#0A0607)}
.ph-4{background:radial-gradient(120% 80% at 70% 20%,#A63A4E,transparent 58%),radial-gradient(90% 70% at 18% 82%,#3A2A6B,transparent 62%),linear-gradient(200deg,#25101C,#0A0607)}
.ph-5{background:radial-gradient(120% 80% at 30% 80%,#2A9FB0,transparent 58%),radial-gradient(90% 70% at 80% 18%,#C07A2A,transparent 60%),linear-gradient(160deg,#0C1C26,#0A0607)}
.ph-6{background:radial-gradient(120% 80% at 50% 24%,#6E9B3A,transparent 55%),radial-gradient(90% 70% at 20% 84%,#1F4A38,transparent 62%),linear-gradient(190deg,#101A0E,#0A0607)}
.img-empty{background:rgba(167,105,83,.14)}

/* ===================== BANDE BUT DU JEU ===================== */
.goal{border-block:1px solid var(--line);background:linear-gradient(120deg,rgba(196,68,42,.1),rgba(167,105,83,.05));padding-block:clamp(26px,4vw,34px)}
.goal__in{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.goal__big{font-size:clamp(24px,3.4vw,40px);max-width:22ch;line-height:1}
.goal__in p{color:#CFBFB9;margin:0;max-width:44ch;font-size:15px}
.goal__hearts{display:flex;gap:7px;margin-left:auto}
.goal__hearts i{width:34px;height:34px;border-radius:50%;background:rgba(196,68,42,.18);border:1px solid rgba(196,68,42,.5);display:grid;place-items:center;color:var(--ember);font-style:normal;font-size:15px}

/* ===================== SEQUENCE DES PHASES ===================== */
.phases{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.ph-btn{
  display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:9px;
  border:1px solid var(--line);background:rgba(36,23,25,.55);
  transition:border-color .2s,background .2s;min-height:46px;
}
.ph-btn:hover{border-color:rgba(75,174,110,.5)}
.ph-btn__n{width:24px;height:24px;border-radius:50%;background:rgba(75,174,110,.16);border:1px solid rgba(75,174,110,.5);color:var(--phase);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;flex:none}
.ph-btn__t{font-family:var(--display);font-size:18px;font-weight:700;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ph-btn.is-on{background:rgba(75,174,110,.14);border-color:rgba(75,174,110,.6)}
.ph-btn.is-on .ph-btn__t{color:var(--paper)}
.ph-btn.is-on .ph-btn__n{background:var(--phase);color:#08150D;border-color:var(--phase)}

.ph-panel{border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,28px);background:linear-gradient(150deg,rgba(44,27,29,.7),rgba(23,15,17,.7));min-height:160px}
.ph-panel h3{font-size:clamp(22px,3vw,28px);margin-bottom:10px}
.ph-panel p{color:#CFBFB9;margin:0;max-width:74ch}
.ph-panel .tip{margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--phase)}

/* ===================== PRIORITE ET PILE ===================== */
.prio{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.prio__list{display:flex;flex-direction:column;gap:10px}
.prio-row{
  display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;
  padding:14px 17px;border-radius:12px;border:1px solid var(--line);
  background:rgba(36,23,25,.5);transition:transform .22s,background .22s;
  text-align:left;width:100%;
}
.prio-row:hover{transform:translateX(4px)}
.prio-row:active{background:rgba(167,105,83,.2)}
.bolts{display:flex;gap:2px}
.bolts svg{width:17px;height:17px}
.prio-row__body{display:block}
.prio-row__lbl{display:block;font-family:var(--display);font-size:19px;font-weight:700;text-transform:uppercase}
.prio-row__sub{display:block;font-size:13px;color:var(--muted);margin-top:1px;line-height:1.45}
.prio-row--1{border-color:rgba(75,174,110,.45)}
.prio-row--1 .prio-row__lbl{color:var(--pr1)}
.prio-row--1 .bolts svg{fill:var(--pr1)}
.prio-row--2{border-color:rgba(139,92,246,.45)}
.prio-row--2 .prio-row__lbl{color:#A98BF5}
.prio-row--2 .bolts svg{fill:var(--pr2)}
.prio-row--3{border-color:rgba(232,118,43,.45)}
.prio-row--3 .prio-row__lbl{color:var(--pr3)}
.prio-row--3 .bolts svg{fill:var(--pr3)}
.prio-row--4{border-color:rgba(47,191,182,.45)}
.prio-row--4 .prio-row__lbl{color:var(--pr4)}
.prio-row--4 .bolts svg{fill:var(--pr4)}

.stack{border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(23,15,17,.6)}
.stack h3{font-size:20px;margin-bottom:4px}
.stack__cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.stack__items{display:flex;flex-direction:column-reverse;gap:8px;min-height:170px;justify-content:flex-end}
.stack__empty{color:var(--muted);font-size:13.5px;text-align:center;padding:24px 0;align-self:center}
.si{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:9px;background:rgba(44,27,29,.9);border:1px solid var(--line);font-size:13.5px;animation:pop .3s ease}
.si b{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto;font-weight:400}
.si__dot{width:8px;height:8px;border-radius:50%;flex:none}
.si.is-resolving{border-color:var(--ember);background:rgba(196,68,42,.16)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stack__cta{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}

/* ===================== LANCER DE TOSS ===================== */
.toss{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  border:1px solid var(--line);border-radius:16px;padding:clamp(24px,4vw,32px) clamp(22px,4vw,36px);
  background:linear-gradient(150deg,rgba(167,105,83,.14),rgba(47,191,182,.04));
}
.coin-stage{perspective:900px;width:128px;height:128px;margin-inline:auto}
.coin{position:relative;width:128px;height:128px;transform-style:preserve-3d;cursor:pointer;animation:coin-idle 7s ease-in-out infinite}
@keyframes coin-idle{0%,100%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(-16deg) translateY(-7px)}}
.coin__face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(90,48,28,.7) inset,0 18px 40px -14px rgba(167,105,83,.7)}
.coin__face--a{background:radial-gradient(circle at 34% 28%,#FBEFC6,var(--copper) 50%,#6E3A1E)}
.coin__face--b{background:radial-gradient(circle at 34% 28%,#EDD1B9,#9C5E42 52%,#5A2E18);transform:rotateY(180deg)}
.coin__face svg{width:58%;height:58%}
.coin__cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:12px}

/* ===================== TYPES DE CARTE ===================== */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.type{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(36,23,25,.45);transition:border-color .22s,transform .22s}
.type:hover{border-color:rgba(167,105,83,.55);transform:translateY(-2px)}
.type__ic{width:44px;height:44px;flex:none;border-radius:50%;background:radial-gradient(circle at 34% 28%,#EDD1B9,#9C6046 55%,#4E2A1B);display:grid;place-items:center;overflow:hidden}
.type__ic img{width:26px;height:26px;object-fit:contain}
.type__body b{font-family:var(--display);font-size:19px;font-weight:700;text-transform:uppercase;display:block;line-height:1.05}
.type__body span{font-size:13px;color:var(--muted);display:block;margin-top:3px;line-height:1.5}

/* ===================== APTITUDES ===================== */
.apt-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.blk-apt{border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(23,15,17,.55);margin-bottom:16px}
.blk-apt__hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.blk-apt__hd b{font-family:var(--display);font-size:21px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.blk-apt__dots{flex:1;height:1px;background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px);opacity:.4}
.blk-apt--passif{border-color:rgba(46,143,196,.4)}
.blk-apt--passif .blk-apt__hd b{color:var(--passif)}
.blk-apt--actif{border-color:rgba(196,68,42,.4)}
.blk-apt--actif .blk-apt__hd b{color:var(--actif)}
.blk-apt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.blk-apt li{display:flex;gap:14px;align-items:flex-start;font-size:14px}
.blk-apt li > span{padding-top:1px}
.blk-apt li i{width:30px;height:30px;flex:none;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:13px}
/* Icone officielle : ces pictogrammes sont dessines pour un fond blanc,
   leur contraste interne en depend. On les pose donc sur un carre clair
   plutot que de les detourer, sinon ils se delavent sur le fond sombre. */
.blk-apt__ic{
  width:44px;height:44px;flex:none;object-fit:contain;
  background:#fff;border-radius:9px;
  box-shadow:0 2px 8px -3px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14);
}
.blk-icon__img{width:100%;height:100%;object-fit:contain}
.blk-apt--passif li i{background:rgba(46,143,196,.15);border:1px solid rgba(46,143,196,.45);color:var(--passif)}
.blk-apt--actif li i{background:rgba(196,68,42,.15);border:1px solid rgba(196,68,42,.45);color:var(--actif)}
.blk-apt li b{display:block;font-weight:700}
.blk-apt li span span{color:var(--muted);font-size:13px;line-height:1.5}

/* ===================== DECKS ===================== */
.decks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sec-more{margin:26px 0 0;text-align:center}
.deck{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:rgba(23,15,17,.6);transition:border-color .22s,transform .22s}
.deck:hover{border-color:rgba(167,105,83,.55);transform:translateY(-3px)}
.deck__ph{aspect-ratio:5/3;position:relative;overflow:hidden}
.deck__ph img{width:100%;height:100%;object-fit:cover}
.deck__bd{padding:15px 17px 18px}
.deck__bd b{font-family:var(--display);font-size:21px;font-weight:800;text-transform:uppercase;display:block;line-height:1}
.deck__bd p{font-size:13px;color:var(--muted);margin:7px 0 0;line-height:1.5}

/* ===================== VITRINE DE LA GALERIE =====================
   Deux lignes de six sur grand ecran. Le nombre de colonnes diminue
   avec la largeur, les cartes gardent leur format.
   ================================================================ */
.showcase{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(9px,1.3vw,18px)}
.shot{
  --mx:50%;--my:50%;
  position:relative;display:block;aspect-ratio:63/88;border-radius:11px;overflow:hidden;
  border:1px solid rgba(237,209,185,.22);
  box-shadow:0 18px 40px -20px #000;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.shot__in{position:absolute;inset:0;display:block}
.shot picture,.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Fondu au changement de visuel. */
.shot__in{transition:opacity .32s ease, transform .32s ease}
.shot.is-swapping .shot__in{opacity:0;transform:scale(1.04)}
.shot:hover{
  transform:translateY(-8px) scale(1.03);
  border-color:rgba(237,209,185,.5);
  box-shadow:0 26px 56px -18px #000, 0 0 26px -8px rgba(167,105,83,.55);
}
.shot__lbl{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px 10px 9px;
  background:linear-gradient(180deg,transparent,rgba(8,4,5,.94) 60%);
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--copper-lt);opacity:0;transition:opacity .25s;
}
.shot:hover .shot__lbl,.shot:focus-visible .shot__lbl{opacity:1}

/* ===================== NEWS ===================== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px);align-items:start}
.news-rows{display:grid;gap:14px}
.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--ether)}
.nc{display:block;background:rgba(23,15,17,.65);border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:border-color .22s,transform .22s}
.nc:hover{border-color:rgba(47,191,182,.45);transform:translateY(-3px)}
.nc__ph{aspect-ratio:16/9;position:relative;overflow:hidden}
.nc__ph img{width:100%;height:100%;object-fit:cover}
.nc__bd{padding:16px 18px 20px}
.nc time{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);margin:10px 0 7px}
.nc h2,.nc h3{font-size:21px}
.nc p{color:var(--muted);font-size:13.5px;margin:8px 0 0;line-height:1.55}
.nc--row{display:grid;grid-template-columns:118px 1fr}
.nc--row .nc__ph{aspect-ratio:auto;height:100%}
.nc--row .nc__bd{padding:14px 16px}
.nc--row h3{font-size:19px}
.nc.is-hidden{display:none}

/* ===================== EVENEMENTS ===================== */
.events{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:76px 1fr auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ev:first-child{border-top:1px solid var(--line)}
.ev__date{text-align:center;border:1px solid rgba(167,105,83,.45);border-radius:9px;padding:8px 4px;background:rgba(167,105,83,.09)}
.ev__date b{display:block;font-family:var(--display);font-size:26px;font-weight:800;line-height:1;color:var(--copper-lt)}
.ev__date span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.ev__main h3{font-size:20px}
.ev__loc{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
.ev__desc{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.ev__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ev__tag{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ether);white-space:nowrap}

/* ===================== CANAUX DE VENTE =====================
   Deux cartes cote a cote : les joueurs vers la boutique,
   les professionnels vers une demande par courriel.
   ========================================================== */
.sales{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sales--single{grid-template-columns:1fr}
.sales__card{
  border-radius:18px;padding:clamp(24px,3.6vw,40px);
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;
}
.sales__card p{color:#D8C9C3;max-width:46ch;margin:12px 0 0;flex:1}
.sales__card .btn{margin-top:22px}
.sales__card--b2c{
  background:radial-gradient(600px 280px at 82% 18%, rgba(237,209,185,.2), transparent 62%),
             linear-gradient(120deg,rgba(167,105,83,.24),rgba(23,15,17,.9));
  border-color:rgba(167,105,83,.4);
}
.sales__card--b2b{
  background:linear-gradient(120deg,rgba(47,191,182,.1),rgba(23,15,17,.85));
  border-color:rgba(47,191,182,.3);
}
.sales__card--b2b .eyebrow{color:var(--ether)}
.sales__card--b2b .eyebrow::before{background:linear-gradient(90deg,transparent,var(--ether))}

/* Ancien bandeau conserve pour les contenus qui l'utilisent encore. */
.shopband{
  border-radius:20px;padding:clamp(26px,5vw,54px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  background:radial-gradient(700px 300px at 84% 22%, rgba(237,209,185,.2), transparent 62%),linear-gradient(120deg,rgba(167,105,83,.24),rgba(23,15,17,.9));
  border:1px solid rgba(167,105,83,.4);
}
.shopband p{color:#D8C9C3;max-width:52ch;margin:12px 0 0}

/* ===================== RETOUR EN HAUT ===================== */
.totop{
  position:fixed;z-index:70;
  right:calc(16px + var(--safe-r));
  bottom:calc(16px + var(--safe-b));
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  color:#2A1108;
  background:linear-gradient(140deg,var(--copper-lt),var(--copper) 58%,var(--copper-dk));
  box-shadow:0 10px 30px -10px rgba(0,0,0,.85),0 0 0 1px rgba(237,209,185,.35) inset;
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .22s,transform .22s;
}
.totop svg{width:20px;height:20px}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{filter:brightness(1.08)}
.totop:active{transform:scale(.94)}
.totop[hidden]{display:none}
/* Le bandeau cookies occupe le meme coin : on remonte le bouton. */
.cookiebar:not([hidden]) ~ .totop.is-on{bottom:calc(96px + var(--safe-b))}

/* ===================== FILTRES ET GALERIE ===================== */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:99px;border:1px solid var(--line);color:var(--muted);transition:.2s;min-height:38px}
.filters button:hover{color:var(--paper);border-color:rgba(47,191,182,.5)}
.filters button.is-on{background:rgba(167,105,83,.3);color:var(--paper);border-color:rgba(167,105,83,.65)}

.masonry{columns:4;column-gap:16px}
.masonry .cell{break-inside:avoid;margin:0 0 16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative;display:block}
.masonry .cell.is-hidden{display:none}
/* lien discret : aucune marque visuelle, toute la vignette est cliquable */
.masonry .cell__a{display:block;color:inherit;text-decoration:none}
.masonry figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(180deg,transparent,rgba(8,4,5,.92));opacity:0;transition:opacity .25s;z-index:4}
.masonry .cell:hover figcaption,.masonry .cell:focus figcaption{opacity:1}

/* ===================== ARTICLE ===================== */
.article{max-width:860px;padding-block:clamp(30px,5vw,56px)}
.back{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.back:hover{color:var(--ether)}
.article__head{margin-bottom:28px}
.article__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin:10px 0 16px}
.article__cover{margin:0 0 30px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.article__body{font-size:16.5px;line-height:1.75;color:#DCD0CB}
.article__body p{margin-bottom:1.3em}
.share{display:flex;align-items:center;gap:14px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.share span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ===================== BLOCS DE CONTENU ===================== */
.blk-h{font-size:clamp(21px,2.6vw,27px);margin:1.7em 0 .6em}
.blk-list{padding-left:1.2em;margin:0 0 1.3em}
.blk-list li{margin-bottom:.5em}
.blk-callout{border-left:3px solid var(--ether);background:rgba(47,191,182,.08);border-radius:0 10px 10px 0;padding:16px 20px;margin:1.5em 0;font-size:15px}
.blk-callout--warn{border-left-color:var(--ember);background:rgba(196,68,42,.1)}
.blk-steps{list-style:none;margin:1.2em 0;padding:0}
.blk-step{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.blk-step:last-child{border-bottom:0}
.blk-step__n{width:29px;height:29px;border-radius:50%;background:rgba(75,174,110,.18);color:var(--phase);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px}
.blk-step__body h3{font-size:19px;margin-bottom:5px}
.blk-step__body p{font-size:14.5px;margin:0}
.blk-image{margin:1.6em 0;border-radius:12px;overflow:hidden}
.blk-image figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);padding:9px 2px 0;letter-spacing:.05em}
.blk-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin:1.6em 0;background:#000}
.blk-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blk-btn{margin:1.6em 0}
.blk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:1.6em 0}
.blk-gallery figure{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);position:relative}
.blk-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:1.4em 0}
.blk-icon{display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:rgba(44,27,29,.45)}
.blk-icon__d{
  width:50px;height:50px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:#fff;border-radius:10px;
  box-shadow:0 2px 8px -3px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14);
}
.blk-icon__d img{width:50px;height:50px;object-fit:contain}
.blk-icon b{display:block;font-family:var(--display);font-size:17px;font-weight:700;text-transform:uppercase;line-height:1.05}
.blk-icon span span{font-size:12.5px;color:var(--muted)}

/* ===================== PAGE REGLES, MODE FICHE ===================== */
/* ===================== PAGE DES REGLES =====================
   Meme ambiance que le reste du site. Seule la mise en page change :
   sommaire lateral colle et sections numerotees.
   ========================================================== */
.r-head{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(44,27,29,.5),transparent)}
.r-dl{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;
  background:linear-gradient(100deg,var(--copper-lt),var(--copper) 55%,var(--copper-dk));
  color:#2A1108;font-weight:700;font-size:14px;padding:13px 20px;border-radius:8px;margin-top:20px;
  box-shadow:0 8px 26px -12px rgba(167,105,83,.95);transition:transform .18s,filter .18s;
}
.r-dl:hover{transform:translateY(-1px);filter:brightness(1.06)}
.r-dls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.r-dl{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}
.r-dl__note{font-weight:500;font-size:11.5px;opacity:.8}
.r-dl--alt{background:rgba(167,105,83,.12);color:var(--copper-dk);box-shadow:none;border:1px solid rgba(167,105,83,.35)}

.r-layout{display:grid;grid-template-columns:242px minmax(0,1fr);gap:clamp(26px,4vw,52px);align-items:start}
.r-toc{
  position:sticky;top:calc(var(--hdr-h) + var(--safe-t) + 20px);
  border-left:2px solid var(--line);padding-left:18px;max-height:70vh;overflow:auto;
}
.r-toc a{
  display:block;font-size:13.5px;color:var(--muted);
  padding:7px 0 7px 20px;margin-left:-20px;
  border-left:2px solid transparent;transition:color .2s,border-color .2s;
}
.r-toc a:hover{color:var(--paper)}
.r-toc a.is-on{color:var(--copper-lt);font-weight:700;border-left-color:var(--copper)}

.r-body{min-width:0}
.r-sec{margin-bottom:clamp(38px,5vw,56px);scroll-margin-top:calc(var(--hdr-h) + var(--safe-t) + 20px)}
.r-sec h2{font-size:clamp(26px,3.6vw,42px);margin-bottom:14px}
.r-sec > p{color:#CFBFB9;max-width:72ch}
.r-sec .blk-list{color:#CFBFB9;max-width:72ch}


/* ===================== BANDEAU DEFILANT =====================
   Le cadre a un format fixe et les visuels sont deja recadres au
   televersement : aucune diapositive ne peut donc modifier la
   hauteur du bandeau ni faire sauter la mise en page.
   ============================================================ */
.slider{
  position:relative;
  width:100%;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
}

/* Mode image entiere : le rapport du cadre est pose en style en ligne,
   calcule d'apres les visuels. Aucune hauteur n'est imposee ici, sans
   quoi le rapport serait mis en defaut et la largeur reduite. */
.slider--fit-contain .slide__media img{object-fit:contain}
.slider--fit-contain{background:transparent}

/* Mode remplissage : la hauteur est declaree, le visuel est recadre. */
.slider--fit-cover .slide__media img{object-fit:cover}
.slider--fit-cover.slider--thin{height:clamp(120px, 15vw, 200px)}
.slider--fit-cover.slider--medium{height:clamp(180px, 23vw, 310px)}
.slider--fit-cover.slider--tall{height:clamp(240px, 31vw, 430px)}

/* Largeur du cadre. En dehors de la pleine largeur, le bandeau devient un
   panneau arrondi centre, avec les memes marges que le contenu. */
.slider-wrap{padding-block:clamp(14px,2.2vw,24px) 0}
.slider--page{width:100%}

/* Le cadre est optionnel. Sans lui, le visuel se fond dans la page. */
.slider--framed{border-radius:16px;border:1px solid var(--line);overflow:hidden}
.slider--full{width:100%}
.slider--boxed{
  width:calc(100% - 2 * var(--pad));
  margin-inline:auto;
  margin-top:clamp(14px,2.2vw,24px);
}
.slider__track{position:absolute;inset:0}

.slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease, visibility .6s;
}
.slide.is-on{opacity:1;visibility:visible}

.slide__media{position:absolute;inset:0}
.slide__media picture,
.slide__media img{
  width:100%;height:100%;
  object-fit:cover;               /* filet de securite si un ancien visuel n'est pas au format */
  object-position:center;
  display:block;
}
/* Voile degrade : le texte reste lisible quelle que soit l'image.
   Inutile, et genant, quand le visuel est montre en entier sans texte. */
.slider--fit-contain .slide__media::after{display:none}
.slider--fit-contain .slide--has-text .slide__media::after{display:block}
.slide__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(8,5,6,.88) 0%, rgba(8,5,6,.62) 42%, rgba(8,5,6,.12) 78%, transparent 100%);
}

.slide__body{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;
  padding-block:clamp(16px,3vw,40px);
}
.slide__title{
  font-size:clamp(22px,3.4vw,44px);
  line-height:.96;margin-bottom:9px;max-width:20ch;
}
.slide__text{
  color:#D8C9C3;font-size:clamp(13.5px,1.4vw,16px);
  max-width:44ch;margin:0;
}
.slide__cta{margin-top:clamp(10px,1.6vw,18px)}

/* Sur une bande fine, le texte secondaire n'a plus la place :
   le titre et le bouton passent sur une seule ligne. */
.slider--thin .slide__body .wrap{
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;
}
.slider--thin .slide__title{font-size:clamp(19px,2.2vw,30px);margin:0;max-width:24ch}
.slider--thin .slide__text{display:none}
.slider--thin .slide__cta{margin-top:0}
.slider--thin .slide__media::after{
  background:linear-gradient(90deg, rgba(8,5,6,.9) 0%, rgba(8,5,6,.6) 48%, rgba(8,5,6,.15) 82%, transparent 100%);
}
.slider--thin .slider__dots{display:none}

.slider--medium .slide__title{font-size:clamp(21px,2.9vw,38px)}

/* Commandes. En mode discret elles restent dans le document pour la
   navigation au clavier, mais n'apparaissent qu'au focus : le bandeau
   reste nu tant qu'on le parcourt a la souris. */
.slider__ctrl--quiet .slider__nav,
.slider__ctrl--quiet .slider__dots{
  opacity:0;pointer-events:none;
}
.slider__ctrl--quiet .slider__nav:focus-visible{
  opacity:1;pointer-events:auto;
}
.slider__ctrl--quiet .slider__dot:focus-visible{opacity:1}

/* Fleches */
.slider__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--paper);
  background:rgba(12,8,9,.5);
  border:1px solid rgba(237,209,185,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s,background .2s;
}
.slider__nav svg{width:20px;height:20px}
.slider__ctrl:not(.slider__ctrl--quiet) .slider__nav{opacity:0}
.slider:hover .slider__ctrl:not(.slider__ctrl--quiet) .slider__nav,
.slider__ctrl:not(.slider__ctrl--quiet) .slider__nav:focus-visible{opacity:1}
.slider__nav:hover{background:rgba(167,105,83,.75)}
.slider__nav--prev{left:clamp(8px,1.6vw,18px)}
.slider__nav--next{right:clamp(8px,1.6vw,18px)}

/* Pastilles */
.slider__dots{
  position:absolute;z-index:3;
  left:0;right:0;bottom:clamp(10px,1.6vw,18px);
  display:flex;justify-content:center;gap:8px;
}
.slider__dot{
  width:9px;height:9px;border-radius:50%;padding:0;
  background:rgba(237,209,185,.35);
  border:1px solid rgba(12,8,9,.5);
  transition:background .2s,width .25s;
}
.slider__dot.is-on{background:var(--copper-lt);width:26px;border-radius:99px}

.slider--single .slider__ctrl{display:none}

@media(max-width:900px){
  .slider--fit-cover.slider--thin{height:clamp(130px, 26vw, 220px)}
  .slider--fit-cover.slider--medium{height:clamp(190px, 40vw, 320px)}
  .slider--fit-cover.slider--tall{height:clamp(240px, 56vw, 430px)}
  .slider--page,.slider--boxed{border-radius:12px}
  .slide__media::after{
    background:linear-gradient(180deg, rgba(8,5,6,.35) 0%, rgba(8,5,6,.55) 45%, rgba(8,5,6,.92) 100%);
  }
  .slide__body{align-items:flex-end;padding-bottom:clamp(34px,7vw,54px)}
  .slide__title{max-width:100%}
  .slider__ctrl:not(.slider__ctrl--quiet) .slider__nav{width:38px;height:38px;opacity:1;background:rgba(12,8,9,.42)}
}
@media(max-width:620px){
  .slider--fit-cover.slider--thin{height:clamp(120px, 34vw, 170px)}
  .slider--fit-cover.slider--medium{height:clamp(170px, 52vw, 240px)}
  .slider--fit-cover.slider--tall{height:clamp(220px, 70vw, 320px)}
  .slide__text{display:none}     /* sur mobile, le titre et le bouton suffisent */
  .slider--thin .slide__body .wrap{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
}

/* ===================== PIED DE PAGE ===================== */
.ftr{border-top:1px solid var(--line);padding-block:44px 36px;background:rgba(8,5,6,.6);padding-bottom:calc(36px + var(--safe-b))}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.ftr h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-lt);margin:0 0 14px}
.ftr a,.ftr p{color:var(--muted);font-size:13.5px;margin:0 0 8px;display:block}
.ftr a:hover{color:var(--paper)}
.ftr__note{margin-top:14px;max-width:34ch}
.ftr__bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:#7A6A66}

/* ===================== BANDEAU COOKIES ===================== */
.cookiebar{
  position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:80;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:rgba(23,15,17,.97);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;box-shadow:0 18px 50px -18px #000;
  max-width:720px;margin-inline:auto;
}
.cookiebar p{margin:0;font-size:13px;color:var(--muted);flex:1;min-width:220px}
.cookiebar[hidden]{display:none}

.nf{text-align:center;padding-block:clamp(60px,12vw,140px)}
.nf .lede{margin-inline:auto}

/* ===================== ADAPTATIF ===================== */
/* Entre 900 et 1150 px les deux colonnes du hero deviennent trop etroites
   pour cohabiter : on empile avant que le titre ne touche les cartes. */
@media(max-width:1150px){
  .hero__grid{grid-template-columns:1fr;gap:8px}
  .hero__h1{font-size:clamp(44px,9vw,104px)}
  .fan{height:clamp(270px,36vw,380px);margin-top:10px}
  .card{width:clamp(128px,18vw,176px)}
}

@media(max-width:1080px){
  .masonry{columns:3}
  .types{grid-template-columns:repeat(2,1fr)}
  .decks{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .showcase{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:900px){
  .nav{
    display:none;position:fixed;top:calc(var(--hdr-h) + var(--safe-t));left:0;right:0;
    bottom:0;flex-direction:column;gap:2px;
    background:#150E10;border-top:1px solid var(--line);
    padding:16px var(--pad) calc(28px + var(--safe-b));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav.is-open{display:flex}
  .nav a{font-size:24px;padding:14px 6px;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]::after{display:none}
  .nav__mobile-extra{display:block;margin-top:22px}
  .nav__shop{width:100%}
  .burger{display:block}
  .hdr__right{display:none}
  body.nav-open{overflow:hidden}
  body.nav-open .cookiebar,body.nav-open .totop{display:none}

  .fan{height:clamp(240px,50vw,320px)}
  .card{width:clamp(108px,25vw,160px)}
  .grid-2,.grid-3,.prio,.apt-cols,.types,.decks{grid-template-columns:1fr}
  .r-layout{grid-template-columns:1fr;gap:22px}
  .r-toc{position:static;display:flex;flex-wrap:wrap;gap:6px;border-left:0;padding-left:0;max-height:none;overflow:visible}
  .r-toc a{padding:8px 13px;border:1px solid #E6DBD5;border-radius:99px;font-size:12.5px;margin-left:0;border-left-width:1px}
  .r-toc a.is-on{border-color:var(--copper);background:rgba(167,105,83,.1)}
  .toss{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  .shopband{grid-template-columns:1fr}
  .sales{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .goal__hearts{margin-left:0}
  .ev__side{align-items:flex-start}
}

@media(max-width:620px){
  :root{--hdr-h:58px}
  .masonry{columns:2}
  .ev{grid-template-columns:60px 1fr;gap:14px;row-gap:8px}
  .ev__side{grid-column:2;flex-direction:row;align-items:center;gap:12px}
  .fact{padding-right:16px;margin-right:16px}
  .fact dd{font-size:26px}
  .nc--row{grid-template-columns:96px 1fr}
  .phases{gap:5px}
  .ph-btn{padding:9px 12px;flex:1 1 auto;min-width:calc(50% - 3px)}
  .ph-btn__t{font-size:16px}
  .hero__cta .btn{flex:1 1 100%}
  .cookiebar{flex-direction:column;align-items:stretch;right:76px}
  .cookiebar .btn{width:100%}
  .totop{width:44px;height:44px}
}

/* L'effet holographique au survol n'a pas de sens sur un ecran tactile.
   On le desactive, le script le remplace par la detection d'inclinaison. */
@media(hover:none){
  .holo:hover::after{opacity:0}
  .fan .card:nth-child(1):hover{transform:translate(-50%,-50%) translateX(-54%) rotate(-13deg)}
  .fan .card:nth-child(2):hover{transform:translate(-50%,-50%) translateY(-4%) scale(1.05)}
  .fan .card:nth-child(3):hover{transform:translate(-50%,-50%) translateX(54%) rotate(13deg)}
  .btn:hover,.nc:hover,.deck:hover,.type:hover,.prio-row:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* Les eclairs sont retires, pas seulement acceleres. */
  .bg-flash{display:none}
}

@media print{
  .hdr,.ftr,.cookiebar,.skip,.bg,.filters,.share{display:none!important}
  body{background:#fff;color:#000}
  .r-toc{display:none}
  .r-layout{grid-template-columns:1fr}
}


/* ==================================================================
   RISE TCG COMPAGNON : encart d'acces a l'application (page regles)
   ================================================================== */
.r-app{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:22px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(145deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .18s,border-color .18s;
}
.r-app::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 140px at 110% -20%,rgba(167,105,83,.22),transparent);
}
.r-app:hover{transform:translateY(-1px);border-color:rgba(167,105,83,.5)}
.r-app__icon{flex:none;width:56px;height:56px;border-radius:13px;box-shadow:0 8px 22px -10px rgba(0,0,0,.7)}
.r-app__body{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.r-app__title{
  font-family:var(--display);font-weight:800;font-size:19px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--paper);
}
.r-app__desc{font-size:13px;color:var(--muted);line-height:1.5}
.r-app__note{font-size:11.5px;color:var(--muted);opacity:.8;line-height:1.5}
.r-app__cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  background:linear-gradient(100deg,var(--copper-lt),var(--copper) 55%,var(--copper-dk));
  color:#2A1108;font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:8px;
  box-shadow:0 8px 26px -12px rgba(167,105,83,.95);
}
@media (max-width:640px){
  .r-app{gap:12px}
  .r-app__cta{width:100%;justify-content:center}
}


/* ==================================================================
   SERIES DE CARTES : bande sur la galerie, page de serie, visionneuse
   ================================================================== */

/* bande de la galerie : visible sous le filtre "Cartes" uniquement */
.series{margin-bottom:8px}
.series.is-hidden{display:none}
.masonry.is-hidden{display:none}
.series__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.serie{
  --mx:50%;--my:50%;
  position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);color:var(--paper);text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
.serie:hover,.serie:focus-visible{transform:translateY(-4px);border-color:rgba(167,105,83,.6);box-shadow:0 24px 44px -24px #000}
.serie__art{position:relative;display:block;aspect-ratio:63/88;background:var(--ink);overflow:hidden}
.serie__art picture,.serie__art img,.serie__art span{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.serie__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,8,9,.9))}
/* deux calques superposes : le suivant se charge en dessous, puis fondu */
.serie__pic{opacity:0;transition:opacity .7s ease}
.serie__pic.is-on{opacity:1}
.serie__b{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;margin-top:-64px}
.serie__y{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--copper-lt);opacity:.85}
.serie__t{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,26px);letter-spacing:.5px;text-transform:uppercase;line-height:1.05}
.serie__n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.serie__cta{margin-top:8px;font-size:13px;font-weight:600;color:var(--ether)}

/* page de serie */
.cards-head{position:relative}
.cards-back{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;text-decoration:none}
.cards-back:hover{color:var(--ether)}
.cards-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:26px}
.cards-bar .filters{margin-bottom:0}
.filters a{
  display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border-radius:99px;border:1px solid var(--line);color:var(--muted);text-decoration:none;transition:.2s;min-height:38px;
}
.filters a:hover{color:var(--paper);border-color:rgba(47,191,182,.5)}
.filters a.is-on{background:rgba(167,105,83,.3);color:var(--paper);border-color:rgba(167,105,83,.65)}
.cards-search{
  display:flex;align-items:center;gap:9px;flex:1 1 240px;max-width:380px;min-height:42px;padding:0 14px;
  border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.03);color:var(--muted);transition:border-color .2s;
}
.cards-search:focus-within{border-color:rgba(47,191,182,.55);color:var(--paper)}
.cards-search input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);font-family:var(--body);font-size:14px;padding:0;
}
.cards-search input::placeholder{color:var(--muted)}
.cards-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.cards-shown{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:auto}

.cards-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ctile{
  --mx:50%;--my:50%;
  position:relative;margin:0;aspect-ratio:63/88;border-radius:9px;overflow:hidden;cursor:zoom-in;
  background:var(--panel);border:1px solid rgba(237,209,185,.14);
  box-shadow:0 14px 30px -18px #000;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s,box-shadow .25s;
  content-visibility:auto;contain-intrinsic-size:auto 260px;
}
.ctile:hover,.ctile:focus-visible{transform:translateY(-4px) scale(1.025);border-color:rgba(167,105,83,.6);box-shadow:0 24px 44px -20px #000;z-index:2;outline:none}
.ctile picture,.ctile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ctile img{background:var(--panel)}
.ctile__v{
  position:absolute;top:7px;left:7px;z-index:4;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:99px;background:rgba(12,8,9,.78);border:1px solid rgba(237,209,185,.3);color:var(--copper-lt);
}
.ctile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:24px 10px 9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(180deg,transparent,rgba(8,4,5,.92));opacity:0;transition:opacity .25s;
}
.ctile:hover figcaption,.ctile:focus-visible figcaption{opacity:1}
.ctile.is-hidden{display:none}
.cards-none{color:var(--muted);text-align:center;padding:40px 0}
.cards-legal{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);opacity:.7;margin-top:34px;text-align:center}

/* visionneuse */
.lb{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,4,5,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
}
.lb[hidden]{display:none}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.lb__fig picture,.lb__fig img{display:block;max-width:min(92vw,560px);max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:14px;box-shadow:0 30px 70px -20px #000}
.lb__fig figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-lt);text-align:center}
.lb__x,.lb__nav{
  position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:rgba(32,20,23,.85);color:var(--paper);font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s;
}
.lb__x:hover,.lb__nav:hover{border-color:rgba(47,191,182,.6);color:var(--ether)}
.lb__x{top:calc(var(--safe-t) + 14px);right:14px}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__prev{left:14px}
.lb__next{right:14px}
body.lb-open{overflow:hidden}

@media(max-width:1080px){
  .series__grid{grid-template-columns:repeat(3,1fr)}
  .cards-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:620px){
  .series__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .serie__b{padding:10px 12px 12px;margin-top:-48px}
  .cards-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cards-shown{margin-left:0;width:100%}
  .lb__nav{width:42px;height:42px;top:auto;bottom:calc(var(--safe-b) + 14px);transform:none}
  .lb__prev{left:18px}
  .lb__next{right:18px}
  .lb__fig img{max-height:calc(100vh - 150px)}
}
@media print{
  .cards-bar,.lb{display:none!important}
}

/* ==================================================================
   MAGASINS PHYSIQUES
   Deux canaux dans le header : la boutique en ligne (cuivre) et les
   points de vente (contour). La page liste les magasins en Suisse,
   avec une carte Leaflet quand la librairie est presente.
   ================================================================== */

.btn-shop--g{
  background:none;color:var(--paper);box-shadow:none;
  border:1px solid rgba(237,209,185,.35);
}
.btn-shop--g:hover{border-color:rgba(47,191,182,.55);background:rgba(47,191,182,.09);filter:none}

/* accueil : la case joueur propose les deux canaux */
.sales__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sales__card .sales__cta .btn{margin-top:0}
.sales__ch{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.sales__ch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember);flex:none}
@media(max-width:620px){
  .sales__cta .btn{flex:1 1 100%}
}

.shops__head{max-width:none}
.shops__head h1{font-size:clamp(34px,5.5vw,64px)}
.shops__online{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.shops__ch{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.shops__ch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember);flex:none}
.shops__empty{color:var(--muted);border:1px dashed var(--line);border-radius:13px;padding:34px 20px;text-align:center}

/* recherche de proximite */
.shopfind{margin-bottom:clamp(18px,2.6vw,26px)}
.shopfind__label{
  display:block;margin-bottom:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-lt);
}
.shopfind__row{display:flex;flex-wrap:wrap;gap:8px}
.shopfind__row input[type=search]{
  flex:1 1 220px;min-width:0;
  background:rgba(23,15,17,.75);border:1px solid var(--line);border-radius:9px;
  color:var(--paper);font:inherit;font-size:14.5px;padding:10px 13px;
}
.shopfind__row input[type=search]:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(167,105,83,.22)}
.shopfind__row input[type=search]::placeholder{color:var(--muted)}
.shopfind.is-busy .shopfind__row{opacity:.6;pointer-events:none}
.shopfind__msg{margin:9px 0 0;font-size:13px;color:var(--ether);min-height:1em}
.shopfind__msg.is-err{color:var(--ember)}
.shop__dist{
  flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:4px 9px;border-radius:99px;border:1px solid rgba(167,105,83,.55);color:var(--copper-lt);margin-top:2px;
}
.pin--you svg path{fill:var(--ether)}

/* carte */
.shopmap{
  height:clamp(300px,42vw,460px);border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#1E2226;margin-bottom:clamp(22px,3vw,34px);
  isolation:isolate;
}
.shopmap .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.88) saturate(.55)}
.shopmap .leaflet-control-attribution{background:rgba(12,8,9,.75);color:var(--muted);font-size:10.5px}
.shopmap .leaflet-control-attribution a{color:var(--copper-lt)}
.shopmap .leaflet-control-zoom a{background:#201417;color:var(--paper);border-color:rgba(237,209,185,.2)}
.shopmap .leaflet-control-zoom a:hover{background:#2C1B1D}
.shopmap .leaflet-bar{border:1px solid rgba(237,209,185,.2)}
.shopmap .leaflet-popup-content-wrapper{background:#201417;color:var(--paper);border-radius:10px;border:1px solid rgba(237,209,185,.2);box-shadow:0 18px 40px -20px #000}
.shopmap .leaflet-popup-tip{background:#201417}
.shopmap .leaflet-popup-content{margin:12px 14px;font-size:13.5px;line-height:1.45}
.shopmap .leaflet-popup-content b{display:block;font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px}
.shopmap .leaflet-popup-content a{color:var(--copper-lt);text-decoration:underline;font-size:12.5px}
.shopmap .leaflet-popup-close-button{color:var(--muted)}
.shopmap .leaflet-container{font-family:var(--body)}
.pin{width:30px;height:38px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.pin svg{width:30px;height:38px;display:block}
.pin.is-on svg path{fill:var(--ether)}

/* grille des fiches */
.shops__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.shop{
  display:flex;flex-direction:column;
  background:rgba(23,15,17,.65);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .22s,transform .22s;scroll-margin-top:calc(var(--hdr-h) + 20px);
}
.shop:hover{border-color:rgba(167,105,83,.5)}
.shop.is-target{border-color:var(--ether);box-shadow:0 0 0 1px rgba(47,191,182,.5)}
.shop__ph{position:relative;aspect-ratio:3/2;background:var(--panel);overflow:hidden}
.shop__ph picture,.shop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shop__img--ph{background:
  linear-gradient(135deg,rgba(167,105,83,.22),transparent 60%),
  repeating-linear-gradient(45deg,transparent 0 14px,rgba(237,209,185,.05) 14px 15px)}
.shop__canton{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  padding:4px 9px;border-radius:6px;background:rgba(12,8,9,.8);color:var(--copper-lt);border:1px solid rgba(237,209,185,.2);
}
.shop__b{display:flex;flex-direction:column;gap:9px;padding:16px 18px 18px;flex:1}
.shop__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.shop__name{font-size:22px;line-height:1.02}
.shop__state{
  flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);margin-top:2px;
}
.shop__state.is-open{color:var(--ether);border-color:rgba(47,191,182,.6)}
.shop__state.is-closed{color:var(--muted)}
.shop__addr{font-style:normal;color:#D8C9C3;font-size:14px;line-height:1.5}
.shop__line{margin:0;font-size:14px}
.shop__line a{color:var(--copper-lt);text-decoration:underline;text-decoration-color:rgba(237,209,185,.35)}
.shop__note{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;border-left:2px solid var(--copper);padding-left:10px}
.shop__hours{margin:4px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.75}
.shop__hours div{display:grid;grid-template-columns:38px 1fr;gap:8px}
.shop__hours dt{color:#D8C9C3;font-weight:600}
.shop__hours dd{margin:0}
.shop__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}

@media(max-width:1150px){
  /* Sous 1150 px le header manque de place : l'onglet Magasins de la
     navigation suffit, le bouton de contour disparait. */
  .btn-shop--g{display:none}
  .nav a{padding:9px 9px}
}
@media(max-width:1080px){
  .shops__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .btn-shop--g{display:none}
}
@media(max-width:620px){
  .shops__grid{grid-template-columns:1fr}
  .shop__acts .btn{flex:1 1 auto}
  .shopfind__row .btn{flex:1 1 auto}
}