/* 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:.9em; height:.9em; margin-right:.35em; vertical-align:-.08em;
  background:conic-gradient(from 0deg,#ff5d8f,#ffd166,#5ee6a8,#4cc9f0,#b388ff,#ff5d8f);
  clip-path:polygon(50% 0,61% 36%,98% 36%,68% 58%,79% 94%,50% 72%,21% 94%,32% 58%,2% 36%,39% 36%)}

/* 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}

/* L'irisée : un film holographique sur toute la couverture. */
.ct-holo{position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit; opacity:.5;
  background:
    radial-gradient(60% 50% at var(--mx,50%) var(--my,40%),rgba(255,255,255,.75),rgba(255,255,255,0) 70%),
    repeating-linear-gradient(118deg,#ff5d8f 0%,#ffd166 9%,#5ee6a8 18%,#4cc9f0 27%,#b388ff 36%,#ff5d8f 45%);
  background-size:100% 100%,220% 220%; background-position:0 0,var(--mx,50%) var(--my,50%);
  mix-blend-mode:color-dodge; animation:ct-holo 7s linear infinite}
.ct--r0.ct--tete .ct-holo,.ct--r1.ct--tete .ct-holo,.ct--r2.ct--tete .ct-holo{mix-blend-mode:hard-light; opacity:.34}
@keyframes ct-holo{to{filter:hue-rotate(360deg)}}

/* 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,.ct-holo{animation:none}
}