/* Raito : un hebdo manga imprimé. Papier, encre, rouge d'impression, trames et lignes de vitesse. */
/* Mode sombre = « page noire » : la page s'inverse, cartes et volumes restent des objets imprimés. */
/* Polices hébergées ici (tools/polices.py). « optional » : jamais de décalage de page. Si un fichier arrive trop tard, la page garde la police du système jusqu'au chargement suivant. */
@font-face { font-family: "Dela Gothic One"; src: url("polices/dela-gothic-one.woff2?v=2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("polices/zen-kaku-gothic-new-400.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("polices/zen-kaku-gothic-new-500.woff2") format("woff2"); font-weight: 500; font-display: optional; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("polices/zen-kaku-gothic-new-700.woff2") format("woff2"); font-weight: 700; font-display: optional; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("polices/zen-kaku-gothic-new-900.woff2?v=2") format("woff2"); font-weight: 900; font-display: optional; }
:root {
  color-scheme: light dark;
  --papier: light-dark(#f2ece0, #14110e); --papier-clair: light-dark(#fbf8f1, #221d19); --papier-fonce: light-dark(#e3dbc9, #312a24);
  --encre: light-dark(#15120f, #efe7d6); --encre-douce: light-dark(#4d463e, #b5ab9b); --rouge: #d42a1f; --rouge-fonce: #a81d14;
  --rouge-texte: light-dark(#d42a1f, #ff6a5c); --alerte: light-dark(#a81d14, #ff6a5c); --grain: light-dark(#15120f0c, #efe7d60d);
  /* ombres : couleur de la page, même sous une carte (d'où pas de light-dark) */
  --portee: #15120f;
  --trame: radial-gradient(circle, var(--encre) .9px, transparent 1.2px);
  --trait: 2px solid var(--encre);
  --ombre: 4px 4px 0 var(--portee); --ombre-s: 3px 3px 0 var(--portee);
  --titre: "Dela Gothic One", "Arial Black", sans-serif;
  --texte: "Zen Kaku Gothic New", system-ui, sans-serif;
  --vite: 180ms;
  /* encres de rareté */
  --C: #8a847a; --U: #23885f; --R: #2457d6; --E: #7d32c4; --L: #c99a12; --M: #d42a1f;
  --EV: #e0461b; --DUO: #0f9e9a; --ARC: #8b5a2b; --NUM: #b8860b; --X: #1d3557;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --portee: #5e5348; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --portee: #5e5348; } }
/* Sur la page noire, une ombre sombre ne détache plus les volumes : leur ombre et la pile des coffrets prennent l'encre claire de la page. */
:root[data-theme="dark"] :is(.volume, .du-jour) { --portee: #efe7d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.volume, .du-jour) { --portee: #efe7d6; } }
.carte, .volume, .sachet, .du-jour { color-scheme: light; }
/* Thèmes d'abonné : ils teintent le papier, en clair comme en sombre. Les cartes gardent leur papier. */
[data-teinte="rose"] { --papier: light-dark(#f6e4de, #1a1110); --papier-clair: light-dark(#fdf3ef, #281b19); --papier-fonce: light-dark(#ecd2ca, #3a2825); }
[data-teinte="jaune"] { --papier: light-dark(#f3e7bd, #171408); --papier-clair: light-dark(#fbf4d9, #252012); --papier-fonce: light-dark(#e6d79f, #382f1a); }
[data-teinte="vert"] { --papier: light-dark(#e3ecd5, #10140d); --papier-clair: light-dark(#f2f7e9, #1c2218); --papier-fonce: light-dark(#d0dcbe, #2b3324); }
[data-teinte="bleu"] { --papier: light-dark(#dfe7ee, #0e1318); --papier-clair: light-dark(#f0f4f8, #192028); --papier-fonce: light-dark(#cad6e0, #28323d); }
:root[data-teinte] :is(.carte, .volume, .sachet, .du-jour) { --papier: #f2ece0; --papier-clair: #fbf8f1; --papier-fonce: #e3dbc9; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--encre); font: 400 16px/1.5 var(--texte); min-height: 100dvh;
  background: radial-gradient(circle, var(--grain) 1px, transparent 1.3px) 0 0 / 5px 5px, var(--papier); }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.1; }
h3 { font-size: 1.25rem; margin: 2em 0 .6em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }

button { font: 700 15px/1.2 var(--texte); min-height: 44px; padding: 0 18px; border: var(--trait); border-radius: 3px;
  background: var(--rouge); color: #fff; box-shadow: var(--ombre-s); cursor: pointer; touch-action: manipulation;
  transition: transform var(--vite), box-shadow var(--vite); }
button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--portee); }
button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--portee); }
button.sec { background: var(--papier-clair); color: var(--encre); }
:is(button, a).lien { background: none; border: 0; box-shadow: none; color: var(--encre-douce); font-weight: 500; padding: 0 4px;
  text-decoration: underline; text-underline-offset: 3px; }
:is(button, a).lien:hover { transform: none; box-shadow: none; color: var(--encre); }
a.lien { padding: 0; }
button:disabled { background: var(--papier-fonce); color: #857d72; border-color: #857d72; box-shadow: none; cursor: not-allowed; }
input, select { font: 500 16px/1.2 var(--texte); min-height: 44px; padding: 0 12px; min-width: 0; color: var(--encre);
  background: var(--papier-clair); border: var(--trait); border-radius: 3px; }
input[type=checkbox] { min-height: 0; width: 20px; height: 20px; accent-color: var(--rouge); }
label { font-weight: 700; }
.ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ligne > input:not([type]) { flex: 1 1 14em; }
/* Pseudos trouvés sous la recherche de la modération */
.suggestions { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.suggestions .lien { min-height: 36px; padding: 0 10px; border: var(--trait); border-radius: 3px; background: var(--papier-clair); color: var(--encre); font-weight: 700; }
.suggestions .lien:hover { background: var(--papier-fonce); }
.suggestions .info { align-self: center; }
.centre { justify-content: center; }
.info { color: var(--encre-douce); margin: .5em 0; }
.err { color: var(--alerte); font-weight: 700; min-height: 1.5em; margin: 0; }
.kanji { font-family: var(--titre); }
/* Dela Gothic One bouche 雷 même à 32 px : le logo prend la graisse 900 du texte. */
.marque .kanji, .pied-marque .kanji, .retour .kanji { font-family: var(--texte); font-weight: 900; }

/* Marque : bloc rouge à kanji vertical, comme un titre de magazine */
.marque { display: flex; align-items: center; gap: 10px; margin: 0; }
.marque .kanji { writing-mode: vertical-rl; background: var(--rouge); color: #fff; border: var(--trait);
  font-size: 1.125rem; line-height: 1; padding: 6px 4px; letter-spacing: .04em; }
.marque b { font: 400 1.7rem/1 var(--titre); }
.marque small { align-self: flex-end; color: var(--encre-douce); font-size: 13px; font-weight: 700; }
.marque.grande .kanji { font-size: 2rem; padding: 10px 8px; box-shadow: var(--ombre); }
.marque.grande b { font-size: clamp(3.4rem, 15vw, 5rem); letter-spacing: -.02em; }

/* Couverture (connexion) */
/* Avant que le script choisisse l'écran, le pied de page resterait seul en haut puis sauterait en bas. */
#auth[hidden] ~ #jeu[hidden] ~ .pied { display: none; }
#auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; position: relative; overflow: hidden; }
#auth::before { content: ""; position: fixed; inset: -40%; z-index: -1; opacity: .22;
  background: repeating-conic-gradient(var(--encre) 0 .7deg, transparent .7deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 55%); mask: radial-gradient(circle, transparent 18%, #000 55%); }
.couverture { width: min(460px, 100%); background: var(--papier-clair); border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--portee); padding: 0 24px 24px; }
.bandeau-rouge { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 -24px 24px; padding: 6px 24px;
  background: var(--rouge); color: #fff; font-weight: 700; font-size: 13px; border-bottom: 3px solid var(--encre); }
.accroche { font-size: 1.05rem; font-weight: 500; margin: 1em 0 .6em; }
.sommaire { font-size: 14px; color: var(--encre-douce); margin: 0 0 1.4em; padding: 8px 0; border-block: 2px dashed var(--encre); }
.sommaire b { color: var(--encre); margin-right: 4px; }
.entree-discord button { width: 100%; min-height: 52px; font-size: 17px; }
:is(.entree-discord, .essai) .info { font-size: 14px; }
.essai { margin-top: 14px; }
.essai button { width: 100%; }
.test { display: grid; gap: 12px; margin-top: 16px; padding: 14px; border: 2px dashed var(--encre); }
.test p { margin: 0; font-size: 14px; }
.test label { display: grid; gap: 4px; }
.test small { font-weight: 500; color: var(--encre-douce); }

/* En-tête */
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--papier); border-bottom: 3px solid var(--encre); }
header .marque { margin-right: auto; }
/* Le titre du journal ramène à la une, comme le logo d'un site. */
button.marque, button.marque:hover:not(:disabled), button.marque:active:not(:disabled) { min-height: 0; padding: 0; border: 0;
  background: none; color: var(--encre); box-shadow: none; transform: none; text-align: left; }
button.marque:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
#moi { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; max-width: 220px; }
#moi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#moi svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
:is(#moi, #abonnements)[aria-pressed=true] { background: var(--encre); color: var(--papier); box-shadow: none; transform: none; }
.soldes { display: flex; gap: 8px; }
.solde { display: grid; background: var(--papier-clair); border: var(--trait); padding: 2px 10px; min-width: 92px; }
.solde small { font-size: 12px; font-weight: 700; color: var(--encre-douce); }
.solde b { font: 400 1.15rem/1.2 var(--titre); font-variant-numeric: tabular-nums; }
.bonus-solde { font-size: .8em; color: var(--rouge-texte); white-space: nowrap; }
.outils { display: flex; align-items: center; gap: 8px; }
#theme, .son { width: 44px; padding: 0; display: grid; place-items: center; }
:is(#theme, .son) svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

nav { display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; padding: 0 16px; border-bottom: 2px solid var(--encre); }
nav :is(button, a) { background: none; color: var(--encre); border: 0; border-radius: 0; box-shadow: none; display: flex; align-items: center;
  gap: 8px; min-height: 48px; padding: 0 18px; }
nav :is(button:hover:not(:disabled), a:hover) { transform: none; box-shadow: none; background: var(--papier-fonce); }
nav button.on, nav button.on:hover { background: var(--encre); color: var(--papier); }
nav a { font: 700 15px/1.2 var(--texte); text-decoration: none; }
nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main { max-width: 1200px; margin: auto; padding: 0 16px 64px; }

.rubrique { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.rubrique .kanji { font-size: .5em; background: var(--encre); color: var(--papier); padding: 6px 8px; letter-spacing: .1em; }

/* Boosters */
.encarts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.encart { margin: 0; padding: 12px 16px; border: var(--trait); box-shadow: var(--ombre-s); font-weight: 500; background: var(--papier-clair); }
.encart b { display: block; font: 400 1.1rem/1.3 var(--titre); }
.encart.gratuit { background: var(--rouge); color: #fff; }
.encart.arc { background: var(--papier-clair); border-left: 10px solid var(--ARC); }
/* Compte à rebours du hors-série, sous l'horloge des boosters gratuits */
.hs-info { display: block; margin-top: 8px; padding-top: 6px; border-top: 2px dashed currentColor; font-size: 13px; }
.encart .hs-info b { display: inline; font: inherit; font-weight: 800; }

/* Raito Hebdo : la une, imprimée comme la première page d'un magazine */
.une { margin-top: 20px; background: var(--papier-clair); border: 3px solid var(--encre); box-shadow: var(--ombre); }
.une:empty { display: none; }
.une-tete { position: static; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; padding: 8px 16px; border-bottom: 4px double var(--encre); }
.une-tete b { font: 400 clamp(1.4rem, 4vw, 2rem)/1.1 var(--titre); }
.une-tete span { font-size: 13px; font-weight: 700; color: var(--encre-douce); }
.une-corps { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.une-gros { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; }
.une-gros .carte { cursor: pointer; }
#uneAccueil .une-gros .carte { cursor: default; }
.surtitre { display: inline-block; margin: 0; padding: 2px 8px; background: var(--rouge); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.une-gros h3 { margin: 8px 0 6px; font: 400 clamp(1.25rem, 3.2vw, 1.8rem)/1.2 var(--titre); }
.une-gros h3 .lien, .une-gros h3 b { font: inherit; color: var(--encre); padding: 0; }
.une-gros p:last-child { margin: 0; color: var(--encre-douce); font-weight: 500; }
.une-fil { padding: 14px 16px; border-left: 2px solid var(--encre); background: var(--papier); }
.une-fil h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 400 1rem/1.2 var(--titre); }
.une-fil h4::before { content: ""; width: 10px; aspect-ratio: 1; background: var(--rouge); border: 2px solid var(--encre); }
.une-fil ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.une-fil li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.une-fil li.info { display: block; margin: 0; }
.une-fil i { display: grid; place-items: center; aspect-ratio: 1; background: var(--r); color: #fff; border: var(--trait); font-style: normal; font-size: 13px; }
.une-fil .lien { min-height: 0; padding: 0; font-weight: 700; color: var(--encre); }
.une-fil time { font-size: 12px; color: var(--encre-douce); white-space: nowrap; }
.breves { list-style: none; margin: 0; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px;
  border-top: 2px solid var(--encre); font-size: 14px; }
.breves > li > b:first-child { display: block; font: 400 13px/1.3 var(--titre); color: var(--rouge-texte); }
.breves .lien { min-height: 0; padding: 0; font-weight: 700; color: var(--encre); }
/* Couverture : la une tient dans la colonne, le fil s'arrête à 4 tirages */
.une.compacte { margin: 0 0 1.4em; box-shadow: none; border-width: 2px; }
.une.compacte .une-corps { grid-template-columns: 1fr; }
.une.compacte .une-gros { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; padding: 12px; }
/* Colonne étroite : la carte et le titre côte à côte, le détail en dessous sur toute la largeur */
.une.compacte .une-gros > div:last-child { display: contents; }
.une.compacte .une-carte { grid-row: span 2; }
.une.compacte .surtitre { align-self: end; justify-self: start; }
.une.compacte .une-gros h3 { align-self: start; margin: 0; }
.une.compacte .une-gros p:last-child { grid-column: 1 / -1; margin-top: 8px; }
.une.compacte .une-fil { border-left: 0; border-top: 2px solid var(--encre); }
.une.compacte .breves { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .une-corps { grid-template-columns: 1fr; }
  .une-gros { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; padding: 12px; }
  .une-gros > div:last-child { display: contents; }
  .une-carte { grid-row: span 2; }
  .une-gros .surtitre { align-self: end; justify-self: start; }
  .une-gros h3 { align-self: start; margin: 0; }
  .une-gros p:last-child { grid-column: 1 / -1; margin-top: 8px; }
  .une-fil { border-left: 0; border-top: 2px solid var(--encre); }
}
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px 20px; margin-top: 28px; }
.pack { display: grid; gap: 10px; align-content: start; }
.volume { position: relative; aspect-ratio: 3/4; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; padding: 12px; isolation: isolate; background: var(--motif), var(--fond); color: #fff; border: 3px solid var(--encre); border-radius: 0;
  box-shadow: 4px 4px 0 var(--portee); text-align: left; }
.volume::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #fff6 1.1px, transparent 1.5px) 0 0 / 6px 6px;
  -webkit-mask: linear-gradient(transparent 35%, #000); mask: linear-gradient(transparent 35%, #000); }
.volume > * { position: relative; z-index: 1; }
/* Couverture : le héros du set, fondu dans la couleur du set vers le titre. Sans image, le motif du set reste seul. */
:is(.volume, .corps) > .vol-art { position: absolute; inset: 0; z-index: -1; display: flex; }
.vol-art img { flex: 1; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 20%; }
.vol-art img + img { border-left: 3px solid var(--encre); }
.vol-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, var(--c1) 84%); }
.vol-kanji { position: absolute; top: 8px; left: 10px; font: 400 4.2rem/1 var(--titre); color: #fff; -webkit-text-stroke: 6px var(--encre); paint-order: stroke fill; }
.vol-no { position: absolute; top: 10px; right: 10px; background: var(--papier-clair); color: var(--encre); border: var(--trait); font: 700 12px/1 var(--texte); padding: 4px 6px; }
.vol-nom { margin: 0 0 6px; font: 400 1.35rem/1.1 var(--titre); -webkit-text-stroke: 6px var(--encre); paint-order: stroke fill; overflow-wrap: anywhere; }
/* Obi : bandeau de papier qui ceinture le bas du volume, comme sur un manga neuf. Au survol il passe en encre et la flèche avance. */
.obi { align-self: stretch; display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 6px -12px -12px; padding: 6px 8px 6px 12px;
  background: var(--papier-clair); color: var(--encre); border-top: 3px solid var(--encre); transition: background var(--vite), color var(--vite); }
.obi > span { display: grid; min-width: 0; }
.obi b { font: 400 15px/1.15 var(--titre); }
.obi small { font: 700 12px/1.3 var(--texte); color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obi i { flex: none; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; background: var(--rouge); color: #fff; border: var(--trait); }
.obi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--vite); }
.volume:hover .obi, .volume:focus-visible .obi { background: var(--encre); color: var(--papier-clair); }
.volume:hover .obi small, .volume:focus-visible .obi small { color: inherit; opacity: .8; }
.volume:hover .obi svg { translate: 3px 0; }
.jauge { height: 10px; margin-top: 4px; border: var(--trait); background: var(--papier-clair); }
.jauge > i { display: block; height: 100%; background: var(--trame) 0 0 / 4px 4px, var(--L); }
.pack .ligne button { flex: 1; padding: 0 10px; }
/* Coffret : volumes empilés derrière la couverture, comme un coffret de mangas */
.sous-rubrique { display: flex; align-items: center; gap: 10px; margin: 48px 0 4px; font: 400 clamp(1.3rem, 4vw, 1.7rem)/1.2 var(--titre); }
.sous-rubrique .kanji { font-size: .7em; background: var(--rouge); color: #fff; padding: 4px 7px; }
.sous-rubrique + .info { margin: 0; max-width: 65ch; }
.coffret .volume { --pile: 7px -7px 0 -3px var(--c2), 7px -7px 0 0 var(--portee), 14px -14px 0 -3px var(--c1), 14px -14px 0 0 var(--portee); box-shadow: var(--pile), 4px 4px 0 var(--portee); }
.coffret .volume:hover:not(:disabled) { box-shadow: var(--pile), 4px 4px 0 var(--portee); }
.coffret .volume:active:not(:disabled) { box-shadow: var(--pile); }
.coffret { padding: 14px 14px 0 0; }
.vol-series { align-self: flex-start; margin-bottom: 6px; background: var(--papier-clair); color: var(--encre); border: var(--trait); font: 700 12px/1.3 var(--texte); padding: 3px 6px; }
/* Collection : un titre par rareté au fil de la grille */
.rang { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding-bottom: 6px; border-bottom: 3px solid var(--r); font: 400 1.2rem/1.2 var(--titre); }
.rang:first-child { margin-top: 0; }
.rang i { display: grid; place-items: center; width: 30px; aspect-ratio: 1; background: var(--r); color: #fff; border: var(--trait); font-style: normal; font-size: 16px; }
.rang b { margin-left: auto; font: 700 14px/1 var(--texte); font-variant-numeric: tabular-nums; color: var(--encre-douce); }
.taux { margin-top: 40px; padding: 12px 16px; border: 2px dashed var(--encre); color: var(--encre-douce); }
.taux summary { cursor: pointer; font-weight: 700; color: var(--encre); min-height: 32px; display: flex; align-items: center; }
.taux li { margin: .3em 0; }

/* Carte : fond aux motifs de la série, teinte et liseré selon la rareté, case dessinée, plaque du nom, tampon */
.carte, .sachet, .volume, .voile, .dos { --motif: repeating-linear-gradient(-45deg, var(--c2) 0 5px, transparent 5px 14px); --fond: var(--c1); }
/* Motifs des séries : vagues (One Piece), boules de cristal (Dragon Ball), spirales (Naruto, Shippuden), circuit (Boruto),
   coups de lame (Bleach), damier du haori (Demon Slayer), pierres du Mur (L'Attaque des Titans),
   poussière de fée (Fairy Tail). Les coffrets ont des bandes en biais. */
.s-op { --motif:
  radial-gradient(circle at 50% 100%, var(--c2) 0 1.6px, var(--c1) 1.6px 3.2px, var(--c2) 3.2px 4.8px, var(--c1) 4.8px 6.4px, var(--c2) 6.4px 8px, transparent 8.3px) 8px 4px / 16px 8px,
  radial-gradient(circle at 50% 100%, var(--c2) 0 1.6px, var(--c1) 1.6px 3.2px, var(--c2) 3.2px 4.8px, var(--c1) 4.8px 6.4px, var(--c2) 6.4px 8px, transparent 8.3px) 0 0 / 16px 8px; }
.s-db, .s-dbz, .s-gt, .s-dbs { --fond: var(--c2); --motif:
  radial-gradient(circle at 40% 40%, #fff 0 .9px, transparent 1.4px) 0 0 / 16px 16px,
  radial-gradient(circle at 40% 40%, #fff 0 .9px, transparent 1.4px) 8px 8px / 16px 16px,
  radial-gradient(circle, #d42a1f 0 1.2px, #ff9f1c 1.7px 4.2px, #15120f 4.4px 5.4px, transparent 5.8px) 0 0 / 16px 16px,
  radial-gradient(circle, #d42a1f 0 1.2px, #ff9f1c 1.7px 4.2px, #15120f 4.4px 5.4px, transparent 5.8px) 8px 8px / 16px 16px; }
.s-dbs { --fond: var(--c1); }
.s-nar { --motif: radial-gradient(circle, var(--c2) 0 1.4px, transparent 1.4px 3px, var(--c2) 3px 4.4px, transparent 4.4px 6px, var(--c2) 6px 7.4px, transparent 7.6px) 0 0 / 17px 17px; }
.s-shp { --motif: radial-gradient(circle, var(--c2) 0 1.4px, transparent 1.4px 3px, var(--c2) 3px 4.4px, transparent 4.4px 6px, var(--c2) 6px 7.4px, transparent 7.6px) 0 0 / 17px 17px,
  repeating-linear-gradient(-45deg, transparent 0 5px, #0004 5px 7px); }
.s-bor { --motif: radial-gradient(circle, var(--c2) 0 2px, transparent 2.5px) -6px -6px / 12px 12px,
  linear-gradient(90deg, #fff6 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(#fff6 1px, transparent 1px) 0 0 / 12px 12px; }
.s-ble { --motif: repeating-linear-gradient(-62deg, transparent 0 7px, #fffa 7px 8px, transparent 8px 11px, var(--c2) 11px 13px, transparent 13px 20px); }
.s-ds { --motif: conic-gradient(#15120f 25%, transparent 0 50%, #15120f 0 75%, transparent 0) 0 0 / 12px 12px; }
.s-snk { --motif: linear-gradient(#0007 1px, transparent 0) 0 0 / 100% 7px,
  conic-gradient(at 1px 7px, transparent 75%, #0007 0) 0 0 / 14px 14px, conic-gradient(at 1px 7px, transparent 75%, #0007 0) 7px 7px / 14px 14px; }
.s-ft { --motif: radial-gradient(circle, var(--c2) 0 1.7px, transparent 2.1px) 0 0 / 18px 18px,
  radial-gradient(circle, #fffd 0 .9px, transparent 1.3px) 9px 9px / 18px 18px, radial-gradient(circle, var(--c2) 0 .8px, transparent 1.2px) 4px 13px / 18px 18px,
  radial-gradient(circle, #fff8 0 .6px, transparent 1px) 14px 5px / 18px 18px; }

.carte { --r: var(--C); --texte-c: var(--encre); --plaque: var(--papier-clair);
  --teinte: linear-gradient(#f7f1e3a6, #f7f1e3a6); --liseret: linear-gradient(var(--encre), var(--encre));
  container-type: inline-size; position: relative; aspect-ratio: 5/7; border: var(--trait); border-radius: 6px;
  background: var(--teinte), var(--motif), var(--fond); color: var(--texte-c);
  box-shadow: var(--ombre-s); cursor: pointer; user-select: none; transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), box-shadow var(--vite); }
.grille .carte:hover, .offre .carte:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--portee); }
.visuel { position: absolute; inset: 7px 7px 27% 7px; overflow: hidden; display: grid; place-items: center;
  background: var(--c1); border: 3px solid var(--encre); border-image: var(--liseret) 1; box-shadow: 0 0 0 1.5px var(--encre); }
.visuel::before { content: ""; position: absolute; inset: 0; opacity: .55; background: var(--motif); }
.visuel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #0005 1px, transparent 1.4px) 0 0 / 5px 5px;
  -webkit-mask: linear-gradient(transparent 50%, #000); mask: linear-gradient(transparent 50%, #000); }
.visuel img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.a-image .visuel img { opacity: 1; }
.a-image .initiales { display: none; }
.initiales { position: relative; z-index: 1; font: 400 24cqw/1 var(--titre); color: #fff; -webkit-text-stroke: 2.2cqw var(--encre); paint-order: stroke fill; }
.cartouche { position: absolute; left: 7px; right: 7px; bottom: 6px; height: calc(27% - 9px); display: flex; flex-direction: column; justify-content: center;
  padding: 0 5px; background: var(--plaque); border: var(--trait); border-radius: 3px; overflow: hidden; }
/* Le bas du g, du j ou du y passe sous la dernière ligne : la marge du bas le garde visible. */
.nom { font: 900 8.4cqw/1.2 var(--texte); padding-bottom: .07em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nom.long { font-size: 7.2cqw; }
.serie { font-size: max(9px, 6cqw); line-height: 1.2; font-weight: 700; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sceau { position: absolute; top: -5px; right: -5px; z-index: 4; width: 26cqw; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--r); color: #fff; border: var(--trait); border-radius: 4px; rotate: 8deg; font: 400 15cqw/1 var(--titre); }
.sceau i { position: absolute; bottom: -6px; left: -6px; font: 900 max(10px, 6cqw)/1 var(--texte); font-style: normal;
  background: var(--encre); color: #fff; padding: 2px 3px; rotate: -8deg; }
.compte { position: absolute; top: -6px; left: -6px; z-index: 4; background: var(--encre); color: var(--papier); border-radius: 3px;
  font: 400 max(11px, 7cqw)/1 var(--titre); padding: 4px 6px; }
.nouv { position: absolute; top: 10px; left: -6px; z-index: 4; background: var(--rouge); color: #fff; border: var(--trait);
  font: 900 max(10px, 6.4cqw)/1 var(--texte); padding: 3px 6px; rotate: -6deg; }
.voeu { position: absolute; top: 36cqw; left: -6px; z-index: 4; background: var(--rouge); color: #fff; border: var(--trait);
  font: 400 max(14px, 10cqw)/1 var(--titre); padding: 4px; rotate: 4deg; }

/* Raretés : la Commune voile le motif de la série sous le papier, la Rare le montre en entier,
   puis le liseré de la case passe à l'argent, au métal irisé, à l'or. Les spéciales ont leur propre teinte. */
.r-U { --r: var(--U); --teinte: linear-gradient(#f7f1e35c, #f7f1e35c); --liseret: linear-gradient(var(--U), var(--U)); }
.r-R { --r: var(--R); --teinte: none; --liseret: linear-gradient(135deg, #7d8894, #f4f6f8 30%, #8f9aa6 50%, #fff 68%, #6f7a86); }
.r-E { --r: var(--E); --teinte: none; --liseret: linear-gradient(135deg, #c9a4f5, #7d32c4 30%, #f3e8ff 50%, #7d32c4 70%, #c9a4f5); }
.r-L { --r: var(--L); --plaque: linear-gradient(#fff8dc, #f3dc8a);
  --teinte: linear-gradient(135deg, #f7e08abf, #c99a1259 30%, #fff3b0bf 50%, #b8860b59 72%, #f7e08abf);
  --liseret: linear-gradient(135deg, #f7e08a, #b8860b 30%, #fff3b0 50%, #b8860b 72%, #f7e08a); }
.r-M { --r: var(--M); --texte-c: #fff; --plaque: #15120f; --teinte: linear-gradient(#15120fc7, #3a0f0bd9);
  --liseret: linear-gradient(135deg, #d42a1f, #ffd15c 50%, #d42a1f); }
.r-EV { --r: var(--EV); --texte-c: #fff; --plaque: var(--rouge-fonce); --teinte: linear-gradient(170deg, #ffd15cb3, #e0461bb3 55%, #a81d14d9);
  --liseret: linear-gradient(#ffd15c, #e0461b); }
.r-DUO { --r: var(--DUO); --teinte: linear-gradient(135deg, #0f9e9a8c 50%, #e85d758c 50%); --liseret: linear-gradient(135deg, var(--DUO) 50%, #e85d75 50%); }
.r-ARC { --r: var(--ARC); --plaque: #e9d6b2; --liseret: linear-gradient(var(--ARC), var(--ARC));
  --teinte: radial-gradient(circle, #8b5a2b40 1px, transparent 1.3px) 0 0 / 4px 4px, linear-gradient(#ecdcc3d1, #ecdcc3d1); }
.r-NUM { --r: var(--NUM); --texte-c: #fff; --plaque: #15120f; --liseret: linear-gradient(135deg, #f7e08a, #b8860b 50%, #f7e08a);
  --teinte: radial-gradient(circle, #d4a72c 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(#15120fe6, #15120fe6); }
.r-X { --r: var(--X); --texte-c: #fff; --plaque: var(--X); --liseret: linear-gradient(135deg, #fff, #c99a12);
  --teinte: linear-gradient(135deg, #1d3557d9 0 47%, #d42a1fd9 47% 53%, #a81d14d9 53%); }
.r-L, .r-M, .r-EV, .r-NUM, .r-X { box-shadow: 4px 4px 0 var(--r); }
.r-NUM .sceau, .r-L .sceau { color: var(--encre); }

/* Prisme : voile irisé sur toute la carte, et éclat arc-en-ciel autour de la lumière, sous le sceau et les étiquettes (z-index 4).
   --mx, --my : position de la lumière. Au repos elle balaie la carte toute seule ; app.js la cale sur le pointeur
   (classe .vivant, avec une légère inclinaison --tx, --ty entre -1 et 1) ou sur l'inclinaison du téléphone (classe .incline sur html). */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.prisme::after, .prisme::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(115deg, #ff5fa2 0, #ffe45c 8%, #5cf2d6 16%, #5c9dff 24%, #ff5fa2 32%) var(--mx) var(--my) / 250% 250%;
  animation: reflet 7s ease-in-out infinite alternate; }
.prisme::after { mix-blend-mode: color; opacity: .5; }
.prisme::before { mix-blend-mode: color-dodge; opacity: .55; mask: radial-gradient(farthest-corner circle at var(--mx) var(--my), #000, #0000 55%); }
:is(.prisme.vivant, .incline .prisme)::after, :is(.prisme.vivant, .incline .prisme)::before { animation: none; }
@keyframes reflet { 0% { --mx: 10%; --my: 20%; } 50% { --mx: 90%; --my: 45%; } 100% { --mx: 30%; --my: 90%; } }
@media (prefers-reduced-motion: no-preference) {
  .carte.vivant:not(.cachee) { transform: perspective(700px) rotateX(calc(var(--ty) * -10deg)) rotateY(calc(var(--tx) * 10deg));
    transition: transform .12s linear, box-shadow var(--vite); }
}
.absente { filter: grayscale(1); opacity: .4; box-shadow: none; }
.absente:hover { opacity: .65; }

/* Ouverture : page blanche, lignes de concentration. Le sachet se déchire, des éclairs de la couleur de la meilleure carte
   en jaillissent (plus nombreux, plus tardifs et avec un éclair blanc à mesure que la carte est rare), puis les cartes passent une à une. */
.voile { --eclair: #2f8cff; --pre: 0s; --n: 0; position: fixed; inset: 0; z-index: 40; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 20px;
  padding: 16px; background: var(--papier); }
.voile::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0 10%, var(--eclair) 35%, transparent 72%); }
.voile.eclate::after { animation: flash .8s ease-out var(--pre) both; }
.voile[data-palier="0"]::after { display: none; }
.voile[data-palier="1"] { --pic: .5; }
.voile[data-palier="2"] { --pic: .85; }
@keyframes flash { 12% { opacity: var(--pic); } }
.voile[data-palier="3"].eclate::after { animation: flash2 1.2s ease-out var(--pre) both;
  background: radial-gradient(circle at 50% 45%, #fff 0 22%, var(--eclair) 50%, transparent 90%); }
@keyframes flash2 { 8%, 45% { opacity: 1; } 30% { opacity: .15; } }
.voile:is([data-palier="2"], [data-palier="3"]).eclate::before { opacity: .5; background: repeating-conic-gradient(var(--eclair) 0 1.2deg, transparent 1.2deg 6deg); }
.voile:is([data-palier="2"], [data-palier="3"]).eclate .scene { animation: secousse .06s linear var(--pre) 10 alternate; }
@keyframes secousse { from { translate: -5px 3px; } to { translate: 5px -3px; } }
.scene { position: relative; z-index: 3; display: grid; width: max(160px, min(300px, 70vw, calc((100dvh - 290px) * 5 / 7))); aspect-ratio: 5/7; perspective: 1000px; }
.scene > * { grid-area: 1 / 1; }

/* Le sachet : une languette sertie à arracher le long des pointillés, le corps aux motifs de la série. */
.sachet { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: #fff; text-align: left; container-type: inline-size; animation: flotte 2.6s ease-in-out infinite alternate; }
.sachet:hover:not(:disabled), .sachet:active:not(:disabled) { transform: none; box-shadow: none; }
@keyframes flotte { from { translate: 0 -4px; rotate: -1.2deg; } to { translate: 0 4px; rotate: 1.2deg; } }
.languette { flex: 0 0 13%; border: 3px solid var(--encre); border-bottom: 0; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, #0005 0 2px, transparent 2px 6px), var(--c2); }
.corps { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px;
  padding: 14px 14px calc(14px + 10cqw); overflow: hidden; isolation: isolate; background: var(--motif), var(--fond);
  border: 3px solid var(--encre); border-top-style: dashed; box-shadow: var(--ombre); }
.corps::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8cqw; border-top: 3px solid var(--encre);
  background: repeating-linear-gradient(90deg, #0005 0 2px, transparent 2px 6px), var(--c2); }
.corps > * { position: relative; z-index: 1; }
.sachet .vol-kanji { position: absolute; top: 5cqw; left: 6cqw; font-size: 26cqw; -webkit-text-stroke: 2.2cqw var(--encre); }
.sachet .vol-nom { margin: 0; font-size: max(1.2rem, 9cqw); }
.sachet small { background: var(--encre); color: #fbf8f1; font: 700 max(12px, 4.4cqw)/1.2 var(--texte); padding: 3px 8px; }
.sachet.ouvert { animation: tremble .07s ease-in-out var(--n) alternate; pointer-events: none; }
.sachet.ouvert .languette { animation: arrache .45s ease-out var(--pre) forwards; }
.sachet.ouvert .corps { animation: vide .5s ease-in calc(var(--pre) + .25s) forwards; filter: drop-shadow(0 0 14px var(--eclair)); }
@keyframes arrache { 30% { translate: 6% -40%; rotate: 6deg; } to { translate: 70% -260%; rotate: 40deg; opacity: 0; } }
@keyframes vide { to { translate: 0 40%; scale: .9; opacity: 0; } }
/* Éclairs : partent des bords du sachet vers l'extérieur, s'allument, vacillent et s'éteignent. */
.eclair { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: calc(32% * var(--l)); overflow: visible; pointer-events: none; opacity: 0;
  translate: -50% 0; rotate: var(--a); transform-origin: 50% 0;
  fill: var(--eclair); stroke: #15120f; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--eclair)); }
.sachet.ouvert .eclair { animation: foudre .55s var(--d) both; }
@keyframes foudre { 0% { opacity: 0; scale: 1 .1; } 10% { opacity: 1; scale: 1; } 22% { opacity: .15; } 34%, 70% { opacity: 1; } }

/* Une carte à la fois : elle monte face cachée, se retourne au toucher, puis file à gauche. */
.scene .carte { animation: sort .4s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.scene .cachee.annonce { animation: sort .4s cubic-bezier(.2, 1.3, .4, 1) backwards, tremble .14s ease-in-out .45s infinite alternate; }
.scene .carte.part, .scene .planche.part { animation: part .26s ease-in forwards; }
/* Jamais d'opacité dans une entrée de carte : sous 1, le navigateur aplatit la 3D et la face se voit à travers le dos. */
@keyframes sort { from { translate: 0 70px; scale: .75; } }
@keyframes part { to { translate: -70vw -10px; rotate: -14deg; opacity: 0; } }

/* Mythique ou Numérotée : la révélation devient une planche de manga en trois cases, à lire dans le sens japonais.
   La case de droite (le sachet se déchire), celle de gauche (le dos gronde), puis la grande case du bas (la carte jaillit). */
.scene:has(> .planche) { width: min(100vw - 32px, 460px, calc((100dvh - 240px) * 2 / 3)); aspect-ratio: 2 / 3; }
.planche { --g: 8px; --biais: 26px; --papier-m: #fbf8f1; --encre-m: #15120f;
  color-scheme: light; position: relative; container-type: inline-size; display: grid; grid-template: auto 36fr 64fr / 44fr 56fr; gap: var(--g); padding: 10px 12px 14px;
  background: radial-gradient(circle, #15120f0c 1px, transparent 1.3px) 0 0 / 5px 5px, var(--papier-m);
  border: 2px solid var(--encre-m); box-shadow: 6px 6px 0 var(--rouge); color: var(--encre-m);
  animation: pl-entre .35s cubic-bezier(.2, 1.2, .4, 1) both, secousse .05s linear 2.4s 8 alternate; }
@keyframes pl-entre { from { scale: .94; opacity: 0; } }
.planche .courant { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; font: 900 11px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; }
/* Une case : un cadre noir détouré, l'intérieur posé 2,5 px en retrait. La gouttière du haut est en biais. */
.vignette { position: relative; background: var(--encre-m); }
.vignette > .int { position: absolute; inset: 2.5px; overflow: hidden; background: var(--papier-m); }
.vignette.v1 { grid-area: 2 / 2; margin-left: calc(var(--biais) * -1); clip-path: polygon(var(--biais) 0, 100% 0, 100% 100%, 0 100%); animation: pl-encre .3s ease-out .25s both; }
.v1 > .int { clip-path: polygon(var(--biais) 0, 100% 0, 100% 100%, 0 100%);
  background: radial-gradient(circle, #15120f40 1.1px, transparent 1.5px) 0 0 / 6px 6px, var(--papier-m); }
.vignette.v2 { grid-area: 2 / 1; clip-path: polygon(0 0, 100% 0, calc(100% - var(--biais)) 100%, 0 100%); animation: pl-encre .3s ease-out 1.15s both; }
.v2 > .int { clip-path: polygon(0 0, 100% 0, calc(100% - var(--biais)) 100%, 0 100%);
  background: repeating-linear-gradient(90deg, transparent 0 9px, #15120f 9px 10px, transparent 10px 15px, #15120f 15px 17px), var(--papier-m); }
.vignette.v3 { grid-area: 3 / 1 / 4 / 3; background: none; animation: pl-encre .2s ease-out 2.05s both; }
.v3 > .int { inset: 0; border: 2.5px solid var(--encre-m); }
@keyframes pl-encre { from { opacity: 0; translate: 12px 0; } }
/* Case 1 : le sachet se déchire, la lumière sort par la déchirure. */
.planche .sachet-m { --fond: var(--c1); position: absolute; left: 22%; right: 10%; top: 26%; bottom: -12%; rotate: 6deg;
  background: var(--motif), var(--fond); border: 2.5px solid var(--encre-m); border-top: 0;
  display: grid; place-items: center; font: 400 min(64px, 14cqw)/1 var(--titre); color: #fff; -webkit-text-stroke: 5px var(--encre-m); paint-order: stroke fill; }
.planche .bande { position: absolute; left: 22%; right: 10%; top: 12%; height: 15%; rotate: 6deg;
  background: repeating-linear-gradient(90deg, var(--c2) 0 6px, var(--c1) 6px 12px); border: 2.5px solid var(--encre-m);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 84% 70%, 76% 100%, 68% 70%, 60% 100%, 52% 70%, 44% 100%, 36% 70%, 28% 100%, 20% 70%, 12% 100%, 4% 70%, 0 100%);
  animation: pl-arrache .5s cubic-bezier(.5, 0, .7, 1) .7s forwards; }
@keyframes pl-arrache { to { translate: 60% -150%; rotate: 32deg; } }
.planche .jour { position: absolute; left: 0; right: 0; top: -30%; height: 90%; opacity: 0;
  background: repeating-conic-gradient(from -50deg at 58% 72%, #ffd15c 0 4deg, transparent 4deg 11deg);
  -webkit-mask: radial-gradient(ellipse at 58% 72%, #000 20%, transparent 70%); mask: radial-gradient(ellipse at 58% 72%, #000 20%, transparent 70%);
  animation: pl-jour .4s ease-out .8s forwards; }
@keyframes pl-jour { to { opacity: 1; } }
/* Case 2 : le dos de la carte tremble, une aura de flammes monte derrière lui (contour d'encre, rouge, cœur jaune) et pulse. */
.planche .aura { --flamme: polygon(53% -2%, 56% 19%, 69% 5%, 66% 23%, 85% 13%, 74% 30%, 91% 30%, 79% 40%, 96% 45%, 80% 50%, 90% 59%, 77% 60%, 85% 73%, 71% 68%, 72% 79%, 64% 74%, 61% 87%, 55% 77%, 48% 85%, 45% 77%, 35% 85%, 36% 74%, 25% 77%, 29% 68%, 13% 69%, 23% 60%, 9% 55%, 20% 50%, 5% 39%, 21% 40%, 12% 25%, 26% 30%, 20% 10%, 34% 23%, 36% 3%, 44% 19%);
  position: absolute; left: 58%; top: 50%; width: 118%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; background: var(--encre-m); clip-path: var(--flamme);
  animation: pl-jour .35s ease-out 1.4s forwards, pl-aura .16s ease-in-out 1.75s infinite alternate; }
.planche .aura::before, .planche .aura::after { content: ""; position: absolute; clip-path: var(--flamme); }
.planche .aura::before { inset: 4%; background: var(--rouge); }
.planche .aura::after { inset: 14%; background: #ffd15c; }
@keyframes pl-aura { to { scale: 1.07; } }
.planche .dos-m { --fond: var(--c1); position: absolute; left: 32%; width: 52%; top: 18%; aspect-ratio: 5 / 7; display: grid; place-items: center;
  border: 2.5px solid var(--encre-m); border-radius: 5px; font: 400 min(34px, 7.4cqw)/1 var(--titre); color: #fff; -webkit-text-stroke: 4px var(--encre-m); paint-order: stroke fill;
  background: radial-gradient(circle, var(--c1) 0 26%, var(--encre-m) 26% 29%, #fbf8f1 29% 33%, var(--encre-m) 33% 36%, transparent 36%), var(--motif), var(--fond);
  box-shadow: inset 0 0 0 5px #fbf8f1, inset 0 0 0 7px var(--encre-m); animation: tremble .07s linear 1.5s infinite alternate; }
/* Case 3 : la révélation. Un blanc, les lignes de concentration, l'éclat, et la carte qui sort du cadre. */
.v3 > .int::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: pl-blanc .7s ease-out 2.05s both; }
@keyframes pl-blanc { 5% { opacity: 1; } }
.planche .concentration { position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 0deg at 59% 48%, var(--encre-m) 0 .7deg, transparent .7deg 3.2deg, var(--encre-m) 3.2deg 3.6deg, transparent 3.6deg 7deg);
  -webkit-mask: radial-gradient(circle at 59% 48%, transparent 30%, #000 64%); mask: radial-gradient(circle at 59% 48%, transparent 30%, #000 64%);
  animation: pl-vibre .12s steps(2) 2.1s infinite; }
@keyframes pl-vibre { to { rotate: 1.5deg; } }
.planche .eclat { position: absolute; left: 63%; top: 47%; width: 104%; aspect-ratio: 1; translate: -50% -50%; background: var(--r);
  clip-path: polygon(50% 0, 57% 30%, 80% 8%, 66% 37%, 99% 30%, 70% 50%, 100% 66%, 66% 62%, 82% 94%, 56% 70%, 46% 100%, 42% 70%, 16% 92%, 32% 62%, 0 70%, 30% 50%, 2% 30%, 34% 38%, 20% 6%, 44% 30%);
  animation: pl-eclat .5s cubic-bezier(.2, 1.4, .4, 1) 2.1s both; }
@keyframes pl-eclat { from { scale: 0; rotate: -30deg; } }
.planche .v3 .carte { position: absolute; z-index: 5; left: 63%; top: 47%; width: 60%; translate: -50% -50%; rotate: -4deg;
  box-shadow: 6px 6px 0 var(--encre-m); transition: none; animation: pl-surgit .55s cubic-bezier(.15, 1.35, .35, 1) 2.15s both; }
@keyframes pl-surgit { from { scale: 1.9; rotate: -18deg; opacity: 0; } }
.planche .sfx-m { position: absolute; z-index: 7; margin: 0; font: 400 30px/1 var(--titre); color: #fff; -webkit-text-stroke: 5px var(--encre-m);
  paint-order: stroke fill; white-space: nowrap; pointer-events: none; }
.planche .biri { right: 6%; top: 8%; rotate: 12deg; font-size: min(26px, 6.2cqw); -webkit-text-stroke-width: .15em; animation: pl-claque .3s cubic-bezier(.2, 1.6, .4, 1) .75s both; }
.planche .gogo { left: 7%; top: 8%; writing-mode: vertical-rl; font-size: min(28px, 7.4cqw); -webkit-text-stroke-width: .15em; letter-spacing: -.05em; color: var(--rouge); }
.planche .gogo span { display: inline-block; animation: pl-monte .35s ease-out 1.5s both; }
.planche .gogo span:nth-child(2) { animation-delay: 1.65s; }
.planche .gogo span:nth-child(3) { animation-delay: 1.8s; }
@keyframes pl-monte { from { opacity: 0; translate: 0 10px; } }
.planche .don { left: 3%; top: 7%; font-size: min(58px, 12.6cqw); color: var(--r); rotate: -10deg; -webkit-text-stroke: 7px var(--encre-m);
  text-shadow: 4px 4px 0 #fff; animation: pl-claque .35s cubic-bezier(.2, 1.6, .4, 1) 2.4s both; }
@keyframes pl-claque { from { scale: 2.4; opacity: 0; } }
.planche .recit { position: absolute; z-index: 6; left: -6px; bottom: 28%; margin: 0; padding: 7px 12px 8px; max-width: 38%; min-width: min-content; pointer-events: none;
  background: var(--encre-m); color: #fff; border: 2px solid #fff; outline: 2.5px solid var(--encre-m); font: 700 min(13px, 3.4cqw)/1.35 var(--texte);
  animation: pl-glisse .35s ease-out 2.9s both; }
.planche .recit b { display: block; font: 400 min(17px, 3.8cqw)/1.15 var(--titre); }
.planche .recit i { font-style: normal; color: #ffd15c; }
@keyframes pl-glisse { from { translate: -110% 0; opacity: 0; } }
.legende { margin: 0; min-height: 3.4em; max-width: 34ch; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px;
  text-align: center; font-weight: 700; }
.legende b { flex-basis: 100%; font: 400 1.25rem/1.15 var(--titre); }
.legende span, .legende em { padding: 3px 8px 3px 16px; background: var(--papier-clair); border: var(--trait); box-shadow: inset 8px 0 0 var(--r); font-size: 14px; }
.legende em { padding-left: 8px; background: var(--rouge); color: #fff; box-shadow: none; font-style: normal; rotate: -3deg; }
.bilan { margin: 0; max-width: 52ch; text-align: center; font-weight: 700; }
.voile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: var(--motif);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 60%); mask: radial-gradient(circle, transparent 18%, #000 60%); }
/* Page noire : les motifs tracés à l'encre noire (pierres du Mur, damier du haori) s'y perdent, ils passent en encre claire. Pas les lignes de concentration. */
:root[data-theme="dark"] .voile:is(.s-snk, .s-ds):not(.eclate[data-palier="2"], .eclate[data-palier="3"])::before { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .voile:is(.s-snk, .s-ds):not(.eclate[data-palier="2"], .eclate[data-palier="3"])::before { filter: invert(1); } }
.titre-tirage { margin: 0; font: 400 1.3rem/1 var(--titre); background: var(--encre); color: var(--papier); padding: 8px 14px; }
.sfx { position: absolute; top: 4%; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none; z-index: 2;
  font: 400 clamp(3rem, 13vw, 7rem)/1 var(--titre); color: var(--r, var(--rouge)); -webkit-text-stroke: 8px var(--encre); paint-order: stroke fill; rotate: -7deg; }
.sfx.frappe { animation: frappe .4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes frappe { from { scale: 2.6; opacity: 0; } }
.tirage { display: grid; grid-template-columns: repeat(5, minmax(0, 170px)); gap: 14px; perspective: 1000px; }
@media (max-width: 700px) { .tirage { display: flex; flex-wrap: wrap; justify-content: center; width: min(100vw - 32px, 400px); } .tirage .carte { width: calc(33% - 10px); max-width: 116px; } }
.tirage .carte { animation: arrivee .45s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.tirage .carte:nth-child(2) { animation-delay: .07s; } .tirage .carte:nth-child(3) { animation-delay: .14s; }
.tirage .carte:nth-child(4) { animation-delay: .21s; } .tirage .carte:nth-child(5) { animation-delay: .28s; }
@keyframes arrivee { from { translate: 0 80px; scale: .7; } }
.cachee { transform: rotateY(180deg); box-shadow: var(--ombre-s); }
/* Par 5 ou 10 : toutes les cartes du tirage en grille, qui défile si elle dépasse l'écran. */
.tirage.multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; width: min(100vw - 32px, 980px);
  max-height: calc(100dvh - 250px); overflow-y: auto; padding: 8px; }
.tirage.multi .carte { width: auto; max-width: none; animation-delay: 0s; }
.voile > .son { position: absolute; top: 12px; right: 12px; z-index: 6; }
/* Pile de 5 ou 10 boosters : des sachets décalés derrière le premier, et le nombre en tampon. */
.sachet.pile .corps { box-shadow: 7px 7px 0 -3px var(--c2), 7px 7px 0 0 var(--encre), 14px 14px 0 -3px var(--c1), 14px 14px 0 0 var(--encre); overflow: visible; }
.fois { position: absolute; top: 9%; right: -5%; z-index: 4; display: grid; place-items: center; width: 26cqw; aspect-ratio: 1; border: 3px solid var(--encre);
  border-radius: 50%; background: var(--rouge); color: #fff; font: 400 11cqw/1 var(--titre); rotate: 12deg; box-shadow: var(--ombre-s); }
.sachet.ouvert .fois { animation: vide .3s ease-in var(--pre) forwards; }
/* Hors-série : un tampon jaune, comme sur un numéro spécial en kiosque */
.tampon-hs { position: absolute; top: 4%; left: -7%; z-index: 4; display: grid; justify-items: center; padding: 1.5cqw 3cqw; border: 3px solid var(--encre);
  background: var(--L); color: var(--encre); font: 800 5cqw/1.1 var(--texte, inherit); text-transform: uppercase; rotate: -9deg; box-shadow: var(--ombre-s); }
.tampon-hs b { font: 400 10cqw/1 var(--titre); }
.sachet.ouvert .tampon-hs { animation: vide .3s ease-in var(--pre) forwards; }
/* Dos : motif, couleurs et kanji du booster ouvert, dans un cadre imprimé. La carte tourne en 3D : chaque face ne se voit que de son côté. */
.carte > *, .prisme::after, .prisme::before { backface-visibility: hidden; }
/* Certains téléphones laissent l'image de la face passer devant le dos une fois chargée : face cachée, la face est masquée pour de bon,
   et ne revient qu'à mi-retournement, quand la carte est de profil. */
.carte > :not(.dos) { transition: visibility 0s .06s; }
.cachee > :not(.dos) { visibility: hidden; transition: none; }
/* Le reflet en mélange de couleur traverse le dos malgré tout : il n'apparaît qu'une fois la carte retournée. */
.cachee.prisme::after, .cachee.prisme::before { content: none; }
.dos { position: absolute; inset: -3px; z-index: 5; display: grid; place-items: center; border: var(--trait); border-radius: 6px;
  transform: rotateY(180deg) translateZ(1px); font: 400 24cqw/1 var(--titre); color: #fff; -webkit-text-stroke: 2cqw var(--encre); paint-order: stroke fill;
  background: radial-gradient(circle, var(--c1) 0 18cqw, var(--encre) 18cqw 19.5cqw, var(--papier-clair) 19.5cqw 22.5cqw, var(--encre) 22.5cqw 24cqw, transparent 24cqw),
    var(--motif), var(--fond);
  box-shadow: inset 0 0 0 3cqw var(--papier-clair), inset 0 0 0 4.2cqw var(--encre); }
.cachee.annonce { animation: arrivee .45s backwards, tremble .14s ease-in-out .5s infinite alternate; outline: 4px solid var(--r); outline-offset: 2px; }
@keyframes tremble { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }

/* Collection */
.avancement { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.avancement b { font: 400 1.6rem/1 var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progres { flex: 1; height: 16px; border: var(--trait); background: var(--papier-clair); }
.progres > * { display: block; height: 100%; background: radial-gradient(circle, #fff7 1px, transparent 1.4px) 0 0 / 5px 5px, var(--rouge); transition: width .4s; }
.case { display: flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 500; }
#colRecompense { margin-bottom: 8px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 18px; margin-top: 16px; }

dialog { width: min(700px, calc(100vw - 32px)); padding: 24px; color: var(--encre); background: var(--papier-clair);
  border: 3px solid var(--encre); border-radius: 4px; box-shadow: 8px 8px 0 var(--portee); }
dialog.zoom { width: auto; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; cursor: zoom-out; }
dialog.zoom[open] { display: grid; justify-items: center; gap: 16px; }
dialog.zoom .carte { width: min(100vw - 40px, (100dvh - 120px) * 5 / 7, 480px); cursor: zoom-out; }
dialog::backdrop { background: radial-gradient(circle, #0003 1px, transparent 1.3px) 0 0 / 5px 5px, #15120fa6; }
.fiche { display: grid; grid-template-columns: 210px 1fr; gap: 24px; }
@media (max-width: 560px) { .fiche { grid-template-columns: 1fr; } .fiche .grande { max-width: 210px; margin: auto; width: 100%; } }
.fiche h2 { margin: 0; font-size: 1.6rem; }
.fiche p { color: var(--encre-douce); margin: .4em 0 1em; }
/* Ouverture en Étincelles : gros boutons à cocher pour le nombre, puis pour la façon de découvrir les cartes. */
#choixOuverture { width: min(480px, calc(100vw - 32px)); }
.choix h2 { margin: 0; font-size: 1.6rem; }
.choix h2 small { display: block; font: 700 13px/1.4 var(--texte); color: var(--encre-douce); }
.choix h3 { margin: 20px 0 8px; font-size: 1.1rem; }
.options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.options button { display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 64px; padding: 8px 10px;
  background: var(--papier-clair); color: var(--encre); text-align: center; }
.options button[aria-pressed=true] { background: var(--encre); color: var(--papier); box-shadow: none; transform: none; }
.options b { font: 400 1.15rem/1.1 var(--titre); }
.options.nombre b { font-size: 1.8rem; }
.options span { font-size: 13px; font-weight: 500; line-height: 1.3; }
.choix .actions { margin-top: 24px; }
.choix .actions [data-ok] { flex: 1 1 auto; }
/* Bilan de Tout récupérer : les totaux en grosses tuiles, puis chaque récompense sur sa ligne. */
.tete-rubrique { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; }
.tete-rubrique > button { margin: 28px 0 16px; }
#butin { width: min(520px, calc(100vw - 32px)); }
.butin .totaux { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.butin .totaux div { display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border: var(--trait); background: var(--papier); text-align: center; }
.butin .totaux b { font: 400 clamp(1.1rem, 4.6vw, 1.9rem)/1 var(--titre); color: var(--rouge-texte); overflow-wrap: anywhere; }
.butin .totaux span { font-size: 13px; font-weight: 500; }
.butin .titres { margin: 14px 0 0; }
.butin ul { list-style: none; margin: 0; padding: 0; max-height: 40dvh; overflow: auto; border-top: var(--trait); }
.butin li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--papier-fonce); }
.butin li b { color: var(--rouge-texte); text-align: right; }
/* Fiche d'un booster : chances en tableau, cartes en petite grille, boutons d'ouverture collés en bas. */
#detailBooster { width: min(920px, calc(100vw - 32px)); padding-bottom: 0; }
.contenu h2 { margin: 0 0 8px; font-size: 1.6rem; }
.contenu h2 small { display: block; font: 700 13px/1.4 var(--texte); color: var(--encre-douce); }
.contenu > p { color: var(--encre-douce); margin: .4em 0 1em; }
.chances { width: 100%; max-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chances th, .chances td { padding: 6px 8px; border-bottom: 2px dashed var(--encre); text-align: right; }
.chances td { white-space: nowrap; }
.chances th:first-child { text-align: left; font-weight: 500; white-space: nowrap; }
.chances thead th { font-size: 13px; font-weight: 700; color: var(--encre-douce); border-bottom: var(--trait); }
.chances td:last-child { font-weight: 700; }
.chances th i { display: inline-grid; vertical-align: middle; margin-right: 10px; }
.notes { margin: .5em 0; padding-left: 1.2em; }
.notes li { margin: .3em 0; }
.contenu .grille { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 14px; }
.contenu .actions { position: sticky; bottom: 0; z-index: 2; margin: 20px -24px 0; padding: 14px 24px 24px; background: var(--papier-clair); border-top: var(--trait); }
.contenu .actions button { flex: 1 1 auto; }
.ex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 2px dashed var(--encre); }
.ex span { flex: 1 1 100%; font-weight: 700; }
.ex input { width: 110px; }
.ex small { flex: 1 1 100%; color: var(--encre-douce); font-weight: 500; }
.fab { margin: 16px 0; }
.fiche .rang { --r: var(--rouge); font-size: 1rem; }
.versions { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 12px; margin: 14px 0 20px; }
.versions .carte:hover { translate: -2px -2px; }
.versions [aria-current] { outline: 3px solid var(--rouge); outline-offset: 3px; opacity: 1; }

/* Quêtes : des cases de planche, tampon 済 une fois récupérées */
.quetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 16px; }
.quete { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px;
  background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); }
.quete .gain { grid-row: span 2; font: 400 1.5rem/1 var(--titre); color: var(--rouge-texte); text-align: center; min-width: 64px; }
.quete .gain small { display: block; font: 700 12px/1.4 var(--texte); color: var(--encre-douce); }
.quete b { font-weight: 700; }
.quete .prog { font-size: 13px; color: var(--encre-douce); }
.quete .progres { grid-column: 1 / -1; height: 10px; }
.quete button { grid-column: 1 / -1; }
.quete.faite { background: var(--papier-fonce); }
.quete.faite::after { content: "済"; position: absolute; bottom: 4px; right: 12px; width: 52px; height: 52px; display: grid; place-items: center;
  border: 3px solid var(--rouge-texte); border-radius: 50%; color: var(--rouge-texte); font: 400 1.6rem/1 var(--titre); rotate: -12deg; opacity: .9; }
.quete .paliers, .quete .membres, .quete .titre-eq, .quete .bonus { grid-column: 1 / -1; }
.paliers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.paliers li { padding: 3px 0; border: 2px solid var(--encre); text-align: center; font: 700 11px/1.2 var(--texte); font-variant-numeric: tabular-nums; }
.paliers .pris { background: var(--encre); color: var(--papier); }
.titre-eq, .quete .bonus { margin: 0; font-size: 13px; }
.membres { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.membres li { padding: 2px 6px; border: 2px dashed var(--encre-douce); color: var(--encre-douce); font-size: 12px; }
.membres .a { border-style: solid; border-color: var(--encre); background: var(--encre); color: var(--papier); }
.quetes .groupe { grid-column: 1 / -1; margin: 18px 0 -6px; padding-bottom: 4px; border-bottom: var(--trait); font: 400 1.3rem/1.2 var(--titre); }
.quetes .groupe:first-child { margin-top: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Connexion du mois : une case par jour, tampon 済 sur les jours récupérés */
.connexion { margin: 16px 0 24px; padding: 14px 16px; background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); }
.connexion-tete { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.connexion h3 { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; font: 400 1.4rem/1.2 var(--titre); }
.connexion h3 .kanji, .tuto h2 .kanji { font-size: .7em; background: var(--rouge); color: #fff; padding: 4px 7px; }
.connexion p { margin: 0; max-width: 65ch; }
.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.calendrier li { position: relative; display: grid; align-content: space-between; min-height: 54px; padding: 4px 5px; border: 2px solid var(--encre); background: var(--papier); }
.calendrier li b { font: 700 12px/1 var(--texte); }
.calendrier li span { font: 400 14px/1 var(--titre); color: var(--rouge-texte); text-align: right; }
.calendrier li svg { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; fill: none; stroke: var(--rouge-texte); stroke-width: 2; }
.calendrier .passe { opacity: .55; border-style: dashed; }
.calendrier .fait { background: var(--papier-fonce); }
.calendrier .fait::after { content: "済"; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--rouge-texte); border-radius: 50%; color: var(--rouge-texte); font: 400 1rem/1 var(--titre); rotate: -12deg; }
.calendrier .auj { border: 3px solid var(--rouge); box-shadow: var(--ombre-s); }
.calendrier .grace { border-style: dashed; }
.calendrier .grace::after { content: "赦"; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px dashed var(--encre); border-radius: 50%; font: 400 1rem/1 var(--titre); rotate: 8deg; opacity: .7; }

/* Premiers pas : encart en haut des boosters jusqu'au cadeau */
/* Annonces de l'équipe : un avis imprimé, au-dessus des Premiers pas et du Raito Hebdo. */
.communiques { display: grid; gap: 12px; margin-bottom: 24px; }
#communiquesAccueil { margin-bottom: 1.4em; }
.communique { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 14px 16px; background: var(--papier-clair);
  border: var(--trait); border-left: 10px solid var(--encre); box-shadow: var(--ombre-s); }
.communique > div { flex: 1 1 260px; min-width: 0; }
.communique .tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.communique time { font-size: 13px; font-weight: 500; color: var(--encre-douce); }
.communique h3 { margin: 6px 0 4px; font: 400 1.4rem/1.2 var(--titre); }
.communique p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#communiquesListe p { white-space: pre-line; overflow-wrap: anywhere; }
.communique button.sec { min-height: 36px; padding: 0 12px; font-size: 14px; }
.tuto { margin-bottom: 24px; padding: 14px 16px; background: var(--papier-clair); border: var(--trait); border-left: 10px solid var(--rouge); box-shadow: var(--ombre-s); }
.tuto h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 1.5rem/1.2 var(--titre); }
.tuto p { margin: 4px 0 10px; }
.tuto ol { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: etape; }
.tuto li { display: flex; align-items: center; gap: 12px; min-height: 44px; counter-increment: etape; }
.tuto li::before { content: counter(etape); display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 2px solid var(--encre); font: 400 1rem/1 var(--titre); }
.tuto li.fait::before { background: var(--encre); color: var(--papier); }
.tuto li span { flex: 1; font-weight: 600; }
.tuto li small { display: block; font-weight: 400; color: var(--encre-douce); }
.tuto li.fait span { text-decoration: line-through; color: var(--encre-douce); }
.tuto li > b { font: 400 1rem/1 var(--titre); color: var(--rouge-texte); }
.titres { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.titres li { padding: 3px 8px; background: var(--rouge); color: #fff; font: 400 13px/1.2 var(--titre); }

/* Marché */
.offre { display: grid; gap: 6px; justify-items: center; text-align: center; }
.offre .carte { width: 100%; }
.offre .prix { position: relative; z-index: 4; margin-top: -20px; background: var(--rouge); color: #fff; border: var(--trait);
  font: 400 1.05rem/1 var(--titre); padding: 6px 10px; rotate: -3deg; font-variant-numeric: tabular-nums; }
.offre small { color: var(--encre-douce); font-weight: 500; }
.offre button { width: 100%; }
.offre small .lien { width: auto; min-height: 0; padding: 0; font: inherit; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.offre.voulue { outline: 3px solid var(--rouge); outline-offset: 6px; }
.offre .bandeau { justify-self: stretch; background: var(--rouge); color: #fff; font-size: 13px; padding: 3px 6px; }

/* Wiki des personnages : la vignette et sa fiche courte, grisée tant qu'on n'a aucune de ses cartes. */
.wiki { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px 20px; margin-top: 16px; }
.perso { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding-bottom: 14px; border-bottom: var(--trait); }
.perso h4 { margin: 0 0 4px; }
.perso p { margin: 0 0 6px; line-height: 1.5; }
.perso small { font-weight: 700; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.perso.ferme p, .fiche .bio.ferme { color: var(--encre-douce); font-style: italic; }
.fiche .bio { color: var(--encre); line-height: 1.55; padding: 10px 14px; border-left: 4px solid var(--rouge); background: var(--papier-clair); }
.fiche .souhait { margin: 0 0 16px; }
#mRecherche { flex: 1 1 240px; }
.ventes { padding-left: 1.2em; color: var(--encre-douce); }
#mOuverture { margin-top: 12px; border-left: 10px solid var(--rouge); }
.vue > .sous-onglets { margin-bottom: 12px; }
.grille > .info { grid-column: 1 / -1; }
/* Enchères : l'offre se tape sous la carte, le joueur en tête voit son tampon. */
.offre .miser { display: grid; gap: 6px; width: 100%; }
.offre .miser input { width: 100%; }
.offre .mene { color: var(--rouge-texte); font-weight: 700; }
#annonces > .info { grid-column: 1 / -1; }

/* Échanges : une fiche par proposition, ce que tu donnes à gauche, ce que tu reçois à droite. */
.echanges { display: grid; gap: 16px; margin-top: 16px; }
.echange { padding: 14px 16px; background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); }
.echange.recu { border-left: 10px solid var(--rouge); }
.echange h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font-size: 1.05rem; }
.echange h3 .lien { min-height: 0; padding: 0; font: inherit; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.echange h3 time { font: 500 13px/1 var(--texte); color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.parts section + section { padding-left: 16px; border-left: 2px dashed var(--encre); }
.parts h4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; margin: 0 0 8px; }
.parts h4 small { font: 500 13px/1.2 var(--texte); color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.parts .cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; align-items: center; }
.parts .info { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { .parts { grid-template-columns: 1fr; } .parts section + section { padding: 12px 0 0; border-left: 0; border-top: 2px dashed var(--encre); } }
.jeton { justify-self: start; font: 400 1rem/1 var(--titre); padding: 6px 10px; background: var(--rouge); color: #fff; border: var(--trait);
  rotate: -3deg; font-variant-numeric: tabular-nums; }
.echange > .ligne { margin-top: 14px; }

/* Proposer un échange */
.proposer h2 { margin: 0 0 14px; }
.proposer h2 small { display: block; font: 700 13px/1.4 var(--texte); color: var(--rouge-texte); text-transform: uppercase; letter-spacing: .08em; }
.proposer fieldset { display: grid; gap: 10px; margin: 0 0 14px; padding: 8px 14px 14px; border: var(--trait); min-inline-size: 0; grid-template-columns: minmax(0, 1fr); }
.proposer legend { font: 400 1rem/1 var(--titre); padding: 0 6px; }
.proposer select { flex: 1 1 14em; min-width: 0; max-width: 100%; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces:empty::before { content: "Aucune carte pour l'instant."; color: var(--encre-douce); font-weight: 500; }
button.puce { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; font-size: 14px; background: var(--papier); color: var(--encre); }
.puce svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.etin { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.etin input { width: 130px; }
.equilibre { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--rouge); background: var(--papier); font-weight: 500; }

/* Cote au marché : une seule courbe, le chiffre en gros au-dessus, le détail dans un tableau. */
.cote { margin-bottom: 18px; }
.cote > .ligne { gap: 4px 18px; }
.fiche .cote .chiffre { margin: 12px 0 6px; }
.cote .chiffre b { display: block; font: 400 2rem/1.1 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums; }
.cote .chiffre span { font-weight: 500; }
.cote .trace { position: relative; height: 170px; }
.cote svg { position: absolute; top: 0; left: 0; overflow: visible; touch-action: pan-y; }
.cote .grille-l { stroke: var(--encre); stroke-opacity: .15; stroke-width: 1; }
.cote .base { stroke: var(--encre); stroke-width: 1.5; }
.cote .ref { stroke: var(--encre-douce); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cote .plage { stroke: var(--rouge); stroke-opacity: .3; stroke-width: 8; stroke-linecap: round; }
.cote .ligne-cote { fill: none; stroke: var(--rouge); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cote .point { fill: var(--rouge); stroke: var(--papier-clair); stroke-width: 2; }
.cote .viseur { stroke: var(--encre); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.cote .axe { font: 500 12px var(--texte); fill: var(--encre-douce); font-variant-numeric: tabular-nums; }
.cote .bulle { position: absolute; z-index: 2; pointer-events: none; padding: 6px 10px; white-space: nowrap; font-size: 13px; font-weight: 500;
  color: var(--encre); background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); font-variant-numeric: tabular-nums; }
.cote .bulle b { display: block; }
.cote summary { padding: 10px 0; font-weight: 700; cursor: pointer; }
.cote table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.cote th, .cote td { padding: 6px 8px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--encre) 20%, transparent); }
.cote th:first-child, .cote td:first-child { text-align: left; }

/* Modération : main courante. Chaque entrée est une case, le niveau est un tampon (texte + couleur). */
.journal { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.entree { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px;
  background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); }
.entree p { flex: 1 1 100%; margin: 0; }
.entree time, .entree small { font-size: 13px; font-weight: 500; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.entree button.sec { min-height: 36px; padding: 0 12px; font-size: 14px; }
.entree button.lien { min-height: 0; padding: 0; font-weight: 700; color: var(--encre); }
.entree.traite { background: var(--papier-fonce); box-shadow: none; }
.entree.traite > :not(button) { opacity: .7; }
.etiquette { font: 400 13px/1 var(--titre); padding: 5px 8px; border: var(--trait); background: var(--papier); rotate: -2deg; white-space: nowrap; }
.niv-bloque { background: var(--rouge); color: #fff; }
/* Catégories : onglets imprimés, celui qui est ouvert passe en encre pleine ; le nombre d'entrées à traiter est un tampon rouge. */
.sous-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.sous-onglets button { display: inline-flex; align-items: center; gap: 8px; background: var(--papier-clair); color: var(--encre); }
.sous-onglets button[aria-pressed=true] { background: var(--encre); color: var(--papier); box-shadow: none; transform: none; }
.sous-onglets b { font: 400 13px/1 var(--titre); padding: 4px 7px; background: var(--rouge); color: #fff; font-variant-numeric: tabular-nums; }
.sous-onglets b:empty { display: none; }
/* Deuxième niveau : intercalaires plus fins, soulignés en rouge, pour ne pas les confondre avec les catégories. */
.sous-onglets.types { gap: 4px 18px; border-bottom: var(--trait); }
.types button, .types button[aria-pressed=true] { min-height: 40px; padding: 0 2px; border: 0; border-radius: 0; background: none;
  color: var(--encre-douce); box-shadow: none; transform: none; font-size: 14px; }
.types button[aria-pressed=true] { color: var(--encre); box-shadow: inset 0 -4px 0 var(--rouge); }
.types button:hover:not(:disabled) { color: var(--encre); transform: none; box-shadow: inset 0 -4px 0 var(--encre-douce); }
.types button[aria-pressed=true]:hover { box-shadow: inset 0 -4px 0 var(--rouge); }
.barre-mod { margin: 12px 0 16px; padding-bottom: 12px; border-bottom: var(--trait); }
.barre-mod button { margin-left: auto; }
#modRecherche input { flex: 1 1 220px; }
.dossier { display: grid; gap: 12px; margin: 20px 0; padding: 18px; background: var(--papier-clair); border: 3px solid var(--encre); box-shadow: var(--ombre); }
.dossier h3, .dossier h4 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.dossier h4 { margin-top: 8px; font-size: 15px; }
.dossier > button { justify-self: start; }
.dossier dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dossier dt { font-weight: 700; }
.dossier dd { margin: 0; overflow-wrap: anywhere; }
.dossier .entree { box-shadow: none; }
.dossier label:not(.case) { display: grid; gap: 4px; }
.sanction form input { flex: 1 1 220px; }
.fondateur form { margin-top: 10px; }
.don-abo { display: grid; gap: 10px; justify-items: start; }
.don-abo :is(h4, form) { margin: 0; justify-self: stretch; }
.don-abo input[type=number] { width: 6em; }
.fondateur input:not([type=checkbox]) { flex: 1 1 160px; }
/* Ma fiche : chiffres en tuiles imprimées, sets en lignes cliquables qui mènent à la collection. */
.profil { display: grid; gap: 12px; }
.profil h4 { margin: 16px 0 0; font: 400 1.2rem/1.1 var(--titre); }
.identite h3 { margin: 0; font-size: 2rem; }
.identite p { margin: 4px 0 0; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tuile { display: grid; align-content: start; padding: 10px 14px; background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); }
.tuile b { font: 400 1.6rem/1.1 var(--titre); font-variant-numeric: tabular-nums; }
.tuile span { font-size: 14px; font-weight: 500; color: var(--encre-douce); }
.raretes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; }
.raretes li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.raretes i, .chances i, .rarete-liste i { display: grid; place-items: center; width: 30px; aspect-ratio: 1; font: 400 16px/1 var(--titre); font-style: normal;
  background: var(--r); color: #fff; border: var(--trait); border-radius: 3px; }
.raretes b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sets-fiche { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sets-fiche button { width: 100%; display: grid; grid-template: "nom barre nb" auto "note note note" auto / minmax(0, 14rem) 1fr auto;
  align-items: center; gap: 6px 14px; padding: 10px 14px; text-align: left; }
.sets-fiche .set-nom { grid-area: nom; }
.sets-fiche .progres { grid-area: barre; height: 12px; }
.sets-fiche b { grid-area: nb; font-variant-numeric: tabular-nums; }
.sets-fiche small { grid-area: note; font-weight: 500; color: var(--encre-douce); }
@media (max-width: 560px) { .sets-fiche button { grid-template: "nom nb" auto "barre barre" auto "note note" auto / 1fr auto; } }
button.danger { background: repeating-linear-gradient(-45deg, var(--rouge-fonce) 0 6px, var(--rouge) 6px 12px); }
fieldset.droits { margin: 0; padding: 4px 14px 8px; border: var(--trait); }
fieldset.droits legend { font-weight: 700; padding: 0 6px; }
#equipeForm > button { justify-self: start; }
code { font: 500 14px/1.3 ui-monospace, Consolas, monospace; background: var(--papier-fonce); padding: 1px 5px; }

/* Menu « Plus » : une planche de tuiles imprimées, chacune avec son kanji en tampon vertical, comme la marque. */
nav b, #menuPlus b { font: 400 12px/1 var(--titre); padding: 3px 6px; background: var(--rouge); color: #fff; font-variant-numeric: tabular-nums; }
nav button { position: relative; }
#souhaitBadge { background: var(--encre); color: var(--papier); white-space: nowrap; }
nav button.on #souhaitBadge { background: var(--papier); color: var(--encre); }
#menuPlus { position: fixed; inset: auto; margin: 0; width: 22rem; max-width: calc(100vw - 16px); padding: 12px; color: var(--encre);
  background: var(--papier-clair); border: 3px solid var(--encre); border-radius: 3px; box-shadow: var(--ombre); overflow: visible;
  transition: opacity var(--vite), translate var(--vite); }
#menuPlus:popover-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@starting-style { #menuPlus:popover-open { opacity: 0; translate: 0 -6px; } }
#menuPlus :is(button, a) { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px; text-align: left;
  background: var(--papier); color: var(--encre); border: var(--trait); border-radius: 3px; box-shadow: var(--ombre-s);
  font: 700 15px/1.2 var(--texte); text-decoration: none; transition: transform var(--vite), box-shadow var(--vite); }
#menuPlus a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--portee); }
#menuPlus a:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--portee); }
#menuPlus .kanji { flex: none; display: grid; place-items: center; width: 40px; height: 44px; writing-mode: vertical-rl; font-size: 15px; line-height: 1;
  letter-spacing: .06em; background: var(--encre); color: var(--papier); border-radius: 2px; transition: background var(--vite), color var(--vite); }
#menuPlus :is(button, a):hover .kanji { background: var(--rouge); color: #fff; }
#menuPlus b { margin-left: auto; }
/* Amis, parrainage, classement : mêmes cases que le journal. */
:is(.amis, .parrainage) { display: grid; gap: 12px; }
:is(.amis, .parrainage) h4 { margin: 16px 0 0; font: 400 1.2rem/1.1 var(--titre); }
:is(#amiForm, #parrainForm) input, #lienParrain, #clRecherche { flex: 1 1 220px; }
.entree.ami .gestes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.entree.ami button.lien { min-height: 36px; }
.entree .gestes button:not(.sec) { min-height: 36px; padding: 0 12px; font-size: 14px; }
.parrainage { max-width: 760px; }
.parrainage > p { margin: 0; }
.regles-parrain { margin: 0; padding-left: 1.2em; }
.regles-parrain li { margin: .3em 0; }
.identite p button { margin-left: 6px; }
#v-classement .ligne { margin: 12px 0; }
.classement { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.classement li { display: flex; align-items: center; gap: 12px; padding: 4px 14px; background: var(--papier-clair); border: var(--trait); }
.classement .place { min-width: 3ch; font: 400 1.2rem/1 var(--titre); font-variant-numeric: tabular-nums; }
.classement .lien { font-weight: 700; color: var(--encre); overflow-wrap: anywhere; text-align: left; }
.classement b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.classement li.moi { background: var(--encre); color: var(--papier); box-shadow: var(--ombre-s); }
.classement li.moi .lien { color: var(--papier); }
/* Avis des joueurs : étoiles d'encre remplies au rouge d'impression, répartition en barres. */
.hors-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
textarea { display: block; width: 100%; font: 500 16px/1.5 var(--texte); padding: 10px 12px; color: var(--encre);
  background: var(--papier-clair); border: var(--trait); border-radius: 3px; resize: vertical; }
.etoiles { position: relative; display: inline-flex; flex: none; vertical-align: -.15em; }
:is(.etoiles, .repartition, .noter) svg { width: 1.1em; height: 1.1em; flex: none; fill: var(--papier-clair); stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }
.etoiles .pleines { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; width: calc(var(--n) / 5 * 100%); }
:is(.etoiles .pleines, .repartition) svg { fill: var(--rouge); }
.avis { display: grid; gap: 12px; max-width: 760px; }
.avis h4 { margin: 16px 0 0; font: 400 1.2rem/1.1 var(--titre); }
.avis > p { margin: 0; }
.avis-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center; padding: 14px 18px;
  background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); }
.avis-note { display: grid; justify-items: center; gap: 2px; }
.avis-note b { font: 400 3.4rem/1 var(--titre); font-variant-numeric: tabular-nums; }
.avis-note .sur { font-weight: 700; }
.avis-note .etoiles { font-size: 1.4rem; margin: 4px 0; }
.avis-note small { font-size: 14px; font-weight: 500; color: var(--encre-douce); }
.repartition { display: grid; gap: 2px; }
.repartition button { display: grid; grid-template-columns: 1ch 1.1em minmax(0, 1fr) 4ch; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px;
  background: none; color: var(--encre); border-color: transparent; box-shadow: none; font-variant-numeric: tabular-nums; }
.repartition button:is(:hover, :active):not(:disabled) { transform: none; box-shadow: none; border-color: var(--encre); }
.repartition button[aria-pressed=true] { background: var(--papier-fonce); border-color: var(--encre); }
.repartition i { height: 12px; border: var(--trait); background: linear-gradient(90deg, var(--rouge) var(--p), var(--papier) 0); }
.repartition b { text-align: right; }
.mon-avis { display: grid; gap: 8px; padding: 14px 18px; background: var(--papier-clair); border: var(--trait); }
.mon-avis h4 { margin: 0; }
.mon-avis textarea { background: var(--papier); }
.mon-avis .info { margin: 0; }
.mon-avis .ligne { margin-top: 4px; }
.noter { display: flex; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.noter legend { font-weight: 700; padding: 0; }
.noter label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.noter svg { width: 34px; height: 34px; transition: fill var(--vite); }
.noter :where(label:has(input:checked), label:has(~ label input:checked)) svg { fill: var(--rouge); }
@media (hover: hover) {
  .noter:hover label svg { fill: var(--papier-clair); }
  .noter:hover :is(label:hover, label:has(~ label:hover)) svg { fill: var(--rouge); }
}
.noter label:has(input:focus-visible) { outline: 3px solid var(--rouge); outline-offset: -2px; }
.avis-liste .etoiles { font-size: 15px; }
.avis-liste time { margin-left: auto; }
.avis-texte { white-space: pre-line; overflow-wrap: anywhere; }
.reponse { flex: 1 1 100%; margin-top: 4px; padding: 8px 12px; border-left: 4px solid var(--rouge); background: var(--papier-fonce); }
.reponse b { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.reponse p { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.avis-liste .gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.avis-mod { flex: 1 1 100%; margin-top: 6px; }
@media (max-width: 560px) { .avis-tete { grid-template-columns: 1fr; } }
/* Sur la couverture */
.avis-accueil { margin: 0 0 1.4em; padding: 12px 14px; border: var(--trait); background: var(--papier); }
.avis-accueil h2 { margin: 0 0 6px; font-size: 1.15rem; }
.avis-accueil p { margin: 0; }
.avis-accueil ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.avis-accueil li { padding-top: 8px; border-top: 1px dashed var(--encre); }
.avis-accueil .avis-texte { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Grade : un sceau rouge par palier et la jauge vers le suivant */
.grade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 10px; padding: 12px 14px; background: var(--papier-clair); border: var(--trait); }
.grade p { margin: 0; }
.grade p:first-child b { margin-right: 8px; font: 400 1.4rem/1.1 var(--titre); }
.grade .jauge { margin: 8px 0 6px; }
.hanko { display: inline-grid; place-items: center; flex: none; width: 56px; aspect-ratio: 1; border: 2px solid var(--encre); border-radius: 6px; background: var(--rouge); color: #fff; font: 400 30px/1 var(--titre); rotate: -4deg; box-shadow: var(--ombre-s); }
.classement .hanko { width: 30px; border-radius: 4px; font-size: 16px; rotate: 0deg; box-shadow: none; }
.regles-grade { margin-top: 10px; }
.regles-grade p { margin: .4em 0; }
.identite .gestes-profil { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.identite .gestes-profil button { margin: 0; }
.choix-vitrine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 0; color: var(--encre-douce); }

/* Vitrine : la carte favorite en grand à côté des cartes choisies */
.vitrine { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.vitrine:has(.favorite) { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); align-items: start; }
.vitrine .grille { margin-top: 0; }
.favorite { margin: 0; }
.favorite figcaption { margin-top: 8px; font: 400 1rem/1.2 var(--titre); text-align: center; }
@media (max-width: 560px) {
  .grade p:first-child b { display: block; }
  .vitrine:has(.favorite) { grid-template-columns: minmax(0, 1fr); }
  .favorite { justify-self: center; width: min(220px, 70%); }
}

/* Fiche partagée sur la couverture, pour un visiteur sans compte */
.fiche-accueil { margin: 0 0 1.4em; padding: 12px 14px; border: var(--trait); background: var(--papier); }
.fiche-accueil h2 { margin: 0; font-size: 1.6rem; }
.fiche-accueil h2 small { display: block; font: 700 13px/1.4 var(--texte); color: var(--rouge-texte); text-transform: uppercase; letter-spacing: .08em; }
.fiche-accueil .grade { padding: 8px 10px; gap: 10px; }
.fiche-accueil .hanko { width: 44px; font-size: 24px; }
.fiche-accueil .vitrine, .fiche-accueil .vitrine:has(.favorite) { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
.fiche-accueil .favorite { justify-self: center; width: min(160px, 55%); }
.fiche-accueil .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

/* Bulle de dialogue */
/* popover : passe au-dessus d'une fiche ouverte (couche du dessus) */
#toast { position: fixed; inset: auto auto 28px 50%; margin: 0; overflow: visible; color: var(--encre); z-index: 50; translate: -50% 200px; max-width: calc(100vw - 32px);
  background: var(--papier-clair); border: 3px solid var(--encre); border-radius: 24px; padding: 10px 22px; font-weight: 700;
  box-shadow: var(--ombre-s); transition: translate .25s cubic-bezier(.2, 1.4, .4, 1); }
#toast::before, #toast::after { content: ""; position: absolute; top: 100%; }
#toast::before { left: 26px; border-left: 16px solid var(--encre); border-bottom: 16px solid transparent; }
#toast::after { left: 29px; margin-top: -4px; border-left: 10px solid var(--papier-clair); border-bottom: 11px solid transparent; }
#toast.show { translate: -50% 0; }
#toast.bref { padding: 4px 14px; font-size: .85rem; border-width: 2px; }
#toast.bref::before, #toast.bref::after { display: none; }
@starting-style { #toast.show { translate: -50% 200px; } }
#toast.err { color: var(--alerte); border-color: var(--alerte); }
#toast.err::before { border-left-color: var(--alerte); }

/* Nouvelle version en ligne : sous .voile (40), pour attendre la fin d'une ouverture de booster. */
#majDispo { position: fixed; z-index: 30; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; background: var(--papier-clair); border: var(--trait); box-shadow: var(--ombre-s); font-weight: 700; }

/* Mobile : rubriques en barre du bas */
@media (max-width: 700px) {
  header { padding: 8px 16px; gap: 8px 12px; }
  .marque b { font-size: 1.4rem; }
  .marque small { display: none; }
  .solde { min-width: 0; }
  .outils { order: 3; width: 100%; justify-content: space-between; }
  #deco { min-height: 32px; }
  nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; padding: 0 0 env(safe-area-inset-bottom);
    background: var(--papier-clair); border-top: 3px solid var(--encre); border-bottom: 0; }
  nav :is(button, a) { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 0; font-size: 12px; }
  nav button.on, nav button.on:hover { background: none; color: var(--rouge-texte); box-shadow: inset 0 4px 0 var(--rouge-texte); }
  main { padding-bottom: 32px; }
  #jeu:not([hidden]) ~ .pied { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  #toast { bottom: 96px; }
  #majDispo { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); justify-content: space-between; }
  /* Menu « Plus » : une feuille posée juste au-dessus de la barre du bas */
  #menuPlus { inset: auto 8px calc(71px + env(safe-area-inset-bottom)) 8px; width: auto; max-width: none; }
  @starting-style { #menuPlus:popover-open { opacity: 0; translate: 0 12px; } }
  nav b { position: absolute; top: 4px; left: calc(50% + 6px); }
  #souhaitBadge { left: auto; right: calc(50% + 6px); }
  .connexion-tete { grid-template-columns: 1fr; }
  .calendrier { gap: 4px; }
  .calendrier li { min-height: 46px; padding: 3px 4px; }
  .calendrier li span { font: 700 12px/1 var(--texte); }
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .vol-nom { font-size: 1.1rem; }
  .vol-kanji { font-size: 3rem; }
  /* Coffrets : un par ligne, couché comme un coffret posé à plat */
  #coffrets { grid-template-columns: minmax(0, 1fr); }
  .coffret .volume { aspect-ratio: 16/10; }
  .coffret .vol-nom { font-size: 1.35rem; overflow-wrap: normal; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; }
  .dossier dl { grid-template-columns: 1fr; gap: 0; }
  .dossier dd { margin-bottom: 8px; }
}

/* Pied de page : la dernière page de l'hebdo, avec les pages d'information dans une fenêtre. */
.pied { border-top: 3px solid var(--encre); background: var(--papier-clair); padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.pied-dedans { max-width: 1200px; margin: auto; display: grid; gap: 12px; }
.pied-marque { margin: 0; color: var(--encre-douce); }
.pied-marque .kanji { color: var(--rouge-texte); }
.liens-pied { display: flex; flex-wrap: wrap; gap: 0 18px; }
.liens-pied :is(a, button) { min-height: 44px; display: inline-flex; align-items: center; padding: 0; background: none; border: 0; box-shadow: none;
  color: var(--encre); font: 700 14px/1.2 var(--texte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.liens-pied :is(a, button):hover:not(:disabled) { transform: none; box-shadow: none; color: var(--rouge-texte); }
.pages h2 { margin: 0 0 12px; font-size: 1.6rem; }
.pages h3 { margin: 18px 0 4px; font-size: 1.1rem; }
.pages li { margin: .45em 0; }
/* Conditions et Confidentialité, à leur propre adresse. */
.page-legale { max-width: 72ch; margin: 0 auto; padding: 16px 16px 32px; }
.page-legale header { position: static; padding: 0 0 8px; }
.page-legale main { padding: 0; }
.page-legale .retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--encre); font: 400 1.2rem var(--titre); text-decoration: none; }
.page-legale .retour .kanji { color: var(--rouge-texte); }
.page-legale h1 { margin: 8px 0 12px; font-size: 2rem; }
.page-legale h3 { margin: 24px 0 4px; font-size: 1.1rem; scroll-margin-top: 16px; }
.page-legale li { margin: .45em 0; }
.page-legale footer { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 32px; }
.supprimer-compte { margin-top: 32px; padding-top: 8px; border-top: var(--trait); }
.supprimer-compte summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.pages .ligne { margin-top: 16px; }
.rarete-liste { list-style: none; padding: 0; display: grid; gap: 8px; }
.rarete-liste li { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; align-items: start; margin: 0; padding: 8px 0; border-bottom: 2px dashed var(--encre); }
.rarete-liste i { grid-row: span 2; width: 34px; font-size: 17px; }
.rarete-liste small { color: var(--encre-douce); }
a.bouton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: var(--trait); border-radius: 3px; background: var(--encre); color: var(--papier);
  font-weight: 700; text-decoration: none; }

/* Booster du jour : une bande de papier imprimé collée au bord droit de l'écran, à la façon de l'obi d'un volume. */
.du-jour { position: fixed; z-index: 20; right: 0; top: 50%; translate: 0 -50%; display: grid; gap: 10px 2px; justify-items: center; width: 70px; min-height: 0; padding: 0 0 12px;
  grid-template: "sceau sceau" auto "serie titre" auto "tampon tampon" auto / 1fr 1fr; overflow: hidden;
  background: var(--papier-clair); color: var(--encre); border-right: 0; border-radius: 0; box-shadow: -4px 4px 0 var(--portee); animation: du-jour-entree 320ms ease-out; }
.du-jour:hover:not(:disabled) { transform: translateX(-4px); box-shadow: -6px 4px 0 var(--portee); }
.du-jour:active:not(:disabled) { transform: translateX(2px); box-shadow: -2px 2px 0 var(--portee); }
.du-jour::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: var(--trame) 0 0 / 5px 5px; opacity: .16; pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000); }
.du-jour-sceau { grid-area: sceau; display: grid; place-items: center; width: 100%; height: 58px; background: linear-gradient(160deg, var(--c1), var(--c2)); color: #fff; border-bottom: var(--trait);
  font: 400 26px/1 var(--titre); text-shadow: 1px 1px 0 var(--encre); }
.du-jour-titre, .du-jour-serie { writing-mode: vertical-rl; }
.du-jour-titre { grid-area: titre; font: 400 16px/1.1 var(--titre); }
.du-jour-serie { grid-area: serie; font: 700 13px/1.15 var(--texte); color: var(--encre-douce); }
.du-jour-tampon { grid-area: tampon; padding: 2px 5px; color: var(--rouge); border: 2px solid currentColor; rotate: -7deg; font: 400 11px/1.2 var(--titre); }
@keyframes du-jour-entree { from { transform: translateX(100%); } }
/* Marge étroite à côté de la page, ou écran peu haut : languette fine, la série se lit à sa couleur et à son kanji. */
@media (max-width: 1339px), (max-height: 520px) {
  .du-jour { width: 36px; gap: 8px; padding-bottom: 8px; grid-template: "sceau" auto "titre" auto "tampon" auto / 1fr; box-shadow: -3px 3px 0 var(--portee); }
  .du-jour-sceau { height: 36px; font-size: 18px; }
  .du-jour-titre { font-size: 12px; }
  .du-jour-serie { display: none; }
  .du-jour-tampon { writing-mode: vertical-rl; padding: 4px 1px; font-size: 10px; rotate: none; }
}
@media (max-height: 420px) and (min-width: 1261px) { .du-jour-tampon { display: none; } }
/* Plus de marge du tout (tablette, téléphone) : la languette couvrirait le contenu et ses boutons. Le bandeau devient une bande horizontale dans la page, sous la navigation. */
@media (max-width: 1260px) {
  .du-jour { position: relative; top: auto; right: auto; translate: none; animation: none; width: min(100% - 32px, 1168px); min-height: 56px; margin: 14px auto; padding: 0 14px 0 0;
    grid-template: "sceau titre tampon" 1fr "sceau serie tampon" 1fr / 54px 1fr auto; gap: 0 12px; justify-items: start; align-items: center; text-align: left; border-right: var(--trait); box-shadow: var(--ombre-s); }
  .du-jour:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--portee); }
  .du-jour:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--portee); }
  .du-jour-sceau { height: 100%; font-size: 24px; border-bottom: 0; border-right: var(--trait); }
  .du-jour-titre, .du-jour-serie, .du-jour-tampon { writing-mode: horizontal-tb; }
  .du-jour-titre { align-self: end; font-size: 15px; }
  .du-jour-serie { display: block; align-self: start; }
  .du-jour-tampon { padding: 2px 5px; font-size: 11px; rotate: -7deg; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Soutenir : les paliers, le sceau d'abonné (rond, pour ne pas le confondre avec le sceau carré du grade), les fonds de fiche */
.soutenir { display: grid; gap: 14px; }
.soutenir > h3 { margin: 12px 0 0; font: 400 1.5rem/1.1 var(--titre); }
.soutenir > h4 { margin: 12px 0 0; font: 400 1.2rem/1.1 var(--titre); }
.soutenir > p { margin: 0; }
.soutenir .chapo { font-weight: 700; max-width: 65ch; }
.soutenir .encart { display: grid; gap: 6px; justify-items: start; }
.soutenir .encart p { margin: 0; font-weight: 400; }
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.palier { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: var(--trait); box-shadow: var(--ombre-s); background: var(--papier-clair); }
.palier.on { outline: 3px solid var(--rouge); outline-offset: 2px; }
.palier h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 1.4rem/1.1 var(--titre); }
.palier h3 .sceau-abo { margin: 0; }
.palier .prix { margin: 0; }
.palier .prix b { font: 400 1.8rem/1 var(--titre); }
.palier ul { flex: 1; margin: 0; padding-left: 1.2em; }
.palier li { margin: .3em 0; }
.palier > :last-child:not(ul) { margin: 8px 0 0; }
.sceau-abo { display: inline-grid; place-items: center; width: 28px; aspect-ratio: 1; margin-left: 8px; border-radius: 50%; background: var(--encre); color: var(--papier); font: 400 15px/1 var(--titre); vertical-align: middle; rotate: 6deg; }
.classement li.moi .sceau-abo { background: var(--papier); color: var(--encre); }
/* Pseudos en couleur. Un dégradé n'a pas de --teinte-pseudo : son texte reste transparent et laisse voir le fond découpé. */
[data-couleur="vermillon"] { --teinte-pseudo: light-dark(#b3261e, #ff8a75); }
[data-couleur="indigo"] { --teinte-pseudo: light-dark(#1f4e8c, #8db8f0); }
[data-couleur="pin"] { --teinte-pseudo: light-dark(#1d6b45, #6fcf9a); }
[data-couleur="ocre"] { --teinte-pseudo: light-dark(#7f5300, #e8b44c); }
[data-couleur="sakura"] { --teinte-pseudo: light-dark(#a82a58, #f48fb1); }
[data-couleur="aube"] { --degrade: light-dark(#b3261e, #ff8a75), light-dark(#7f5300, #e8b44c); }
[data-couleur="maree"] { --degrade: light-dark(#1f4e8c, #8db8f0), light-dark(#1d6b45, #6fcf9a); }
[data-couleur="floraison"] { --degrade: light-dark(#a82a58, #f48fb1), light-dark(#b3261e, #ff8a75); }
:is(.pseudo-abo, button.pastille)[data-couleur]:not([data-couleur=""]) { color: var(--teinte-pseudo, transparent); }
:is(.pseudo-abo, button.pastille):is([data-couleur="aube"], [data-couleur="maree"], [data-couleur="floraison"]) {
  background-image: linear-gradient(90deg, var(--degrade)); -webkit-background-clip: text; background-clip: text; }
/* Ma ligne du classement est en négatif : la couleur se pose sur du papier, comme sur une pastille. La dernière couche vide garde ce papier sous le texte découpé. */
.classement li.moi .pseudo-abo { background-color: var(--papier); padding: 0 4px; }
:is(button.pastille, .classement li.moi .pseudo-abo):is([data-couleur="aube"], [data-couleur="maree"], [data-couleur="floraison"]) {
  background-image: linear-gradient(90deg, var(--degrade)), none; -webkit-background-clip: text, border-box; background-clip: text, border-box; }
.titre-abo { margin: 4px 0 0; font: 400 1.05rem/1.2 var(--titre); }
.apercu-pseudo { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 8px 10px; background: var(--papier); font: 400 1.2rem/1.2 var(--titre); overflow-wrap: anywhere; }
.apercu-pseudo small { flex-basis: 100%; margin-top: 2px; font-size: .85rem; }
.soutenir details > summary { padding: 10px 0; font-weight: 700; cursor: pointer; }
.questions p { margin: 0 0 10px; max-width: 65ch; }
.table-paliers { overflow-x: auto; }
.comparatif table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.comparatif :is(th, td) { padding: 6px 4px; border-bottom: 1px solid var(--encre-douce); text-align: center; font-weight: 400; }
.comparatif thead th { font: 400 13px/1.2 var(--titre); }
.comparatif tbody th { text-align: left; font-weight: 500; }
.comparatif td b { font-weight: 700; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { min-height: 44px; }
span.pastille { display: inline-flex; align-items: center; min-height: 0; padding-right: 12px; }
button.pastille { background-color: var(--papier-clair); }
.pastille[aria-pressed="true"] { outline: 3px solid var(--rouge); outline-offset: 2px; }
.mur { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-weight: 700; }
.vote-fondateur form { display: grid; gap: 10px; margin-top: 10px; max-width: 480px; }
.vote-fondateur label { display: grid; gap: 4px; font-weight: 500; }
/* Fonds de fiche : trames maison, assez légères pour garder le texte lisible. */
:is(.profil, .fiche-accueil, .pastille)[data-fond] { --motif: color-mix(in srgb, var(--encre) 11%, transparent); }
.profil[data-fond] { padding: 16px; border: var(--trait); box-shadow: var(--ombre-s); background-color: var(--papier-clair); }
:is(.profil, .fiche-accueil, .pastille)[data-fond="points"] { background-image: radial-gradient(circle, var(--motif) 1.8px, transparent 2.2px); background-size: 10px 10px; }
:is(.profil, .fiche-accueil, .pastille)[data-fond="vitesse"] { background-image: repeating-conic-gradient(from 0deg at 50% 0, var(--motif) 0 1.5deg, transparent 1.5deg 5deg); }
:is(.profil, .fiche-accueil, .pastille)[data-fond="hachures"] { background-image: repeating-linear-gradient(135deg, var(--motif) 0 2px, transparent 2px 9px); }
:is(.profil, .fiche-accueil, .pastille)[data-fond="damier"] { background-image: repeating-conic-gradient(var(--motif) 0 25%, transparent 0 50%); background-size: 24px 24px; }