/* Remise à zéro : padding et bordure sont inclus dans la largeur des éléments */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Un élément avec l'attribut hidden est TOUJOURS caché, même si une autre règle lui donne
   display: flex ou grid (sinon la règle CSS l'emporte sur hidden et l'élément reste visible) */
[hidden] {
  display: none !important;
}














/* Conteneur principal */
.info-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  /* l'icône centrée par rapport au texte */
  margin-left: 6px;
  /* un petit espace entre le texte et l'icône */
}

/* Style de l'icône "i" (méthode simple) */
.info-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: #007bff;
  color: white;
  font-family: serif;
  font-style: italic;
  font-weight: bold;
  font-size: 14px;
  border-radius: 50%;
}

/* Style du cadre noir (caché par défaut) */
.info-box {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 125%;
  /* Place le cadre en dessous de l'icône */
  left: 50%;
  transform: translateX(-50%);
  background-color: #000000;
  /* Fond noir */
  color: #ffffff;
  /* Texte blanc */
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  /* Empêche le texte de se couper bizarrement */
  transition: opacity 0.3s, visibility 0.3s;
  /* Effet de fondu fluide */
  z-index: 10;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

/* Petite flèche en haut du cadre noir, qui pointe vers l'icône */
.info-box::after {
  content: "";
  position: absolute;
  bottom: 100%;
  /* En haut du cadre */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #000000 transparent;
  /* flèche pointant vers le haut */
}

/* Afficher le cadre noir au survol du conteneur */
.info-container:hover .info-box {
  visibility: visible;
  opacity: 1;
}

/* Afficher aussi le cadre au focus (clavier, clic, doigt) */
.info-container:hover .info-box,
.info-container:focus-within .info-box {
  visibility: visible;
  opacity: 1;
}

.info-box ul {
  text-align: left;
  margin: 6px 0 0;
  padding-left: 18px;
}





/* Partie  Header*/


header {
  background-color: #0f1117;

}

/* Le lien du logo : l'image centrée verticalement */
.logo {
  display: flex;
  align-items: center;
}




/* Forcer   la visibilité et la couleur des deux parties du nom */
.site-name .twin {
  color: #eab711;
  /* jaune TwinCard */
  font-weight: bold;
  font-size: 5rem;
}


.site-name .card {
  color: #12b5f0;
  /* bleu TwinCard */
  font-weight: bold;
  font-size: 5rem;
}

.site-name {
  text-decoration: none;
}

.site-header .logo,
.site-header nav,
.site-header .actions {
  flex: 1;
  /* le logo et le menu (ou les boutons login/signup) prennent chacun la même largeur */
}

.site-header .actions {
  display: flex;
  justify-content: flex-end;
  /* boutons login / signup collés à droite */
  gap: 12px;
}

.site-header {
  border-bottom: 1px solid #2a2e3a;
  display: flex;
  justify-content: space-between;
  /* logo à gauche, menu à droite */
  align-items: center;
  /* alignés en hauteur */
  padding: 8px 24px;
  /* fine ligne discrète sous le header */
  gap: 24px;
  /* espace minimum entre le titre et le menu */
}

.site-header nav {
  display: flex;
  justify-content: flex-end;
  /* les liens du menu collés à droite */
  gap: 20px;
}

.site-header nav a {
  color: #e7eaf4;
  /* blanc cassé au lieu du bleu / violet par défaut */
  text-decoration: none;
  white-space: nowrap;
  /* "Exchange Center" reste sur une seule ligne */
}

.site-header nav a:hover {
  color: #eab711;
  /* jaune TwinCard au survol */
}

/* Lien de la page en cours (aria-current="page") : remplace le gros titre de la page */
.site-header nav > a[aria-current="page"] {
  color: #eab711;
  border-bottom: 2px solid #eab711;
  padding-bottom: 2px;
}

.site-header .profile-dropdown a[aria-current="page"] {
  color: #eab711;
}

/* Forcer la prise d'espace main et header pour que le footer soit tout en bas */

body {
  margin: 0;
  background-color: #0f1117;
  /* fond sombre sur toute la largeur, même autour d'un contenu centré */
  min-height: 100vh;
  /* le body fait au moins toute la hauteur de l'écran */
  display: flex;
  flex-direction: column;
  /* header, main et footer empilés verticalement */
}

/* Partie  main*/

main {
  flex: 1;
  /* le main prend tout l'espace libre et pousse le footer en bas */
  background-color: #0f1117;
}

h1,
h2 {
  text-align: center;
  color: #eab711
}

h2>p {
  text-align: center;
}

.booster {
  display: inline-block;
  text-align: center;

  width: 100%;
}

main p,
table tr,
h2+ul {
  color: #e7eaf4;
}

h3 {
  color: #e7eaf4;
}



/*  Partie Footer */

/* 4 colonnes en haut (marque, aide, légal, adresse), puis une bande fine en bas */
.site-footer {
  margin-top: 48px;
  background-color: #0a0c12;
  border-top: 1px solid #2a2e3a;
  color: #9aa0ad;
  font-size: 0.95rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;   /* la colonne "marque" est plus large */
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 32px;
}

/* Le petit logo + "TwinCard", en plus petit que dans le header */
.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* L'espace seulement après le logo (un gap séparerait aussi "Twin" et "Card") */
.footer-logo img {
  margin-right: 10px;
}

.footer-logo .twin,
.footer-logo .card {
  font-size: 1.5rem;
  font-weight: bold;
}

.footer-logo .twin {
  color: #eab711;
}

.footer-logo .card {
  color: #12b5f0;
}

.footer-brand p {
  max-width: 280px;
  margin: 12px 0 0;
  line-height: 1.5;
}

/* Une colonne = un titre + des liens les uns sous les autres */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-style: normal;                        /* <address> est en italique par défaut */
  line-height: 1.5;
}

