/* components/_variables.css */
/* Contient toutes les variables CSS globales du site. */

:root {
    --bg-color-dark: #181828;
    --bg-color-medium: #222235;
    --bg-color-light: #303048;
    --text-color-primary: #e8e8f0;
    --text-color-secondary: #a8a8c0;
    --accent-color: #7057e0;
    --accent-color-hover: #8870f0;
	--accent-color-hover-shade: #8870f061;
    --border-color: #383850;
    --font-body: 'Roboto', sans-serif;
    --font-title: 'Poppins', sans-serif;
    --page-padding: 10px; /* Padding latéral global */
    --border-radius: 8px; 
    --header-height: 65px; 
    --drawer-width: 240px;
    --scroll-button-size: 44px;
    --scroll-button-offset: 10px; 
    --hover-stroke-width: 2px;
	--drawer-width-collapsed: 65px;
    --drawer-width-expanded: 221px;
}






/* components/_base.css */
/* Contient le reset CSS et les styles globaux pour html et body. */

/* --- Global Reset & Box Sizing --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color-dark);
    color: var(--text-color-primary);
    font-family: var(--font-body);
    line-height: 1.5; 
    font-size: 15px; 
}

/* --- Style Personnalisé pour la Barre de Défilement Globale --- */

/* Pour les navigateurs basés sur WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color-dark); /* Arrière-plan de la piste */
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg-color-light); /* Couleur de la barre de défilement */
    border-radius: var(--border-radius); /* Bords arrondis comme le reste du site */
    border: 2px solid var(--bg-color-dark); /* Bordure pour un effet de "flottement" */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color); /* Changement de couleur au survol */
}

/* Pour Firefox */
html {
  scrollbar-width: thin;
  /* La première couleur est la barre, la seconde est l'arrière-plan */
  scrollbar-color: var(--bg-color-light) var(--bg-color-dark);
}





/* components/_layout.css */
/* Contient les styles pour les éléments de structure principaux :
   - Conteneurs (.container)
   - En-tête (.site-header)
   - Pied de page (.site-footer)
   - Contenu principal (.site-main-content)
   - Sections de page (section)
   - Layout de la page de jeu
*/

/* =================================================================== */
/* STYLE GLOBAL POUR LES CONTENEURS PRINCIPAUX                       */
/* =================================================================== */
.container {
    width: 100%;

    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
	
}
.game-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}


.site-main-content {
    padding-top: var(--header-height);
    transition: margin-left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* =================================================================== */
/* EN-TÊTE DU SITE (.site-header)                                    */
/* =================================================================== */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1200;
    background-color: #22223591;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 var(--page-padding);
}

.header-content {
    display: flex;
    align-items: center;
    width: 100%; /* S'assure qu'il prend la largeur disponible */
    /* La transition sur le padding est retirée pour que le contenu ne bouge plus */
}

.header-left {
    display: flex;
    align-items: flex-start;
}

.site-header .logo {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-left: 13px;
}

/* Les 3 éléments suivants sont masqués par défaut sur mobile */
.drawer-back-button,
.drawer-search-bar-mobile {
    display: none; 
}

.site-header .container {
    padding: 0;
    max-width: 100%;
}

.drawer-back-button {
    display: none;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-color-light);
    border: 1px solid transparent;
    color: var(--text-color-primary);
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-title);
    padding: 5px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.drawer-back-button:hover {
    background-color: var(--bg-color-light);
    border-color: var(--accent-color-hover);
}
.drawer-back-button svg {
    margin-top: 2px;
}
.drawer-back-button span {
    display: none;
}

.header-icon-button {
    background-color: var(--bg-color-light);
    border: 1px solid transparent;
    color: var(--text-color-secondary);
    padding: 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s;
}
.header-icon-button:hover {
    background-color: var(--bg-color-light);
    border-color: var(--accent-color-hover);
}
.header-icon-button svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.header-right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* =================================================================== */
/* PIED DE PAGE (.site-footer)                                       */
/* =================================================================== */
.site-footer {
    background-color: var(--bg-color-medium); color: var(--text-color-secondary);
    text-align: center; padding: 20px 0; 
    margin-top: 30px; 
    border-top: 1px solid var(--border-color); font-size: 0.85rem;
    transition: margin-left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.site-footer .container { 
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
}

/* =================================================================== */
/* SECTIONS DE PAGE                                                  */
/* =================================================================== */
section { 
    padding: 0; 
}

.full-width-section { 
    width: 100%;
    padding-left: 0; 
    padding-right: 0;
}

.section-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 5px;
    gap: 16px;
    justify-content: flex-start;
}
.section-header .section-title {
    margin: 0;
    font-family: var(--font-title); 
    font-size: 1.1rem; 
    font-weight: 500;
    color: var(--text-color-primary);
    padding-left: 14px;
    padding-right: var(--page-padding); 
    padding-top: 5px;
}
.see-more-link {
    display: flex;
    align-items: center;
    text-decoration: none;
	color: var(--accent-color);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.see-more-link:hover {
    color: var(--accent-color-hover);
}
.see-more-link svg {
    width: 1em;
    height: 1em;
    transition: transform 0.2s ease;
}
.see-more-link:hover svg {
    transform: translateX(3px);
}

/* NOUVEAU : Style pour les descriptions de section (SEO) */
.section-description {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    margin: 0 0 9px 3px;
}

/* =================================================================== */
/* LAYOUT DE LA PAGE DE JEU                                          */
/* =================================================================== */
.game-layout-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    padding: 0;
}

.main-column {
    grid-column: 1 / 2;
}

.right-sidebar-column {
    grid-column: 2 / 3;
    position: sticky;
    top: calc(var(--header-height) + 25px);
    overflow-y: auto;
}

.game-player-wrapper,
.game-content-columns {
    max-width: 100%;
    margin: 0;
}
.game-content-columns {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 25px;
    padding: 22px;
    background-color: var(--bg-color-medium);
    border-radius: 8px;
}

.top-ad-placeholder {
    margin-bottom: 25px;
}

.game-header-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
h1.game-title-main { margin: 0; font-size: 1.8rem; line-height: 1.2; }
.game-rating { display: flex; align-items: center; gap: 8px; color: var(--text-color-secondary); }
.rating-stars { color: #ffc107; font-size: 1.2rem; }
.game-embed-container { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.game-actions-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 8px; background-color: var(--bg-color-medium); border-radius: 0 0 8px 8px;}

.actions-bar-title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.actions-bar-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.ban-placeholder, .sidebar-ban-placeholder {
    background-color: var(--bg-color-medium);
    border: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-secondary);
    font-size: 0.9rem;
}

.sidebar-ban-placeholder {
    width: 100%;
    min-height: 280px;
    margin-bottom: 25px;
}

#related-games-sidebar {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}
#related-games-sidebar h3 {
    margin-top: 0;
    margin-bottom: 0px;
    font-size: 0.8rem;
    padding-bottom: 4px;
    font-weight: 500;
}

