@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --c-bleu-gris: rgba(24, 40, 64, 1);
  --c-bleu-gris-95: rgba(24, 40, 64, 0.95);
  --c-bleu-gris-80: rgba(24, 40, 64, 0.8);
  --c-bleu-gris-40: rgba(24, 40, 64, 0.4);
  --c-or: #fecc04;

  /* Pokémon  */
  --c-acier: 		#60a0b6;
  --c-combat: 	#fb8102;
  --c-dragon: 	#5060dc;
  --c-eau: 			#2a80ec;
  --c-electrik: #f9bf02;
  --c-fee: 			#eb73ec;
  --c-feu: 			#e32928;
  --c-glace: 		#40d8fc;
  --c-insecte: 	#919f1a;
  --c-normal: 	#9f9f9f;
  --c-plante: 	#409f2a;
  --c-poison: 	#8f40c9;
  --c-psy: 			#eb4279;
  --c-roche: 		#b1a982;
  --c-sol: 			#8f4f21;
  --c-spectre: 	#6e416e;
  --c-tenebres: #4e413d;
  --c-vol: 			#81b7ed;
  /* Stats  */
	--c-bar-violet: #8f31cb;
	--c-bar-verte: 	#32cb32;
	--c-bar-orange: #cb8831;
	--c-bar-rouge: 	#cb3131;



  /* Couleurs thème (fallbacks si tes variables n'existent pas) */
  --scarlet: #e11d48;
  --pt-accent: var(--scarlet, #e11d48);
  --pt-accent-2: var(--scarlet-700, #be123c);
  --pt-bg: var(--bg-900, #0f0f12);
  --pt-bg-2: var(--bg-800, #16181d);
  --pt-border: var(--border-700, #262a33);
  --pt-text: var(--text, #ffffff);
  --pt-muted: var(--muted, #9aa0a6);

  /* Boite Pokémon */
  --ld-cell: 54px;   /* taille d'une case desktop */
  --ld-gap: 4px;     /* espace entre cases */
  --ld-pad: 10px;    /* padding interne autour de la grille */
}






body {
	font-family: 'Asap Condensed', sans-serif;
    padding: 0;
    margin: 0;
    /*height: 100vh;*/
	background: rgb(0,112,228);
	background-image: url('./img/background.png');
	background-size: cover;
	background-attachment: fixed;
	font-size: 18px;
  /*background: linear-gradient(143deg, rgba(72,0,228,1) 0%, rgba(176,102,249,1) 26%, rgba(211,115,255,1) 70%, rgba(136,69,252,1) 82%);*/
}


/* width */
::-webkit-scrollbar {
  width: 8px;
  max-height: 8px;
  background: transparent;
	border-radius: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--c-bleu-gris); 
	border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	border-radius: 8px;
  background: #fff; 
}



/*body:before,
body:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  animation: fade-in 15s ease-in-out 0s infinite alternate forwards;
}

body:before {
  background: #892de5;
  background: linear-gradient(143deg, rgba(72,0,228,1) 0%, rgba(176,102,249,1) 26%, rgba(211,115,255,1) 70%, rgba(136,69,252,1) 82%);
}

body:after {
  background: #e5da52;
	background: linear-gradient(143deg, rgba(0,112,228,1) 0%, rgba(102,186,249,1) 26%, rgba(115,224,255,1) 70%, rgba(69,134,252,1) 82%);
  animation-direction: alternate-reverse;
}

@keyframes fade-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}*/

/*@keyframes degrade9g {
	0% {
	background: linear-gradient(143deg, rgba(0,112,228,1) 0%, rgba(102,186,249,1) 26%, rgba(115,224,255,1) 70%, rgba(69,134,252,1) 82%);
	}
	50% {
	background: linear-gradient(143deg, rgba(0,228,145,1) 0%, rgba(102,249,223,1) 26%, rgba(115,255,192,1) 70%, rgba(69,252,109,1) 82%);
	}
	100% {
	background: linear-gradient(143deg, rgba(72,0,228,1) 0%, rgba(176,102,249,1) 26%, rgba(211,115,255,1) 70%, rgba(136,69,252,1) 82%);
	}
}*/

nav {
	background: var(--c-bleu-gris-95);
}
main {
	padding-top: 60px;
	margin-bottom: 20px;
}

footer {
	padding: 60px 0; 
	color: white;
	background: var(--c-bleu-gris-95);
}

nav a, footer a {
	color: var(--c-or) !important;
	text-decoration: none;
	display: inline-block;
	padding: 0 4px;
	border-radius: 3px;
	transition: all 0.2s;
}
nav a:hover, footer a:hover {
	background-color: var(--c-or);
	color: var(--c-bleu-gris) !important;
}

nav a.active {
	background-color: var(--c-or);
	color: var(--c-bleu-gris) !important;
}
h3 {
	font-size: 24px;
	padding: 0 0 0 6px;
	margin: 0 0 12px 0;
	border-left: 4px solid var(--c-or);
}

p {
	margin: 0;
}

.background {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	min-height: 100vh;
	padding: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*background: #111;*/
	color: #fff;;
	z-index: -1;
}

.background video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}

.btn_connexion_discord {
	color: white!important;
	background-color: #5865F2;
	padding: 10px 10px !important;
	display: flex!important;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.btn_connexion_discord:hover, .btn_connexion_discord:active, .btn_connexion_discord:focus {
	color: white!important;
	background-color: #454FBF!important;
}
.btn_reseau img {
	width: 28px;
}

.btn_connexion_twitter {
	color: white!important;
	background-color: #1c9dec;
	padding: 10px 10px !important;
	display: flex!important;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.btn_connexion_twitter:hover, .btn_connexion_twitter:active, .btn_connexion_twitter:focus {
	color: white!important;
	background-color: #1e8bff!important;
}
.btn_connexion_google {
	color: white!important;
	background-color: #4089ef;
	padding: 10px 10px !important;
	display: flex!important;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.btn_connexion_google:hover, .btn_connexion_google:active, .btn_connexion_google:focus {
	color: white!important;
	background-color: #326bbc!important;
}
.btn_connexion_twitch {
	color: white!important;
	background-color: #924ff9;
	padding: 10px 10px !important;
	display: flex!important;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.btn_connexion_twitch:hover, .btn_connexion_twitch:active, .btn_connexion_twitch:focus {
	color: white!important;
	background-color: #743ec5!important;
}


.lien_membre img {
	width: 24px;
	margin-right: 6px;
}


.text-muted {
	color: #BBB!important;
}





/* == Customisation == */


.box-home:before {
	content: "";
	position: absolute;
	left: -4px;
	top: -4px;
	height: 20px;
	width: calc(100% + 8px);
	background: #13a5a6;
    border-radius: 10px 10px 0 0;
	z-index: 2;
}
.box-home {
	background: #f2f3ec;
	border: 4px solid #36d3d4;
	border-radius: 10px;
	position: relative;
	/*overflow: hidden;*/
    padding-top: 24px;
    padding-bottom: 10px;
	z-index: 1;
	box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.3);
}

.box-scarlet {
	background: rgba(24, 40, 64, 0.8);
	border-radius: 8px;
	color: #fff;
	padding: 20px 20px;
}



.box-scarlet a {
	color: var(--c-or);
	text-decoration: none;
	display: inline-block;
	padding: 0 4px;
	border-radius: 3px;
	transition: all 0.2s;
}
.box-scarlet a:hover {
	background-color: var(--c-or);
	color: var(--c-bleu-gris);
}

.pokedex-liste {
  height: calc(100vh - 330px);
  overflow-y: auto;
}
.pokedex-square {
	user-select: none;
	border-radius: 0px 20px 0px 20px!important;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.6);
	overflow: hidden;
	position: relative;
	max-width: 115px;
	width: 100%;
	font-size: 16px;
	/*border: 2px solid #c6ff25;*/
}
.pokedex-square.active {
	background-color: var(--c-or);
}
.pokedex-square .numero {
	position: absolute;
	top: 0;
	left: 0;
	padding: 3px 8px;
	color: white;
	font-size: 12px;
	background-color: var(--c-bleu-gris);
	z-index: 3;
}
.pokedex-square .sprite {
	position: relative;
}
.pokedex-square .sprite img {
	position: relative;
	filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.6));
	z-index: 4;
}
.pokedex-square .sprite .background-sprite {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	z-index: 2;
}
.pokedex-square .nom {
	background: var(--c-bleu-gris);
}

.barre_stats {
	display: inline-block;
	width: 100%;
	max-width: 96px;
	height: 18px;
	border:  1px solid rgba(255, 255, 255, 0.6);
	padding:  1px;
	vertical-align: bottom;
}
.barre_stats .barre {
	display: block;
	height: 100%;
	/*background-color: #32cb32;*/
}
.barre_violette {
	background-color: var(--c-bar-violet);
}
.barre_verte {
	background-color: var(--c-bar-verte);
}
.barre_orange {
	background-color: var(--c-bar-orange);
}
.barre_rouge {
	background-color: var(--c-bar-rouge);
}

.btn9g {
	border: 0;
	color:  white;
	padding: 4px 8px;
	color: var(--c-or) ;
	background-color: var(--c-bleu-gris);
	transition: all 0.2s;
}
.btn9g:hover {
	color:  var(--c-bleu-gris)!important;
	background-color: var(--c-or);
}
.btn9g.active {
	color:  var(--c-bleu-gris)!important;
	background-color: var(--c-or);
}



/** == = Inputs = == **/
.form-clic-appear, .form-clic-appear:focus {
	border-color: var(--c-bleu-gris-95);
	border: 0;
	background-color: var(--c-bleu-gris-95);
	color: var(--c-or);
	font-size: 24px;
	padding: 0px;
	font-weight: 500;
	line-height: 1;
	border-radius: 2px;
}
	

	
/** == = Pagination = == **/
.pagination {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin: .75rem 0;
}

.pagination .page-item { /* reset bootstrap spacing quirks */
  margin: 0;
}

.pagination .page-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .75rem;

  color: var(--pt-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)) padding-box,
    linear-gradient(180deg, var(--pt-bg-2), var(--pt-bg)) border-box;
  border: 1px solid transparent;
  border-radius: .75rem;

  text-decoration: none;
  font-weight: 600;
  line-height: 1;

  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 6px 16px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover */
.pagination .page-link:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 10px 24px rgba(0,0,0,.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.08)) padding-box,
    linear-gradient(180deg, var(--c-or), var(--c-or)) border-box;
}

/* Active */
.pagination .page-item.active .page-link,
.pagination .page-link.active {
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10)) padding-box,
    linear-gradient(225deg, var(--pt-accent) 0%, var(--pt-accent-2) 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 10px 26px rgba(225, 29, 72, .35);
}