.footer-col h4 {
  margin: 0 0 4px;
  color: #e7eaf4;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-col a {
  width: fit-content;                        /* le survol ne prend que le texte, pas toute la ligne */
  color: #9aa0ad;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: #eab711;
}

/* Bande du bas : copyright à gauche, mention des marques à droite */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  border-top: 1px solid #1d2029;
  font-size: 0.8rem;
  color: #6b7180;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom .footer-notice {
  max-width: 560px;
}

/* Tablette : la marque sur toute la largeur, les 3 autres colonnes en dessous */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Téléphone : tout en une colonne */
@media (max-width: 560px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 16px 24px;
  }

  .footer-bottom {
    padding: 16px;
  }
}


/* Home */

/* Le conteneur : grille 2 x 2 centrée */
.description {
  display: flex;
  flex-wrap: wrap;
  /* passe à la ligne après 2 cartes */
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  /* centré, largeur limitée */
  padding: 0 16px;

}

.description h2 {
  width: 100%;
  /* le titre prend toute la ligne, au-dessus des cartes */
  text-align: left;
}

/* Une carte */
.description_widget {
  flex: 1 1 calc(50% - 8px);
  /* 2 cartes par ligne */
  min-width: 300px;
  /* sur un écran étroit : 1 carte par ligne */
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* texte centré verticalement dans la carte */
  padding: 32px;
  text-align: left;
  background-color: #1a1d27;
  border: 1px solid #2a2e3a;
  border-radius: 16px;
}

.description_widget h3 {
  text-transform: uppercase;
  /* titres en majuscules */
  margin-top: 0;
}

.description_widget p {
  color: #9aa0ad;
  /* texte secondaire en gris */
  line-height: 1.6;
  /* lignes plus aérées */
  margin-bottom: 0;
}

/* Ruban de cartes qui défile en continu */
.ruban {
  overflow: hidden;
  /* cache ce qui dépasse à gauche et à droite */
}

.ruban-contenu {
  display: flex;
  /* les cartes sur une seule ligne */
  gap: 16px;
  width: max-content;
  animation: defilement 30s linear infinite;
}