.sidebar-games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.top-ban-placeholder { width: 100%; min-height: 90px; background-color: var(--bg-color-medium); border: 1px dashed var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-color-secondary); margin: 25px 0;}
.breadcrumb { margin-bottom: 20px; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.breadcrumb li { font-size: 0.85rem; color: var(--text-color-secondary); display: flex; align-items: center; }
.breadcrumb a { color: var(--text-color-secondary); text-decoration: none; transition: color 0.2s; color: var(--accent-color); }
.breadcrumb a:hover { color: var(--accent-color-hover); }
.breadcrumb li:not(:last-child)::after { content: '>'; margin-left: 8px; }
.breadcrumb span[aria-current="page"] { font-weight: bold; color: var(--text-color-primary); }
.game-intro-header { display: flex; justify-content: left; align-items: baseline; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.game-intro-header .game-title-main { font-size: 2.2rem; line-height: 1.2; }

.intro-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
#share-button {
    padding: 8px 12px;
}

/* =================================================================== */
/* LAYOUT RESPONSIVE                                                 */
/* =================================================================== */

/* --- DESKTOP STANDARD (769px et plus) --- */
@media (min-width: 769px) {
    .site-header { transition: none; }
    .header-content { width: auto; padding-left: var(--drawer-width-collapsed); }
    .site-main-content, 
    .site-footer { margin-left: var(--drawer-width-collapsed); }
    
    .drawer-search-bar-mobile {
        display: flex;
        flex-grow: 1;
        justify-content: center;
    }
    .drawer-search-bar-mobile .search-input-wrapper {
        max-width: 450px;
    }
     .drawer-back-button { 
        display: none; 
    }
    #open-drawer-button {
        display: flex;
        margin-right: 12px;
    }

    /* NOUVEAU : Styles pour le menu latéral déplié sur desktop */
    /* CORRECTION : Le décalage ne s'applique que si le menu est "épinglé" par un clic. */
    body.drawer-pinned .site-main-content,
    body.drawer-pinned .site-footer {
        margin-left: var(--drawer-width-expanded);
    }
}

/* --- DESKTOP MOYEN (1084px et plus) --- */
@media (min-width: 1084px) {
    .site-header .top-nav { margin-left: auto; order: 3; }
}

/* --- PAGE JEU : Layout à 2 colonnes (1281px et plus) --- */
@media (min-width: 1281px) {

    body.immersive-mode .game-layout-wrapper {
        display: flex;
        flex-direction: column;
        gap: 25px;
        gap: 0;
    }

    .game-layout-wrapper {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 12px;
        padding: 12px 12px 0 12px;
    }
    .game-content-columns {
        background-color: unset;
        padding: 0;
    }
    .game-embed-container { 
        border-radius: 8px 8px 0 0;
    }
}

/* --- TRÈS GRANDS ÉCRANS (> 1800px) --- */
@media (min-width: 1801px) {
    .main-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .game-player-wrapper,
    .game-content-columns {
        width: 100%;
        max-width: 1800px;
        margin-left: 0;
        margin-right: 0;
    }
}

/* --- TABLETTES (769px à 1280px) --- */
@media (max-width: 1280px) {
    .top-ad-placeholder {
        width: 100%;
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
    }
    .game-content-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 25px;
        max-width: 1800px;
        margin: 0 auto;
    }
    .game-layout-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0;

    }
    .main-column {
        display: contents;
    }
	.game-player-wrapper { 
        order: 1;
        width: 100%;
    }
    .top-ban-placeholder {
        order: 2;
        width: 100%;
        padding: 8px 0;
    }
    .right-sidebar-column {
        order: 3;
    }
    .game-content-columns {
        order: 4;
    }
    .right-sidebar-column {
        position: static;
        width: 100%;
        max-width: none;
        margin: 8px 0 0 0;
        height: auto;
        overflow-y: visible;
    }
    .game-content-columns {
        margin: 20px 8px 0 8px;
        grid-template-columns: 1fr;
    }
    .in-content-ad-column {
        margin-top: 20px;
    }
    .right-sidebar-column .sidebar-ad-placeholder {
        display: none;
    }
    .sidebar-games-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .sidebar-ban-placeholder,
    .in-content-ban-column {
        display: none;
    }
}

/* --- TABLETTES (max-width 1083px) --- */
@media (max-width: 1083px) {
    .sidebar-games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .sidebar-ban-placeholder {
        display: none;
    }
}

/* --- MOBILES (max-width 768px) --- */
@media (max-width: 768px) {
    .header-icon-button .open-drawer-text { display: none; }
    .site-header .logo { font-size: 1.3rem; }
    .site-header .top-nav { display: none; } 
    
    body.drawer-open .site-header {
        gap: 10px;
    }
    body.drawer-open .header-content,
	body.drawer-open .header-icon-button {
        display: none;
    }
    body.drawer-open .drawer-back-button {
        display: flex;
        grid-column: 1 / 2;
    }
    body.drawer-open .drawer-search-bar-mobile {
        display: block;
        grid-column: 2 / 3;
        padding: 0;
        width: 100%;
    }
    body.drawer-open .drawer-search-bar-mobile .search-input-wrapper {
        max-width: none;
    }

    .game-content-columns {
        grid-template-columns: 1fr;
        margin: 20px 8px 0 8px;
    }
    .right-sidebar-column {
        max-width: none;
    }
}

/* NOUVEAU : Cacher la bannière publicitaire du haut sur les écrans de moins de 720px
   car elle est souvent trop large pour les mobiles. */
@media (max-width: 719px) {
    .top-ban-placeholder {
        display: none;
    }
}
/* =================================================================== */
/* VUE IMMERSIVE (PAGE JEU)                                          */
/* =================================================================== */

/* NOUVEAU : Full bleed pour l'overlay du jeu sur mobile (avant le mode immersif) 
body.is-mobile .game-layout-wrapper {
    padding: 0;
}*/

/* --- Styles communs au mode immersif --- */
body.immersive-mode {
    overflow: hidden !important;
}
/* NOUVEAU : Supprime le padding du conteneur principal en mode immersif. */
body.immersive-mode .game-layout-wrapper {
    padding: 0 !important;
}
body.immersive-mode .site-footer,
body.immersive-mode .game-actions-bar,
body.immersive-mode .top-ban-placeholder,
body.immersive-mode .game-content-columns,
body.immersive-mode .right-sidebar-column,
body.immersive-mode .category-drawer {
    display: none !important;
}
body.immersive-mode .logo,
body.immersive-mode .drawer-search-bar-mobile,
body.immersive-mode #open-drawer-button,
body.immersive-mode #user-panel-button {
    display: none !important;
}

/* On cache les boutons spécifiques à l'immersif par défaut */
#back-to-home-button,
#header-favorite-button {
    display: none;
}
/* On les affiche uniquement en mode immersif */
body.immersive-mode #back-to-home-button,
body.immersive-mode #header-favorite-button {
    display: inline-flex !important;
}

