.action-buttons-websites {
    flex-direction: column;
    align-items: center; /* Centre horizontalement */
    justify-content: center; /* Centre verticalement */
    gap: 10px; /* Espacement uniforme entre les boutons */
    width: 100%;
    max-width: 250px; /* Largeur maximale des boutons */
    margin: 0 auto; /* Centre l'ensemble des boutons */
    margin-bottom: 20px;
}

.website-icons-sep {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, #000000, rgb(255 255 255), #000000);
  margin: 10px 0;
  opacity: 1;
}

.website-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px; /* espacement entre les icônes */
}

.website-icon-link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  transition: transform .15s ease;
}

.website-icon-link:hover {
  transform: scale(1.1);
}

.website-icon {
  margin: 0 !important;
  box-shadow: 0 0 4px rgb(255 255 255) !important;
}

.website-icon:hover {
box-shadow: 0 0 4px rgb(255 0 0) !important;
}

img.website-icon {
  width: 40px !important;
  height: 40px !important;
}

/* 📌 Overlay assombrissant */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: cover !important;  /* Assurer que l'image couvre toute la fenêtre */
    background-position: center !important; /* Centrer l'image */
    background-repeat: repeat !important;  /* Répéter l'image */
    z-index: -1; /* Placer l'overlay derrière le contenu */
}

/* Arrière-plan avec l'image */
.background-artwork {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;  /* Couleur de fond de secours */
    background-size: cover;     /* Couvre la fenêtre */
    background-repeat: repeat;  /* Répéter l'image */
    background-position: center !important; /* Centrer l'image dans la fenêtre */
    z-index: -1; /* Placer l'image derrière le contenu */
    opacity: 0.35;
}

/* Styles sur tablettes */
@media screen and (max-width: 1024px) {
    .background-artwork {background-repeat: repeat;
        background-size: 100% !important; /* Élargir l'image sur les tablettes pour garder une bonne couverture */
        background-position: center;
        background-size: cover !important; /* Cela garantit que l'image de fond couvre toute la zone */
    }
}

/* Styles sur mobiles */
@media screen and (max-width: 768px) {
    .background-artwork {background-repeat: repeat;
        background-size: cover !important; /* Cela garantit que l'image de fond couvre toute la zone */
        background-size: 100% !important; /* Réduire l'image pour les petits écrans comme les mobiles */
        background-position: center;
    }
}

ul.list-unstyled {
margin-bottom: 1em !important;
}

li strong {
color: #ff7800 !important;
margin-bottom: 10px !important;
}

.pseudo {
    margin-bottom: 0px !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 1em !important;
    max-width: 140px !important;            /* Ajuste la largeur du pseudo si nécessaire */
    overflow: hidden !important;
    text-overflow: ellipsis !important;     /* Texte qui dépasse sera caché avec des "..." */
    white-space: nowrap !important;         /* Pas de retour à la ligne */
}

.review-date {
    color: #00eadc !important;
    font-size: 0.9em !important;
}

.review-header img {
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgb(1 241 255) !important;
}

.review-user {
    display: flex;
    gap: 10px;   
    padding: 0px !important;
}

.reviews-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    margin-bottom: 25px;
    gap: 0.5em;
}
.carousel-arrow {
    position: absolute;
    top: 92%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgb(201 201 201 / 0%);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: #04ff00;
    font-size: 1.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px #01ffd900;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    outline: none;
}

.carousel-arrow.left {
    left: 0px; /* ou 0 ou -12px, ajuste selon largeur/effet */
}

.carousel-arrow.right {
    right: 0px;
}

.carousel-arrow:disabled {
    opacity: 1;
    pointer-events: none;
    color: #ff0000;
    box-shadow: 0 0 10px #ff010100;
}

.reviews-viewport {
    width: 270px;      /* Largeur pile de l'avis */
    height: 250px;     /* Hauteur pile de l'avis */
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    background: transparent;
    box-shadow: 0 0 10px #d801c1;
    position: relative;
}