.ruban-contenu img {
  display: block;                   /* évite le petit espace sous l'image dans le lien */
  height: 200px;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

/* Cartes cliquables : le ruban continue de défiler, la carte survolée grossit */
.ruban-contenu a:hover img,
.ruban-contenu a:focus-visible img {
  transform: scale(1.05);
}

/* "Start to build your collection" : un titre-lien qui garde la couleur du titre */
.cta-link {
  color: inherit;
  text-decoration: none;
}

.cta-link:hover {
  text-decoration: underline;
}


@keyframes defilement {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
    /* -50 % = exactement une série de cartes */
  }
}

/* Accessibilité : pas d'animation pour ceux qui l'ont désactivée dans leur système */
@media (prefers-reduced-motion: reduce) {
  .ruban-contenu {
    animation: none;
  }
}












/* Shop */


.pack {

  background-color: #1a1d27;
  /* un cran plus clair que le fond de la page */
  border: 1px solid #2a2e3a;
  /* bordure discrète */
  border-radius: 12px;
  /* coins arrondis */
  padding: 16px 20px;
  /* espace À L'INTÉRIEUR du bloc */
  text-align: center;
  width: 220px;
  /* tous les packs de la même largeur */
  display: flex;
  flex-direction: column;
  /* le contenu du pack empilé verticalement */
  align-items: center;
  /* centré horizontalement dans le pack */
}

.pack button {
  margin-top: auto;
  /* pousse le bouton tout en bas du pack : tous les boutons sont alignés */
}

.pack ul {
  color: #e7eaf4;
  /* avantages lisibles sur fond sombre */
  text-align: left;
  /* puces collées au texte */
}

.subscription .pack {
  width: 320px;
  /* les abonnements un peu plus larges, pour leur liste d'avantages */
}

.pack-best {
  border-color: #eab711;
  /* le pack "Best value" entouré en jaune */
  position: relative;
  /* sert de repère pour placer le badge */
}

/* Badge "Best value" posé à cheval sur la bordure du haut, comme une <legend> */
.pack-best .badge {
  position: absolute;
  /* sorti du flux : il ne pousse plus le contenu du pack vers le bas */
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  /* recentré pile sur la bordure, au milieu */
  margin: 0;
  padding: 2px 12px;
  background-color: #eab711;
  color: #0f1117;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 999px;
  white-space: nowrap;
}

.key-packs,
.subscription {
  display: flex;
  justify-content: center;
  /* centrés horizontalement */
  flex-wrap: wrap;
  /* passent à la ligne sur petit écran */
  gap: 16px;
  /* espace entre les blocs */
}











































/* Barre de recherche */





.search input {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px 10px 40px;
  /* 40px à gauche pour laisser la place à l'icône */
  border: 1px solid #2a2e3a;
  border-radius: 999px;
  /* barre arrondie */
  background-color: #1b8df1b0;
  background-image: url("../images/search.svg");

  background-repeat: no-repeat;
  background-position: 12px center;
  /* icône à 12px du bord gauche, centrée en hauteur */
  background-size: 18px;
  color: #e7eaf4;
}

.search input::placeholder {
  color: #9aa0ad;
  /* texte grisé du placeholder */
}

/* cache un élément à l'écran, mais le garde pour les lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}





































/* Draw */

.main_draw {
  display: flex;
  flex-direction: row;
  /* filtre à gauche, tirage à droite */
  align-items: flex-start;
  /* les deux sections alignées par le haut */
  gap: 40px;
  /* de l'espace entre les deux */
  text-align: center;
}