/* --- Mode immersif par défaut (Mobile-first, header en haut) --- */
body.immersive-mode .site-header {
    height: var(--header-height) !important;
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 0 var(--page-padding) !important;
}
body.immersive-mode .header-content {
    flex: 1;
    padding: 0;
    max-width: none;
    justify-content: flex-start;
    align-items: center;
}
body.immersive-mode .site-main-content {    
    padding-top: var(--header-height) !important;
    margin-left: 0 !important;
}
body.immersive-mode .game-player-wrapper {
    height: calc(100vh - var(--header-height));
    width: 100vw;
    margin: 0 calc(-1 * var(--page-padding));
}

/* --- Surcharge pour le mode PAYSAGE --- */
/* Ces styles ne s'appliquent que si l'écran est en mode paysage ET que le JS a activé le mode immersif */
@media (orientation: landscape) {
    body.immersive-mode .site-header {
        width: 45px !important;
        height: 100vh !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Aligne les éléments en haut */
        padding: 15px 0 !important;
    }
    body.immersive-mode .header-content {
        width: 100%;
        display: flex;
        padding: 0;
        max-width: none;
        justify-content: center;
        align-items: flex-start;
    }
    body.immersive-mode .header-right {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column; /* Empile les boutons verticalement */
        gap: 15px; /* Espace entre les boutons */
        margin-top: auto; /* Pousse ce groupe de boutons vers le bas */
    }
    body.immersive-mode .site-main-content {
        margin-left: 45px !important;
        padding: 0 !important;
    }
    body.immersive-mode .game-player-wrapper {
        height: 100vh;
        width: 100%;
        margin: 0 !important;
    }
}

/* --- Styles communs pour le contenu du jeu en mode immersif --- */
body.immersive-mode .game-player-wrapper {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
}
body.immersive-mode .game-embed-container {
    height: 100%;
    width: 100%;
}

/* --- Affichage des boutons sur la page de jeu mobile --- */
@media (max-width: 768px) {
    body:has(.game-layout-wrapper) #header-icon-button {
        display: none;
    }
    body:has(.game-layout-wrapper) #back-to-home-button {
        display: inline-flex;
    }
    body:has(.game-layout-wrapper) .game-actions-bar {
        display: none;
    }
}






/* components/_chips.css */
/* Contient les styles pour les composants de type "chip" ou "tag".
   Utilisé pour les tags de jeu, les liens de catégorie, etc.
*/

/* =================================================================== */
/* STYLE POUR LES COMPOSANTS "CHIP" (TAGS, CATÉGORIES, ETC.)         */
/* =================================================================== */

/* --- 1. Classe de base pour tous les chips --- */
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    color: var(--accent-color);
}

/* --- 2. Variante "Tag" (style pilule) --- */
/* Remplace .game-tag-chip */
.chip-tag {
    background-color: var(--bg-color-light);
    color: var(--text-color-secondary);
    border-color: var(--border-color);
    padding: 6px 14px;
    border-radius: 20px;
}
.chip-tag:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* --- 3. Variante "Catégorie" (style badge rectangulaire) --- */
/* Remplace .game-category-link */
.chip-category {
    background-color: var(--accent-color);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
}
.chip-category:hover {
    background-color: var(--accent-color-hover);
}






/* components/_drawer.css */

/* --- Styles pour le Menu Latéral (Drawer) --- */
.category-drawer {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%; /* Prend toute la largeur sur mobile */
    height: calc(100vh - var(--header-height)); /* Prend toute la hauteur restante */
    background-color: var(--bg-color-medium);
    z-index: 1100;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%); /* Caché par défaut sur mobile */
    border-right: 1px solid var(--border-color);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.2s ease-in-out;
    will-change: transform;
    /* Pour la scrollbar qui apparaît au survol */
    scrollbar-width: none; /* Firefox */
}

.category-drawer::-webkit-scrollbar {
    display: none; /* WebKit */
}

.drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color-light);
}
.drawer-header h2 { margin: 0; font-family: var(--font-title); font-size: 1.2rem; color: var(--text-color-primary); font-weight: 600; }

.close-drawer-button {
    background: none; border: none; color: var(--text-color-secondary);
    font-size: 2rem; cursor: pointer; padding: 0; line-height: 0.5;
    transition: color 0.2s ease;
}
.close-drawer-button:hover { color: var(--text-color-primary); }

.drawer-nav ul { list-style: none; padding: 0; margin: 0; }

.drawer-nav li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-color-secondary);
    text-decoration: none;
    border-bottom: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 700;
    font-size: 0.9rem;
	background-color: var(--bg-color-dark);
    position: relative; /* Pour l'indicateur de page active */
}

.drawer-nav .nav-text {
    /* CORRECTION : On anime max-width et margin pour que le texte disparaisse complètement. */
    transition: opacity 0.2s ease-in-out, max-width 0.2s ease-in-out, margin-left 0.2s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 5px;
}
.drawer-nav li:last-child a { border-bottom: none; }

.drawer-nav li a:hover,
.drawer-nav li a.active {
    color: var(--text-color-primary);
}
.drawer-nav li a:hover {
    background-color: var(--accent-color-hover-shade);
}

.drawer-nav li a:hover .category-icon,
.drawer-nav li a.active .category-icon {
    transform: scale(1.1);
    /* NOUVEAU : Retire le filtre pour afficher la couleur originale de l'image */
    filter: none; 
}

/* MODIFIÉ : Styles pour les icônes en tant qu'images */
.category-icon {
    width: 24px; /* Un peu plus grand pour une meilleure visibilité */
    height: 24px;
    transition: transform 0.2s ease, filter 0.2s ease;
    flex-shrink: 0;
    object-fit: contain; /* S'assure que l'image s'adapte sans se déformer */
}

.drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 0.35s;
}
.drawer-overlay.active { opacity: 1; visibility: visible; transition-delay: 0s; }

body.drawer-open .category-drawer {
    transform: translateX(0);
}

/* --- Sélecteur de langue --- */
.language-switcher-container {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

.language-dropdown {
    position: relative;
}

.lang-dropdown-btn {
    background-color: var(--bg-color-light);
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    padding: 6px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    justify-content: space-between;
}

.lang-dropdown-btn:hover, .lang-dropdown-btn[aria-expanded="true"] {
    background-color: var(--bg-color-medium);
    border-color: var(--accent-color);
}

.dropdown-arrow {
    width: 1em;
    height: 1em;
    transition: transform 0.2s ease-in-out;
}

.lang-dropdown-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.lang-dropdown-list {
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    background-color: var(--bg-color-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 1200;
    margin-top: 8px;
    max-height: 250px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.lang-dropdown-list.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: block;
    padding: 10px 15px;
    color: var(--text-color-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.2s, color 0.2s;
}

.lang-option:hover {
    background-color: var(--accent-color-hover-shade);
    color: #fff;
}

.lang-option.active {
    background-color: var(--accent-color);
    color: #fff;
    font-weight: bold;
}

/* --- Pied de page du menu --- */
.drawer-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    display: block;
}

.drawer-footer-nav {
    padding: 15px 15px 15px 15px;
}

.drawer-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background-color: var(--accent-color);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
    margin-bottom: 20px;
}

.drawer-button:hover {
    background-color: var(--accent-color-hover);
}

.drawer-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.drawer-footer-links a {
    color: var(--text-color-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.drawer-footer-links a:hover {
    color: var(--text-color-primary);
}

.drawer-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
}

.drawer-social-links a {
    color: var(--text-color-secondary);
    transition: color 0.2s;
}

.drawer-social-links a:hover {
    color: var(--accent-color);
}

.drawer-copyright {
    font-size: 0.75rem;
    color: var(--text-color-secondary);
    text-align: center;
    padding-bottom: 10px;
    margin: 0;
}

/* --- Indicateur de page active --- */
.active-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 28px;
    background-color: var(--accent-color);
    border-radius: 0px 2px 2px 0px;
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
    transition: all 0.2s ease-out;
}

.drawer-nav li a.active .active-indicator {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}

/* --- Scrollbar du menu --- */
.category-drawer:hover {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--bg-color-light) var(--bg-color-dark);
}

