/* cartes/carte.css — LE LIVRE DE POCHE.
   Une carte est un OBJET : ses couleurs ne suivent pas le mode de la page.
   La couleur du papier dit la RARETÉ, et elle seule. L'image est imprimée à
   l'encre SUR ce papier (noir et blanc + multiply) : c'est la couverture en
   deux tons des collections d'essais. */

.ct{
  --ct-l:252px;
  --pap:#ece5d6; --pap2:#e2dac8; --encre:#191714; --doux:rgba(25,23,20,.66); --filet:rgba(25,23,20,.9);
  width:var(--ct-l); aspect-ratio:5/7; font-size:calc(var(--ct-l) / 15.75);
  perspective:1100px; position:relative; flex:none; display:block;
  font-family:'Bricolage Grotesque','Inter',system-ui,sans-serif; line-height:1.2; color:var(--encre);
  -webkit-font-smoothing:antialiased;
}
/* Les cinq papiers. */
.ct--r1{--pap:#a9c9dd; --pap2:#98bcd2; --encre:#0e2230; --doux:rgba(14,34,48,.7); --filet:#0e2230}
.ct--r2{--pap:#9fc3a2; --pap2:#8db592; --encre:#0f2616; --doux:rgba(15,38,22,.7); --filet:#0f2616}
.ct--r3{--pap:#e2583c; --pap2:#d64a30; --encre:#1f0a05; --doux:rgba(31,10,5,.74); --filet:#1f0a05}
.ct--r4{--pap:#151310; --pap2:#0e0c0a; --encre:#e6c477; --doux:rgba(230,196,119,.74); --filet:#e6c477}

.ct *{box-sizing:border-box}
.ct p,.ct h3,.ct dl,.ct dd{margin:0; color:inherit}
.ct-in{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.3,.7,.2,1);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.ct.retournee .ct-in{transform:rotateY(180deg)}
.ct-face{position:absolute; inset:0; border-radius:.42em; overflow:hidden; isolation:isolate;
  background:linear-gradient(168deg,var(--pap),var(--pap2)); color:var(--encre);
  box-shadow:0 .1em .2em rgba(0,0,0,.35), 0 .9em 1.6em -.6em rgba(0,0,0,.55);
  display:flex; flex-direction:column; padding:.78em .82em .7em;
  transition:visibility 0s .31s}
/* Le grain du papier et l'usure de la tranche : ce qui en fait un livre. */
.ct-face::before{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0) 3.5%,rgba(255,255,255,.1) 5%,rgba(0,0,0,0) 8%),
    radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 60%);
  mix-blend-mode:soft-light}
.ct-verso,.ct-dos{transform:rotateY(180deg); visibility:hidden}
.ct.retournee .ct-verso,.ct.retournee .ct-dos{visibility:visible}
.ct.retournee .ct-recto{visibility:hidden}

/* Le bandeau de collection. */
.ct-bandeau{display:flex; justify-content:space-between; align-items:baseline; gap:.6em;
  font-weight:600; font-size:.6em; letter-spacing:.13em; text-transform:uppercase;
  padding-bottom:.62em; border-bottom:.2em solid var(--filet)}
.ct-coll{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ct-no{font-weight:400; letter-spacing:.06em; white-space:nowrap; font-variant-numeric:tabular-nums}
.ct-etoile{display:inline-block; width:1.15em; height:1.15em; margin-right:.3em; vertical-align:-.2em;
  background:conic-gradient(from 0deg,#ff2d55,#ff8a00,#ffe600,#2be06b,#00d5ff,#2f6bff,#9b4dff,#ff4fd8,#ff2d55);
  clip-path:polygon(50% 0,61% 36%,98% 36%,68% 58%,79% 94%,50% 72%,21% 94%,32% 58%,2% 36%,39% 36%);
  animation:ct-shiny-teinte 3.2s linear infinite}

/* L'image : imprimée à l'encre sur le papier. */
.ct-art{position:relative; flex:1 1 0; min-height:0; margin:.62em 0 .6em; overflow:hidden; background:var(--pap2)}
.ct-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:grayscale(1) contrast(1.12) brightness(1.06); mix-blend-mode:multiply}
.ct-art--entiere .ct-img{object-fit:contain}
.ct--r0 .ct-art{background:#f4efe3}
/* Sur le noir, l'encre est d'or : l'image s'imprime en clair. */
.ct--r4 .ct-art{background:#1d1a15}
.ct--r4 .ct-img{mix-blend-mode:screen; filter:grayscale(1) contrast(1.15) sepia(.75) saturate(1.5) brightness(.92)}
/* Une image d'institution (logo, blason) garde ses couleurs sur un fond clair. */
.ct--ins .ct-art--img{background:#f4efe3}
.ct--ins .ct-img{object-fit:contain; padding:.7em; filter:none; mix-blend-mode:normal}
.ct--r4.ct--ins .ct-img{mix-blend-mode:normal; filter:none}
/* La couverture composée. */
.ct-compo{position:absolute; inset:0; width:100%; height:100%; color:var(--encre)}
.ct-ini{position:absolute; left:.16em; bottom:.04em; font-weight:800; font-size:3.9em; letter-spacing:-.06em; line-height:1;
  color:var(--pap); mix-blend-mode:normal; text-shadow:0 0 0 transparent}
.ct--r4 .ct-ini{color:#151310}

/* Le titre. */
.ct-titre{flex:none}
.ct-auteur{font-weight:600; font-size:.66em; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.3em !important}
.ct-nom{font-weight:800; letter-spacing:-.025em; line-height:.98; font-size:1.62em; text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; padding-bottom:.06em}
.ct-nom--m{font-size:1.3em}
.ct-nom--s{font-size:1.06em; line-height:1.02}
.ct-nom--xs{font-size:.9em; line-height:1.05; letter-spacing:-.015em}
.ct--oeu .ct-nom{font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500; letter-spacing:-.01em; line-height:1.04}
.ct-sous{font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500; font-size:.7em; line-height:1.22;
  color:var(--doux); margin-top:.38em !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* Le pied. */
.ct-pied{flex:none; display:flex; align-items:center; gap:.6em; margin-top:.62em; padding-top:.5em;
  border-top:.07em solid var(--filet); font-size:.6em; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.ct-dates{font-weight:400; letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap}
.ct-rang{margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.ct-marque{width:1.5em; height:1.5em; flex:none}
.ct--r4 .ct-marque{color:#d8452e}

/* La rareté, au pied à droite : cinq pastilles, autant de pleines que le rang. */
.ct-etq{margin-left:auto; display:flex; align-items:center; flex:none}
.ct-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.ct-pips{display:flex; gap:.3em}
.ct-pips i{width:.86em; height:.86em; border-radius:50%; border:.11em solid currentColor; opacity:.55}
.ct-pips i.on{background:currentColor; opacity:1}


/* La finition des deux rangs les plus rares : un vernis qui prend la lumière. */
.ct-vernis{position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.34) 47%,rgba(255,255,255,0) 60%);
  background-size:260% 100%; background-position:calc(120% - var(--mx,50%)) 0; mix-blend-mode:soft-light;
  animation:ct-vernis 5.2s ease-in-out infinite}
.ct--r4 .ct-vernis{background-image:linear-gradient(115deg,rgba(230,196,119,0) 30%,rgba(255,226,150,.5) 47%,rgba(230,196,119,0) 60%); mix-blend-mode:screen}
@keyframes ct-vernis{0%,58%{background-position:130% 0}100%{background-position:-40% 0}}
.ct--r4 .ct-face{box-shadow:0 0 0 .07em rgba(230,196,119,.55) inset, 0 .1em .2em rgba(0,0,0,.4), 0 .9em 1.8em -.5em rgba(0,0,0,.7)}
.ct--r4 .ct-nom{background:linear-gradient(100deg,#c79a45,#f6e2a6 45%,#c79a45 90%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* LE FULL ART (cinq pastilles, avec image) : l'image occupe TOUTE la carte, le
   texte s'imprime dessus en or. Demande du propriétaire, sur le modèle de la
   carte de Marx dans Marx TCG. Le gabarit ne change pas (carte.js) : .ct-art
   sort du flux et passe derrière, deux voiles sombres (haut et bas) gardent le
   bandeau et le titre lisibles, un filet d'or double le bord. Une carte à cinq
   pastilles SANS image garde la couverture ordinaire. */
.ct--r4.ct--img .ct-art{position:absolute; inset:0; margin:0; z-index:0; background:#0c0a08}
.ct--r4.ct--img .ct-img{filter:grayscale(1) contrast(1.12) sepia(.7) saturate(1.45) brightness(1.02)}
/* une page de titre est blanche : en plein cadre elle éblouirait, on la baisse */
.ct--r4.ct--oeu.ct--img .ct-img{filter:grayscale(1) contrast(1.1) sepia(.7) saturate(1.4) brightness(.74)}
.ct--r4.ct--img .ct-art::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.94),rgba(10,8,6,.8) 9%,rgba(10,8,6,.3) 17%,rgba(10,8,6,0) 30%,rgba(10,8,6,0) 48%,rgba(10,8,6,.72) 68%,rgba(10,8,6,.96) 86%)}
.ct--r4.ct--img .ct-art::before{content:""; position:absolute; inset:.34em; z-index:1; pointer-events:none; border-radius:.2em;
  border:.05em solid rgba(230,196,119,.55); box-shadow:0 0 0 .14em rgba(230,196,119,.12)}
.ct--r4.ct--img .ct-bandeau,.ct--r4.ct--img .ct-titre,.ct--r4.ct--img .ct-pied{position:relative; z-index:2}
.ct--r4.ct--img .ct-face.ct-recto{padding:.95em 1em .86em}
.ct--r4.ct--img .ct-bandeau{border-bottom:0; padding-bottom:0; text-shadow:0 .05em .3em rgba(0,0,0,.9)}
.ct--r4.ct--img .ct-titre{margin-top:auto; filter:drop-shadow(0 .08em .28em rgba(0,0,0,.85))}
.ct--r4.ct--img .ct-nom{font-size:1.9em}
.ct--r4.ct--img .ct-nom--m{font-size:1.5em}
.ct--r4.ct--img .ct-nom--s{font-size:1.2em}
.ct--r4.ct--img .ct-nom--xs{font-size:1em}
.ct--r4.ct--img .ct-sous,.ct--r4.ct--img .ct-auteur{color:#ecd9a4}
.ct--r4.ct--img .ct-pied{border-top-color:rgba(230,196,119,.6)}

/* LA DORURE (cinq pastilles, .ct-or, carte.js dorure()) : demande du 12 nov. 2026,
   « plus stylé, du doré ». Un cadre de métal dont le reflet court (un anneau évidé
   par un masque), un filet intérieur, quatre fers d'angle, une poussière d'or qui
   scintille, des pastilles en relief, une lueur autour de la carte. Sur une shiny,
   l'anneau arc-en-ciel remplace le cadre d'or ; le reste demeure. */
.ct--r4 .ct-face.ct-recto{padding:1.12em 1.12em .98em;
  box-shadow:0 .1em .2em rgba(0,0,0,.4), 0 .9em 1.8em -.5em rgba(0,0,0,.7), 0 0 1.5em -.25em rgba(255,203,92,.6)}
.ct--r4.ct--img .ct-face.ct-recto{padding:1.2em 1.15em 1em}
.ct--r4.ct--img .ct-art::before{display:none}
.ct-or{position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit; overflow:hidden}
.ct-or::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:.24em;
  background:linear-gradient(125deg,#7d5a18,#f7e3a1 10%,#c2933a 21%,#fff6cf 33%,#a87a2a 46%,#f3d98f 58%,#7d5a18 70%,#ffe9a8 83%,#7d5a18) 0 0/280% 280%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ct-or-court 8s linear infinite}
.ct-or::after{content:""; position:absolute; inset:.5em; border-radius:.14em; border:.035em solid rgba(246,226,166,.62)}
.ct--tete .ct-or::before{display:none}
@keyframes ct-or-court{to{background-position:280% 280%}}
/* les fers d'angle : une équerre et son losange */
.ct-or b{position:absolute; width:.62em; height:.62em; border:0 solid #f1d78c; border-width:.07em 0 0 .07em; left:.66em; top:.66em}
.ct-or b::after{content:""; position:absolute; left:-.15em; top:-.15em; width:.22em; height:.22em; rotate:45deg; background:#f7e3a1; box-shadow:0 0 .3em #ffd76a}
.ct-or b:nth-child(2){left:auto; right:.66em; rotate:90deg}
.ct-or b:nth-child(3){left:auto; top:auto; right:.66em; bottom:.66em; rotate:180deg}
.ct-or b:nth-child(4){top:auto; bottom:.66em; rotate:270deg}
/* la poussière d'or */
.ct-or-s i{position:absolute; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  filter:drop-shadow(0 0 .22em #ffcf5c); animation:ct-shiny-scintille var(--t,3s) ease-in-out var(--d,0s) infinite}
.ct-or-s i::before{content:""; position:absolute; inset:0; background:radial-gradient(circle,#fff 0 26%,#ffe08a 68%);
  clip-path:polygon(50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%)}
.ct-or-s i.p::before{clip-path:none; border-radius:50%}
/* le nom en feuille d'or dont le reflet passe, les pastilles en relief */
.ct--r4 .ct-nom{background:linear-gradient(100deg,#b98a35,#f6e2a6 22%,#fffbe6 34%,#e0b85f 48%,#b98a35 62%,#f6e2a6 80%,#b98a35) 0 0/230% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:ct-or-nom 6s ease-in-out infinite alternate}
@keyframes ct-or-nom{to{background-position:100% 0}}
.ct--r4 .ct-pips i.on{border-color:#f3d98f; background:radial-gradient(circle at 34% 30%,#fff8d8,#e9c877 46%,#a47625); box-shadow:0 0 .34em rgba(255,207,92,.95)}
.ct--r4 .ct-bandeau{letter-spacing:.14em}

/* LA SHINY (une carte sur cinquante, .ct--tete) : une feuille holographique.
   Quatre calques au-dessus de la couverture :
   - .ct-holo::before  le SPECTRE entier en large bande diagonale qui glisse ;
   - .ct-semis         le semis d'étoiles à quatre branches et de points
                       (carte.js, semis()) : chacune scintille à son rythme ;
   - .ct-holo::after   le reflet blanc sous le doigt ;
   - .ct-recto::after  le filet arc-en-ciel qui court autour de la carte.
   TOUT est en fusion NORMALE : l'effet a la même présence sur les cinq papiers.
   (color, overlay, screen… dépendent du fond : trop sur l'un, rien sur l'autre.)
   Ce qui reste d'écart se règle par rang : --holo-o (le spectre), --holo-r (le
   reflet), calibrés à l'œil sur tools/shiny.html.
   --mx/--my (en %) et --rx/--ry (en deg) viennent de la page quand la carte
   penche ; au repos ils manquent, et tout vit de ses propres animations. */
.ct--tete{--holo-o:.6; --holo-r:.5}
.ct--r1.ct--tete{--holo-o:.6}
.ct--r2.ct--tete{--holo-o:.6}
.ct--r3.ct--tete{--holo-o:.66}
.ct--r4.ct--tete{--holo-o:.56; --holo-r:.26}
/* La feuille passe SOUS l'encre : le bandeau, le titre et le pied s'impriment
   par-dessus, le texte garde tout son contraste. */
.ct--tete .ct-recto>.ct-bandeau,.ct--tete .ct-recto>.ct-titre,.ct--tete .ct-recto>.ct-pied{position:relative; z-index:2}
.ct-holo{position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; overflow:hidden}
.ct-holo::before,.ct-holo::after{content:""; position:absolute; pointer-events:none}
.ct-holo::before{inset:-45%;
  background:linear-gradient(90deg,rgba(255,45,85,0) 8%,#ff2d55 21%,#ff8a00 29%,#ffe600 37%,#2be06b 45%,#00d5ff 53%,#2f6bff 61%,#9b4dff 69%,#ff4fd8 77%,rgba(255,79,216,0) 90%) 0 0/21em 100% repeat;
  rotate:calc(24deg + var(--ry,0deg) * 1.6);
  translate:calc((var(--mx,50%) - 50%) * .55) calc((var(--my,50%) - 50%) * .3);
  opacity:var(--holo-o);
  animation:ct-shiny-glisse 8s linear infinite}
.ct-holo::after{inset:0;
  background:radial-gradient(52% 40% at var(--mx,34%) var(--my,26%),rgba(255,255,255,1),rgba(255,255,255,0) 72%) no-repeat;
  opacity:var(--holo-r); animation:ct-shiny-reflet 7s ease-in-out infinite alternate}
/* le semis : plus vif près du doigt (le masque suit --mx/--my) */
.ct-semis{position:absolute; inset:0; z-index:1;
  -webkit-mask:radial-gradient(circle at var(--mx,50%) var(--my,42%),#000 0 28%,rgba(0,0,0,.5) 80%);
  mask:radial-gradient(circle at var(--mx,50%) var(--my,42%),#000 0 28%,rgba(0,0,0,.5) 80%)}
.ct-semis i{position:absolute; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  filter:drop-shadow(0 0 .06em hsl(var(--h) 100% 45%)) drop-shadow(0 0 .28em hsl(var(--h) 100% 60%));
  animation:ct-shiny-scintille var(--t,3s) ease-in-out var(--d,0s) infinite}
.ct-semis i::before{content:""; position:absolute; inset:0;
  background:radial-gradient(circle,#fff 0 30%,hsl(var(--h) 100% 82%) 70%);
  clip-path:polygon(50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%)}
.ct-semis i.p::before{clip-path:none; border-radius:50%; background:radial-gradient(circle,#fff 0 35%,hsl(var(--h) 100% 80%) 75%)}
/* le filet : un anneau arc-en-ciel (évidé par un masque) dont les couleurs courent */
.ct--tete .ct-recto::after{content:""; position:absolute; inset:0; z-index:8; pointer-events:none; border-radius:inherit; padding:.2em;
  background:linear-gradient(115deg,#ff2d55,#ff8a00,#ffe600,#2be06b,#00d5ff,#2f6bff,#9b4dff,#ff4fd8,#ff2d55,#ff8a00,#ffe600,#2be06b,#00d5ff,#2f6bff,#9b4dff,#ff4fd8,#ff2d55) 0 0/300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ct-shiny-filet 5s linear infinite}
/* et son halo : rose d'un côté, cyan de l'autre, violet dessous */
.ct--tete .ct-face.ct-recto{box-shadow:-.35em -.1em 1.1em -.2em rgba(255,79,216,.6), .35em -.1em 1.1em -.2em rgba(0,213,255,.55), 0 .5em 1.3em -.2em rgba(155,77,255,.6),
  0 .1em .2em rgba(0,0,0,.35), 0 .9em 1.6em -.6em rgba(0,0,0,.55)}
@keyframes ct-shiny-glisse{to{background-position:21em 0}}
@keyframes ct-shiny-reflet{from{background-position:-18% -10%}to{background-position:22% 14%}}
@keyframes ct-shiny-filet{to{background-position:150% 150%}}
@keyframes ct-shiny-teinte{to{filter:hue-rotate(360deg)}}
@keyframes ct-shiny-scintille{0%,100%{opacity:.3; scale:.45}50%{opacity:1; scale:1.1}}

/* La quatrième de couverture. */
.ct-verso{font-family:'Inter',system-ui,sans-serif}
.ct-verso .ct-bandeau{font-family:'Bricolage Grotesque','Inter',sans-serif}
.ct-v-nom{font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:800; font-size:1.12em; letter-spacing:-.02em; line-height:1.05; margin-top:.6em !important}
.ct-v-txt{font-family:'Fraunces',Georgia,serif; font-size:.68em; line-height:1.36; margin-top:.5em !important;
  display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden}
.ct-faits{margin-top:.6em !important; padding-top:.5em; border-top:.07em solid var(--filet); font-size:.6em; line-height:1.3; flex:1 1 0; min-height:0; overflow:hidden}
.ct-l{display:grid; grid-template-columns:6.4em 1fr; gap:.5em; padding:.16em 0}
.ct-l dt{text-transform:uppercase; letter-spacing:.09em; font-weight:600; font-size:.88em; color:var(--doux); padding-top:.08em}
.ct-v-pied{flex:none; display:flex; align-items:flex-end; gap:.7em; margin-top:.5em}
.ct-code{width:3.6em; height:1.7em; flex:none; color:var(--encre)}
.ct-v-src{font-size:.5em; line-height:1.3; color:var(--doux); display:flex; flex-direction:column; gap:.2em; min-width:0}
.ct-v-src span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ct-lien{color:var(--encre); font-weight:600; font-size:1.2em; text-decoration:underline; text-underline-offset:.18em}

/* LE DOS, commun à toutes : il passe devant le papier de n'importe quel rang
   et ne dit rien de la carte. Une nuit violette guillochée (rayons et cercles
   fins autour de la pièce), un FILM IRISÉ qui glisse quand la carte penche
   (--mx et --my, posés par la page : le dos est tactile), un filet irisé, la
   pièce dans son anneau, la marque du jeu. */
.ct .ct-face.ct-dos{background:#0a0a10; color:#f4f3ef; align-items:center; justify-content:center; padding:0;
  --iris:linear-gradient(120deg,#8ea2ff,#d7a6ff 24%,#ffb3c7 44%,#ffd9a0 62%,#a8f0c6 80%,#8fd3ff)}
.ct-dos-fond,.ct-dos-holo,.ct-dos-cadre{position:absolute; inset:0; pointer-events:none}
.ct-dos-fond{background:
  radial-gradient(circle at 50% 43%,rgba(150,110,255,.5),rgba(150,110,255,0) 44%),
  repeating-conic-gradient(from 0deg at 50% 43%,rgba(255,255,255,.05) 0 1deg,rgba(255,255,255,0) 1deg 5deg),
  repeating-radial-gradient(circle at 50% 43%,rgba(255,255,255,0) 0 .5em,rgba(255,255,255,.07) .5em .55em),
  linear-gradient(165deg,#16142e,#08080e 58%,#120f26)}
/* le film : une bande de couleurs bien plus large que la carte, qu'on déplace */
.ct-dos-holo{background:linear-gradient(118deg,rgba(142,162,255,0) 26%,rgba(142,162,255,.85) 38%,rgba(215,166,255,.9) 44%,rgba(255,179,199,.9) 50%,rgba(255,217,160,.85) 56%,rgba(168,240,198,.8) 62%,rgba(143,211,255,0) 74%);
  background-size:300% 300%; background-position:calc(100% - var(--mx,62%)) var(--my,38%); mix-blend-mode:screen; opacity:.3}
.ct-dos-holo::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at calc(100% - var(--mx,62%)) var(--my,30%),rgba(255,255,255,.4),rgba(255,255,255,0) 42%)}
/* le filet : un anneau irisé (le fond évidé par un masque), doublé d'un trait fin */
.ct-dos-cadre{inset:.5em; border-radius:.36em; padding:.11em; background:var(--iris);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ct .ct-face.ct-dos::after{content:""; position:absolute; inset:.86em; border-radius:.22em; border:.05em solid rgba(255,255,255,.2); pointer-events:none}
/* quatre étoiles aux angles */
.ct-dos-e{position:absolute; width:.72em; height:.72em; background:var(--iris); clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.ct-dos-e.e1{left:1.25em; top:1.25em} .ct-dos-e.e2{right:1.25em; top:1.25em} .ct-dos-e.e3{left:1.25em; bottom:1.25em} .ct-dos-e.e4{right:1.25em; bottom:1.25em}
.ct-dos-t{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:-1.1em}
.ct-dos-anneau{position:relative; display:block; width:6.9em; margin-bottom:1.5em}
.ct-dos-anneau::before{content:""; position:absolute; inset:-.62em; border-radius:50%; padding:.1em; background:conic-gradient(from 210deg,#8ea2ff,#d7a6ff,#ffb3c7,#ffd9a0,#a8f0c6,#8fd3ff,#8ea2ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ct-dos-anneau::after{content:""; position:absolute; inset:-1.05em; border-radius:50%; border:.045em dashed rgba(255,255,255,.34)}
/* LE LOGO (carte.js, LOGO) : la pièce à la chouette. Une image SVG dont le
   relief est calculé ; sa taille est celle du conteneur. */
.hibou{display:block; width:100%; aspect-ratio:1}
.hibou img{display:block; width:100%; height:100%}
.ct-dos-anneau .hibou{filter:drop-shadow(0 .25em .9em rgba(190,140,255,.75))}
.ct-dos-t b{font-family:'Geist','Inter',sans-serif; font-weight:800; font-size:1.42em; letter-spacing:-.045em; line-height:1; display:inline-flex; align-items:center; gap:.36em}
.ct-dos-t b i{font-style:normal; font-weight:700; font-size:.56em; letter-spacing:.06em; padding:.3em .55em; border-radius:.55em; background:#f4f3ef; color:#0a0a10}
.ct-dos-t small{font-family:'Geist','Inter',sans-serif; font-weight:500; font-size:.44em; letter-spacing:.2em; text-transform:uppercase; margin-top:1em; color:rgba(244,243,239,.62)}
/* Un dos seul (la pile d'un booster) : il penche lui aussi vers la main. */
.ct--dos .ct-in{transform:rotateY(calc(180deg + var(--ry,0deg))) rotateX(calc(var(--rx,0deg) * -1))}
.ct--dos .ct-dos{visibility:visible}

@media (prefers-reduced-motion:reduce){
  .ct-in{transition:none} .ct-vernis{animation:none}
  /* la shiny reste arc-en-ciel, mais fixe */
  .ct-holo::before,.ct-holo::after,.ct-semis i,.ct--tete .ct-recto::after,.ct-etoile{animation:none}
  .ct-or::before,.ct-or-s i,.ct--r4 .ct-nom{animation:none}
}