/* Entrée par licence (12/10/2026) — la page des cartes à collectionner : une carte postale par licence, et la
   page de choix d'une recherche par texte. Uniquement des variables du design (--u-*, --r-*, --gutter) : aucun
   style en ligne (CSP), aucun hôte tiers, aucune image de fond externe. Mobile d'abord (390 px, DEUX colonnes),
   puis 768 (trois) et 1280 (cinq). Cibles tactiles : la carte postale entière est un lien (plus de 44 px),
   les liens de la page de choix ont 48 px. */

.entree{display:flex;flex-direction:column;gap:10px}
.entree__titre{margin:0;font-size:clamp(26px,6.4vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:700;overflow-wrap:anywhere}
.entree__intro{margin:0;max-width:60ch;color:var(--u-muted);font-size:15px;line-height:1.4}

/* La grille : deux colonnes à 390, trois dès 768, cinq dès 1280. `minmax(0,1fr)` : rien ne déborde. */
.postales{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gutter)}
@media (min-width:768px){.postales{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}}
@media (min-width:1280px){.postales{grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 24px}}
.postales__item{min-width:0}

/* Les couleurs de chaque licence (le dégradé du repli, et la teinte du cadre) — des couleurs, jamais un logo. */
.postale{--p1:var(--u-a1);--p2:var(--u-a2)}
.postale--pokemon{--p1:#ffcb05;--p2:#2a4fa8}
.postale--one_piece{--p1:#e2403a;--p2:#16294a}
.postale--lorcana{--p1:#7a4fd0;--p2:#e8b94a}
.postale--magic{--p1:#d9692a;--p2:#2a1c3f}
.postale--riftbound{--p1:#19b8bd;--p2:#1b2a73}

.postale{display:flex;flex-direction:column;gap:12px;min-height:44px;color:var(--u-ink);text-decoration:none;border-radius:var(--r-s)}
/* Le cadre : un papier clair, une ombre, un léger penchement — une carte postale posée sur la table. */
.postale__cadre{display:block;padding:7px;border-radius:5px;background:#f3eee2;box-shadow:0 14px 28px rgba(0,0,0,.42),inset 0 0 0 1px rgba(0,0,0,.08);transform:rotate(-1.1deg);transition:transform var(--u-dur) var(--u-ease),box-shadow var(--u-dur) var(--u-ease)}
.postales__item:nth-child(even) .postale__cadre{transform:rotate(.9deg)}
.postale:hover .postale__cadre,.postale:focus-visible .postale__cadre{transform:rotate(0) translateY(-4px);box-shadow:0 20px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.08)}
@media (prefers-reduced-motion:reduce){.postale__cadre,.postales__item:nth-child(even) .postale__cadre{transform:none;transition:none}}

/* L'image : le visuel d'une carte phare (notre domaine), ou le dégradé de la licence — l'un OU l'autre, le
   dégradé est le fond du cadre : une image qui tarde à charger ne laisse jamais un trou blanc. */
.postale__image{position:relative;display:block;aspect-ratio:5/7;overflow:hidden;border-radius:3px;background:linear-gradient(150deg,var(--p1),var(--p2))}
.postale__visuel{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.postale__repli{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(72px,22vw,120px);font-weight:700;line-height:1;color:rgba(255,255,255,.34);text-shadow:0 2px 0 rgba(0,0,0,.18)}

.postale__legende{display:flex;flex-direction:column;gap:2px;padding:0 4px;min-width:0}
.postale__nom{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.postale__chiffre{font-family:var(--f-data);font-size:13px;color:var(--u-muted)}
.postale__stock{font-family:var(--f-data);font-size:13px;color:var(--u-a3)}
@media (min-width:768px){.postale__nom{font-size:22px}}

/* La page de choix d'une recherche par texte (une ligne par licence). */
.page-choix{padding-top:14px;padding-bottom:40px;display:flex;flex-direction:column;gap:12px}
.page-choix__titre{margin:0;font-size:clamp(24px,6vw,38px);letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.page-choix__texte{margin:0;color:var(--u-muted);font-size:15px}
.choix{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.choix__ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nom liens" "nb liens";align-items:center;gap:2px 12px;padding:10px 14px;border-radius:var(--r-s);background:var(--u-surface);min-height:64px}
.choix__nom{grid-area:nom;font-size:18px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.choix__nb{grid-area:nb;font-family:var(--f-data);font-size:13px;color:var(--u-muted)}
.choix__liens{grid-area:liens;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.choix__lien{min-height:48px;min-width:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px}
.page-choix__retour{margin:6px 0 0}
.page-choix__lien{display:inline-flex;align-items:center;min-height:48px;color:var(--u-a1);text-decoration:underline;text-underline-offset:3px}

/* Le menu déroulant de la rareté (liste d'une licence) et le lien vers les licences. */
.facette__choix{display:flex;flex-direction:column;gap:8px}
.facette__appliquer{min-height:44px;scroll-margin-bottom:96px}
.chasse-licence{display:inline-flex;align-items:center;min-height:44px;color:var(--u-a1);text-decoration:underline;text-underline-offset:3px;font-size:14px}

/* Sous les cartes postales : la recherche, le deck et la collection — sans la tuile du récit, la grille du bento
   (pensée pour elle) laissait des trous : dès 768 px, une rangée souple. */
@media (min-width:768px){
  .corps-entree [data-layout="bento"]{display:flex;flex-wrap:wrap;gap:var(--gutter)}
  .corps-entree [data-layout="bento"] > .tuile{min-height:170px}
  .corps-entree [data-layout="bento"] > .tuile--chasse{flex:1 1 360px}
  .corps-entree [data-layout="bento"] > .tuile--deck,.corps-entree [data-layout="bento"] > .tuile--collection{flex:0 1 260px}
}

/* Séries par licence (13/10/2026, fondateur : « j'ai des filtres de séries Pokémon dans Magic ») — une licence
   COCHÉE mais pas encore APPLIQUÉE : la requête est en cours, ou en échec (E4 garde la colonne des filtres), ou,
   sans JavaScript, le client n'a pas encore pressé « Voir … » — et au retour arrière, où le navigateur rend la
   page telle qu'on l'a quittée. La case que le SERVEUR a cochée (l'attribut `checked`) ne l'est plus (`:checked`) :
   ce qui dépend de la licence (`data-suit-licence` : série, extension, rareté, personnage, leurs pastilles, leurs
   lignes « Retirer » du zéro résultat, et les tranches de prix — des liens vers la liste servie, série comprise)
   désigne l'ANCIENNE licence et s'efface — jamais une série de Pokémon à côté de Magic. Sans `:has()`, la règle
   est ignorée et rien ne change. */
.chasse:has(input[name="licence"][checked]:not(:checked)) [data-suit-licence]{display:none}
/* …et l'ancienne licence perd la coche du serveur (`option--choisie`, le repli sans `:has()`) : une seule
   licence paraît cochée, celle que le client vient de choisir. */
.chasse .option--choisie:has(input:not(:checked)){background:var(--u-surface);color:inherit;font-weight:inherit}
.chasse .option--choisie:has(input:not(:checked)) .option__nb{color:var(--u-muted)}
@media (min-width:1280px){
  .chasse .option--choisie:has(input:not(:checked)){background:none}
  .chasse .option--choisie:has(input:not(:checked)) .option__case{background:none;box-shadow:inset 0 0 0 1.5px var(--u-muted)}
  .chasse .option--choisie:has(input:not(:checked)) .option__case::after{content:none}
}