.category-drawer:hover::-webkit-scrollbar {
    display: block;
    width: 12px;
}

.category-drawer:hover::-webkit-scrollbar-track {
    background: var(--bg-color-dark);
}

.category-drawer:hover::-webkit-scrollbar-thumb {
    background-color: var(--bg-color-light);
    border-radius: var(--border-radius);
    border: 2px solid var(--bg-color-dark);
}

.category-drawer:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
}

/* =================================================================== */
/* STYLES POUR LE MENU LATÉRAL SUR DESKTOP (769px et plus)           */
/* =================================================================== */
@media (min-width: 769px) {
    .category-drawer {
        /* On le rend visible et on définit sa largeur par défaut (replié) */
        transform: translateX(0);
        width: var(--drawer-width-collapsed);
        /* On s'assure qu'il ne se superpose pas au contenu principal */
        position: fixed;
    }

    /* Quand le menu est déplié (via la classe sur le body) */
    /* CORRECTION : Le menu s'élargit au survol OU s'il est épinglé. */
    body.drawer-hover .category-drawer,
    body.drawer-pinned .category-drawer {
        width: var(--drawer-width-expanded);
    }

    /* CORRECTION : On positionne l'icône de manière stable pour éviter les sauts à l'animation. */
    .drawer-nav li a {
        justify-content: flex-start; /* On garde un alignement constant */
        padding-left: 22px; /* (65px collapsed width - 20px icon width) / 2 = 22.5px. On arrondit. */
        padding-right: 22px;
    }

    /* On rétablit l'alignement et les marges quand le menu est déplié. */
    body.drawer-hover .drawer-nav li a,
    body.drawer-pinned .drawer-nav li a {
        justify-content: flex-start;
        padding-left: 22px; /* On garde le même padding pour que l'icône ne bouge pas */
        padding-right: 20px;
    }

    /* On cache le texte et les éléments du pied de page quand le menu est replié */
    .drawer-nav .nav-text,
    .drawer-footer-nav,
    .drawer-separator,
    #lang-switcher-label {
        opacity: 0;
        pointer-events: none; /* Empêche l'interaction avec les éléments cachés */
    }
    /* On s'assure que le texte ne prend pas de place quand il est caché. */
    .drawer-nav .nav-text {
        max-width: 0;
        margin-left: 0;
    }

    /* On affiche le texte et les éléments du pied de page quand le menu est déplié */
    /* CORRECTION : Le texte apparaît au survol OU si le menu est épinglé. */
    body.drawer-hover .drawer-nav .nav-text,
    body.drawer-pinned .drawer-nav .nav-text,
    body.drawer-hover .drawer-footer-nav,
    body.drawer-pinned .drawer-footer-nav,
    body.drawer-hover .drawer-separator,
    body.drawer-pinned .drawer-separator,
    body.drawer-hover #lang-switcher-label,
    body.drawer-pinned #lang-switcher-label {
        opacity: 1;
        pointer-events: auto;
    }
    /* On redonne sa largeur et sa marge au texte quand il est visible. */
    body.drawer-hover .drawer-nav .nav-text,
    body.drawer-pinned .drawer-nav .nav-text {
        max-width: 150px; /* Assez grand pour tous les textes */
        margin-left: 12px;
    }
}

/* =================================================================== */
/* STYLES POUR LE PIED DE PAGE DU MENU (DRAWER FOOTER)               */
/* =================================================================== */

/* Conteneur principal du pied de page du menu */
.drawer-footer-nav {
    margin-top: auto; /* Pousse le pied de page vers le bas */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Conteneur pour le sélecteur de langue */
.drawer-footer-nav .language-switcher-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* Espacement pour le label "Langue" */
#lang-switcher-label {
    margin-right: 15px; /* Espace entre le texte et le dropdown */
    color: var(--text-color-secondary);
}

/* Conteneur pour les liens de pied de page (À propos, etc.) */
.drawer-footer-links {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.drawer-footer-links li a {
    display: block;
    padding: 8px 20px;
    text-decoration: none;
    color: var(--text-color-secondary);
    font-size: 0.85rem;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
    border-radius: var(--border-radius);
}

/* Effet de survol cohérent avec le reste du menu */
.drawer-footer-links li a:hover {
    color: var(--text-color-primary);
    /* Le texte se déplace légèrement comme les autres éléments du menu */
    transform: translateX(5px);
}







/* components/user-panel.css */

/* --- Le panneau lui-même --- */
#user-games-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%; /* Largeur du panneau */
    max-width: 360px; /* S'assure qu'il ne prend pas tout l'écran sur mobile */
    height: 100%;
    background-color: var(--bg-color-dark);
    color: #e0e0e0;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1251; /* Au-dessus de l'overlay */
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* --- État ouvert du panneau --- */
body.panel-open #user-games-panel {
    transform: translateX(0);
}

/* --- Overlay (fond sombre) --- */
.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1250;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
}

/* --- État ouvert de l'overlay --- */
body.panel-open .panel-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* --- Contenu du panneau --- */
#user-games-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--bg-color-medium);
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

#user-games-panel .panel-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #fff;
}

#user-games-panel .close-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

#user-games-panel .panel-tabs {
    display: flex;
    flex-shrink: 0;
    background-color: var(--bg-color-medium);
}

#user-games-panel .tab-link {
    flex: 1;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    color: #a0a0a0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

#user-games-panel .tab-link.active {
    color: #fff;
    border-bottom-color: var(--accent-color);
}

#user-games-panel .panel-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

@media (max-width: 768px) {
    #user-games-panel {
        max-width: 100vw;
    }
}

/* --- Styles pour les onglets du panneau utilisateur --- */
.panel-games-grid {
    display: none; /* Cache tous les contenus d'onglets par défaut */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.panel-games-grid.active-tab-content {
    display: grid; /* Affiche seulement le contenu de l'onglet actif */
}

/* Message pour les panneaux vides */
.empty-panel-message {
    text-align: center;
    color: var(--text-color-secondary);
    font-style: italic;
    padding: 20px;
}

.panel-content > div.active-tab-content {
    display: grid;
}

/* Animation d'apparition en cascade pour les cartes du panneau */
@keyframes card-cascade-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* On cible UNIQUEMENT les cartes de jeu à l'intérieur du panneau utilisateur. */
.panel-open #user-games-panel .game-card {
    opacity: 0;
    animation: card-cascade-fade-in 0.5s ease-out forwards;
}