.reviews-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(.7,1.5,.2,1);
    will-change: transform;
}

.review-card {
    width: 215px;
    height: 250px;
    background: rgb(142 1 177 / 13%);
    border-radius: 20px;
    margin-right: 40px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    overflow: hidden;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 30px;
}

.review-header {
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.review-header span {
    font-family: Rajdhani, sans-serif;
}

.review-header span:first-of-type {
    font-weight: bold;
    font-size: 1.08em;
}

.review-header span:last-of-type {
    margin-left: auto;
    font-size: 0.96em;
    color: #bbb;
}

.review-card > div:nth-child(2) {
    font-size: 1.16em;
    color: gold;
    margin-bottom: 2px;
    letter-spacing: 1px;
}
.review-card > div:nth-child(2) span {
    color: #ed0000;
    font-size: 0.88em;
    margin-left: 7px;
}

.review-card span:not(.pseudo) {
    color: #ff0000 !important;
    font-size: 0.8em !important;
    font-weight: bold;
}

.reviews-carousel-user {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    gap: 0.5em;
}

.carousel-arrow.left-user {
    left: 0px; /* ou 0 ou -12px, ajuste selon largeur/effet */
}

.carousel-arrow.right-user {
    right: 0px;
}

.carousel-arrow-user:disabled {
    opacity: 1;
    pointer-events: none;
    color: #ff0000;
    box-shadow: 0 0 10px #ff010100;
}

.reviews-viewport-user {
    width: 270px;      /* Largeur pile de l'avis */
    height: 210px;     /* Hauteur pile de l'avis */
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    background: transparent;
    box-shadow: 0 0 10px #d801c1;
    position: relative;
}

.reviews-track-user {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(.7,1.5,.2,1);
    will-change: transform;
}

.review-card-user {
    width: 215px;
    height: 250px;
    background: rgb(142 1 177 / 13%);
    border-radius: 20px;
    margin-right: 40px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    overflow: hidden;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 30px;
    padding-top: 10px;
}

.review-header-user {
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.review-header-user span {
    font-family: Rajdhani, sans-serif;
}

.review-header-user span:first-of-type {
    font-weight: bold;
    font-size: 1.08em;
}

.review-header-user span:last-of-type {
    margin-left: auto;
    font-size: 0.96em;
    color: #bbb;
}

.review-date-user {
    color: #00eadc !important;
    font-size: 14.4px !important;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.review-card-user > div:nth-child(2) {
    font-size: 1.16em;
    color: gold;
    margin-bottom: 2px;
}
.review-card-user > div:nth-child(2) span {
    color: #ed0000;
    font-size: 0.88em;
    margin-left: 7px;
}

.review-card-user span:not(.pseudo) {
    color: #ff0000 !important;
    font-size: 0.8em !important;
    font-weight: bold;
}

.review-comment {
    font-weight: bold;
    box-shadow: 0 0 10px rgb(255 0 241 / 0%);
    background: #80808000 !important;
    border-radius: px !important;
    overflow-y: auto !important;
    word-break: break-word !important;
    white-space: pre-line !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 6px 12px 8px 12px !important;  /* moins de padding en haut */
    margin-top: 0px !important;
    padding-top: 0;
    min-height: 28px !important;
    max-height: 115px !important;
    height: auto !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    display: block !important; /* PAS de flex */
}

.review-comment::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.review-comment::-webkit-scrollbar-thumb {
    background: #ab01ab;
    border-radius: 8px;
}
.review-comment::-webkit-scrollbar-track {
    background: transparent;
}

.modal-dialog {
    max-width: 1000px !important;
    height: auto !important;
    margin: auto !important;
    margin-top: 0px !important;
}
    
    /* Centrage complet de l’image dans la modale */
.modal-body {
    padding: 0 !important;
}
    
/* Image à agrandir proprement */
.modal-body img {
    width: 1200px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    display: block !important;
    margin-bottom: 0 !important;
}
    
    /* Image à agrandir proprement */
.modal-header {
    display: none !important;
}
    
    @media (max-width: 768px) {
    .modal-dialog {
          max-width: 95vw !important;
          margin-top: 20px !important;
        }
      
    .modal-body img {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          max-height: 80vh !important;
        }
      }
      
      @media (max-width: 480px) {
    .modal-body img {
          max-height: 70vh !important;
        }
      }
    
    div.review-block {
        margin-bottom: 15px !important;
    }
    
.rating-container {
    border-radius: 20px;
    background-color: rgb(0 0 0 / 74%); /* Fond transparent */
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    align-items: flx-start;
    width:100%;
    max-width: 250px;
    height: auto;
    box-shadow: 0 0 10px rgb(255 255 255);
    padding: 20px;
    padding-bottom: 0px;
    margin: 0 auto !important;
    padding-bottom: 5px;
    cursor: default;
}
    
    .rating-container div.rating-stars {
        display: flex;
        align-items: center !important;
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }
    
    div.status-summary ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0;
        margin-bottom: 15px;
        list-style: none !important; /* Masque les puces de la liste */
    }
    
    div.status-summary li::marker {
        content: none !important; /* Masque les puces spécifiquement */
    }
    
    div.status-summary li {
        color: #ffffff;
        font-weight: bold;
        text-align: left;
        width: 100%;
        line-height: 1.4;
        word-break: break-word;
    }
    
    div.status-summary ul strong {
    color: #32ff00 !important;
    }


    div.user-summary ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0;
        margin-bottom: 15px;
        list-style: none !important; /* Masque les puces de la liste */
    }
    
    div.user-summary li::marker {
        content: none !important; /* Masque les puces spécifiquement */
    }
    
    div.user-summary li {
        color: #ffffff;
        font-weight: bold;
        text-align: left;
        width: 100%;
        line-height: 1.4;
        word-break: break-word;
    }
    
    div.user-summary ul strong {
    color: #32ff00 !important;
    }

div.status-summary ul, div.user-summary ul {
    list-style-type: none !important; /* Masque les puces */
}

div.status-summary li, div.user-summary li {
    list-style-type: none !important; /* Masque les puces dans les li */
}
    
    .platform-name {
        color: #00ffe7; /* couleur mise en valeur (par ex. rouge foncé) */
    }
    
    .platform-name.active {
        color: #72f7ff; /* couleur mise en valeur (par ex. rouge foncé) */
    }
    
    .rating-container span.rating-count {
        color: #32ff00 !important;
        font-weight: bold;
    }

    .rating-container p{
        border: 1px solid;
        background:#1c0119;
        border-radius: 20px;
        /*display: flex;*/
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 15px;
    }
    
    .rating-container strong {
        color: #ffb600 !important;
    }

    .rating-container li strong {
        color: #32ff00 !important;
    }

    .rating-container p.info-perso{
        border: 1px solid;
        background:#ffb600;
        border-radius: 20px;
        /*display: flex;*/
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 15px;
    }
    
    .rating-container p.info-perso strong {
        color: #1c0119 !important;
    }

    .rating-container p.titre-info-perso{
        border: 1px solid;
        background:#ffb600;
        border-radius: 20px;
        /*display: flex;*/
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 15px;
    }
    
    .rating-container p.titre-info-perso strong {
        color: #1c0119 !important;
    }
    
    
    .language-flag {
        width: 40px;
        background: none !important;
        object-fit: cover !important;
        box-shadow: none !important;
        margin-right: 7px;
    
    }
    .language-flag:hover {
        transform: scale(1.12) rotate(-3deg);
    }
    
    p {
    font-weight : normal !important;
    }
    
   /* ===== Age Ratings — style IGDB compact ===== */
   /* caché le temps du positionnement, puis visible quand .is-ready arrive */
.rating-popover{
  opacity: 0;
  transition: opacity .08s linear;
}
.rating-popover.is-ready{
  opacity: 1;
}

/* la flèche sera centrée via JS ; on neutralise les positions conflictuelles */
.rating-popover .popover-arrow{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  right: auto !important;
}

.igdb-ratings{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important; /* à gauche */
  gap: 6px; /* petit espace entre les logos (ajuste) */
}

.igdb-rating{
  display:flex; flex-direction:column; align-items:center;
}

/* petit label au-dessus (région/orga) */
.igdb-rating .region{
  display: none;
  font-weight:800; color:#e6e6e6; background:rgb(225 0 0 / 12%);
  border:1px solid rgba(255,255,255,.18);
  padding:4px 8px; border-radius:8px; margin-bottom:6px; font-size:.8rem;
}

/* carte logo */
.rating-pill{
  width:70px; height:70px; border-radius:10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease;
  outline: none; border:0; padding:0; cursor:pointer;
}
.rating-pill:hover { 
transform: translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.3); 
}

