/* 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.
   Noir, le phi du logo au centre dans une pastille irisée. */
.ct .ct-face.ct-dos{background:radial-gradient(90% 70% at 50% 40%,#22222b,#0c0c10 75%); color:#f4f3ef; align-items:center; justify-content:center; padding:0}
.ct-dos-trame{position:absolute; inset:.55em; border-radius:.3em; border:.07em solid rgba(255,255,255,.16);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 .08em,transparent .08em .5em)}
.ct-dos-t{position:relative; display:flex; flex-direction:column; align-items:center; gap:.7em; text-align:center}
/* 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-t .hibou{width:6.6em; filter:drop-shadow(0 0 1.2em rgba(200,140,255,.5))}
.ct-dos-t b{font-family:'Geist','Inter',sans-serif; font-weight:700; font-size:.82em; letter-spacing:.22em; text-transform:uppercase}
.ct--dos .ct-in{transform:rotateY(180deg)}
.ct--dos .ct-dos{visibility:visible}

@media (prefers-reduced-motion:reduce){
  .ct-in{transition:none} .ct-vernis,.ct-holo{animation:none}
}