.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(1) { animation-delay: 50ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(2) { animation-delay: 100ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(3) { animation-delay: 150ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(4) { animation-delay: 200ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(5) { animation-delay: 250ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(6) { animation-delay: 300ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(7) { animation-delay: 350ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(8) { animation-delay: 400ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(9) { animation-delay: 450ms; }
.panel-open #user-games-panel .panel-games-grid .game-card:nth-child(10) { animation-delay: 500ms; }







/* components/game-cards.css */

/* --- Conteneurs de grille --- */
.hero-grid-container,
.games-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	width: max-content;
	/* On ajoute le padding ici pour créer une gouttière de départ pour tous les carrousels. */
	padding-left: 0;
	/* Une valeur relative à la largeur de l'écran garantit un débordement constant. */
	padding-right: 5vw;
}

/* --- Cartes de la section Hero --- */
.hero-grid-item {
	background-color: var(--bg-color-medium);
	border-radius: var(--border-radius);
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	/* NOUVEAU : Définit le point d'alignement pour le défilement. */
	scroll-snap-align: start;
	/* Animation d'apparition */
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.2s ease;
	transition-delay: var(--animation-delay, 0s);
	border: 2px solid transparent;
}
.hero-grid-item:hover {
	box-shadow: inset 0 0 0 var(--hover-stroke-width) var(--accent-color);
	z-index: 10;
	border: solid 2px var(--accent-color);
}
.hero-grid-item a { display: block; text-decoration: none; height: 100%; }

/* NOUVEAU : Style unifié pour les images dans les cartes hero pour assurer le remplissage et la transition. */
.hero-grid-item img {
	/* CORRECTION : On positionne l'image en absolu pour qu'elle se superpose correctement à l'effet skeleton. */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2; /* Assure que l'image est au-dessus de l'effet skeleton */
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-grid-item-title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	padding: 12px 8px 4px 8px;
	font-size: 1rem;
	font-weight: 500;
	font-family: var(--font-title);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	line-height: 1.25;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    z-index: 2;
}

.hero-grid-item-title.small-title { font-size: 0.7rem; padding: 10px 8px 6px 8px; }

/* Affiche le titre au survol pour les GRANDES cartes de la section hero */
.hero-grid-item.large-featured:hover .hero-grid-item-title {
	opacity: 1;
	transform: translateY(0);
}

/* Affiche le titre UNIQUEMENT au survol des PETITES cartes individuelles */
.small-game:hover .hero-grid-item-title {
	opacity: 1;
	transform: translateY(0);
}

.small-game .hero-grid-item-title {
	font-size: 0.6rem;
}

.small-game:hover {
	opacity: 1;
	transform: translateY(0);
	border: solid 2px var(--accent-color);
}

/* La grande carte "hero" est calculée pour faire la taille de 2 cartes standards + la gouttière entre elles. */
.hero-grid-item.large-featured {
	width: calc(38vw * 2 + 6px);
	max-width: calc(233px * 2 + 6px); /* 472px */
	aspect-ratio: 16 / 9;
}

/* La colonne de petites cartes "hero" a la même largeur qu'une carte standard. */
.hero-grid-item.small-column {
	width: 38vw;
	max-width: 233px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: transparent;
	box-shadow: none;
	border: none;
	border-radius: 0;
}
.hero-grid-item.small-column:hover { transform: none; box-shadow: none; border-color: transparent; }



.small-game {
	flex: 1;
	background-color: var(--bg-color-medium);
	border-radius: var(--border-radius);
	overflow: hidden;
	position: relative;
	transition: box-shadow 0.2s ease;
	border: 2px solid transparent;
}
.small-game:hover {
	box-shadow: inset 0 0 0 var(--hover-stroke-width) var(--accent-color);
}
/* .small-game img { width: 100%; height: 100%; object-fit: cover; } -- Règle maintenant couverte par .hero-grid-item img */

/* --- Cartes de jeu standard --- */
/* NOUVEAU : On utilise une largeur relative au viewport (vw) au lieu d'une largeur fixe en pixels.
   Cette approche garantit que le nombre de cartes affichées n'est pas un nombre entier,
   forçant ainsi une partie de la dernière carte à être visible ("peek-a-boo" effect)
   de manière fiable sur toutes les tailles d'écran, ce qui incite au défilement. */
.landscape-grid .game-card { width: 38vw; max-width: 233px; }
.portrait-grid .game-card { width: 38vw; max-width: 233px; }

.game-card {
	background-color: var(--bg-color-medium);
	border-radius: var(--border-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	/* NOUVEAU : Définit le point d'alignement pour le défilement. */
	scroll-snap-align: start;
	/* Animation d'apparition */
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.2s ease;
	transition-delay: var(--animation-delay, 0s);
	border: 2px solid transparent;
}
.game-card:hover {
	box-shadow: inset 0 0 0 var(--hover-stroke-width) var(--accent-color);
	border: solid 2px var(--accent-color);
}
.game-card a { text-decoration: none; display: block; height: 100%; position:relative; }

.game-card .thumbnail {
	width: 100%;
	background-color: var(--bg-color-light);
	overflow: hidden;
	position: relative;
}
.game-card .thumbnail.landscape { aspect-ratio: 16 / 9; }
.game-card .thumbnail.portrait { aspect-ratio: 2 / 3; }

.game-card .thumbnail img {
	opacity: 0;
	transition: opacity 0.4s ease-in-out, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	/* CORRECTION : On positionne l'image en absolu pour qu'elle remplisse le conteneur .thumbnail,
	   qui a déjà la bonne taille grâce à `aspect-ratio`. Cela réserve l'espace et empêche le saut de page (CLS). */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2; /* NOUVEAU : S'assure que l'image est au-dessus de l'effet skeleton */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	will-change: transform;
}

/* NOUVEAU : Effet Skeleton (Shimmer) pour les conteneurs d'images */
/* CORRECTION : On exclut la carte CTA "Voir tout" qui n'a pas d'image. */
/* CORRECTION 2 : On cible les éléments spécifiques qui contiennent des images (grand hero, petit hero, cartes de jeu)
   au lieu du conteneur générique .hero-grid-item pour éviter d'appliquer l'effet à la colonne. */
.game-card:not(.recent-cta-card) .thumbnail::after,
.hero-grid-item.large-featured::after,
.small-game::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* NOUVEAU : Positionne l'effet skeleton derrière l'image */
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    /* Cet effet sera masqué par l'image une fois chargée (img.is-loaded) */
}


/* L'image devient visible une fois chargée (classe ajoutée par JS). */
.thumbnail img.is-loaded { opacity: 1; }

/* Effet de zoom au survol de n'importe quelle carte de jeu. */
.game-card:hover .thumbnail img,
.hero-grid-item:hover .thumbnail img,
/* CORRECTION : Ajout de sélecteurs directs pour les images hero qui n'ont pas de .thumbnail,
   restaurant l'effet de zoom au survol. */
.hero-grid-item.large-featured:hover img,
.small-game:hover img {
	transform: scale(1.08);
}

.game-card-title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 100%);
	color: #fff;
	padding: 12px 8px 4px 8px;
	font-family: var(--font-title);
	font-size: 0.8rem;
	font-weight: 500;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 0;
	margin-bottom: 0;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    z-index: 2;
}

.game-card:hover .game-card-title {
	opacity: 1;
	transform: translateY(0);
}

/* --- Cartes de jeu "Similaires" (sidebar) --- */
.related-games-grid { display: flex; flex-direction: column; gap: 10px; }
.related-game-card { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--border-radius); text-decoration: none; transition: background-color 0.2s; }
.related-game-card:hover { background-color: var(--bg-color-light); }
.related-game-card .thumbnail { width: 100px; height: 65px; flex-shrink: 0; }
.related-game-card .thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.related-game-card .game-info h4 { margin: 0 0 5px 0; color: var(--text-color-primary); font-size: 0.9rem; }
.related-game-card .game-info p { margin: 0; color: var(--text-color-secondary); font-size: 0.8rem; }

/* --- Visibilité des titres sur appareils tactiles --- */
@media (pointer: coarse) {
	.game-card-title,
	.hero-grid-item-title {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Lorsque JS ajoute la classe .is-visible, on fait apparaître l'élément. */
.game-card.is-visible, .hero-grid-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* NOUVEAU : Animation pour l'effet Skeleton */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}





/* --- Conteneur de l'input et de l'icône --- */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* --- Barre de recherche --- */
.drawer-search-bar-mobile input[type="search"] {
    width: 100%;
    padding: 8px 40px 8px 15px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: var(--bg-color-light);
    color: var(--text-color-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.drawer-search-bar-mobile input[type="search"]::placeholder {
    color: var(--text-color-secondary);
}

/* --- Effet de focus --- */
.drawer-search-bar-mobile input[type="search"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-hover-shade);
}

/* --- Icône de recherche --- */
.search-icon {
    position: absolute;
    right: 15px;
    color: var(--text-color-secondary);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.drawer-search-bar-mobile input[type="search"]:focus + .search-icon {
    color: var(--accent-color-hover);
}

/* --- Conteneur des résultats --- */
.search-results-container {
    display: none; /* Caché par défaut */
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: var(--bg-color-dark);
    border: 1px solid var(--accent-color-hover);
    border-top: none;
    border-radius: var(--border-radius);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color-primary);
    transition: background-color 0.2s ease-in-out;
}

.search-result-item:hover {
    background-color: var(--bg-color-light);
    cursor: pointer;
    border-radius: var(--border-radius);
}

.search-result-image {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
    flex-shrink: 0;
}

.search-result-title {
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.2;
}

.search-result-item.no-results-link {
    justify-content: center;
    font-style: italic;
    font-weight: 500;
    font-size: 1.2rem;
}

.search-result-see-all {
    justify-content: center;

}

.search-result-see-all:hover {
    justify-content: center;
    /* Cette règle est maintenant inutile car elle est déjà gérée par le sélecteur partagé plus haut */
}

/* --- Scrollbar des résultats --- */
.search-results-container::-webkit-scrollbar { width: 8px; }
.search-results-container::-webkit-scrollbar-track { background: transparent; }
.search-results-container::-webkit-scrollbar-thumb { background: var(--bg-color-light); border-radius: 4px; }
.search-results-container::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

/* =================================================================== */
/* STYLE POUR LE MESSAGE D'ÉCHEC DE RECHERCHE (more-games.html)      */
/* =================================================================== */

.search-failed-message {
    background-color: var(--bg-color-medium);
    padding: 25px 30px;
    border-radius: var(--border-radius);
    margin-top: 40px;
    text-align: center;
    border: 1px solid var(--border-color);
}
.search-failed-message p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color-secondary);
}

/* Espace le titre "Nouveaux Jeux" après le message d'échec de recherche */
.search-failed-message + .section-header {
    margin-top: 30px;
}







/* --- Composants spécifiques à la section "Joué Récemment" --- */

/* NOUVEAU : Ajout d'un padding vertical pour donner de l'air à la section,
   maintenant qu'elle n'a plus de titre. */
.recent-games-strip {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    min-height: 90px !important;
}

/* La grille utilise maintenant le composant de carrousel standard.
   Les styles de défilement manuel et de scrollbar sont donc retirés. */
.recent-games-grid {
    /* display: flex, flex-wrap: nowrap, et gap sont hérités de .games-grid.
       On s'assure que les éléments sont alignés correctement si leur hauteur varie. */
    align-items: stretch;
}

/* Styles pour les cartes de jeu de petite taille, spécifiques à cette section */
.game-card--small {
    flex: 0 0 98px;
    width: 98px;
    max-width: 98px;
}

/* NOUVEAU : On agrandit la carte CTA pour une meilleure lisibilité. */
.game-card--small.recent-cta-card {
    flex: 0 0 140px;
    min-width: 140px;
    max-height: 56px;
}

.game-card--small .thumbnail .game-card-title {
    font-size: 0.8rem;
    padding: 4px 6px;
}

/* Styles pour la carte spéciale "CTA" (Call To Action) */
.recent-cta-card .thumbnail {
    background-color: var(--bg-color-medium); /* Utilise les variables du site */
    display: flex;
    flex-direction: row; /* MODIFIÉ : Aligne les éléments horizontalement */
    align-items: center;
    justify-content: space-between; /* MODIFIÉ : Pousse le texte à gauche et la flèche à droite */
    text-align: left; /* MODIFIÉ : Aligne le texte à gauche */
    color: var(--text-color-primary); /* Utilise les variables du site */
    font-weight: bold;
    font-size: 0.9rem; /* MODIFIÉ : Taille de police réduite */
    line-height: 1.2;
    transition: background-color 0.2s ease;
    border: 1px dashed var(--border-color); /* Utilise les variables du site */
    height: 100%; /* S'assure qu'elle prend toute la hauteur de la carte */
    padding: 0 12px; /* NOUVEAU : Ajout d'un padding horizontal */
}

.recent-cta-card a:hover .thumbnail {
    background-color: var(--bg-color-light); /* Utilise les variables du site */
    border-color: var(--accent-color);
}

.recent-cta-card .arrow-right {
    width: 24px; /* MODIFIÉ : Taille de la flèche réduite */
    height: 24px;
    fill: var(--text-color-primary); /* Utilise les variables du site */
    margin-top: 0; /* MODIFIÉ : Marge inutile retirée */
    flex-shrink: 0; /* NOUVEAU : Empêche la flèche de se réduire */
}







/* components/buttons.css */

/* =================================================================== */
/* BOUTONS D'ACTION DE BASE                                          */
/* =================================================================== */
.action-button { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 6px; 
    background-color: var(--bg-color-light); 
    color: var(--text-color-primary); 
    border: 1px solid transparent; 
    border-radius: var(--border-radius); 
    padding: 8px 15px; 
    font-size: 0.9rem; 
    font-weight: 500; 
    cursor: pointer; 
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; 
}
.action-button:hover { 
    background-color: var(--bg-color-light); 
    border-color: var(--accent-color-hover); 
}

/* =================================================================== */
/* BOUTONS DE DÉFILEMENT DU CARROUSEL                                */
/* =================================================================== */
.scroll-button {
    position: absolute; 
    top: 0;
    height: 100%;
    background-color: var(--accent-color-hover-shade); 
    border: none;
    border-radius: 0;
    width: 48px;
    text-align: center;
    cursor: pointer;
    z-index: 30; 
    opacity: 0; 
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
    display: flex; /* Simplification : les boutons sont toujours en flex */
    align-items: center; 
    justify-content: center; 
    pointer-events: none; /* On utilise pointer-events pour contrôler l'interactivité */
}

.scroll-button::after {
    content: '';
    display: block;
    width: 18px;
    height: 32px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0Ljc2MyAxNy4yMzd2LTIuNDc0bC0xNCAxNGExLjc0OCAxLjc0OCAwIDAwMCAyLjQ3NGMuNjgzLjY4NCAxLjc5LjY4NCAyLjQ3NCAwbDE0LTE0YTEuNzQ4IDEuNzQ4IDAgMDAwLTIuNDc0bC0xNC0xNEExLjc1IDEuNzUgMCAwMC43NjMgMy4yMzdsMTQgMTR6IiBmaWxsPSIjRUZGMUYxIi8+PC9zdmc+');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    transition: transform 0.2s ease;
}

.scroll-button.prev::after {
    transform: scaleX(-1);
}

.scroll-button.prev {
    left: var(--scroll-button-offset);
}

.scroll-button.next {
    right: var(--scroll-button-offset);
}

/* MODIFIÉ : Les boutons n'apparaissent au survol que si le carrousel a du contenu à faire défiler (classe .has-overflow) */
@media (hover: hover) and (pointer: fine) {
    .carousel-container.has-overflow:hover .scroll-button:not(.disabled) { 
        opacity: 1;
        pointer-events: auto;
    }
}

.scroll-button:hover:not(.disabled) { 
    background-color: var(--accent-color);
}
.scroll-button.disabled { 
    opacity: 0 !important;
    pointer-events: none !important;
    cursor: default; 
}

/* =================================================================== */
/* BOUTON FAVORI                                                     */
/* =================================================================== */
.favorite-toggle-button {
    cursor: pointer;
}
.favorite-toggle-button svg {
    fill: currentColor;
    transition: fill 0.2s, transform 0.2s;
}

.game-card .favorite-toggle-button,
.hero-grid-item .favorite-toggle-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    color: #fff;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.game-card .favorite-toggle-button svg,
.hero-grid-item .favorite-toggle-button svg {
    width: 20px;
    height: 20px;
}
.game-card .favorite-toggle-button:hover,
.hero-grid-item .favorite-toggle-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: var(--accent-color);
    transform: scale(1.1);
}

/* Style de base pour un bouton favori actif (ex: juste du texte) */
.favorite-toggle-button.is-favorite {
    color: var(--accent-color);
}

/* Style pour les boutons favoris qui ont un fond (sur les cartes, dans le header, etc.) */
.game-card .favorite-toggle-button.is-favorite,
.hero-grid-item .favorite-toggle-button.is-favorite,
.header-icon-button.favorite-toggle-button.is-favorite,
.action-button.favorite-toggle-button.is-favorite {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* Style de survol pour ces mêmes boutons */
.game-card .favorite-toggle-button.is-favorite:hover,
.hero-grid-item .favorite-toggle-button.is-favorite:hover,
.header-icon-button.favorite-toggle-button.is-favorite:hover,
.action-button.favorite-toggle-button.is-favorite:hover {
    background-color: var(--accent-color-hover);
    border-color: var(--accent-color-hover);
}

/* Style pour le bouton favori dans la barre d'actions de la page de jeu */
.game-actions-bar .favorite-toggle-button.action-button {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: 8px 12px;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
}

/* NOUVEAU : Définir la taille de l'icône SVG pour qu'elle corresponde aux autres icônes de la barre. */
.game-actions-bar .favorite-toggle-button.action-button svg {
    width: 20px;
    height: 20px;
}

.game-actions-bar .favorite-toggle-button.action-button.is-favorite {
    border-color: var(--accent-color);
}

/* =================================================================== */
/* BADGES DES STORES D'APPLICATIONS                                  */
/* =================================================================== */
.download-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 15px;
    align-items: center;
	background-color: var(--bg-color-dark);
    border-radius: var(--border-radius);
    border: 1px dashed var(--border-color);
    line-height: 0;
    padding: 8px 0 8px 0;
	justify-content: center;
}
.store-badge img {
    height: 45px;
    transition: opacity 0.2s ease-in-out;
}
.store-badge:hover img {
    opacity: 0.85;
}

/* --- TRÈS GRANDS ÉCRANS (> 1800px) --- */
@media (min-width: 1280px) {
    .download-buttons-container {
        background-color: var(--bg-color-medium);
    }
}

/* =================================================================== */
/* BOUTON "CHARGER PLUS"                                             */
/* =================================================================== */
.load-more-container {
    display: flex;
    justify-content: center;
    padding: 40px 0 20px 0;
}
#load-more-button {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
}
#load-more-button:disabled {
    background-color: var(--bg-color-light);
    cursor: wait;
    opacity: 0.7;
}

/* =================================================================== */
/* BOUTON "RETOUR EN HAUT"                                           */
/* =================================================================== */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: none; /* Caché par défaut, géré par JS */
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-to-top:hover { background-color: var(--accent-color-hover); }
.scroll-to-top.bouncing { animation: bounce 1s ease; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}







/* components/modal.css */

.modal-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    /* NOUVEAU : Ajout du padding et du défilement pour les petits écrans */
    padding: 20px 0;
    overflow-y: auto;
}

.modal {
    background-color: var(--bg-color-dark);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    width: 90%;
    max-width: 600px;
    animation: fadeIn 0.3s ease-out;
    animation: animatetop 0.4s;
    /* NOUVEAU : Gestion de la hauteur et du défilement interne */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Limite la hauteur à 90% de la hauteur de la vue */
}

@keyframes animatetop {
    from {transform: translateY(-50px); opacity: 0}
    to {transform: translateY(0); opacity: 1}
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.2rem;
}

.modal-close-button {
    background-color: var(--bg-color-medium);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color-secondary);
    transition: all 0.2s ease;
}
.modal-close-button:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    transform: rotate(90deg);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}
.modal-body p {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    margin-top: 0;
}