.rating-pill img { 
max-width:100%; 
max-height:100%; 
object-fit:cover;
box-shadow: none !important;
border: solid 1px #ffffff;
}

/* petit chevron (optionnel, purely décoratif) */
.chev{ color:#cfcfcf; font-size:18px; line-height:1; margin-top:6px; }


/* ===== Popover des classifications : couleurs personnalisées ===== */
.rating-popover{
  /* 🎨 change juste ces variables */
  --rp-bg: rgb(255 255 255 / 92%);         /* fond du popover */
  --rp-header-bg: rgb(0 0 0);/* fond de l’en-tête (barre du titre) */
  --rp-title: #d20000;                 /* couleur du titre (ex: “18”) */
  --rp-text: #f2f2f2;                  /* texte du contenu */
  --rp-border: rgb(255 255 255);  /* bordure/arrow */
  --rp-shadow: 0 12px 28px rgba(0,0,0,.45);

  background: var(--rp-bg);
  color: var(--rp-text);
  border: 1px solid var(--rp-border);
  box-shadow: var(--rp-shadow);
  border-radius: 12px;
}

/* En-tête (titre “18”) */
.rating-popover .popover-header{
  background: var(--rp-header-bg);
  color: var(--rp-title);
  font-weight: 800;
  border-bottom: 1px solid var(--rp-border);
  border-radius: 12px 12px 0 0;   /* haut arrondi (déjà) */
}

/* Corps */
.rating-popover .popover-body{
  background: var(--rp-bg);
  color: var(--rp-text);
  background: #fff;               /* ta couleur de fond */
  color: #111;
  border-radius: 0 0 12px 12px;   /* ⬅️ arrondi bas gauche/droite */
  border-top: 0;
}
/* Popover “IGDB like” */
.rating-popover.bs-popover-auto{ max-width: 420px; }
.rating-popover .popover-body{ padding:12px; }
.rating-popover .desc-icons{ display:flex; gap:8px; margin-bottom:8px; }
.rating-popover .desc-icons img{
  width:28px; height:28px; background:#fff; border-radius:6px; object-fit:contain; display:block;
  box-shadow:0 1px 3px rgb(255 16 16 / 100%);
}
.rating-popover ul{ margin:0; padding-left:18px; color:#222; }
.rating-popover .synopsis{
  margin-top:10px; font-size:.92rem; line-height:1.35; color:#ff0000;
  max-height:120px; overflow:auto;
}

/* tooltips pour les petites icônes */
.tooltip-inner{ font-weight:600; }

/* responsive minime : réduit le logo et le popover */
@media (max-width: 480px){
.rating-pill{ width:74px; height:74px; }
  .rating-popover.bs-popover-auto{ max-width: 320px; }
}

/* Popover : ligne = TEXTE à gauche / ICÔNE à droite, centrés verticalement */
.rating-popover .desc-icons{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:8px;
}

.rating-popover .desc-item{
  display:flex;                /* ← flex au lieu de grid */
  align-items:center;          /* ← centre verticalement */
  gap:8px;
  padding:6px 0;
  background:transparent;
  box-shadow:none;
  border-top:1px solid rgba(0,0,0,.08);   /* séparateur (optionnel) */
}
.rating-popover .desc-item:first-child{ border-top:0; }

/* icône à droite */
/* icône à droite, parfaitement centrée verticalement */
.rating-popover .desc-item img{
  width:50px; height:50px;
  object-fit:contain;
  background:#fff;
  border-radius:6px;
  padding:3px;
  display:block;
  align-self:center;           /* sécurité au cas où */
}

/* texte prend toute la place disponible */
.rating-popover .desc-item .desc-txt{
  flex:1;                      /* ← pousse l’icône à droite */
  color: black;
    display:inline !important;
  font-weight:600;
  line-height:1.25;
}

/* si pas d’icône -> le texte occupe toute la ligne */
.rating-popover .desc-item.no-icon .desc-txt{ flex:unset; }

/* petite séparation entre lignes (optionnel) */
.rating-popover .desc-item + .desc-item{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 6px;
}

    
    /* 📌 Cover image */
    /* Garder le style actuel pour toutes les images sauf celles ayant la classe .btn-icon */
    .container img:not(.btn-icon) {
        border-radius: 10px;
        background-color: black;
        margin-bottom: 15px;
        box-shadow: 0 0 15px #ffffff;
        max-width: 100%;
        height: auto;
        transition: transform 0.4s ease-in-out;
    }
    
    /* Dans la grille des images */
    .img-fluid {
        object-fit: contain;  /* Maintient le ratio de l'image tout en remplissant la zone */
        height: auto; /* Hauteur fixe pour uniformiser les images */
        width: 100%;  /* Largeur pleine */
        cursor: pointer; /* Changer le curseur en forme de main au survol */
    }
    
    /* Dans la modale */
    .modal-body img {
        object-fit: contain;  /* Garder le ratio d'aspect sans découper l'image */
        width: 100%; /* Largeur pleine dans la modale */
        height: auto; /* Hauteur automatique pour garder le ratio */
    }
    
    .btn-group-vertical-custom {
        display: flex;
        flex-direction: column;
        max-width: 300px;
    }
    
    .btn-group-vertical-custom .btn {
        width: 100%;
        margin-bottom: 10px;
        white-space: normal;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .btn-group-vertical-custom .btn:last-child {
        margin-bottom: 0;
    }
    
    .btn-icon {
            margin-right: 5px;
        border-radius: 10px;
        width: 20px;
        height: 20px;
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
        box-shadow: none !important;
    }
    
    h1 {
        text-align: center;
        color: #444;
        margin-bottom: 30px;
        font-size: 2rem;
    }
    
    /* 📌 Screenshot and Video sections */
    .mt-4 {
        margin-top: 40px;
    }
    
    .media-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Colonnes dynamiques */
        gap: 20px; /* Espacement uniforme */
        padding: 20px;
        justify-content: center;
    }
    
    /* 📌 Video container */
    .video-container {
        box-shadow: 0 0 15px #ffffff;
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        margin: 0 auto;
        background: #000;
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
    }
    
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    .details {
        display: flex;
        gap: 20px;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    
    /* Contenu de la section */
    .details-content {
        flex: 1;
        width: 100%;
    }
    
    /* ======= Cartes cliquables ======= */
    .card-link {
        display: block; /* Rend toute la carte cliquable */
    }
    
    .card-link .card {
        overflow: hidden;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    
     .card-link .card:hover {
        transform: scale(1.05);
    }
    
     .card-link .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* ======= Ajustement sous le footer ======= */
     .tab-pane {
        margin-bottom: 60px;
    }
    
    /* 📌 Boutons verticaux même taille */
    .btn-group-vertical-custom {
        display: flex;
        flex-direction: column;
        max-width: 300px; /* ou largeur souhaitée */
    }
    
    .btn-group-vertical-custom .btn {
        width: 100%;
        margin-bottom: 10px; /* Espacement entre boutons */
        white-space: normal; /* Texte sur plusieurs lignes si nécessaire */
    }
    
    
    
/* ===== Cartes + sliders (page détails) — clean ===== */

/* Base carte */
#similarGames .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

#dlc .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

#bundles .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

#ports .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

#standaloneExpansions .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

#expansions .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

#remasters .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

#remakes .media-card {
  width: var(--card-w, 230px) !important;   /* la carte suit --card-w */
  position: relative;
  display: block;
  border-radius: 14px;
  background: rgb(26 0 32 / 74%);
  box-shadow: 0 0 8px rgb(255 255 255) !important;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

.meda-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#similarGames .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#bundles .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#dlc .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#artworks   .media-card .thumb:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#screenshots   .media-card .thumb:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#remakes   .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#remasters   .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#standaloneExpansions   .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#expansions   .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#ports   .media-card:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }
#photos   .media-card .thumb:hover{ box-shadow: 0 0 8px rgb(255 0 0) !important; }


/* Image plein cadre */
.media-card .thumb-wrap{ background:#000; }
.media-card .thumb{
  display:block; width:100%; height:auto; object-fit: cover;
}

/* Zone titre par défaut (jeux/DLC/etc.) */
.media-card .body{ padding:10px 12px; }
.media-card .title{
  margin:0 0 6px; color:#fff; font-weight:800; font-size:.98rem; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Cacher les titres sur les onglets médias */
#videos .media-card .body,
#screenshots .media-card .body,
#artworks .media-card .body,
#photos .media-card .body{ display:none !important; }

/* Images médias : afficher l’image entière */
#screenshots .media-card .thumb,
#artworks   .media-card .thumb,
#photos     .media-card .thumb{ object-fit: contain; box-shadow: 0 0 8px rgb(255 255 255) !important; }

/* Jamais de tags */
.media-card .tag{ display:none !important; }

/* Grille générique */
.content-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, var(--card-w, 230px));
  gap:18px;
  justify-content:start;
}

/* Slider horizontal (tous écrans) */
.content-list.is-slider{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w, 230px);
  gap:18px;
  overflow-x:auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.content-list.is-slider .media-card{ scroll-snap-align:start; }
.content-list.is-slider .media-card:hover{ transform:none; }
.content-list.is-slider.grabbing,
.content-list.is-slider.grabbing *{ cursor:grabbing !important; }

/* Tailles PLUS GRANDES pour vidéos / screenshots / artworks / photos */
#videos .content-list,
#screenshots .content-list
{ --card-w: 480px; }   /* mets 420/480/540… */
@media (max-width:480px){
  #videos .content-list,
  #screenshots .content-list,
  #artworks .content-list,
  #photos .content-list{ --card-w: 340px; }
}

/* Vidéos en iframe : 16:9, sans overlay ; “idle” = molette pour slider */
.media-card.video .iframe-wrap{
  position:relative; width:100%; padding-bottom:56.25%;
  background:#000; border-radius:14px; overflow:hidden; box-shadow: 0 0 8px rgb(255, 255, 255) !important;
}

.media-card.video .iframe-wrap:hover{
box-shadow: 0 0 8px rgb(255, 0, 0) !important; 
}

.media-card.video .iframe-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.media-card.video.is-idle .iframe-wrap iframe{ pointer-events:none;  }

/* Scrollbar discrète (optionnel) */
.content-list.is-slider::-webkit-scrollbar{ height:8px; }
.content-list.is-slider::-webkit-scrollbar-thumb{ background:#ffffff; border-radius:8px; }
.content-list.is-slider::-webkit-scrollbar-track{ background:transparent; }

/* 1) Neutralise les styles globaux qui créent la "bande" sous les vignettes */
.media-card .thumb {
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;   /* on garde les coins de la carte, pas de l'image */
}

/* 2) Sur les onglets médias, on supprime TOUTE zone titre (au cas où) */
#videos .media-card .body,
#screenshots .media-card .body,
#artworks .media-card .body,
#photos .media-card .body {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  border: 0 !important;
}

/* 3) Si une carte a la variante overlay, on la neutralise aussi sur les médias */
#videos .media-card.overlay-title .body,
#screenshots .media-card.overlay-title .body,
#artworks .media-card.overlay-title .body,
#photos .media-card.overlay-title .body {
  display: none !important;
  background: none !important;
}

/* Tant que la carte vidéo est "idle", l'iframe ne capte aucun event (molette, clic) */
.media-card.video.is-idle .iframe-wrap iframe {
  pointer-events: none !important;
}

/* ==== Cartes jaquettes : garder la même carte, centrer verticalement l'image ==== */
/* 1) taille de la zone image (à ajuster si besoin pour matcher ton design) */
#dlc .content-list,
#expansions .content-list,
#standaloneExpansions .content-list,
#remasters .content-list,
#remakes .content-list,
#ports .content-list,
#bundles .content-list,
#similarGames .content-list{
  --thumb-h: 307px;           /* hauteur de la partie "image" de la carte */
}

/* 2) conteneur image : centrer sans imposer de ratio */
#dlc .media-card .thumb-wrap,
#expansions .media-card .thumb-wrap,
#standaloneExpansions .media-card .thumb-wrap,
#remasters .media-card .thumb-wrap,
#remakes .media-card .thumb-wrap,
#ports .media-card .thumb-wrap,
#bundles .media-card .thumb-wrap,
#similarGames .media-card .thumb-wrap{
  height: var(--thumb-h);
  display: flex;
  align-items: center;         /* ← centrage vertical */
  justify-content: center;     /* ← centrage horizontal */
  overflow: hidden;
  background: #000;            /* même rendu que maintenant */
  border-radius: 0px;         /* garde tes arrondis */
}

/* 3) image : entière, centrée, jamais étirée */
#dlc .media-card .thumb,
#expansions .media-card .thumb,
#standaloneExpansions .media-card .thumb,
#remasters .media-card .thumb,
#remakes .media-card .thumb,
#ports .media-card .thumb,
#bundles .media-card .thumb,
#similarGames .media-card .thumb{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain !important;    /* pas de recadrage */
  object-position: center !important;/* bien centré (vertical + horizontal) */
}