/* Carte d'accès à la boutique TwinPoints, à droite des boosters (draw.html) */
.points-teaser {
  flex: 0 0 240px;
  padding: 20px;
  background: linear-gradient(160deg, #2a1830, #1a1d27 70%);
  border: 1px solid #a66bff;
  border-radius: 16px;
}

.points-teaser h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.main_draw .points-teaser-balance {
  color: #ffffff;
}

.points-icon {
  color: #a66bff;
  /* le losange violet = TwinPoints */
}

.booster-img {
  height: auto;
  /* garde les proportions de l'image */
}

.key-balance {
  color: #e7eaf4;
  margin-bottom: 16px;
  text-align: center;
}

.shop-intro {
  text-align: center;
  /* "1 key = 1 booster" centré sous le titre Keys */
}

.draw-actions {
  display: flex;
  /* les deux sections côte à côte */
  justify-content: center;
  align-items: flex-start;
  /* les deux sections alignées par le haut */
  gap: 40px;
  flex-wrap: wrap;
  /* l'une sous l'autre sur petit écran */
}

.buttons {
  display: flex;
  /* les boutons côte à côte */
  justify-content: center;
  gap: 12px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  /* forme de pilule */
  background-color: #eab711;
  /* jaune TwinCard */
  color: #0f1117;
  font-weight: bold;
  cursor: pointer;
  /* la petite main au survol */
}

button:hover {
  background-color: #f5c93a;
  /* un jaune un peu plus clair au survol */
}

.small {
  font-size: 0.85rem;
  color: #9aa0ad;
  /* texte secondaire en gris */
}

.draw-note {
  margin-top: 48px;
  /* remplace les <br><br><br> */
}

.slider {
  max-width: 400px;
  /* largeur visible : ce qui dépasse devra défiler */
  overflow-x: auto;
  /* barre de défilement horizontale si ça dépasse */
  scroll-snap-type: x mandatory;
  /* bonus : s'arrête pile sur une image */
  padding-bottom: 8px;
  /* un peu d'espace pour la barre de défilement */
}

.draw_ruban_content {
  display: flex;
  /* les images sur une seule ligne */
  gap: 16px;
  width: max-content;
  /* le ruban garde sa vraie longueur, même s'il dépasse */
}

.draw_ruban_content img {
  height: 160px;
  width: auto;
  /* toutes à la même hauteur, sans déformation */
  scroll-snap-align: start;
  /* point d'arrêt du bonus scroll-snap */
}


.licence-buttons {
  margin-bottom: 50px;
  /* espace entre les licences et les extensions */
}



/* Liens en forme de bouton (login, signup, "Start collecting"...) */

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #eab711;
  border-radius: 999px;
  /* forme de pilule, comme les <button> */
  color: #eab711;
  font-weight: bold;
  text-decoration: none;
}

.btn:hover {
  background-color: #1a1d27;
}

.btn-primary {
  background-color: #eab711;
  /* bouton principal : plein, en jaune */
  color: #0f1117;
}

.btn-primary:hover {
  background-color: #f5c93a;
}



/* Index (page d'accueil des visiteurs) */

.hero {
  text-align: center;
  padding: 48px 16px;
}

.hero p {
  max-width: 600px;
  margin: 0 auto 24px;
  /* centré, avec de l'espace avant le bouton */
}

/* Section "Why TwinCard?" : un bloc de texte centré, pas trop large pour rester lisible */
.why {
  max-width: 800px;
  margin: 0 auto 48px;
  padding: 0 16px;
  line-height: 1.7;
}

.why h2 {
  text-align: left;
}

main a {
  color: #12b5f0;
  /* liens du contenu en bleu TwinCard, lisibles sur fond sombre */
}

/* Espace entre les blocs "How does it work?" et "Licences" */
.description {
  margin-bottom: 48px;
}

/* Licences : 3 cartes par ligne au lieu de 2 */
.licences-grid .description_widget {
  flex: 1 1 calc(33.33% - 10.67px);
}

/* Pastille "Available" / "Coming in 2027" */
.description_widget .status {
  align-self: flex-start;
  /* la pastille garde sa taille au lieu de s'étirer */
  margin: 0 0 12px;
  padding: 2px 12px;
  border-radius: 999px;
  background-color: #12b5f0;
  /* bleu : disponible */
  color: #0f1117;
  font-size: 0.8rem;
  font-weight: bold;
}

.description_widget .status-soon {
  background-color: #eab711;
  /* jaune : bientôt */
}




/* Pages de texte : Drop rates et pages légales (classe "text-page" sur le <main>) */