#embed-code-textarea {
    width: 100%;
    height: 120px;
    background-color: var(--bg-color-dark);
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    border-radius: var(--border-radius);
    padding: 10px;
    font-family: monospace;
    font-size: 0.85rem;
    resize: none;
    margin-bottom: 15px;
}

#copy-embed-code {
    width: 100%;
    padding: 12px;
}

/* NOUVEAU : Style pour le conteneur du QR Code dans la modale */
#qr-code-container {
    display: inline-block; /* Permet le centrage via text-align sur le parent */
    padding: 10px;
    background-color: white;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}
#qr-code-container img {
    display: block; /* Supprime l'espace parfois ajouté sous les images */
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* NOUVEAU : Styles pour le contenu de la modale "À Propos" */
#about-modal .modal-body h4 {
    font-family: var(--font-title);
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--text-color-primary);
}
#about-modal .modal-body h4:first-child {
    margin-top: 0;
}
#about-modal .modal-body p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color-secondary);
    margin-bottom: 15px;
}
/* NOUVEAU : Style pour les liens dans les paragraphes de la modale "À Propos" */
#about-modal .modal-body p a {
    color: var(--accent-color);
    text-decoration: none; /* MODIFIÉ : Pas de soulignement par défaut */
    font-weight: 500;
    transition: color 0.2s, text-decoration 0.2s;
}