/* ========== MÉDIAS (Screenshots, Artworks, Photos) ========== */
/* Hauteur de la zone image – ajuste si tu veux */
#screenshots .content-list,
#artworks .content-list,
#photos .content-list{
  --thumb-h: 280px;   /* 260/280 si tu veux plus haut */
}

/* Fenêtre d’image : on centre sans recadrer */
#screenshots .media-card .thumb-wrap,
#artworks   .media-card .thumb-wrap,
#photos     .media-card .thumb-wrap{
  height: var(--thumb-h);
  display: flex;
  align-items: center;       /* centrage vertical */
  justify-content: center;   /* centrage horizontal */
  /* overflow: hidden; */
  background: none;
}

/* Image : toujours entière, centrée */
#screenshots .media-card .thumb,
#artworks   .media-card .thumb,
#photos     .media-card .thumb{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain !important;
  object-position: center !important;
border-radius: 12px !important;
}


/* Laisse un espace au bord du slider pour que l’ombre ne soit pas coupée */
.content-list.is-slider{
  /* avant: padding: 6px 2px 10px; */
  --edge-pad: 16px;                     /* ajuste 12–24px selon la taille de l’ombre */
  padding: 6px var(--edge-pad) 10px;    /* espace à gauche ET à droite */
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* pour que la 1re/dernière carte s’alignent proprement malgré le padding */
  scroll-padding-left: var(--edge-pad);
  scroll-padding-right: var(--edge-pad);
}