/* Carte : proportions 5:7, tout en unités cqw (proportionnel à la largeur de la carte). */
/* La carte : proportions 5:7, tout en cqw */
.carte{--couleur:var(--teinte);--w:260px;width:var(--w);max-width:100%;aspect-ratio:5/7;container-type:inline-size;perspective:1000px;position:relative;outline:none;border-radius:12px;-webkit-tap-highlight-color:transparent}
.carte:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.carte__incline{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.carte.actif .carte__incline{transition:transform 90ms linear}
.carte__pivot{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.carte.retournee .carte__pivot{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:4cqw;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:var(--ombre-repos);display:flex;flex-direction:column;padding:4.5cqw;gap:3cqw;
  border:1.4cqw solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--cadre) border-box}
.carte:hover .face,.carte.actif .face{box-shadow:var(--ombre-leve)}
.verso{transform:rotateY(180deg);gap:2.6cqw}
/* Chaque rang a sa matière : un cadre en dégradé métallique (argent, émeraude, saphir, améthyste, or), de plus en plus épais et lumineux */
.carte.r1{--cadre:linear-gradient(135deg,#E6E9EF,#8B94A3 38%,#CBD1DB 58%,#6E7888);--teinte:var(--r1)}
.carte.r2{--cadre:linear-gradient(135deg,#A4E4C6,#2F8F6B 38%,#B9ECD3 58%,#1E6B4D);--teinte:var(--r2)}
.carte.r3{--cadre:linear-gradient(135deg,#B0CDF7,#2E6FD6 38%,#C8DDFA 58%,#1F4FA3);--teinte:var(--r3)}
.carte.r4{--cadre:linear-gradient(135deg,#E0BDF5,#9B5BD6 38%,#EED7F9 58%,#6B2FA8);--teinte:var(--r4);--foil:.2}
.carte.r5{--cadre:linear-gradient(135deg,#E6CD72,#C9961A 35%,#F0DC9A 55%,#A87A0E);--teinte:#C9961A;--foil:.5}
.carte.r1 .face{border-width:.9cqw}
.carte.r2 .face{border-width:1.1cqw;box-shadow:0 0 2.4cqw color-mix(in srgb,var(--r2) 20%,transparent),var(--ombre-repos)}
.carte.r3 .face{border-width:1.3cqw;box-shadow:0 0 3.2cqw color-mix(in srgb,var(--r3) 24%,transparent),var(--ombre-repos)}
.carte.r4 .face{border-width:1.5cqw}
.carte.r5 .face{border-width:1.8cqw}
.carte.r2 .face::after{content:"";position:absolute;inset:2.1cqw;border:.5cqw solid var(--r2);border-radius:1.6cqw;pointer-events:none}   /* le liseré se place entre la bordure et le contenu (le contenu commence à 4,5 cqw) */
.carte.r3 .face::after,.carte.r4 .face::after{content:"";position:absolute;inset:2.1cqw;border:.7cqw solid var(--teinte);border-radius:1.6cqw;pointer-events:none;
  /* Seuls les quatre coins du liseré restent visibles : ils suivent l'arrondi du cadre au lieu d'être des équerres droites */
  --coin:linear-gradient(#000 0 0);
  -webkit-mask:var(--coin) 0 0/8cqw 8cqw no-repeat,var(--coin) 100% 0/8cqw 8cqw no-repeat,var(--coin) 0 100%/8cqw 8cqw no-repeat,var(--coin) 100% 100%/8cqw 8cqw no-repeat;
  mask:var(--coin) 0 0/8cqw 8cqw no-repeat,var(--coin) 100% 0/8cqw 8cqw no-repeat,var(--coin) 0 100%/8cqw 8cqw no-repeat,var(--coin) 100% 100%/8cqw 8cqw no-repeat}
.carte.r4 .face{box-shadow:0 0 0 .3cqw color-mix(in srgb,var(--r4) 28%,transparent),0 0 4cqw color-mix(in srgb,var(--r4) 26%,transparent),var(--ombre-repos)}
.carte.r5 .face{box-shadow:0 0 5cqw color-mix(in srgb,#C9961A 30%,transparent),var(--ombre-repos)}
/* Couleur d'ambiance : la teinte du rang (la même que celle de l'image retravaillée), très légère, sur le fond de la carte et de l'image */
.carte.coloree .face{background:linear-gradient(color-mix(in srgb,var(--couleur) 10%,var(--surface)),color-mix(in srgb,var(--couleur) 10%,var(--surface))) padding-box,var(--cadre) border-box}
.carte.coloree .image{background:color-mix(in srgb,var(--couleur) 13%,var(--surface))}
.foil{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.42),transparent 38%),
   linear-gradient(115deg,transparent 22%,rgba(255,60,170,.38) 36%,rgba(60,210,255,.38) 50%,rgba(255,235,60,.38) 64%,transparent 78%);
  background-size:100% 100%,220% 220%;background-position:0 0,var(--bx,50%) var(--by,50%)}
/* Effets au survol : rangs 1 et 2 aucun ; rang 3 une lueur blanche qui suit le pointeur ; rangs 4 et 5 reflet holographique */
.carte.r4 .foil,.carte.r5 .foil{opacity:calc((.12 + var(--foil,0)*.5)*var(--survol,0))}
.carte.r3 .foil{opacity:calc(.6*var(--survol,0));background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.95),rgba(255,255,255,.35) 32%,transparent 62%)}
.entete-carte{display:flex;justify-content:space-between;align-items:center;min-height:11cqw}
/* Au recto, l'image occupe le haut de la carte ; la catégorie et le rang sont posés par-dessus */
.recto .entete-carte{position:absolute;top:7.5cqw;left:7.5cqw;right:7.5cqw;min-height:0;z-index:2}
.cat{font:600 4cqw var(--titre);color:var(--cat-texte,var(--marque));text-shadow:0 .2cqw .4cqw rgba(0,0,0,.18);background:var(--cat,color-mix(in srgb,var(--surface) 90%,transparent));padding:1.1cqw 3cqw;border-radius:999px}
.badge{margin-left:auto;width:11.5cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:700 6.4cqw var(--titre);color:#fff;background:var(--teinte)}
.carte.r4 .badge{box-shadow:0 0 0 .8cqw var(--surface),0 0 0 1.5cqw var(--r4)}
.carte.r5 .badge{background:linear-gradient(135deg,#E6CD72,#C9961A 50%,#A87A0E);color:#3a2a00;box-shadow:0 0 0 .8cqw var(--surface),0 0 0 1.5cqw #C9961A}
.image{position:relative;flex:none;height:68cqw;border-radius:2.4cqw;background:color-mix(in srgb,var(--teinte) 13%,var(--surface));display:grid;place-items:end center;overflow:hidden}
.image svg{width:78%;height:auto;display:block}
.image__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nom{font:700 7.4cqw/1.12 var(--titre);color:var(--encre);margin-top:.5cqw;text-align:center;text-transform:capitalize;flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.phrase{font:italic 400 4.2cqw/1.3 var(--texte);color:var(--doux);text-align:center;flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.faits{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;border-top:.4cqw solid var(--brume);padding-top:2.4cqw}
.fait{display:grid;justify-items:center;gap:.8cqw;font:500 3.7cqw/1.2 var(--titre);color:var(--encre);text-align:center;min-width:0}
.fait{grid-template-rows:6cqw auto}
.fait svg{width:6cqw;height:6cqw;stroke:var(--marque);fill:none;stroke-width:1.6}
.pied{position:absolute;right:5.5cqw;bottom:3cqw;font:500 3.4cqw var(--titre);color:var(--doux);opacity:.6}
.verso h3{font-size:6.4cqw;line-height:1.15;color:var(--encre);text-transform:capitalize;position:relative;z-index:1;padding-right:2cqw;flex:none;min-height:2.3em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}   /* deux lignes réservées, titre aligné en haut */
.verso__centre{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2cqw;min-height:0}   /* caractéristiques centrées entre la description et le bas de la carte */
.verso p{font-size:4.1cqw;line-height:1.4}
/* Verso : plus de mot « Verso », le rond du rang devient un filigrane à 30 % en haut à droite, le titre passe par-dessus et remonte */
.verso .badge{opacity:.3}
.verso .texte-verso{margin:1.8cqw 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden;font-size:3.9cqw}
.infos{display:grid;gap:.9cqw;margin:0}
.infos div{display:flex;justify-content:space-between;gap:2cqw;font:500 3.5cqw/1.3 var(--titre);border-bottom:.3cqw solid var(--brume);padding-bottom:.8cqw}
.infos dt{color:var(--doux)}
.infos dd{margin:0;text-align:right;color:var(--encre);font-weight:600}
.lien-verso{display:block;margin-top:1cqw;font:600 3.8cqw var(--titre);color:var(--marque);text-align:right;text-decoration:none}
.lien-verso::after{content:" →"}
.lien-verso:hover{text-decoration:underline;text-underline-offset:.6cqw}
.verso .source{margin-top:auto;font:500 3.4cqw var(--titre);color:var(--doux);border-top:.4cqw solid var(--brume);padding-top:2cqw}
/* format mini : en dessous de 240 px, image (mêmes proportions qu'en grand), nom, rang et catégorie en tout petit */
@container (max-width:240px){
  .phrase,.faits,.pied{display:none}
  .cat{font-size:3.4cqw;padding:.7cqw 2.2cqw}
  .nom{flex:1;display:grid;align-content:center;font-size:8.6cqw;margin-top:0;-webkit-line-clamp:unset}
  .badge{width:13cqw;font-size:7.4cqw}
}
.pastille{position:absolute;bottom:3cqw;left:3cqw;z-index:2;font:600 4.6cqw var(--titre);padding:.6cqw 2.6cqw;border-radius:999px;background:var(--orange-fort);color:#fff}
.pastille.x2{background:var(--marine);color:#fff}
@media (prefers-reduced-motion:reduce){
  .carte__incline,.carte__pivot,.foil{transition:none}
}

/* Dos et recto retourné (ouverture d'arrivage) */
.carte .face.dosface{--cadre:#2a4f86;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px) padding-box,linear-gradient(var(--marine),var(--marine)) padding-box,linear-gradient(#2a4f86,#2a4f86) border-box;border-width:1.4cqw;box-shadow:var(--ombre-repos);display:grid;place-items:center;padding:0}
.carte .face.dosface::after{display:none}
.carte .face.dosface::before{content:"";width:34cqw;aspect-ratio:1;border-radius:50%;border:.7cqw solid rgba(255,255,255,.22);box-shadow:0 0 0 2.4cqw rgba(255,255,255,.05)}
.carte .recto.apres{transform:rotateY(180deg)}
.carte,.pile{-webkit-user-select:none;user-select:none}
a.carte-lien{display:block;text-decoration:none;color:inherit;border-radius:12px;outline:none}
a.carte-lien:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.carte-lien .carte{--w:100%;width:100%}

.carte .recto{color:var(--teinte)}
/* Carte que le joueur ne possède pas : un voile délavé (désaturé, un peu pâle) la recouvre ; le verso reste fermé.
   Au survol ou au doigt, le voile s'ouvre en un disque autour du pointeur (--px/--py, posés par carte.js) et laisse voir les vraies couleurs. */
@property --pr{syntax:"<length>";inherits:true;initial-value:0px}
.carte.non-possedee::after{content:"";position:absolute;inset:0;z-index:4;border-radius:4cqw;pointer-events:none;
  -webkit-backdrop-filter:grayscale(.85) brightness(1.04) contrast(.92);backdrop-filter:grayscale(.85) brightness(1.04) contrast(.92);
  background:color-mix(in srgb,var(--surface) 26%,transparent);
  -webkit-mask-image:radial-gradient(circle var(--pr) at var(--px,50%) var(--py,50%),transparent 0,transparent 55%,#000 100%);mask-image:radial-gradient(circle var(--pr) at var(--px,50%) var(--py,50%),transparent 0,transparent 55%,#000 100%);
  transition:--pr .28s ease}
.carte.non-possedee.revele{--pr:30cqw}
/* Au clavier (ou carte « active »), la carte entière reprend ses couleurs */
.carte.non-possedee.actif,a.carte-lien:focus-visible .carte.non-possedee{--pr:160cqw}
/* Sans backdrop-filter (vieux navigateurs) : retour au gris simple, levé au survol */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .carte.non-possedee::after{display:none}
  .carte.non-possedee .face{filter:grayscale(.85) brightness(1.04) opacity(.7);transition:filter .3s ease}
  .carte.non-possedee.revele .face,.carte.non-possedee.actif .face,a.carte-lien:focus-visible .carte.non-possedee .face{filter:none}
}
@media (prefers-reduced-motion:reduce){.carte.non-possedee::after{transition:none}}

/* Sceau « Exemplaire unique » : posé sur le coin de l'image quand le joueur a le seul exemplaire en jeu. */
.sceau{position:absolute;bottom:2.4cqw;right:2.4cqw;z-index:3;width:15.5cqw;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 .5cqw 1.1cqw rgba(90,60,0,.5))}
.sceau svg,.sceau-mini svg{display:block;width:100%;height:100%;overflow:visible}
.sceau__bord{fill:#C9961A}
.sceau__disque{fill:#F3D77A;stroke:#9A6F0B;stroke-width:.7}
.sceau__etoile{fill:#8A5E08}
.sceau::after{content:"";position:absolute;inset:19%;border-radius:50%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%) 130% 0/260% 100% no-repeat;animation:sceau-eclat 4.2s ease-in-out infinite}
@keyframes sceau-eclat{0%,50%{background-position:130% 0}100%{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.sceau::after{animation:none}}

/* Exemplaire unique : reflet holographique doré, discret au repos (il dérive lentement), plus vif quand le pointeur passe dessus */
.carte.unique .foil{opacity:calc(.2 + .42*var(--survol,0));
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 40%),
   linear-gradient(115deg,transparent 18%,rgba(255,205,70,.42) 32%,rgba(255,110,190,.34) 45%,rgba(80,215,255,.36) 57%,rgba(255,225,110,.42) 70%,transparent 84%);
  background-size:100% 100%,240% 240%;background-position:0 0,var(--bx,50%) var(--by,50%);mix-blend-mode:soft-light}
.carte.unique:not(.actif) .foil{animation:holo-derive 8s ease-in-out infinite}
@keyframes holo-derive{0%,100%{background-position:0 0,15% 20%}50%{background-position:0 0,85% 80%}}
@media (prefers-reduced-motion:reduce){.carte.unique:not(.actif) .foil{animation:none}}
/* « Nouveau » prend la couleur de la catégorie de la carte ; « x2 » (doublon) reste orange */
.pastille:not(.x2){background:var(--cat,var(--orange-fort));color:var(--cat-texte,#fff)}

/* « Nouveau » : un point qui scintille au coin de l'image (la pastille « ×2 » des doublons reste en texte) */
.pastille--point{bottom:4cqw;left:4cqw;width:5.4cqw;height:5.4cqw;padding:0;font-size:0;border:.8cqw solid #fff;background:var(--cat,var(--orange-fort));box-shadow:0 .4cqw 1cqw rgba(0,20,60,.35);animation:nouveau-scintille 2.4s ease-in-out infinite}
@keyframes nouveau-scintille{0%,100%{box-shadow:0 .4cqw 1cqw rgba(0,20,60,.35),0 0 0 0 color-mix(in srgb,var(--cat,var(--orange-fort)) 60%,transparent)}55%{box-shadow:0 .4cqw 1cqw rgba(0,20,60,.35),0 0 0 3cqw transparent}}
@media (prefers-reduced-motion:reduce){.pastille--point{animation:none}}

/* Gyroscope : le mouvement est déjà lissé par le script, la transition reste courte pour suivre le téléphone sans retard */
.carte.gyro .carte__incline{transition:transform .12s linear}

/* Ombre intérieure très discrète sur l'image des cartes : elle adoucit le bord de la photo. */
.image::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 3cqw rgba(0,20,60,.2),inset 0 .5cqw 1.2cqw rgba(0,20,60,.1)}

/* Thème sans image pour l'instant (config « image_defaut » : gris) : un aplat gris à la place de la silhouette */
.image__gris{position:absolute;inset:0;background:#c3c7cd}