#about-modal .modal-body p a:hover {
    color: var(--accent-color-hover);
    text-decoration: underline; /* MODIFIÉ : Soulignement au survol */
}

/* NOUVEAU : Styles pour les listes et tags dans la modale "À Propos" */
.modal-link-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    gap: 20px;
}

.modal-link-list li {
    margin-bottom: 8px;
    break-inside: avoid-column;
}

.modal-link-list li a {
    color: var(--accent-color); /* MODIFIÉ : Utilisation de la couleur d'accentuation */
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.modal-link-list li a:hover {
    color: var(--accent-color-hover);
    text-decoration: underline; /* AJOUTÉ : Soulignement au survol pour la cohérence */
}

.modal-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}








/* components/pagination.css */

/* =================================================================== */
/* COMPOSANT DE PAGINATION                                           */
/* =================================================================== */
.pagination-container {
    display: flex;
    justify-content: center;
    padding: 40px 0 20px 0;
}

ul.pagination {
    display: inline-flex;
    align-items: center;
    list-style: none;
    padding: 6px;
    margin: 0;
    background-color: var(--bg-color-light);
    border-radius: 999px; /* Pour la forme de pilule */
}

.pagination li {
    margin: 0 2px;
}

/* Style commun pour tous les liens/boutons de la pagination */
.pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Pour la forme ronde */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pagination li a:hover {
    color: var(--text-color-primary);
    background-color: rgba(255,255,255,0.1);
}