/* Disabled (y compris l’ellipse “…”) */
.pagination .page-item.disabled .page-link,
.pagination .page-link[aria-disabled="true"] {
  color: var(--pt-muted);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.04)) padding-box,
    linear-gradient(180deg, var(--pt-bg-2), var(--pt-bg)) border-box;
  border-color: rgba(255,255,255,.06);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Focus ring accessible */
.pagination .page-link:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 0 0 4px color-mix(in oklab, var(--pt-accent) 50%, transparent);
}

/* Tailles */
.pagination.pagination-sm .page-link {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 .55rem;
  border-radius: .6rem;
  font-size: .875rem;
}

.pagination.pagination-lg .page-link {
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .9rem;
  border-radius: .9rem;
  font-size: 1rem;
}

/* Précédent / Suivant avec chevrons plus discrets */
.pagination .page-link svg,
.pagination .page-link .chev {
  width: 1em; height: 1em;
  opacity: .9;
}

/* Option : “ghost variant” si tu ajoutes la classe utilitaire */
.pagination.pagination-ghost .page-link {
  background: transparent;
  border-color: var(--pt-border);
}
.pagination.pagination-ghost .page-item.active .page-link {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)) padding-box,
    linear-gradient(225deg, var(--pt-accent) 0%, var(--pt-accent-2) 100%) border-box;
}