.text-page {
  max-width: 850px;
  margin: 0 auto;
  /* contenu centré, largeur limitée pour rester lisible */
  padding: 32px 16px 48px;
  width: 100%;
  color: #e7eaf4;
  /* tout le texte en blanc cassé, y compris les listes */
  line-height: 1.7;
}

.text-page h2 {
  text-align: left;
  margin-top: 40px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2e3a;
  /* fine ligne sous chaque titre de section */
}

.text-page ul {
  padding-left: 20px;
}

.text-page li {
  margin-bottom: 8px;
}

/* Tableau des taux (odds.html) */

.odds-table {
  width: 100%;
  border-collapse: collapse;
  /* une seule bordure entre les cellules */
  background-color: #1a1d27;
  border: 1px solid #2a2e3a;
  border-radius: 12px;
  overflow: hidden;
  /* coins arrondis respectés */
}

.odds-table caption {
  caption-side: bottom;
  /* légende sous le tableau */
  padding-top: 8px;
  font-size: 0.85rem;
  color: #9aa0ad;
}

.odds-table th,
.odds-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #2a2e3a;
}

.odds-table thead th {
  background-color: #0a0b10;
  color: #eab711;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.odds-table td:nth-child(2) {
  font-weight: bold;
  /* la colonne des pourcentages mise en avant */
}

.odds-table tbody tr:hover {
  background-color: #23273a;
  /* ligne survolée légèrement éclairée */
}

.odds-table tfoot th,
.odds-table tfoot td {
  border-bottom: none;
  font-weight: bold;
}

/* Pastille de couleur devant chaque rareté */
.rarity {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
}

.rarity-common {
  background-color: #9aa0ad;
}

.rarity-rare {
  background-color: #12b5f0;
}

.rarity-double {
  background-color: #2ecc71;
}

.rarity-ir {
  background-color: #a66bff;
}

.rarity-sir {
  background-color: #ff5fa2;
}

.rarity-hyper {
  background-color: #eab711;
}

/* Raretés du bloc Méga-Évolution */
.rarity-uncommon {
  background-color: #c3c8d4;
}

.rarity-ultra {
  background-color: #8a7dff;
}