/* Style pour la page active */
.pagination li a.active {
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

/* Style pour la flèche "Suivant" mise en évidence */
.pagination li a.next {
    background-color: var(--accent-color);
    color: #fff;
}
.pagination li a.next:hover {
    background-color: var(--accent-color-hover);
}

/* Style pour les "..." */
.pagination li .ellipsis {
    padding: 0 10px;
    color: var(--text-color-secondary);
}

/* =================================================================== */
/* INDICATEUR DE CHARGEMENT (SCROLL INFINI)                          */
/* =================================================================== */
#loading-indicator {
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    width: 100%;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }









/* components/categories.css */

/* =================================================================== */
/* SECTION CATÉGORIES (ACCUEIL)                                      */
/* =================================================================== */

/* --- 1. Styles généraux --- */
#more-categories {
	padding: 15px 0 18px 0; /* Padding vertical, le padding horizontal sera sur le conteneur interne */
}

/* Le conteneur de la grille qui défile */
.category-grid-container {
	display: grid;
	width: max-content;
	gap: 8px;
	grid-auto-flow: column; /* La grille s'étend horizontalement pour s'adapter au contenu */
	grid-template-rows: repeat(2, 1fr);
	/* La largeur des colonnes est maintenant définie par la largeur des éléments qu'elles contiennent. */
	/* NOUVEAU : On ajoute le padding ici pour créer une gouttière de départ
	   et s'assurer que le contenu déborde toujours à la fin. */
	padding-left: var(--page-padding);
	padding-right: 5vw; /* Une valeur relative pour que ça fonctionne sur tous les écrans */
}

/* --- 2. Comportement par défaut (Desktop > 768px) --- */

/* Le bloc d'introduction qui sera utilisé pour les vues statiques (non-carrousel) */
.category-grid-intro-mobile {
	display: none; /* Reste caché par défaut */
	background-color: var(--bg-color-medium); /* AJOUT : Le fond */
	border-radius: var(--border-radius);      /* AJOUT : Les coins arrondis */
	padding: 25px;  /* AJOUT : Un padding uniforme pour un meilleur aspect */
	margin-bottom: 20px;
}

/* Le bloc d'introduction est un grand carré dans la grille */
.category-grid-container .category-grid-intro {
	display: flex;
	grid-column: span 2;
	grid-row: span 2;
	background-color: var(--bg-color-medium);
	border-radius: var(--border-radius);
	padding: 25px;
	flex-direction: column;
	justify-content: center;
	/* NOUVEAU : La largeur est calculée dynamiquement pour s'aligner sur les cartes de catégorie. */
	width: calc(22vw * 2 + 8px);
	max-width: calc(200px * 2 + 8px); /* 408px */
	scroll-snap-align: start;
}
.category-grid-container .category-grid-intro h3 { font-size: 1.5rem; margin: 0; }
.category-grid-container .category-grid-intro p { color: var(--text-color-secondary); }
.category-grid-container .category-grid-intro .learn-more { color: var(--accent-color-hover); font-weight: bold; text-decoration: none; }

/* Les cartes de catégories */
.category-grid-item {
	width: 22vw; /* Largeur relative pour garantir l'effet "peek-a-boo" */
	max-width: 200px; /* Limite la taille sur les très grands écrans */
	background-color: var(--bg-color-medium);
	border-radius: var(--border-radius);
	text-decoration: none;
	color: var(--text-color-primary);
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-weight: 500;
	font-size: 1rem;
	text-align: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
	scroll-snap-align: start;
	min-height: 120px;
}
.category-grid-item:hover {
	background-color: var(--accent-color-hover-shade);
}
.category-grid-item:active {
	background-color: var(--accent-color);
}
.category-grid-item span {
	line-height: 1;
	font-size: 1.2rem;
}

.category-grid-intro-mobile h3 {
	font-family: var(--font-title);
	font-size: 1.5rem;
	margin-top: 0;
	margin-bottom: 10px;
	color: var(--text-color-primary);
}

.category-grid-intro-mobile p {
	color: var(--text-color-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0 0 15px 0;
}

.category-grid-intro-mobile .learn-more {
	color: var(--accent-color);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
}

.category-grid-intro-mobile .learn-more:hover {
	color: var(--accent-color-hover);
}

/* --- 3. Comportement sur Mobile (< 768px) --- */
@media (max-width: 768px) {
	.category-grid-intro-mobile { display: block; }
	.category-grid-container .category-grid-intro { display: none; }
	/* On revient à la logique de colonnes de grille pour mobile, qui est plus simple à gérer ici. */
	.category-grid-container { grid-auto-columns: 35vw; }
	/* On annule les largeurs de la vue desktop pour que l'item remplisse la colonne de la grille. */
	.category-grid-item { width: auto; max-width: none; }
}

/* Classe ajoutée par JS pour afficher la section si elle a du contenu scrollable */
.carousel-section-wrapper.is-visible .container .container{
	padding-left: 1px;
	/* La hauteur s'adapte au contenu une fois visible. La transition se fera vers la hauteur réelle. */
}