/* ═══ La carte à collectionner : recto « B ter » et verso (application joueur et atelier ; maquette : public/maquettes/cartes.html) ═══
   Une seule typographie, proportionnelle à la largeur de la carte : 1em = 1/19,5 de la largeur
   (environ 10,5 px pour une carte de 206 px). Une carte de 150 px ou de 238 px est la même carte, juste à une autre échelle.
   La largeur est donnée par qui pose la carte (grille, main, deck) ; ici, seulement ce qu'elle est. */

.t-aventure { --tc: #d07a45; --tf: #a8471f; }
.t-lieu { --tc: #b5bd78; --tf: #6e7640; }
.t-personnage { --tc: #e0b56a; --tf: #9c7430; }
.t-objet { --tc: #d98a7a; --tf: #7a2e2e; }
.t-competence { --tc: #9cc0d2; --tf: #45667a; }
/* Racine (le lore, 30/09, Mat) : bruyère, un mauve de lande. */
.t-racine { --tc: #b99bd0; --tf: #5d4574; }
/* Faune et flore (18/10, Mat) : un fauve d'automne, le pelage du chevreuil. */
.t-faune { --tc: #d9a66e; --tf: #6e4524; }

.k { position: relative; aspect-ratio: 5 / 7.4; perspective: 1400px; cursor: pointer; container-type: inline-size;
  --titre: Cinzel, serif; --sans: Lato, system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif; --texte: #efe4cf; --gris: #b3a288; }
.k > .dedans, .k > .emb, .k > .pied { font-size: calc(100cqw / 19.5); }
/* Le retournement : un mouvement symétrique (la carte passe par la tranche exactement à mi-course), et les deux faces
   s'échangent à ce moment-là. On ne compte pas sur le masquage des faces par le navigateur : Safari (tous les navigateurs
   sur iPhone) le rate, et montrait le recto à l'envers, ou plus rien du tout. */
.k .dedans { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.45, .05, .55, .95); transform-style: preserve-3d; }
.k.retournee .dedans { transform: rotateY(180deg); }
.k .face { position: absolute; inset: 0; 
  border: 1px solid color-mix(in oklab, var(--tf) 70%, #6b5234); background: #17120d; box-shadow: 0 1.2em 2.6em #000a; }
.k .face::before { content: ""; position: absolute; inset: .4em; border: 1px solid #ffffff12; pointer-events: none; z-index: 6; }
.k .verso { transform: rotateY(180deg); }
/* La face qui n'est pas vue est masquée, et l'échange se fait à mi-course (.35 s sur .7 s). */
/* Par la transparence (et non la visibilité, qui se transmet : une carte qui apparaît verrait sa face surgir en retard). */
.k .recto, .k .verso { transition: opacity 0s .35s; }
.k.retournee .recto, .k:not(.retournee) .verso { opacity: 0; }
.k .fond { position: absolute; inset: 0; overflow: hidden; }

/* L'emblème du type, à cheval sur le haut ; le pied, à cheval sur le bas (il porte le niveau s'il y en a un). */
.k .emb { position: absolute; top: -1.7em; left: 50%; width: 3.4em; height: 3.4em; transform: translateX(-50%) rotate(45deg); z-index: 7;
  display: grid; place-items: center; border: 1px solid var(--tc); background: radial-gradient(circle, color-mix(in oklab, var(--tf) 55%, #1a140e), #1a140e); }
.k .emb svg { width: 2em; height: 2em; transform: rotate(-45deg); color: var(--tc); }
.k .emb svg path { fill: currentColor; }
.k .pied { position: absolute; bottom: -.5em; left: 50%; width: .9em; height: .9em; transform: translateX(-50%) rotate(45deg); background: #17120d; border: 1px solid var(--tc); z-index: 7; }
/* (Plus petit depuis le 30/09, Mat : dans une liste, le losange du niveau touchait presque l'emblème de la carte suivante.) */
.k .pied.niveau { width: 1.85em; height: 1.85em; bottom: -.92em; display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in oklab, var(--tf) 55%, #1a140e), #1a140e); }
.k .pied.niveau b { transform: rotate(-45deg); font: 600 .82em var(--titre); color: var(--tc); }

/* ─── Recto ─── */
.k .image { position: absolute; inset: 0; -webkit-mask: linear-gradient(#000 40%, #0009 60%, #0004 78%, #00000026); mask: linear-gradient(#000 40%, #0009 60%, #0004 78%, #00000026); }
/* Le morceau de la carte du Monde, centré sur le lieu (--x, --y en % de l'image), un peu au-dessus du milieu de la carte ;
   le MJ peut l'agrandir (--mz, le lieu reste le point fixe) et le décaler (--dx, --dy en em de carte : pareil à toutes les
   tailles). Le cadrage s'arrête toujours aux bords de l'image (ni son cadre ni son échelle, en bas). */
.k .image.carte-du-monde { background: url("/monde/moyen") no-repeat; background-size: calc(97em * var(--mz, 1)) auto;
  background-position: clamp(calc(100cqw - 97em * var(--mz, 1) + 1em * var(--mz, 1)), calc(50cqw - var(--x) * .97em * var(--mz, 1) + var(--dx, 0) * 1em), calc(-1em * var(--mz, 1)))
    clamp(calc(148cqw - 97em * var(--mz, 1) * var(--ratio-monde, .7354) + 3em * var(--mz, 1)), calc(56cqw - var(--y) * .97em * var(--mz, 1) * var(--ratio-monde, .7354) + var(--dy, 0) * 1em), calc(-1em * var(--mz, 1)));
  filter: sepia(.3) saturate(.85) brightness(.9); }
/* Une illustration chargée par le MJ : cadrée (agrandie --z, point visé --px/--py). */
.k .image.illustration { background: var(--illu) no-repeat; background-size: auto calc(var(--z, 1) * 100%); background-position: var(--px, 50%) var(--py, 50%); }
/* (02/10, Mat : les piles faisaient ramer le téléphone) Les grilles et les piles prennent des images réduites : la carte du
   Monde à 2048 px (/monde/moyen), les illustrations en vignette (/images/v/…). La carte tenue en main ou au centre du
   carrousel, et l'atelier (socle.css), prennent l'image entière par-dessus (la réduite reste dessous le temps qu'elle arrive). */
:is(.loupe-k, #loupe, .carrousel) .k .image.illustration { background-image: var(--illu-hd, none), var(--illu); }
:is(.loupe-k, #loupe, .carrousel) .k .image.carte-du-monde { background-image: url("/monde/hd"), url("/monde/moyen"); }
/* Pas d'image : la carte teintée de sa couleur, sur un souvenir du Monde. */
.k .image.nue { background: radial-gradient(70% 55% at 50% 42%, color-mix(in oklab, var(--tf) 70%, transparent), transparent 75%),
  url("/monde/moyen") 60% 40% / 136em auto; }
.k .image.nue::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--tf) 35%, #0d0a07d9); mix-blend-mode: multiply; }
/* Assombrir : un voile sur le fond, sous l'icône et le texte. */
.k .voile-k { position: absolute; inset: 0; background: #0d0a07; pointer-events: none; }
/* L'icône : dessinée à la couleur du type (masque), avec une lueur. */
.k .icone-k { position: absolute; left: 50%; top: 37%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(0 0 .8em color-mix(in oklab, var(--tf) 80%, #000)) drop-shadow(0 .1em .15em #000c); }
.k .icone-k i { position: absolute; inset: 0; background: var(--tc); -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.k .image:not(.nue) ~ .icone-k i { background: color-mix(in oklab, var(--tc) 80%, #fff); }
/* (Toute la hauteur, le dégradé s'arrête à 16 % : un calque qui s'arrêtait là laissait un trait sur iPhone, 30/09.) */
.k .voile-haut { position: absolute; inset: 0; background: linear-gradient(#0d0a0799, transparent 16%); pointer-events: none; }
.k .fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, #0d0a0755 75%, #0d0a0788); pointer-events: none; }
/* Le titre et la rubrique du bas forment un seul bloc posé en bas de la carte : le titre se tient sur la lisière (60 %)
   tant que la place suffit, et remonte quand le texte du bas est plus long ; ils ne se chevauchent jamais. */
.k .recto .texte-recto { position: absolute; left: 1em; right: 1em; bottom: 1.5em; min-height: calc(40% - 1.5em); z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between; gap: .8em; }
.k .recto .milieu { text-align: center; }
.k .recto h4 { margin: 0; font: 600 1.55em/1.15 var(--titre); letter-spacing: .07em; text-transform: uppercase; color: var(--texte);
  text-shadow: 0 .13em .5em #000, 0 0 .13em #000; }
.k .filet-type { display: flex; align-items: center; gap: .6em; margin: .7em 1.8em 0; }
.k .filet-type::before, .k .filet-type::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--tc)); }
.k .filet-type::after { background: linear-gradient(90deg, var(--tc), transparent); }
.k .filet-type i { width: .5em; height: .5em; transform: rotate(45deg); background: var(--tc); }
.k .recto .bas { margin: 0 .4em; text-align: center; font: 300 1em/1.38 var(--sans); color: #e3d6bf;
  text-shadow: 0 1px .36em #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.k .recto .bas b { display: block; font: 700 .84em var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tc); margin-bottom: .2em; }
/* Type et sous-type : présents mais masqués pour l'instant (la classe « afficher-type » sur un parent les montre). */
.k .coin { position: absolute; top: 1.05em; z-index: 5; font: 700 .85em var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tc);
  text-shadow: 0 1px .3em #000, 0 0 .6em #000; display: none; }
.k .coin.g { left: 1.4em; }
.k .coin.d { right: 1.4em; text-align: right; color: #e9dcc4; }
.afficher-type .k .coin { display: block; }
/* « Nouveau » : une petite étiquette sous l'emblème. */
.k .etiq { position: absolute; top: 2.3em; left: 50%; transform: translateX(-50%); z-index: 6; padding: .1em .6em; font: 700 .75em var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: #fff3e0; background: var(--tf); border: 1px solid var(--tc); }

/* États. */
.k.achevee .image { filter: grayscale(.85) brightness(.5); }
.k.achevee .recto h4 { color: #b9ad98; }
.k .bandeau-achevee { position: absolute; left: 0; right: 0; top: 36%; z-index: 4; padding: .9em .6em .8em; text-align: center; background: #0d0a07d0;
  border-top: 1px solid var(--tc); border-bottom: 1px solid var(--tc); }
.k .bandeau-achevee span { display: block; font: 600 1.05em var(--titre); letter-spacing: .26em; color: var(--texte); }
/* Une péripétie : le même bandeau, plus léger, l'image reste vive */
.k .bandeau-achevee.en-chemin { background: #0d0a07b8; }
.k .bandeau-achevee.en-chemin span { font-size: .9em; }
.k .bandeau-achevee small { display: block; font: italic 500 1.15em var(--serif); color: var(--gris); margin-top: .1em; }
.k.absente .recto { filter: grayscale(1) brightness(.62); border-style: dashed; }
/* Un objet perdu (cartes.js, perdre) : la carte s'éteint doucement, puis le tampon tombe */
.k.perte .recto { transition: filter 1.2s ease; }
.k.perte .tampon-k { animation: tampon-perte .55s .7s cubic-bezier(.2, .8, .3, 1.25) both; }
@keyframes tampon-perte { from { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.3); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
.k.secousse { animation: secousse .45s ease-in-out; }
@keyframes secousse { 0%, 100% { translate: 0; } 20% { translate: -5px; } 40% { translate: 5px; } 60% { translate: -3px; } 80% { translate: 3px; } }
@media (prefers-reduced-motion: reduce) { .k.perte .recto { transition: none; } .k.perte .tampon-k, .k.secousse { animation: none; } }
.k .tampon-k { position: absolute; left: 50%; top: 38%; z-index: 4; transform: translate(-50%, -50%) rotate(-12deg); padding: .25em .95em; border: 2px solid #e9e0d0aa;
  font: 600 1.25em var(--titre); letter-spacing: .14em; text-transform: uppercase; color: #efe4cfdd; background: #0006; white-space: nowrap; }
/* Un tampon long (« Pas avec toi ») : plus petit, pour tenir sur une ligne dans la largeur de la carte. */
.k .tampon-k.long { font-size: .95em; letter-spacing: .08em; padding: .25em .6em; }

/* ─── Verso : un souvenir de l'image en haut, le nom, puis la mémoire du joueur ─── */
.k .verso .souvenir { position: absolute; left: 0; right: 0; top: 0; height: 34%; opacity: .35; -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.k .verso .souvenir .image { -webkit-mask: none; mask: none; }
/* Au dos, le souvenir montre la bande du sujet de l'image du recto, cadrée pareil (de 12 à 46 % de la carte). */
.k .verso .souvenir .image.illustration { bottom: auto; top: calc(-12% / .34); height: calc(100% / .34); }
.k .verso .souvenir .icone-k { top: 50%; width: 30%; }
.k .verso .souvenir .voile-k { display: none; }
.k .verso .contenu { position: absolute; inset: 2.6em 1.4em 1.8em; z-index: 3; display: flex; flex-direction: column; }
.k .verso h5 { margin: 0; text-align: center; font: 600 1.25em/1.15 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); text-shadow: 0 1px .5em #000; }
.k .verso .filet-type { margin: .6em 2.6em .8em; }
/* Un peu de marge : les puces en losange, tournées, dépassent d'un rien à gauche (la zone qui défile les couperait). */
.k .verso .defile { flex: 1; overflow: auto; padding: 0 .2em 0 .25em; scrollbar-width: thin; }
.k .verso .rubrique { font: 700 .82em var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tc); margin: 1.1em 0 .5em; }
.k .verso .rubrique:first-child { margin-top: 0; }
/* Ton cœur (la romance, au dos d'un habitant) : en rose, les cœurs d'abord. */
.k .verso .rubrique.rose { color: #e08aa6; }
.k .verso ul.coeur li:first-child { color: #e08aa6; }
.k .verso ul { list-style: none; margin: 0; padding: 0; }
.k .verso li { position: relative; padding-left: 1.15em; margin: 0 0 .55em; font: 300 1.05em/1.38 var(--sans); color: #e3d6bf; }
.k .verso li::before { content: ""; position: absolute; left: 0; top: .45em; width: .45em; height: .45em; transform: rotate(45deg);
  border: 1px solid color-mix(in oklab, var(--tc) 70%, transparent); }
/* Un savoir qui compte pour le niveau : son losange est plein. */
.k .verso li.niveau::before { background: var(--tc); border-color: var(--tc); }
.k .verso li small { display: block; font: italic 500 1.05em var(--serif); color: var(--gris); margin-top: .05em; }
.k .verso li.neuf { color: #fff3e0; }
.k .verso li.neuf::after { content: "nouveau"; margin-left: .5em; font: 700 .68em var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tc); }
.k .verso .effet { display: flex; gap: .55em; align-items: baseline; font: 400 1.05em/1.35 var(--sans); color: #efe4cf; margin-bottom: .4em; }
.k .verso .effet::before { content: "⚙"; color: var(--tc); }
.k .verso .etapes li { color: #efe4cf; }
.k .verso .pied-texte { margin-top: .55em; text-align: center; font: italic 500 1.05em var(--serif); color: var(--gris); }

/* Le lien avec le joueur (maquette cartes-liens.html « B ») : l'amitié en ronds verts, la romance en cœurs roses. */
.k { --coeur-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.4 2.9-.5 6.6-.5c2.1 0 4.1 1 5.4 2.5C13.3.5 15.3-.5 17.4-.5 21.1-.5 24 2.4 24 6.1c0 4.6-4.2 8.4-10.3 13.9z'/%3E%3C/svg%3E"); }
.k .lien-k-ligne { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35em .7em; margin: 0 0 .55em; }
.k .lien-k-ligne .paire { display: inline-flex; gap: .45em; align-items: center; white-space: nowrap; }
.k .lien-k-ligne .sep { width: 1px; height: .8em; background: #6b5a44; }
.k .lien-k-ligne small { font: italic 500 1.05em var(--serif); color: var(--gris); }
.k .lien-k-ligne.au-dos { margin: .8em 0 0; padding-top: .7em; border-top: 1px solid #4a3c2c; gap: .35em 1.1em; }
.k .ronds-k, .k .coeurs-k { display: inline-flex; gap: .28em; align-items: center; }
.k .ronds-k i { width: .6em; height: .6em; border-radius: 50%; border: 1px solid #8a7a62; background: #17120d; }
.k .ronds-k i.plein { background: #9cc07f; border-color: #c4e0a8; box-shadow: 0 0 .4em #9cc07f88; }
.k .coeurs-k i { width: .8em; height: .72em; background: #6b4a52; -webkit-mask: var(--coeur-k) center / contain no-repeat; mask: var(--coeur-k) center / contain no-repeat; }
.k .coeurs-k i.plein { background: #f09ab6; filter: drop-shadow(0 0 .3em #f09ab6aa); }
/* (10/10, Mat : toute rencontre) La carte apparaît d'abord ; ses points d'amitié et ses cœurs s'allument ENSUITE, l'un après l'autre
   (`pointsApres`, cartes.js : --dp = le temps de l'apparition, --i = le rang du point). */
.k.points-arrivent .ronds-k i.plein { animation: k-rond-arrive .7s calc(var(--dp, 0ms) + var(--i, 0) * 300ms) ease-out both; }
.k.points-arrivent .coeurs-k i.plein { animation: k-coeur-arrive .7s calc(var(--dp, 0ms) + var(--i, 0) * 300ms) ease-out both; }
@keyframes k-rond-arrive { 0% { background: #17120d; border-color: #8a7a62; box-shadow: none; } 50% { background: #f4f8d0; border-color: #f4f8d0; box-shadow: 0 0 1em .35em #eef2c8; transform: scale(1.7); }
  100% { background: #9cc07f; border-color: #c4e0a8; transform: none; } }
@keyframes k-coeur-arrive { 0% { background: #6b4a52; filter: none; } 50% { background: #ffd0de; transform: scale(1.7); filter: drop-shadow(0 0 .6em #f09ab6); } 100% { background: #f09ab6; transform: none; } }
@media (prefers-reduced-motion: reduce) { .k.points-arrivent .ronds-k i.plein, .k.points-arrivent .coeurs-k i.plein { animation: none; } }

/* Le dos encore vierge. */
.k .verso .vide { font: italic 500 1.1em var(--serif); color: var(--gris); text-align: center; margin-top: 2em; }
/* Une aventure qui se clôt sous nos yeux : le bandeau glisse, l'image s'éteint. */
.k .image { transition: filter 1.2s ease; }
.k.achevement .bandeau-achevee { animation: bandeau .8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes bandeau { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .k .dedans, .k .image { transition: none; } .k.achevement .bandeau-achevee { animation: none; } }

/* Les tailles : qui pose la carte ne donne que sa largeur. */
.k.mini { width: 100%; }
.k.moyenne { width: 170px; }
.k.grande { width: min(300px, 80vw); }
/* L'emblème et le pied débordent de la carte : on leur garde leur place au-dessus et au-dessous. */
.k.grande { margin: calc(min(300px, 80vw) * .1) 0 calc(min(300px, 80vw) * .07); }

/* ─── Atelier : paquet, deck, loupe ─── */
.paquet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding-top: 14px; }
.emplacement { cursor: pointer; position: relative; }
.emplacement.pile { isolation: isolate; }
.emplacement.pile::before, .emplacement.pile::after { content: ""; position: absolute; inset: 0; border: 1px solid #6b5234; background: #17120d; z-index: -1; }
.emplacement.pile::before { transform: translate(6px, 5px) rotate(3deg); }
.emplacement.pile::after { transform: translate(3px, 2px) rotate(1.5deg); }
.compte { position: absolute; right: -8px; top: -8px; z-index: 8; background: #7a2e2e; border: 1px solid #d98a7a; color: #fff3e6; font: 700 11px var(--sans); padding: 2px 8px; }
.deck-contenu { width: min(900px, 94vw); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 20px; padding: 20px 8px; }
.deck-tete { display: flex; gap: 22px; align-items: center; }
.deck-tete h2 { margin: 0 0 6px; }
.deck-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 24px 14px; }
.deck-contenu .fermer { align-self: center; }
/* La loupe défile elle-même (écran entier) : son contenu ne coupe rien, et l'ombre de la carte s'étale librement (un contenu
   qui défilait seul la tranchait net : un rectangle sombre autour de la carte). margin:auto centre, et laisse défiler si c'est trop haut. */
#loupe { position: fixed; inset: 0; z-index: 100; display: flex; overflow-y: auto; background: #0a0806b3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#loupe[hidden] { display: none; }
.loupe-contenu { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px 16px; margin: auto; }
#loupe .boutons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#loupe.revelation .k { animation: apparaitre-k 1s cubic-bezier(.2, .8, .2, 1) both; }
#loupe.flash::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle, #ffe9c8, #d07a4555 40%, transparent 70%); animation: flash-k .7s ease-out forwards; pointer-events: none; }
@keyframes flash-k { from { opacity: 1; } to { opacity: 0; } }
@keyframes apparaitre-k { from { opacity: 0; transform: scale(.35) rotateY(-90deg); } to { opacity: 1; transform: none; } }
.legende { text-align: center; }
.legende span { font: 600 20px Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: #efe4cf; text-shadow: 0 0 18px #d07a4588; }


/* ═══ Le niveau sur la carte (30/09, « A+ », maquette public/maquettes/niveaux-cartes.html) ═══
   Le cadre passe du bois sombre à l'or, un détail par niveau (classes cumulées nv1…nv10) ; des particules de lumière
   montent le long des bords (cartes.js, ornementsNiveau). Au X, la carte est sertie. */
.k { --or-k: #d9ad62; --or-clair: #f0d08f; }
.k .orn-niveau { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
/* (Un jeu d'ornements dans chaque face : ils se retournent avec elle ; la face cachée les cache aussi.) */
.k .orn-niveau > * { position: absolute; }
.k.nv1 .face { border-color: color-mix(in oklab, var(--tc) 60%, #6b5234); }
.k.nv2 .face::before { border-color: color-mix(in oklab, var(--or-k) 35%, transparent); }
.k .coins-niv { inset: 0; }
/* Les coins (30/09, maquette public/maquettes/coins-cartes.html, « D ») : dès le II, un losange posé sur la tranche (son
   centre pile sur le coin : il déborde et change la silhouette), qui grossit à chaque niveau (--t) ; serti dès le V. */
.k .coins-niv i { --t: .65em; position: absolute; width: var(--t); height: var(--t); transform: rotate(45deg); background: var(--or-k); opacity: 0; }
.k .coins-niv i:nth-child(1), .k .coins-niv i:nth-child(3) { left: calc(var(--t) / -2); }
.k .coins-niv i:nth-child(2), .k .coins-niv i:nth-child(4) { right: calc(var(--t) / -2); }
.k .coins-niv i:nth-child(1), .k .coins-niv i:nth-child(2) { top: calc(var(--t) / -2); }
.k .coins-niv i:nth-child(3), .k .coins-niv i:nth-child(4) { bottom: calc(var(--t) / -2); }
.k.nv2 .coins-niv i { opacity: 1; }
.k.nv3 .coins-niv i { --t: .75em; }
.k.nv4 .coins-niv i { --t: .85em; }
.k.nv5 .coins-niv i { --t: .95em; box-shadow: 0 0 0 .14em #17120d; background: linear-gradient(135deg, var(--or-clair), var(--or-k) 60%); }
.k.nv5 .coins-niv i::after { content: ""; position: absolute; inset: 32%; background: #17120d; }
.k.nv6 .coins-niv i { --t: 1.05em; }
.k.nv7 .coins-niv i { --t: 1.15em; }
.k.nv8 .coins-niv i { --t: 1.25em; }
.k.nv9 .coins-niv i { --t: 1.35em; }
.k.nv10 .coins-niv i { --t: 1.45em; }
.k .double-niv { inset: .75em; border: 1px solid transparent; }
.k.nv4 .double-niv { border-color: color-mix(in oklab, var(--or-k) 25%, transparent); }
.k.nv5 .emb { box-shadow: 0 0 0 .22em #17120d, 0 0 0 .32em color-mix(in oklab, var(--or-k) 70%, transparent); }
.k.nv6 .pied.niveau { border-color: var(--or-k); }
.k.nv6 .pied.niveau b { color: var(--or-clair); }
.k.nv7 .filet-type::before { background: linear-gradient(90deg, transparent, var(--or-k)); }
.k.nv7 .filet-type::after { background: linear-gradient(90deg, var(--or-k), transparent); }
.k.nv7 .filet-type i { background: var(--or-k); box-shadow: -.9em .9em 0 -.12em var(--or-k), .9em -.9em 0 -.12em var(--or-k); }
.k.nv8 .face { border: 1px solid var(--or-k); }
.k.nv9 .emb { border-color: var(--or-k); background: radial-gradient(circle, #6d5226, #1a140e); }
.k.nv9 .emb svg { color: var(--or-clair); }
.k.nv10 .face { border-width: 2px; box-shadow: 0 1.2em 2.6em #000a, 0 0 0 .25em #17120d, 0 0 0 .32em var(--or-k); }
.k.nv10 .recto h4 { color: var(--or-clair); }
/* Les particules : des grains de lumière qui montent le long des bords ; au VII, en orbite autour de l'emblème. */
.k .grains { inset: 0; }
.k .grain { position: absolute; left: var(--x); top: var(--y); width: var(--t, .32em); height: var(--t, .32em); border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0 30%, var(--c, #f0d08f) 55%, transparent 72%);
  box-shadow: 0 0 .8em .2em color-mix(in oklab, var(--c, #f0d08f) 75%, transparent);
  opacity: 0; animation: grain-monte var(--d, 5s) ease-in-out var(--r, 0s) infinite; }
@keyframes grain-monte { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 18% { opacity: var(--o, .9); }
  70% { opacity: calc(var(--o, .9) * .7); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -5em)) scale(.3); } }
.k .orbite { left: 50%; top: 0; width: 0; height: 0; animation: grain-orbite var(--d, 7s) linear infinite; }
.k .orbite i { position: absolute; left: var(--rayon, 2.6em); top: 0; width: .3em; height: .3em; margin: -.15em; border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0 30%, #f0d08f 55%, transparent 72%); box-shadow: 0 0 .5em .12em #f0d08fb0; }
@keyframes grain-orbite { to { transform: rotate(360deg); } }
.k.nv10 .grain { --c: color-mix(in oklab, var(--tc) 55%, #f0d08f); }
/* Une carte éteinte (aventure achevée, objet absent) garde son cadre, mais pas ses particules. */
.k.achevee .grains, .k.absente .grains, .k.achevee .orbite, .k.absente .orbite { display: none; }
/* Pendant le retournement (cartes.js) : pas de particules — Safari (iPhone) ratait l'échange des faces avec elles. */
.k.en-rotation .grains, .k.en-rotation .orbite { display: none; }
@media (prefers-reduced-motion: reduce) { .k .grain { animation: none; opacity: .6; } .k .orbite { animation: none; } }

/* ─── Un habitant de la vie de l'île (né en jeu ; maquette validée public/maquettes/cartes-habitants-b.html, 01/10) ───
   La carte personnage « sobre » : couleur un peu éteinte (pas trop : elle aurait l'air « expirée »), filets à peine
   marqués ; des RONDS en haut et en bas (comme les péripéties ; les cartes du MJ ont des losanges) ; au dos, une couleur
   pleine (bois), l'icône du métier en filigrane, un léger grain. Promu en vraie carte : il perd tout ça. */
.k.habitant { --tc: #a89373; --tf: #4a3c2c; }
/* (07/10, Mat : « la bordure des cartes PNJ est trop discrète ») 1 px, du doré des ronds des coins (--or-k). */
.k.habitant .face { border: 1px solid var(--or-k); }
.k.habitant .filet-type::before, .k.habitant .filet-type::after { opacity: .35; }
.k.habitant .emb { transform: translateX(-50%); border-radius: 50%; width: 3.2em; height: 3.2em; top: -1.6em; border-color: #6b5a44; }
.k.habitant .emb svg { transform: none; width: 1.9em; height: 1.9em; }
.k.habitant .pied { transform: translateX(-50%); border-radius: 50%; }
/* (Son amitié dans le pied rond : le chiffre droit ; et les coins de ses ornements sont des ronds, pas des losanges.) */
.k.habitant .pied.niveau { transform: translateX(-50%); }
.k.habitant .pied.niveau b { transform: none; }
.k.habitant .coins-niv i { border-radius: 50%; }
/* Une aventure secondaire (née de la vie de l'île) et une péripétie : un ROND en haut et en bas (le code visuel du jeu). */
.k.secondaire .emb { transform: translateX(-50%); border-radius: 50%; width: 3.2em; height: 3.2em; top: -1.6em; }
.k.secondaire .emb svg { transform: none; }
.k.secondaire .pied { transform: translateX(-50%); border-radius: 50%; }
.k.habitant .image.carte-du-monde { filter: grayscale(.36) sepia(.25) brightness(.8); }
.k.habitant .icone-k i { opacity: .85; }
.k.habitant .face.verso { background: #3b3024; }
.k.habitant .verso .souvenir .image { display: none; }
.k.habitant .verso .souvenir { opacity: .6; }
.k.habitant .face.verso::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .14; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px; }


/* ─── Le carnet d'une aventure (03/10, Mat ; maquette carnet-aventure.html) : les losanges du dos — creux pour ce qui reste
   à faire ou à voir, PLEINS pour une étape franchie (comme un savoir qui compte) ; l'accroche, en petit, en bas. ─── */
.k .verso ul.avancer li { color: #efe4cf; }
.k .verso ul.franchies li { color: #b3a288; }
.k .verso ul.franchies li::before { background: var(--tc); border-color: var(--tc); }
.k .verso ul.accroche li { font-style: italic; color: #b3a288; }

/* (06/10, étape C) La réputation auprès des gens d'un lieu, au dos de sa carte : quatre losanges, un seul allumé. */
.rg-k { display: inline-flex; align-items: center; gap: .5em; }
.rg-k i { width: .8em; height: .8em; transform: rotate(45deg); border: 1px solid #ffffff40; }
.rg-k i:nth-child(1) { --c: #e08a78; } .rg-k i:nth-child(2) { --c: #b3a288; } .rg-k i:nth-child(3) { --c: #d19a55; } .rg-k i:nth-child(4) { --c: #b5bd78; }
.rg-k i.on { border-color: var(--c); background: var(--c); box-shadow: 0 0 .6em var(--c); }
.k .repu-k { display: flex; flex-direction: column; align-items: center; gap: .35em; margin: .3em 0 .6em; text-align: center; }
.k .repu-k b { font: 600 1.15em var(--titre, Cinzel, serif); letter-spacing: .1em; text-transform: uppercase; }
.k .repu-k b.r-1 { color: #e08a78; } .k .repu-k b.r0 { color: #b3a288; } .k .repu-k b.r1 { color: #d19a55; } .k .repu-k b.r2 { color: #b5bd78; }
.k .repu-k em { font: italic 500 1.1em var(--serif); color: #cdbfa6; }

/* (13/10, Mat) Un objet à lire : au dos, le bouton qui ouvre le document. Angles droits, la couleur du type. */
.k .lien-k { display: flex; align-items: center; justify-content: center; gap: .6em; margin: .5em 0 .9em; padding: .75em .8em; border: 1px solid var(--tc, #d19a55); color: var(--tc, #d19a55); background: color-mix(in srgb, var(--tc, #d19a55) 10%, transparent);
  font: 700 .82em Lato, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; pointer-events: auto; }
.k .lien-k i { width: .5em; height: .5em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.k button.lien-k { width: 100%; cursor: pointer; }
.k .lien-k:active { background: color-mix(in srgb, var(--tc, #d19a55) 24%, transparent); }

/* (19/10, Mat ; maquette public/maquettes/reliure-doree.html) LA COUVERTURE D'UN LIVRE : un cuir chagrin (grain fin, relief 0,7 — 1 le 19/10, trop fort en vrai —, finesse 0,8),
   une seule ligne de cadre et des losanges évidés aux coins, tout FRAPPÉ À FROID (un brun translucide qui fonce le cuir là où il est,
   une arête claire en bas à droite, une ombre en haut à gauche) ; le titre en blanc. `--grain-cuir` sert aussi à l'écran de lecture. */
:root { --grain-cuir: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'turbulence'%20baseFrequency%3D'0.720'%20numOctaves%3D'2'%20seed%3D'2'%20stitchTiles%3D'stitch'%20result%3D't'%2F%3E%3CfeDiffuseLighting%20in%3D't'%20surfaceScale%3D'0.70'%20diffuseConstant%3D'1.15'%20lighting-color%3D'%23fff'%20result%3D'l'%3E%3CfeDistantLight%20azimuth%3D'235'%20elevation%3D'60'%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23f)'%2F%3E%3C%2Fsvg%3E"); --frappe-cuir: #1a0c0478; }
.k .image.couverture { background: var(--grain-cuir), radial-gradient(120% 95% at 28% 18%, color-mix(in srgb, var(--cuir) 100%, #fff 6%), color-mix(in srgb, var(--cuir) 62%, #120802) 78%);
  background-blend-mode: multiply, normal; -webkit-mask: linear-gradient(#000 55%, #000b 80%, #0008); mask: linear-gradient(#000 55%, #000b 80%, #0008); }
.k .image.couverture .deco-k { position: absolute; inset: 0; filter: drop-shadow(1px 1px 0 #ffffff38) drop-shadow(-1px -1px 0 #000000a6); }
.k .image.couverture .deco-k::before { content: ""; position: absolute; inset: .8em; border: 1.5px solid var(--frappe-cuir); }
.k .image.couverture .cc { position: absolute; width: 1.15em; height: 1.15em; transform: rotate(45deg); border: 1.5px solid var(--frappe-cuir); }
.k .image.couverture .cc.h { top: 1.45em; } .k .image.couverture .cc.b { bottom: 1.45em; } .k .image.couverture .cc.g { left: 1.45em; } .k .image.couverture .cc.d { right: 1.45em; }
.k .image.couverture .cc.milieu { left: 50%; top: 37%; width: 2.6em; height: 2.6em; translate: -50% -50%; }
.k .image.couverture ~ .icone-k { width: 34%; }
/* le signe est frappé à froid dans le cuir, comme les losanges : plus sombre que le cuir, une arête claire en bas à droite, une ombre en haut à gauche
   (l'ombre se pose sur l'enveloppe : posée sur l'icône même, son masque l'effacerait) */
.k .image.couverture ~ .icone-k { filter: drop-shadow(1px 1px 0 #ffffff38) drop-shadow(-1px -1px 0 #00000099); }
.k .image.couverture ~ .icone-k i { background: color-mix(in srgb, var(--cuir-k, #7a3a1c) 62%, #120802); }