/** == = Liste des Pokédex = == **/
/* =============================
   Cartouches / Game Cards (carrées)
   ============================= */

/* grille responsive (ajuste --game-min si tu veux plus grand/petit) */
.game-grid{
  --game-min: 200px;           /* largeur minimale d'une tuile */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--game-min), 1fr));
  gap: 12px;
}

/* carte de jeu */
.game-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--c-bleu-gris-80, rgba(24,40,64,.8));
  border: 1px solid var(--pt-border, #262a33);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  color: var(--pt-text, #fff);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  isolation: isolate;
  user-select: none;
}

.game-card:hover{
  transform: translateY(-2px);
  background-color: var(--c-or);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.game-card:active{
  transform: translateY(0);
}

/* état sélectionné (par JS .is-selected ou via ARIA) */
.game-card.is-selected,
.game-card[aria-checked="true"]{
  border-color: var(--c-or, #fecc04);
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    inset 0 0 0 2px var(--c-or, #fecc04);
}

/* focus clavier accessible */
.game-card:focus,
.game-card:focus-within{
  outline: none;
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    0 0 0 3px rgba(254,204,4,.25),
    inset 0 0 0 2px var(--c-or, #fecc04);
}

/* image carrée (vignette) */
.game-card-img{
  position: relative;
  aspect-ratio: 1 / 1;               /* 👈 carré */
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pt-bg-2, #16181d), var(--c-bleu-gris, #182840));
}

.game-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.0001);
  transition: transform .25s ease, filter .25s ease;
}

.game-card:hover .game-card-img img{
  transform: scale(1.03);
}

/* encoche style "cartouche" */
.game-notch{
  width: 64%;
  height: 12px;
  margin: 6px auto 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
  box-shadow: inset 0 2px 3px rgba(0,0,0,.3);
}

/* libellé */
.game-card-label{
  text-align: center;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  margin-top: 4px;
  line-height: 1;
  display: -webkit-box;
  padding: 12px 0;
}

/* mini badge de sélection (optionnel) */
.game-card .game-check{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: var(--c-or, #fecc04);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.game-card.is-selected .game-check,
.game-card[aria-checked="true"] .game-check{
  opacity: 1;
  transform: scale(1);
}

/* état désactivé (si besoin) */
.game-card.is-disabled{
  opacity: .6;
  filter: grayscale(.3);
  pointer-events: none;
}

/* tuile "National" sans image */
.game-card .national{
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: radial-gradient(120% 120% at 50% 0%, var(--pt-bg-2, #16181d) 0%, var(--c-bleu-gris, #182840) 70%);
  font-weight: 800;
  letter-spacing: .5px;
}

/* variantes de taille (facultatif) */
.game-card--sm .game-card-img{ aspect-ratio: 1 / 1; }
.game-card--sm .game-card-label{ font-size: .95rem; min-height: 2em; }

/* petit ajustement sombre sur hover/focus pour contraster */
.game-card:hover .game-card-label{ text-shadow: 0 1px 0 rgba(0,0,0,.25); }

/* responsive : serre un peu la grille sur petits écrans */
@media (max-width: 480px){
  .game-grid{ --game-min: 130px; gap: 10px; }
  .game-card{ padding: 10px; border-radius: 10px; }
  .game-card-img{ border-radius: 8px; }
}


/* ==============================
   Cartes "Living Dex" (listing)
   ============================== */

.ld-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}

/* Empêche le stretch vertical des enfants (dont la jaquette) */
.ld-card{
  --ld-card-h: 200px;
  background-color: var(--c-bleu-gris-80);
  border: 1px solid var(--pt-border, #262a33);
  border-radius: 10px!important;
  color: #fff;
  display: flex!important;
  gap: 12px;
  padding: 10px!important;
  text-decoration: none;
  min-height: var(--ld-card-h);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  align-items: stretch;
}

.ld-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 0px 6px var(--c-or);
  background-color: var(--c-bleu-gris)!important;
  border-color: var(--c-bleu-gris)!important;
}

/* Jaquette à gauche — toujours carrée */
.ld-card-cover{
  --ld-cover-size: 178px;

  position: relative;
  width: var(--ld-cover-size);
  min-width: var(--ld-cover-size);
  aspect-ratio: 1 / 1;
  height: auto;                          /* 👈 explicite la hauteur auto */
  /*align-self: flex-start;                 /* 👈 sécurité au cas où un parent override align-items */

  border-radius: 8px;
  overflow: hidden;
  background: #111;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  flex: 0 0 auto;
}

/* L’image remplit le carré */
.ld-card-cover img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-modif {
	color: #888;
	font-size: 0.7em;
}

/* Fallback si aspect-ratio n’est pas supporté */
@supports not (aspect-ratio: 1 / 1) {
  .ld-card-cover{
    height: 0;
    padding-top: 100%;    /* carré via padding */
  }
  .ld-card-cover img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Optionnel : taille plus petite en mobile */
@media (max-width: 520px){
	.ld-card {
    flex-direction: column;
    align-items: center;
	}
  .ld-card-cover{ --ld-cover-size: 110px; }
}


/* Corps à droite */
.ld-card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

/* En-tête : titre + bouton options */
.ld-card-header{
  display: flex;
  align-items: center;
  gap: 8px;
}
.ld-card-title{
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #fff;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-card-more{
  border: 1px solid var(--pt-border, #262a33);
  background: var(--c-bleu-gris);
  color: var(--c-or);
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ld-card-more:hover{
  background: var(--c-or);
  color: var(--c-bleu-gris);
  border-color: var(--c-or);
}

/* Méta (jeu + modèle) */
.ld-card-meta{
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pt-muted, #9aa0a6);
  font-size: .95rem;
  min-height: 22px;
}
.ld-card-meta .sep{ opacity:.6; }

.ld-chip{
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

/* Barres de progression */
.ld-card-bars{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ld-bar{
  height: 12px;
  background: #222;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.ld-fill{
  height: 100%;
  border-radius: 999px;
  transform: translateZ(0);
  transition: width .25s ease;
}
.ld-fill.normal{
  background: linear-gradient(225deg, var(--scarlet, #e11d48) 0%, var(--pt-accent-2, #be123c) 100%);
}
.ld-fill.shiny{
  background: linear-gradient(225deg, #ffd166 0%, #ff9f1c 100%);
}
.ld-legend{
  display: flex;
  gap: 6px;
  color: var(--pt-muted, #9aa0a6);
  font-size: .92rem;
}
.ld-legend .sep{ opacity:.6; }

/* Pied de carte */
.ld-card-footer{
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
}

/* Responsive (mobile) */
@media (max-width: 520px){
  .ld-list{ grid-template-columns: 1fr; }
  .ld-card{ --ld-card-h: 110px; padding: 8px; gap: 10px; }
  .ld-card-title{ font-size: 1rem; }
  .ld-bar{ height: 10px; }
}





/* ===== Menu contextuel des cartes LD ===== */
.ld-menu{
  position: absolute;
  z-index: 9999;
  min-width: 200px;
  padding: 6px;
  border-radius: 10px;
  background: var(--c-bleu-gris-95);
  border: 1px solid var(--pt-border, #262a33);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.ld-menu[hidden]{ display: none !important; }

.ld-menu-item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.98rem;
  cursor: pointer;
}
.ld-menu-item:hover{
  background: var(--c-bleu-gris);
  color: var(--c-or);
}
.ld-menu-sep{
  height: 1px;
  margin: 6px 4px;
  background: rgba(255,255,255,.08);
}
.ld-danger{
  color: #ffb4b4;
}
.ld-danger:hover{
  background: #361b1b;
  color: #ffd4d4;
}

/* Le bouton ⋮ déjà stylé précédemment ; juste un petit pointer */
.ld-card-more{ cursor: pointer; }


/* ===== Menu contextuel Living Dex ===== */
/* ===== Options menu (portal) ===== */
.ld-menu-portal{
  position: fixed; inset: 0;
  z-index: 9999;
  /* click outside closes menu */
  background: transparent;
}

.ld-menu{
  position: absolute;
  min-width: 220px;
  max-width: min(90vw, 320px);
  border-radius: 10px;
  border: 1px solid var(--pt-border, #262a33);
  background: var(--c-bleu-gris-95);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  padding: 6px;
  color: #fff;
}

.ld-menu .ldmi{
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  border: 0; background: transparent; color: #fff;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; text-align: left;
}
.ld-menu .ldmi:hover{
  background: rgba(255,255,255,.07);
  color: var(--c-or);
}
.ld-menu .ldmi.danger{ color: #ff6b6b; }
.ld-menu .ldmi.danger:hover{
  background: rgba(255,0,0,.1); color: #ffc2c2;
}
.ld-menu .sep{
  margin: 6px 4px; border: 0; height: 1px;
  background: rgba(255,255,255,.08);
}

/* ==== Progression Living Dex — duo bars ==== */
.ld-stats{
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.ld-stat{
  display: flex;
  min-width: 0;
  flex-direction: column;
  width: 100%;
}

.ld-stat-left{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pt-text, #fff);
  padding: 2px 2px 2px 6px;
  border-radius: 4px 4px 0 0;
  /*font-weight: 700;*/
  /*min-width: 110px;        */
  flex: 0 0 auto;
  background-color: #338add;
  justify-content: flex-start;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.ld-stat-ico{
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

.ld-stat-count{
	font-size: 12px;
  white-space: nowrap;
}

.ld-stat-bar{
  position: relative;
  flex: 1 1 auto;
  height: 15px;
  background: #46515e;
  border-radius: 0px 0px 4px 4px;
  overflow: hidden;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}

.ld-stat-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  transform: translateZ(0);
  transition: width .25s ease;
}

.ld-stat-bar.is-normal .ld-stat-fill {
	background: linear-gradient(225deg, #ff9439 0%, #de5a39 100%);
}
.ld-stat-bar.is-shiny .ld-stat-fill {
  background: linear-gradient(225deg, #ff9439 0%, #ffc300 100%);
}

/* % centré dans la barre */
.ld-stat-pct{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none;
}

/* Responsive: compacter si étroit */
@media (max-width: 520px){
  .ld-stat-left{ min-width: 90px; }
  /*.ld-stat-pct{ font-size: .85rem; }*/
  .ld-stat-bar{ height: 18px; }
}















/* Modal assorti au thème */
.modal-content{
  background: var(--c-bleu-gris-95);
  color: #fff;
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 8px;
}
.modal-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-footer{
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Liste des dex dans le modal */
#md-dex-list label{
  background: var(--c-bleu-gris-80);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
#md-dex-list label:hover{
  border-color: var(--c-or);
}
#md-dex-list input[type="radio"]{
  accent-color: var(--c-or);
}

/* Bouton primaire cohérent (si besoin ponctuel) */
.modal-footer .btn9g{
  background: var(--c-bleu-gris);
  color: var(--c-or);
  border: 0;
}
.modal-footer .btn9g:hover{
  background: var(--c-or);
  color: var(--c-bleu-gris) !important;
}








/** == = Pokémon = == **/
.menu-boite {
  position: sticky;

    z-index: 99;
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    top: 70px;
}
/* ========= Boîte 6x5 fluide ========= */
/* largeur intrinsèque d'une boîte : 6 colonnes × 5 lignes */
.boite{

  /* 6 cases + 5 gaps + 2×padding */
  width: calc((6 * var(--ld-cell)) + (5 * var(--ld-gap)) + (2 * var(--ld-pad)));
  display: flex; flex-direction: column;
  padding: var(--ld-pad);
	border-radius: 0 0 4px 4px;
  color: white;
  background-color: var(--c-bleu-gris);
  min-height: 74px;
}

/*.titre-boite {
	text-align: center;
	width: calc(100% - var(--ld-cell) * 2 - (4px * 6) );
	padding: 4px;
	color: white;
	text-align: center;
	background-color: var(--c-bleu-gris-80);
	border-radius: 4px;
	margin-bottom: 6px;
}
*/
.titre-boite {
	text-align: center;
	width: 100%;
	padding: 7px;
	color: white;
	text-align: center;
	background-color: #3f569b;
	border-radius: 4px 4px 0 0;
	/*margin-bottom: 6px;*/
}

/* Grille 6 colonnes (les cases restent carrées via aspect-ratio) */
.ld-grid{ display:grid; gap: var(--ld-gap); grid-template-columns: repeat(6, 1fr); }

/* case */
/*.pokemon-box{ aspect-ratio:1/1; position:relative; background:rgba(0,0,0,.2); border-radius:4px; display:grid; place-items:center; overflow:hidden; cursor:pointer; }*/
.pokemon-box .sprite { position:relative; width:100%; height:100%; display:grid; place-items:center; padding:4px; }
.pokemon-box .sprite img.sprite {
	width:100%; height:100%; object-fit:contain; transition:filter .15s ease; z-index:1; position: absolute;

  object-fit: contain;           /* garde le ratio du sprite */
  transition: filter .15s ease;
}

/* responsive: ajuster la taille des cases pour que la boîte colle mieux aux breaks */
@media (max-width: 1200px){ .boite{ --ld-cell: 56px; } }
@media (max-width: 992px) { .boite{ --ld-cell: 70px; } }
@media (max-width: 768px) { .boite{ --ld-cell: 68px; } }
@media (max-width: 576px) { .boite{ --ld-cell: 54px; } }
@media (max-width: 375px) { .boite{ --ld-cell: 44px; } }

/* Chaque case */
.pokemon-box{
  position: relative;
  background-color: rgb(14 26 44);
  border-radius: 4px;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;

  /* carré fluide : la hauteur suit la largeur */
  aspect-ratio: 1 / 1;
  transition: all 0.2s;
}
.pokemon-box:hover {
	background-color: var(--c-or);
}

/* Contenu de la case */
.pokemon-box .sprite{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  /* petit padding visuel pour mieux respirer */
  padding: 4px;
}

.pokemon-box .sprite img{
/*  width: 100%;
  height: 100%;*/
}

.pokemon-box .background-sprite{
  position: absolute;
  inset: 0;
  opacity: .6;
  z-index: 0;
}

.pokemon-box:hover .background-sprite{
  /*opacity: 0;*/
}

.ld-grid[data-mode="normal"] .pokemon-box:not(.has-normal) .background-sprite{ opacity: 0; }
.ld-grid[data-mode="shiny"]  .pokemon-box:not(.has-shiny)  .background-sprite{ opacity: 0; }

.ld-grid[data-mode="normal"] .pokemon-box:not(.has-shiny) .sprite img.shiny{ display: none; }

.pokemon-box[data-variant="shiny"].variant-shiny.has-shiny .background-sprite{ opacity: 0.6; }
.pokemon-box[data-variant="shiny"].variant-shiny.has-shiny .sprite img.normal{ display: none; }
.pokemon-box[data-variant="shiny"].variant-shiny.has-shiny .sprite img.shiny{ filter: none; }
.pokemon-box[data-variant="shiny"].variant-shiny.has-shiny .sprite .badge-shiny { display: block; }

/*.pokemon-box[data-variant="shiny"].variant-shiny .background-sprite{ opacity: 0; }*/
/*.pokemon-box[data-variant="shiny"].variant-shiny .background-sprite{ opacity: 0; }*/

/*.sprite .normal { display: block; }
.sprite .shiny  { display: none; }*/

.ld-grid[data-mode="shiny"]  .pokemon-box.has-shiny  .sprite .normal 	{ display: none; }
.ld-grid[data-mode="shiny"]  .pokemon-box.has-shiny  .sprite .shiny 	{ display: block; }

/* Badges */
.pokemon-box .badge-normal,
.pokemon-box .badge-shiny {
  position: absolute;
  top: 0px;
  font-weight: 900;
  color: #fff;
  /*background: rgba(0,0,0,.35);*/
  /*border-radius: 10px;*/
  /*padding: .1rem .35rem;*/
  display: none;
  line-height: 1;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.pokemon-box .badge-shiny img {
	width: 100%;
	height: auto;
}
.pokemon-box .badge-normal{ width: 14px; right: 4px; }
.pokemon-box .badge-shiny { width: 20px; right:  1px; color: #ffd166; }
.ld-grid[data-mode="normal"]  .pokemon-box .badge-shiny { display: none; }

/* État capturé / non capturé selon mode */
.ld-grid[data-mode="normal"] .pokemon-box:not(.has-normal) img{ filter: grayscale(1) contrast(.9) brightness(.9); }
.ld-grid[data-mode="shiny"]  .pokemon-box:not(.has-shiny)  img{ filter: grayscale(1) contrast(.9) brightness(.9); }

.pokemon-box.has-normal .badge-normal{ display:inline-block; }
.pokemon-box.has-shiny  .badge-shiny { display: block; }

/* Case vide quand tu pads à 30 */
.pokemon-box.is-empty{
  background: rgba(255,255,255,.02);
  box-shadow: none;
  pointer-events: none;
}

/* (optionnel) sprites un peu plus petits sur petits écrans */
@media (max-width: 576px){
  .ld-grid{ --ld-gap: 5px; }
  .pokemon-box .sprite{ padding: 3px; }
}




.pokemon-box.match {
    transform: scale(1.25);       /* Zoom avant */
    z-index: 10;                 /* Passe devant les autres */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Ombre pour mettre en avant */
    background-color: var(--c-or)!important;
    animation: pulseZoom 1s ease-in-out infinite;
}
.pokemon-box.match .background-sprite {
    opacity: 0;
}

@keyframes pulseZoom {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); } /* Zoom à +25% */
    100% { transform: scale(1); }
}