/* cartes/carte.css — le design des cartes à collectionner.
 *
 * Une carte est un OBJET : ses couleurs sont écrites ici et ne suivent pas le
 * mode d'affichage du site (la règle des dos reliés du rayon de l'accueil).
 * Tout est en em : une seule propriété, --ct-l (largeur), met la carte à
 * l'échelle, de la vignette d'album au plein écran du booster.
 *
 * LA RÈGLE DES COULEURS (refonte de novembre 2026) : la couleur et la lumière
 * ne disent QUE deux choses, le rang et l'holographie.
 *   - Le rang a son PAPIER et son MÉTAL, lisibles d'un coup d'œil : papier
 *     journal gris et nu (tract), chamois et cuivre (brochure), papier bleu
 *     ardoise et argent (reliure), papier d'or et or (originale) ; le
 *     manuscrit est noir, or et rouge, comme le paquet. La même encre partout.
 *   - L'époque se dit par la typographie, la forme du cadre et de l'image, le
 *     motif (ton sur ton) et la trame de la photographie ; la famille par son
 *     emblème. Plus de fond rouge, plus d'encres de couleur : la couleur du
 *     fond appartient au rang, et à lui seul.
 *   - L'holographique (une carte sur cinquante) est le seul ARC-EN-CIEL du
 *     jeu : feuille irisée, paillettes, image qui bouge.
 */

.ct {
  --ct-l: 252px;
  font-size: calc(var(--ct-l) / 25.2);
  width: 25.2em;
  aspect-ratio: 63 / 88;
  position: relative;
  perspective: 90em;
  flex: none;
  --papier: #ece3cf; --encre-t: #1c1610; --doux: #5b4a33;
  --ton: rgba(28, 22, 16, .09);   /* le motif ton sur ton */
  --filet: rgba(28, 22, 16, .55); /* les filets d'encre */
  --art-fond: #d6ccb8;
  --or-1: #f4dc8f; --or-2: #b8902f; --or-3: #6e5216;
  --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg;
}
.ct h3, .ct p, .ct dl, .ct dd, .ct dt { color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.ct-corps {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.ct.retournee .ct-corps { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.ct-face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: .9em;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--papier); color: var(--encre-t);
  box-shadow: 0 .1em 0 rgba(255, 255, 255, .25) inset, 0 .8em 1.8em -.6em rgba(0, 0, 0, .55), 0 .15em .4em rgba(0, 0, 0, .35);
}
.ct-verso { transform: rotateY(180deg); }
/* Chrome ne tient pas backface-visibility dès qu'une face contient un mode de
   fusion (le grain, le reflet) : chaque face se masque donc à mi-rotation,
   quand la carte est vue par la tranche. */
.ct-recto { transition: visibility 0s .2s; }
.ct-verso { visibility: hidden; transition: visibility 0s .2s; }
.ct.retournee .ct-recto { visibility: hidden; }
.ct.retournee .ct-verso { visibility: visible; }

/* le grain du papier : un bruit fin, commun à toutes les époques */
.ct-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: .2;
}

.ct-motif { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; color: var(--encre-t); }
/* le motif ne passe jamais sous le nom */
.ct-motif {
  -webkit-mask-image: linear-gradient(#000 0 52%, transparent 62% 86%, #000 96%);
          mask-image: linear-gradient(#000 0 52%, transparent 62% 86%, #000 96%);
}
.ct--e-gravure .ct-motif { opacity: .55; }
.ct--e-internationale .ct-motif { opacity: .2; }
.ct--e-constructivisme .ct-motif { opacity: .075; }
.ct--e-affiche .ct-motif { opacity: .055; }
.ct--e-serigraphie .ct-motif { opacity: .22; }
.ct--e-contemporain .ct-motif { opacity: .45; }
.ct-cadre {
  position: absolute; inset: 1em; z-index: 2;
  display: flex; flex-direction: column;
}
.ct-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 .95em/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  padding: .2em .1em .55em;
}
.ct-no { letter-spacing: .06em; font-variant-numeric: tabular-nums; opacity: .75; }

.ct-art {
  position: relative; flex: 0 0 auto; height: 15.8em; overflow: hidden;
  background: var(--art-fond);
  display: grid; place-items: center; isolation: isolate;
}
/* l'image prend EXACTEMENT le cadre : sans position absolue, elle gardait
   ses proportions, débordait et la grille la centrait — object-position
   n'avait alors aucun effet et l'on voyait toujours le milieu de la photo */
.ct-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block;
  filter: grayscale(1) contrast(1.06); }