.rarity-mega_hyper {
  background: linear-gradient(135deg, #eab711, #ff5fa2);
}

/* Petite étiquette "Coming soon" à côté d'un titre */
.status-inline {
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #eab711;
  color: #0f1117;
  font-size: 0.75rem;
  vertical-align: middle;
}


/* Petite icône de clé dans le texte et les boutons */
.key-icon {
  height: 1.4em;
  /* proportionnelle à la taille du texte autour */
  width: auto;
  vertical-align: middle;
  /* alignée avec le texte */
  margin-left: 2px;
}


/* Inventaire */

.inventory {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
  width: 100%;
}

.inventory-total {
  text-align: center;
  font-size: 1.1rem;
}

.inventory .licence-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.licence-btn {
  background-color: #1a1d27;
  color: #e7eaf4;
  border: 1px solid #2a2e3a;
}

.licence-btn.active {
  background-color: #eab711;
  /* licence sélectionnée en jaune */
  color: #0f1117;
}

.licence-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Une extension */
.extension {
  background-color: #1a1d27;
  border: 1px solid #2a2e3a;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.extension-head {
  display: flex;
  justify-content: space-between;
  /* nom et compteur à gauche, "See all" à droite */
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.extension-head h2 {
  text-align: left;
  margin: 0;
  font-size: 1.3rem;
}

.ext-count {
  margin: 4px 0 8px;
  color: #9aa0ad;
}

.ext-count strong {
  color: #e7eaf4;
}

/* Barre de progression de la collection */
.progress {
  width: 220px;
  height: 6px;
  background-color: #2a2e3a;
  border-radius: 999px;
  overflow: hidden;
}

.progress span {
  display: block;
  height: 100%;
  background-color: #eab711;
}

/* Bouton "See all" : discret, contour jaune */
.see-all {
  background-color: transparent;
  color: #eab711;
  border: 1px solid #eab711;
  white-space: nowrap;
}

.see-all:hover {
  background-color: #eab711;
  color: #0f1117;
}

/* Le ruban : une seule ligne qui défile horizontalement */
.ext-ruban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

/* Extension dépliée ("See all") : toutes les cartes en grille, la page s'allonge vers le bas */
.extension.expanded .ext-ruban {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Une carte */
.inv-card {
  flex: 0 0 110px;
  /* largeur fixe : ni plus grande, ni plus petite */
  text-align: center;
  scroll-snap-align: start;
  padding: 6px;
  border-radius: 8px;
}

.inv-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.inv-card span {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #9aa0ad;
}

/* Carte non possédée : fond gris et image grisée */
.inv-card.missing {
  background-color: #2a2e3a;
}

.inv-card.missing img {
  filter: grayscale(100%);
  opacity: 0.3;
}


/* Menu du profil (rond en haut à droite du header) */

.site-header nav {
  align-items: center;
  /* liens du menu et rond du profil alignés en hauteur */
}

/* Partie droite du header (créée par js/header.js) : le menu, le rond du profil, puis le ☰ */
.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

.profile-menu {
  position: relative;
  /* repère pour placer la liste déroulante juste en dessous */
}

.profile-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  /* un rond */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a1d27;
  color: #e7eaf4;
  border: 2px solid #eab711;
}

.profile-btn:hover,
.profile-btn[aria-expanded="true"] {
  background-color: #eab711;
  /* rond en jaune au survol ou quand le menu est ouvert */
  color: #0f1117;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  /* juste sous le rond, avec 10px d'espace */
  right: 0;
  /* aligné sur le bord droit du rond */
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: #1a1d27;
  border: 1px solid #2a2e3a;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
  /* passe au-dessus du contenu de la page */
}

.profile-dropdown a {
  display: block;
  /* toute la ligne est cliquable */
  padding: 10px 14px;
  border-radius: 8px;
  color: #e7eaf4;
  text-decoration: none;
}

.profile-dropdown a:hover {
  background-color: #23273a;
  color: #eab711;
}

.profile-dropdown .logout {
  color: #ff6b6b;
  /* "Log out" en rouge */
}

.profile-dropdown li:last-child {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #2a2e3a;
  /* séparateur avant "Log out" */
}











/* ===================== Porte-monnaie (clés + TwinPoints) ===================== */
/* Créé par js/header.js, juste sous le header, en haut à droite de chaque page connectée */
.wallet {
  display: flex;
  justify-content: flex-end;
  /* collé à droite */
  align-items: center;
  gap: 8px;
  padding: 10px 24px 0;
}

.wallet-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  /* une pilule, comme les compteurs des jeux */
  background-color: #1a1d27;
  border: 1px solid #2a2e3a;
  color: #e7eaf4;
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.wallet-item:hover {
  border-color: #eab711;
}

.wallet-icon {
  height: 24px;
  width: auto;
}

.wallet-item .points-icon {
  width: 24px;
  font-size: 1.1rem;
  text-align: center;
}

/* Petit "+" jaune : raccourci pour acheter des clés */
.wallet-plus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #eab711;
  color: #0f1117;
  font-weight: bold;
  font-size: 0.85rem;
  line-height: 1;
}

/* Téléphone : même marge sur les côtés que le header */
@media (max-width: 900px) {
  .wallet {
    padding: 8px 16px 0;
  }
}

/* ===================== Menu burger (☰) ===================== */
/* Le bouton est créé par js/header.js. Caché sur ordinateur. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  background: none;
}

.nav-toggle:hover {
  background-color: #1a1d27;
}

/* Les 3 barres */
.nav-toggle span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background-color: #e7eaf4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Menu ouvert : les barres forment une croix ✕ */
.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Menu burger : dès 900 px, pour que les 5 liens du menu ne touchent pas le titre */
@media (max-width: 900px) {
  .site-header {
    position: relative;
    /* repère pour le panneau du menu, placé juste en dessous */
    padding: 8px 16px;
    gap: 8px;
  }

  .site-header .logo {
    flex: 0 0 auto;
  }

  .site-header .logo img {
    width: 56px;
    height: auto;
  }

  .nav-toggle {
    display: flex;
  }

  /* Le menu devient un panneau qui s'ouvre sous le header */
  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background-color: #0f1117;
    border-bottom: 1px solid #2a2e3a;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  }

  .site-header.nav-open nav {
    display: flex;
  }

  .site-header nav > a {
    padding: 14px 4px;
    border-bottom: 1px solid #1a1d27;
    font-size: 1.1rem;
  }

  /* Page en cours : trait jaune à gauche au lieu du soulignement */
  .site-header nav > a[aria-current="page"] {
    border-bottom: 1px solid #1a1d27;
    border-left: 3px solid #eab711;
    padding-left: 12px;
  }

  /* À droite : juste le rond du profil et le ☰, côte à côte */
  .header-right {
    flex: 0 0 auto;
    gap: 8px;
  }

  /* La liste du profil : une carte sous le rond, alignée sur le bord droit du ☰
     (-52px = la largeur du ☰ 44px + l'espace de 8px entre les deux) */
  .site-header .profile-dropdown {
    top: calc(100% + 14px);
    right: -52px;
    width: min(260px, calc(100vw - 32px));
    padding: 8px;
    border-radius: 16px;
    z-index: 60;
  }

  .site-header .profile-dropdown a {
    padding: 12px 14px;
    font-size: 1.05rem;
  }

}

/* Page de tirage : les 3 colonnes ne tiennent plus côte à côte en dessous de ~1000 px */
@media (max-width: 1000px) {
  /* ---------- Page de tirage (draw.html) sur tablette et téléphone ---------- */
  /* Les 3 colonnes (licences, tirage, boutique) passent les unes sous les autres */
  .main_draw {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 16px;
  }

  .main_draw .filter,
  .main_draw .tirage {
    width: 100%;
  }

  .main_draw .slider {
    max-width: 100%;
    /* le ruban d'extensions prend toute la largeur de l'écran */
  }

  .main_draw .draw_ruban_content img {
    height: 120px;
  }

  .main_draw .licence-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .main_draw .booster-img {
    width: 160px;
  }

  .main_draw .draw-actions {
    gap: 24px;
  }

  .main_draw .draw-note {
    margin-top: 24px;
  }

  /* La boutique TwinPoints : une carte pleine largeur en bas */
  .points-teaser {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* L'info-bulle des probabilités : centrée sur l'écran avec 16 px de marge de chaque côté.
     (placée sous l'icône, même cachée, elle dépassait et élargissait la page) */
  .info-box {
    position: fixed;
    top: 30%;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: none;
    z-index: 60;
  }
}

/* Appareils mobiles */
@media (max-width: 1200px) {

  .site-name .twin,
  .site-name .card {
    font-size: 2rem;
    /* titre plus petit sur téléphone */
  }
}
/* Slogan de l'accueil : les initiales T, C, G (Trading Card Game) aux couleurs de TwinCard */
.tcg-slogan .tcg-gold {
  color: #eab711;
}

.tcg-slogan .tcg-blue {
  color: #12b5f0;
}

.tcg-slogan {
  color: #e7eaf4;   /* le reste du slogan en clair, pour que les initiales ressortent */
}

/* Accueil : les avantages de TwinCard, 3 cartes par ligne (comme les licences) */
.benefits-grid .description_widget {
  flex: 1 1 calc(33.33% - 10.67px);
}

/* Pages publiques sur téléphone : boutons Log in / Sign up plus compacts, pour ne pas dépasser de l'écran */
@media (max-width: 480px) {
  .site-header .actions {
    gap: 6px;
  }

  .site-header .actions .btn {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}

/* Traduction française du slogan, juste sous la version anglaise */
.tcg-slogan-fr {
  margin-top: -8px;
  color: #9aa0ad;
  font-style: italic;
}