.ct-img--entiere { object-fit: contain; }
.ct-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.ct-txt { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: .7em .2em .3em; min-height: 0; }
.ct-nom { margin: 0; line-height: 1.04; text-wrap: balance; overflow-wrap: anywhere; }
.ct-nom--l { font-size: 2.3em; } .ct-nom--m { font-size: 1.85em; }
.ct-nom--s { font-size: 1.5em; } .ct-nom--xs { font-size: 1.22em; }
.ct .ct-sub {
  margin: .45em 0 0; font: 500 1.04em/1.25 Spectral, Georgia, serif; opacity: .78;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ct-foot {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 1em/1 Inter, system-ui, sans-serif; letter-spacing: .04em;
  padding-top: .55em; font-variant-numeric: tabular-nums;
}
.ct-rang { display: flex; gap: .28em; }
.ct-rang i { width: .62em; height: .62em; transform: rotate(45deg); border: .1em solid currentColor; opacity: .4; }
.ct-rang i.on { background: currentColor; opacity: 1; }

/* ------------------------------------------------------------ emblèmes */
.ct-art--em { background: transparent; }
.ct-em { position: relative; z-index: 1; line-height: 1; text-align: center; color: var(--encre-t); }
.ct-em--an { font: 900 6.6em/1 Fraunces, Georgia, serif; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.ct-em--lettre { font: 900 11em/.9 Fraunces, Georgia, serif; }
.ct-em-de { position: absolute; bottom: .9em; left: 0; right: 0; text-align: center; font: italic 500 1.2em/1.2 Fraunces, Georgia, serif; z-index: 1; }
.ct-em--ini { font: 900 7em/1 Fraunces, Georgia, serif; letter-spacing: -.02em; }
.ct-em--sigle { font: 800 4.6em/1 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.01em; max-width: 90%; overflow-wrap: anywhere; }
.ct-em--titre {
  display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 0 1.4em;
  font-family: Fraunces, Georgia, serif;
}
.ct-tp-au { font: 600 .95em/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.ct-tp-t { font: italic 500 1.75em/1.1 Fraunces, Georgia, serif; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ct-tp-an { font: 900 1.3em/1 Fraunces, Georgia, serif; border-top: .08em solid currentColor; padding-top: .5em; }

/* =========================================================== LES ÉPOQUES
 * Même papier, même encre. Ce qui change : le caractère, la forme du cadre et
 * de l'image, le motif ton sur ton, la trame de la photographie. */

/* --- gravure (avant 1848) : la taille-douce, le médaillon, le double filet */
.ct--e-gravure .ct-cadre { outline: .08em solid var(--filet); outline-offset: .35em; border: .3em double var(--filet); padding: .55em; inset: 1.2em; }
.ct--e-gravure .ct-art:not(.ct-art--em) { border-radius: 50% / 46%; box-shadow: inset 0 0 0 .1em var(--filet); background: var(--art-fond); }
.ct--e-gravure .ct-img { filter: grayscale(1) sepia(.28) contrast(1.08); }
/* la taille-douce posée sur l'image : des tailles parallèles, très fines */
.ct--e-gravure .ct-art:not(.ct-art--em)::after { border-radius: inherit;
  background: repeating-linear-gradient(-32deg, rgba(40, 28, 14, .16) 0 .07em, transparent .07em .26em);
  mix-blend-mode: multiply; box-shadow: inset 0 0 1.4em .3em var(--papier); }
.ct--e-gravure .ct-nom { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; text-align: center; }
.ct--e-gravure .ct-sub { text-align: center; font-style: italic; }
.ct--e-gravure .ct-top, .ct--e-gravure .ct-foot { font-family: Spectral, Georgia, serif; font-weight: 600; }

/* --- internationale (1848-1916) : le guilloché d'un titre, l'image en cartouche */
.ct--e-internationale .ct-cadre { border: .12em solid var(--filet); box-shadow: inset 0 0 0 .3em var(--papier), inset 0 0 0 .38em var(--filet); padding: .8em; inset: .95em; }
.ct--e-internationale .ct-art:not(.ct-art--em) {
  clip-path: polygon(1.1em 0, calc(100% - 1.1em) 0, 100% 1.1em, 100% calc(100% - 1.1em), calc(100% - 1.1em) 100%, 1.1em 100%, 0 calc(100% - 1.1em), 0 1.1em); }
.ct--e-internationale .ct-img { filter: grayscale(1) contrast(1.12) brightness(1.02); }
.ct--e-internationale .ct-nom { font-family: Fraunces, Georgia, serif; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.ct--e-internationale .ct-nom--l { font-size: 1.95em; } .ct--e-internationale .ct-nom--m { font-size: 1.6em; }
.ct--e-internationale .ct-nom--s { font-size: 1.32em; } .ct--e-internationale .ct-nom--xs { font-size: 1.1em; }
.ct--e-internationale .ct-sub { text-align: center; }
.ct--e-internationale .ct-top { padding-left: .3em; padding-right: .3em; }

/* --- constructivisme (1917-1939) : la diagonale, le disque, la grotesque */
.ct--e-constructivisme .ct-cadre { inset: .4em; padding: .75em; }
.ct--r2.ct--e-constructivisme .ct-cadre, .ct--r3.ct--e-constructivisme .ct-cadre { inset: .8em; }
.ct--e-constructivisme .ct-top { border-bottom: .3em solid var(--encre-t); margin: -.75em -.75em .8em; padding: .7em .75em .55em; }
.ct--e-constructivisme .ct-art:not(.ct-art--em) { clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); height: 16.4em; }
.ct--e-constructivisme .ct-img { filter: grayscale(1) contrast(1.4) brightness(1.04); }
.ct--e-constructivisme .ct-nom { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; transform: rotate(-3deg); transform-origin: left; }
.ct--e-constructivisme .ct-sub { font-family: Inter, sans-serif; font-size: .98em; }
.ct--e-constructivisme .ct-foot { border-top: .08em solid var(--encre-t); }

/* --- affiche (1940-1967) : le soleil levant ton sur ton, la fenêtre cintrée */
.ct--e-affiche .ct-cadre { border: .1em solid var(--filet); padding: .7em; inset: 1em; }
.ct--e-affiche .ct-art:not(.ct-art--em) { border-radius: 50% 50% .3em .3em / 34% 34% .3em .3em; }
.ct--e-affiche .ct-img { filter: grayscale(1) contrast(1.2) brightness(1.06); }
.ct--e-affiche .ct-nom { font-family: Fraunces, Georgia, serif; font-weight: 900; text-align: center; }
.ct--e-affiche .ct-sub { text-align: center; }
.ct--e-affiche .ct-top { justify-content: center; gap: 1.2em; }

/* --- sérigraphie (1968-1991) : la trame, le pochoir, l'encre qui déborde */
.ct--e-serigraphie .ct-cadre { inset: .9em; }
.ct--e-serigraphie .ct-img { filter: grayscale(1) contrast(1.45) brightness(1.04); }
/* la trame de points posée sur la photographie */
.ct--e-serigraphie .ct-art:not(.ct-art--em)::after {
  background: radial-gradient(circle, rgba(28, 22, 16, .55) 0 30%, transparent 34%) 0 0 / .32em .32em;
  mix-blend-mode: multiply; opacity: .5; }
.ct--e-serigraphie .ct-art:not(.ct-art--em) { transform: rotate(calc(var(--tilt) * .8deg)); }
.ct--e-serigraphie .ct-nom { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; transform: rotate(calc(var(--tilt) * 1.6deg)); }
.ct--e-serigraphie .ct-top, .ct--e-serigraphie .ct-foot { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 800; }

/* --- contemporain (depuis 1992) : le filet, la grille, le réseau */
.ct--e-contemporain .ct-cadre { inset: 1.1em; }
.ct--e-contemporain .ct-top { border-bottom: .08em solid var(--encre-t); margin-bottom: .8em; }
.ct--e-contemporain .ct-img { filter: grayscale(1) contrast(1.04); }
.ct--e-contemporain .ct-nom { font-family: Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; }
.ct--e-contemporain .ct-foot { border-top: .08em solid var(--encre-t); }

/* ============================================================ LES RANGS
 * Chaque rang a SON métal, et on le lit d'un coup d'œil sur le bord de la
 * carte et dans les losanges du pied : le tract est un papier nu, la brochure
 * prend un filet de cuivre, la reliure un filet d'argent, l'originale l'or
 * (filet large qui chatoie, fers aux angles), et le manuscrit est une carte
 * NOIRE, dorée et rubriquée de rouge — la livrée du paquet. Seuls l'originale,
 * le manuscrit et l'holographique s'animent. */

@property --ct-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* le métal du rang : sombre, clair, moyen */
.ct--r1 { --m1: #6b3a1c; --m2: #f2b98c; --m3: #b06a3c; }
.ct--r2 { --m1: #45576e; --m2: #eef5fd; --m3: #869fbd; }
.ct--r3 { --m1: #6e5216; --m2: #fbe7a6; --m3: #c9952a; }
.ct--r1 .ct-recto::after, .ct--r2 .ct-recto::after, .ct--r3 .ct-recto::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  padding: var(--mw, .2em);
  background: linear-gradient(135deg, var(--m1), var(--m2) 22%, var(--m3) 40%, var(--m2) 60%, var(--m1) 82%, var(--m3)) 0 0 / 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ct--r1 .ct-rang i, .ct--r2 .ct-rang i, .ct--r3 .ct-rang i { border-color: var(--m1); opacity: .55; }
.ct--r1 .ct-rang i.on, .ct--r2 .ct-rang i.on, .ct--r3 .ct-rang i.on { background: linear-gradient(135deg, var(--m2), var(--m3) 45%, var(--m1)); opacity: 1; }

/* tract : le papier nu, plus gris, plus grainé, à peine d'ombre */
/* LE PAPIER DU RANG : une couleur franche par rang, du gris au jaune d'or */
.ct--r0 .ct-face.ct-recto { --papier: #d3d1cc; --art-fond: #bebcb6; }
.ct--r1 .ct-face.ct-recto { --papier: #ecc4a1; --art-fond: #d6a780;
  background: linear-gradient(160deg, #f3d3b6, #e9bd97 55%, #e0ae84); }
.ct--r2 .ct-face.ct-recto { --papier: #b9cfe7; --art-fond: #96b2d2; --doux: #2c3d52;
  background: linear-gradient(160deg, #d5e3f3, #b7cde6 55%, #9cb8da); }
.ct--r3 .ct-face.ct-recto { --papier: #efcf73; --art-fond: #d6ad4c;
  background: linear-gradient(160deg, #f8e3a0, #ecc862 50%, #f2d684 75%, #e2b956); }
.ct--r0 .ct-recto::before { opacity: .36; }
.ct--r0 .ct-recto { box-shadow: 0 .5em 1.2em -.5em rgba(0, 0, 0, .5); }
.ct--r0 .ct-img { opacity: .9; }

/* brochure : le cuivre, fin */
.ct--r1 { --mw: .2em; }
/* reliure : l'argent, plus large */
.ct--r2 { --mw: .3em; }
.ct--r2 .ct-recto { box-shadow: 0 0 0 .08em #34445a, 0 .8em 1.8em -.6em rgba(0, 0, 0, .55); }
/* originale : l'or, large, qui chatoie, des fers aux angles et une lueur */
.ct--r3 { --mw: .44em; }
.ct--r3 .ct-recto::after { animation: ct-chatoie 7s ease-in-out infinite; }
.ct--r3 .ct-recto { box-shadow: 0 0 0 .1em #5d4512, 0 0 1.6em rgba(232, 186, 80, .35), 0 .9em 1.9em -.6em rgba(0, 0, 0, .6); }
.ct-fers { position: absolute; inset: .5em; z-index: 5; pointer-events: none; }
.ct-fers i { position: absolute; width: 3.1em; height: 3.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e3a0'/%3E%3Cstop offset='.5' stop-color='%23b8902f'/%3E%3Cstop offset='1' stop-color='%23f2d98a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 2h14c-6 1.5-10 5.5-11.5 11.5L2 16z' fill='url(%23g)'/%3E%3Cpath d='M7 7c6 0 9 3 9 9-3-1-5-2.5-6.2-4.3C8.4 10.4 7.3 8.8 7 7z' fill='url(%23g)'/%3E%3Ccircle cx='19.5' cy='4.5' r='1.6' fill='url(%23g)'/%3E%3Ccircle cx='4.5' cy='19.5' r='1.6' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 .05em .05em rgba(0, 0, 0, .45)); }
.ct-fers i:nth-child(1) { left: 0; top: 0; }
.ct-fers i:nth-child(2) { right: 0; top: 0; transform: scaleX(-1); }
.ct-fers i:nth-child(3) { left: 0; bottom: 0; transform: scaleY(-1); }
.ct-fers i:nth-child(4) { right: 0; bottom: 0; transform: scale(-1); }
.ct--r3 .ct-foil {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: radial-gradient(28em 22em at var(--mx) var(--my), rgba(255, 236, 170, .38), transparent 60%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
}
.ct--r3:hover .ct-foil { opacity: 1; }

/* ---------------------------------------------------------------- MANUSCRIT
 * NOIR, OR ET ROUGE, la livrée du paquet : la nuit du sachet avec sa lueur
 * rouge, la page manuscrite de 1846 en filigrane d'or, un double filet d'or
 * qu'une lumière parcourt, un filet rouge intérieur, le nom à la feuille d'or
 * (sur le noir, un reflet clair se lit), les fers, les éclats, le sceau. */
.ct--r4 .ct-face.ct-recto { --papier: #15100b; --encre-t: #f3e9d4; --filet: rgba(216, 173, 76, .55); --art-fond: #0c0907;
  background: radial-gradient(85% 55% at 62% 30%, #4a1810, transparent 74%), linear-gradient(172deg, #211a14, #0c0907);
  box-shadow: 0 0 0 .1em #8a6116, 0 0 2.4em rgba(232, 186, 80, .45), 0 1.2em 2.4em -.6em rgba(0, 0, 0, .75); }
.ct--r4 .ct-face.ct-recto::before { mix-blend-mode: screen; opacity: .06; }
.ct--r4 .ct-motif { color: #d4a73a; }
/* le filigrane : la page de L'Idéologie allemande, l'encre devenue or */
.ct-filigrane { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("/assets/img/archive/manuscrit-ideologie-1846.webp") 50% 30% / cover;
  filter: grayscale(1) invert(1) contrast(1.7) sepia(1) saturate(1.8) brightness(.9); mix-blend-mode: screen; opacity: .2;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 45%, #000 40%, transparent 92%);
          mask-image: radial-gradient(120% 85% at 50% 45%, #000 40%, transparent 92%); }
/* le double filet d'or */
.ct--r4 .ct-recto::after {
  content: ""; position: absolute; inset: .45em; border-radius: .55em; pointer-events: none; z-index: 4;
  border: .18em solid transparent;
  background: linear-gradient(135deg, #7a5612, #fff0b8 25%, #c9952a 45%, #fff6d2 60%, #9c6f1c 80%, #f6dc8a) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ct-ecrin { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; }
/* le filet rouge, à l'intérieur */
.ct-ecrin::before { content: ""; position: absolute; inset: .88em; border-radius: .3em;
  border: .08em solid #d5402f; box-shadow: 0 0 .4em rgba(213, 64, 47, .35);
  animation: ct-braise 3.4s ease-in-out infinite; }
/* la braise : le filet rouge et le halo de la carte rougeoient, doucement */
.ct--r4 .ct-face.ct-recto { animation: ct-rougeoie 3.4s ease-in-out infinite; }
/* la lumière qui fait le tour du filet d'or */
.ct-ecrin::after { content: ""; position: absolute; inset: .45em; border-radius: .55em; padding: .18em;
  background: conic-gradient(from var(--ct-ang), transparent 0 78%, rgba(255, 252, 235, .2) 84%, #fffbe9 90%, rgba(255, 252, 235, .2) 95%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 .25em #ffe9a6);
  animation: ct-tourne 5s linear infinite; }
.ct--r4 .ct-cadre { inset: 1.35em; }
.ct--r4.ct--e-constructivisme .ct-cadre { inset: 1.35em; padding: 0; }
.ct--r4.ct--e-constructivisme .ct-top { margin: 0 0 .8em; padding: .2em .1em .55em; border-color: #c9952a; }
.ct--r4.ct--e-constructivisme .ct-foot, .ct--r4.ct--e-contemporain .ct-foot, .ct--r4.ct--e-contemporain .ct-top { border-color: rgba(216, 173, 76, .6); }
.ct--r4 .ct-fers { inset: 1em; }
.ct--r4 .ct-fers i { width: 2.4em; height: 2.4em; }
.ct--r4 .ct-top { color: #d8ad4c; }
.ct--r4 .ct-foot { color: #e8d9b8; }
/* l'image, sertie d'or, posée sur la nuit */
.ct--r4 .ct-art:not(.ct-art--em) { border: .14em solid #c9952a;
  box-shadow: 0 0 0 .08em #3a2606, 0 0 1.4em rgba(244, 204, 110, .3); }
.ct--r4 .ct-art:not(.ct-art--em)::after { box-shadow: none; }
.ct--r4.ct--e-gravure .ct-art:not(.ct-art--em)::after { mix-blend-mode: multiply; }
.ct--r4 .ct-img { z-index: 1; }
.ct--r4 .ct-em { position: relative; z-index: 1; }
/* le nom à la feuille d'or : sur le noir, le reflet se lit */
.ct--r4 .ct-nom, .ct--r4 .ct-art--em .ct-em, .ct--r4 .ct-tp-t {
  background: linear-gradient(100deg, #b8862a 0%, #e9c56a 25%, #fff3c6 48%, #f6dc8a 55%, #c9952a 75%, #b8862a 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .05em 0 rgba(0, 0, 0, .6));
  animation: ct-dorure 6s ease-in-out infinite; }
.ct--r4 .ct-em-de, .ct--r4 .ct-tp-au, .ct--r4 .ct-tp-an { color: #d8ad4c; }
.ct--r4.ct--e-serigraphie .ct-nom, .ct--r4.ct--e-constructivisme .ct-nom { transform: none; }
/* la lumière qui traverse la carte, une fois toutes les huit secondes */
.ct--r4 .ct-foil { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; overflow: hidden; }
.ct--r4 .ct-foil::before { content: ""; position: absolute; top: -30%; bottom: -30%; width: 38%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 180, .22) 50%, transparent);
  transform: skewX(-18deg); mix-blend-mode: screen; animation: ct-passe 8s cubic-bezier(.45, .05, .25, 1) infinite; }
.ct--r4 .ct-foil::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s; mix-blend-mode: screen;
  background: radial-gradient(22em 18em at var(--mx) var(--my), rgba(255, 220, 140, .18), transparent 60%); }
.ct--r4:hover .ct-foil::after { opacity: 1; }
/* les éclats */
.ct-eclats { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.ct-eclats i { position: absolute; left: var(--x); top: var(--y); width: var(--t, 1.2em); height: var(--t, 1.2em); margin: calc(var(--t, 1.2em) / -2);
  background: radial-gradient(circle, #fff 0 8%, var(--eclat, rgba(255, 243, 200, .9)) 12%, transparent 34%),
              conic-gradient(from 45deg, transparent 0 22%, var(--eclat, rgba(255, 246, 210, .95)) 25%, transparent 28% 47%, var(--eclat, rgba(255, 246, 210, .95)) 50%, transparent 53% 72%, var(--eclat, rgba(255, 246, 210, .95)) 75%, transparent 78% 97%, var(--eclat, rgba(255, 246, 210, .95)) 100%);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 52%); mask: radial-gradient(circle, #000 18%, transparent 52%);
  opacity: 0; animation: ct-eclat var(--p, 3.2s) ease-in-out var(--d, 0s) infinite; }
/* le sceau de cire */
.ct-sceau { position: relative; width: 2.5em; height: 2.5em; margin: -.9em -.2em -.4em 0; display: grid; place-items: center;
  font: italic 900 1.15em/1 Fraunces, Georgia, serif; color: #f5d9a8; letter-spacing: 0;
  background: radial-gradient(circle at 38% 32%, #d4402e, #94200f 55%, #5e0f09);
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  box-shadow: inset 0 0 0 .2em rgba(0, 0, 0, .18), inset .12em .12em .25em rgba(255, 180, 160, .35), 0 0 0 .08em #c9952a, 0 .15em .3em rgba(0, 0, 0, .5); }
.ct--r4 .ct-rang { display: none; }

@keyframes ct-tourne { to { --ct-ang: 360deg; } }
@keyframes ct-braise { 0%, 100% { border-color: #b8331f; box-shadow: 0 0 .3em rgba(213, 64, 47, .3), inset 0 0 .2em rgba(213, 64, 47, .15); }
  50% { border-color: #ff6a4a; box-shadow: 0 0 .9em rgba(255, 90, 60, .75), inset 0 0 .7em rgba(255, 90, 60, .35); } }
@keyframes ct-rougeoie { 0%, 100% { box-shadow: 0 0 0 .1em #8a6116, 0 0 2.4em rgba(232, 186, 80, .45), 0 1.2em 2.4em -.6em rgba(0, 0, 0, .75); }
  50% { box-shadow: 0 0 0 .1em #8a6116, 0 0 2.8em rgba(220, 70, 45, .6), 0 1.2em 2.4em -.6em rgba(0, 0, 0, .75); } }
@keyframes ct-chatoie { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }
@keyframes ct-passe { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes ct-dorure { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes ct-eclat { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: 0; transform: scale(.5) rotate(70deg); } }

/* ---------------------------------------------------------------- HOLOGRAPHIQUE
 * Le « shiny » : une carte sur cinquante. Une feuille holographique
 * arc-en-ciel couvre toute la carte : ses couleurs coulent en diagonale et
 * suivent la main, des paillettes scintillent, un filet irisé tourne autour,
 * et l'image bouge (elle s'approche lentement, glisse, suit la main). Il se
 * combine avec tous les rangs, manuscrit compris. Pas de pastille : l'effet
 * se voit, l'étoile irisée du numéro suffit à le signer. */
.ct--tete { --eclat: rgba(255, 255, 255, .95); }
.ct--tete .ct-img { animation: ct-respire 16s ease-in-out infinite alternate;
  translate: calc((var(--mx) - 50%) * -.08) calc((var(--my) - 30%) * -.06);
  transition: translate .5s ease-out; }
/* l'arc-en-ciel sur l'image : il la colore sans en effacer le dessin */
.ct-tirage { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.ct-tirage::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background: linear-gradient(115deg, #ff2d75, #ff9f1c 14%, #ffe600 28%, #3ddc84 42%, #1fb6ff 56%, #7b5cff 70%, #ff2d75 84%, #ff9f1c) 0 0 / 300% 300%;
  mix-blend-mode: color; opacity: .65;
  background-position: calc(var(--mx) * 1.2) calc(var(--my) * 1.2);
  animation: ct-arc 7s linear infinite; }
/* la feuille holographique, sur toute la carte */
.ct-holo { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    repeating-linear-gradient(115deg, #ff2d75 0, #ff9f1c 2.2em, #ffe600 4.4em, #3ddc84 6.6em, #1fb6ff 8.8em, #7b5cff 11em, #ff2d75 13.2em) 0 0 / 200% 200%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge; opacity: .32;
  animation: ct-arc 9s linear infinite; }
/* les paillettes et la lumière blanche qui passe */
.ct-holo::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 .05em, transparent .09em) 0 0 / 1.1em 1.3em,
              radial-gradient(circle, rgba(255, 255, 255, .7) 0 .04em, transparent .08em) .55em .7em / 1.7em 1.5em;
  mix-blend-mode: overlay; opacity: .9; animation: ct-paillettes 2.6s ease-in-out infinite alternate; }
.ct-holo::after { content: ""; position: absolute; top: -30%; bottom: -30%; width: 34%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85) 50%, transparent);
  transform: skewX(-18deg); mix-blend-mode: overlay; animation: ct-passe 5s cubic-bezier(.45, .05, .25, 1) .8s infinite; }
/* le filet irisé qui tourne */
.ct-argent { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; padding: .3em;
  background: conic-gradient(from var(--ct-ang), #ff2d75, #ff9f1c, #ffe600, #3ddc84, #1fb6ff, #7b5cff, #ff2d75);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ct-tourne 4s linear infinite; }
.ct--tete:not(.ct--r4) .ct-recto::after { inset: .3em; border-radius: .7em; }
.ct--tete .ct-recto { box-shadow: 0 0 1.4em rgba(255, 80, 160, .35), 0 0 2.6em rgba(60, 170, 255, .3), 0 .8em 1.8em -.6em rgba(0, 0, 0, .55); }
.ct--tete .ct-art--em .ct-em, .ct--tete.ct--r4 .ct-art--em .ct-em {
  background: linear-gradient(115deg, #e0115f, #e88a00 18%, #c9b400 32%, #1f9e5a 46%, #0b84c8 60%, #6440d8 74%, #e0115f) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: none;
  animation: ct-glisse 6s linear infinite; }
.ct--tete .ct-art--em .ct-tp-an { border-color: #6440d8; }
.ct-etoile { font-size: 1.25em; line-height: 1; margin-right: .2em;
  background: linear-gradient(135deg, #ff2d75, #ffe600, #1fb6ff, #7b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct--tete .ct-rang i.on { background: linear-gradient(135deg, #ff2d75, #ffe600, #1fb6ff, #7b5cff); border-color: #7b5cff; }

@keyframes ct-respire { 0% { transform: scale(1.04) translate(-1.2%, .6%); } 100% { transform: scale(1.14) translate(1.6%, -1.4%); } }
@keyframes ct-glisse { 0% { background-position: 0 0; } 100% { background-position: 300% 0; } }
@keyframes ct-arc { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes ct-paillettes { 0% { opacity: .35; } 100% { opacity: .95; } }

/* ============================================================ LE VERSO */
.ct-verso { background: #1b1510; color: #efe3c8; }
.ct-verso::before { mix-blend-mode: screen; opacity: .06; }
/* le verso est commun à toutes les époques : il ne prend aucun de leurs cadres */
.ct .ct-verso .ct-cadre { inset: 1.1em; border: .1em solid rgba(239, 227, 200, .28); padding: .9em; gap: .7em;
  background: none; box-shadow: none; outline: 0; outline-offset: 0; }
.ct .ct-verso .ct-top { background: none; color: #d8ad4c; margin: 0; padding: .2em .1em .55em; border: 0; font-family: Inter, system-ui, sans-serif; justify-content: space-between; }
.ct-v-nom { margin: 0; font: 900 1.7em/1.08 Fraunces, Georgia, serif; text-wrap: balance; }
.ct-v-txt { margin: 0; font: 400 1.12em/1.4 Spectral, Georgia, serif; color: #e4d6b8;
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.ct-faits { margin: 0; display: grid; gap: .35em; font: 400 .98em/1.3 Inter, sans-serif; }
.ct-l { display: grid; grid-template-columns: 7.2em 1fr; gap: .6em; border-top: .06em solid rgba(239, 227, 200, .14); padding-top: .35em; }
.ct-l dt { color: #b7a888; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .86em; padding-top: .1em; }
.ct-l dd { margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-v-pied { margin-top: auto; display: flex; flex-direction: column; gap: .45em; font: 400 .86em/1.3 Inter, sans-serif; color: #b7a888; }
.ct-lien { color: #f3e9d4; font-weight: 600; text-decoration: none; border-bottom: .08em solid #d8ad4c; align-self: flex-start; padding: .2em 0; }
.ct-v-src { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================ LE DOS */
/* (0,3,0) : le dos passe devant le papier d'un rang ou d'une époque — le dos
   ne doit rien trahir de la carte avant qu'on la retourne. */
.ct .ct-face.ct-dos { transform: rotateY(180deg); visibility: hidden; transition: visibility 0s .2s;
  background: radial-gradient(120% 90% at 50% 40%, #2a1f14, #120d08); color: #d8ad4c; }
.ct.retournee .ct-dos { visibility: visible; }
.ct-dos::before { mix-blend-mode: screen; opacity: .05; }
.ct-dos .ct-motif { opacity: .55; -webkit-mask-image: none; mask-image: none; }
.ct-dos-cadre { position: absolute; inset: 1em; border: .12em solid rgba(216, 173, 76, .7); outline: .06em solid rgba(216, 173, 76, .4);
  outline-offset: .3em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; z-index: 2; }
.ct-dos-med { width: 9.4em; height: 9.4em; border-radius: 50%; overflow: hidden; position: relative; background: #1a140e;
  box-shadow: 0 0 0 .22em #c9952a, 0 0 0 .34em #21180f, 0 0 0 .44em rgba(216, 173, 76, .55), 0 .4em 1.2em rgba(0, 0, 0, .55); }
.ct-dos-med img { position: absolute; inset: -6%; width: 112%; height: 112%; display: block; object-fit: cover; }
.ct-dos-med::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(70% 55% at 35% 25%, rgba(255, 240, 200, .14), transparent 60%); }
.ct-dos-l { margin-top: .7em; font: 700 1.1em/1 Inter, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #e8c66a; padding-left: .32em; }
.ct-dos-s { font: italic 500 1.15em/1 Fraunces, Georgia, serif; color: #b7a888; }

/* une carte qu'on n'a pas encore : sa silhouette dans l'album */
.ct--manque .ct-face { filter: grayscale(1) brightness(.35) contrast(.8); }

@media (prefers-reduced-motion: reduce) {
  .ct-corps { transition: none; }
  .ct *, .ct *::before, .ct *::after { animation: none !important; }
  .ct--tete .ct-img { translate: none; transition: none; }
  .ct-eclats { display: none; }
  .ct-ecrin::after { display: none; }
  .ct-holo::before { opacity: .6; }
}

/* ============================================================ LE PAQUET
 * Partagé par /cartes/ (le comptoir, l'ouverture) et l'accueil (l'ouverture
 * au défilement). */
/* le paquet : un sachet de feuille métallisée, serti en dents de scie en haut et
   en bas, le portrait de Marx tramé dans la nuit du sachet, un reflet qui glisse
   sur le plastique. Tout est en em : --pw (largeur) met le paquet à l'échelle.
   Le paquet n'est pas une carte : il porte le rouge de la maison, l'or et le
   l'arc-en-ciel restent aux rangs et aux cartes irisées. */
.paquet{--pw:118px;width:var(--pw);aspect-ratio:63/88;position:relative;flex:none;font-size:calc(var(--pw) / 12);
  transform:rotate(-4deg);filter:drop-shadow(0 .9em 1em rgba(0,0,0,.6)) drop-shadow(0 .12em .18em rgba(0,0,0,.55));}
.pq-corps{position:absolute;inset:0;overflow:hidden;border-radius:.2em;color:#f3e9d4;
  background:radial-gradient(80% 50% at 60% 30%,#4a1810,transparent 74%),linear-gradient(172deg,#211a14,#0c0907);
  --dents:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top / .62em .32em repeat-x,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom / .62em .32em repeat-x,
    linear-gradient(#000 0 0) 50% 50% / 100% calc(100% - .62em) no-repeat;
  -webkit-mask:var(--dents);mask:var(--dents);}
/* les deux sertissages : des stries fines, un peu plus claires que le sachet */
.pq-corps::before,.pq-corps::after{content:"";position:absolute;left:0;right:0;height:1.35em;z-index:3;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 .08em,rgba(0,0,0,.35) .08em .2em,transparent .2em .3em),
    linear-gradient(#3a3027,#1b150f);}
.pq-corps::before{top:0;box-shadow:0 .06em 0 rgba(255,255,255,.12),0 .12em .3em rgba(0,0,0,.6);}
.pq-corps::after{bottom:0;box-shadow:0 -.06em 0 rgba(255,255,255,.12),0 -.12em .3em rgba(0,0,0,.6);}
/* le portrait du logo (pochoir tramé, assets/img/logo/) : en écran, son fond
   brun-nuit disparaît dans le sachet, il ne reste que la lumière et la trame */
.pq-art{position:absolute;left:0;right:0;top:1.35em;bottom:4.6em;z-index:1;
  background:url("/assets/img/logo/icon-512.png") 50% 30% / cover;mix-blend-mode:screen;
  -webkit-mask:linear-gradient(#000 45%,#0000 88%);mask:linear-gradient(#000 45%,#0000 88%);}
/* le filet rouge de la maison, et le chiffre du paquet */
.pq-filet{position:absolute;left:1em;top:2.2em;bottom:2.2em;width:.12em;z-index:2;background:linear-gradient(#d5402f,#8e1b12);}
.pq-n{position:absolute;right:.9em;top:2.05em;z-index:2;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;
  background:#d5402f;color:#fff6ea;font:800 .9em/1 'Bricolage Grotesque',Inter,sans-serif;letter-spacing:-.02em;
  box-shadow:0 .1em .3em rgba(0,0,0,.5);}
.pq-n small{display:block;font:600 .42em/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-top:.15em;}
.pq-t{position:absolute;left:1.55em;right:1em;bottom:1.95em;z-index:2;display:flex;flex-direction:column;gap:.25em;}
.pq-t small{font:600 .56em/1 Inter,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#e8735f;}
.pq-t b{font:900 2.55em/.86 'Fraunces',Georgia,serif;letter-spacing:-.03em;color:#f6ecd6;text-shadow:0 .04em .12em rgba(0,0,0,.6);}
.pq-t span{font:500 .58em/1.2 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#b7a888;margin-top:.35em;}
/* le reflet du plastique : les bords plus sombres, une lumière qui passe */
.pq-lustre{position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset .3em 0 .5em rgba(255,255,255,.07),inset -.35em 0 .6em rgba(0,0,0,.45);
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.18) 41%,rgba(255,255,255,.04) 47%,transparent 56%) 0 0 / 260% 100%;
  mix-blend-mode:screen;animation:pq-lustre 6s ease-in-out infinite;}
@keyframes pq-lustre{0%,15%{background-position:100% 0}60%,100%{background-position:-60% 0}}
.paquet-vide{filter:grayscale(.6) brightness(.55);}
@media (prefers-reduced-motion: reduce) { .pq-lustre { animation: none; } }