body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background: url('/images/atelier_bg.jpg') center center / cover no-repeat;
    color: white;
    overflow: hidden; /* Empêche le défilement horizontal */
    position: relative;
    min-height: 100vh; /* S'assure que le corps prend au moins toute la hauteur de la fenêtre */
}

/* Conteneur du modèle 3D */
#gameboy-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* Prend toute la largeur de la fenêtre */
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
    z-index: 0;
    touch-action: none;
}

/* Loading Indicator */
#loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 100;
    display: none; /* Hidden by default, shown by JS */
}

#loading-indicator p {
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* Classic Modern Spinner */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#consoleSelectorContainer {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border-radius: 0 0 8px 8px;
    font-family: sans-serif;
    color: white;
    text-align: center;
    display: flex; /* DOIT ÊTRE FLEX POUR ALIGNER LES ÉLÉMENTS SUR UNE LIGNE */
    align-items: center; /* Centrer verticalement les éléments dans le conteneur */
    gap: 10px; /* Espace entre les éléments (label, select) */
    justify-content: center; /* Centrer le groupe d'éléments au sein du conteneur */
padding-left: calc(2vw + env(safe-area-inset-left, 0px)); /* Ajoute un padding pour la zone de sécurité gauche */
    padding-right: calc(2vw + env(safe-area-inset-right, 0px)); /* Ajoute un padding pour la zone de sécurité droite */
}

#consoleSelectorContainer label {
    white-space: nowrap; /* Empêche le retour à la ligne du texte du label */
}

/* 🎯 NOUVEAUX STYLES DE BASE POUR #home-button (APPLIQUÉS PAR DÉFAUT POUR DESKTOP ET COMME BASE POUR MOBILE) */
#home-button {
    background-color: transparent; /* Fond transparent */
    color: white; /* Couleur de l'icône */
    border: none; /* Pas de bordure */
    padding: 0; /* Pas de padding interne au bouton */
    margin-right: 0; /* AJUSTÉ : Plus d'espace à droite du bouton sur desktop, le pousse à gauche */
    font-size: 1.4em; /* AJUSTÉ : Taille de l'icône plus grande pour desktop */
    cursor: pointer;
    display: flex; /* Pour centrer l'icône */
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    flex-shrink: 0; /* Empêche le bouton de rétrécir si l'espace est limité */
    z-index: 21; /* AJOUTÉ: Assure qu'il est au-dessus du consoleSelectorContainer si nécessaire, mais en dessous des menus */
}

#home-button:hover {
    color: #cccccc; /* Couleur de l'icône au survol */
}

/* 🎯 NOUVEAUX STYLES POUR LE BOUTON PARAMÈTRES (APPLIQUÉS PAR DÉFAUT POUR DESKTOP ET COMME BASE POUR MOBILE) */
#settings-button {
    background-color: transparent; /* Fond transparent */
    color: white; /* Couleur de l'icône */
    border: none;
    padding: 0;
    margin-left: 0; /* AJOUTÉ : Espace à gauche du bouton, le pousse à droite */
    font-size: 1.4em; /* Taille de l'icône, similaire au bouton home pour cohérence */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
    z-index: 21; /* AJOUTÉ: Assure qu'il est au-dessus du consoleSelectorContainer si nécessaire */
}

#settings-button:hover {
    color: #cccccc; /* Couleur au survol */
}

/* --- TARIFICATION MENU STYLES (DÉFAUT: DESKTOP) --- */
#tarification-menu-wrapper {
    position: fixed;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    font-family: 'Segoe UI', sans-serif;
    color: white;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    display: block;
    padding: 12px 24px;
}

/* Le header mobile doit être masqué par défaut sur desktop */
#tarification-header-mobile {
    display: none; /* Masqué par défaut sur desktop */
}

/* Le contenu du menu (injecté dans #tarification-menu) doit être visible par défaut sur desktop */
#tarification-menu {
    max-height: none; /* Pas de max-height pour qu'il soit toujours visible */
    overflow: visible; /* Pas de cache de contenu */
    transition: none; /* Pas de transition sur desktop */
    padding: 0; /* Pas de padding spécifique au déroulement sur desktop */
}

/* Styles pour le conteneur des groupes de tarification injecté par JS dans #tarification-menu */
#tarification-menu > div {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Les groupes de tarification sur desktop */
.tarification-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.tarification-group h3 {
    font-size: 16px;
    margin: 0 0 4px 0;
    color: white;
    text-align: left;
}

.tarification-group label {
    font-size: 14px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Afficher le prix total sur desktop */
.tarification-total {
    font-weight: bold;
    font-size: 18px;
    color: white;
    display: block;
}

/* Styles pour les BOUTONS COMMANDE (général) */
#order-button,
#order-button-inside-menu {
    display: block; /* S'assure qu'ils sont des blocs */
    width: calc(100% - 30px); /* Largeur adaptée au padding du wrapper */
    margin: 15px auto 0; /* Centre le bouton horizontalement et donne une marge du haut */
    padding: 10px 20px;
    background-color: #7a00c0; /* Couleur violette */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-sizing: border-box; /* Inclut padding et border dans la largeur/hauteur */
}

/* Le bouton principal (#order-button) */
#order-button {
    /* Sa visibilité et son texte sont gérés par JS */
}

/* Le bouton "Passer commande !" DANS LE MENU (#order-button-inside-menu) */
#order-button-inside-menu {
    display: none; /* Masqué par défaut (desktop et mobile quand menu fermé), JS le gérera */
    /* La marge supérieure est déjà définie par la règle générale ci-dessus */
}

#bottom-go-button {
    display: none; /* Masqué par défaut (JS le rendra visible sur mobile quand le menu est ouvert) */
    width: calc(100% - 30px); /* Prend toute la largeur, moins le padding du menu */
    margin: 15px auto 0; /* Marge en haut pour le séparer du contenu, centré horizontalement */
    padding: 10px 20px; /* Padding pour la taille du bouton */
    background-color: yellow; /* Fond jaune */
    color: black; /* Couleur du texte (noir pour une bonne lisibilité sur fond jaune) */
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
    transition: background-color 0.3s ease; /* Optionnel: transition pour un effet visuel au survol */
    
    /* Positionnement du nouveau bouton "Go" tout en bas du wrapper */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30; /* S'assure qu'il est au-dessus de tout le reste */
}

/* Style au survol du nouveau bouton "Go" */
#bottom-go-button:hover {
    background-color: #ffda00; /* Jaune légèrement plus foncé au survol */
}

.tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 5px; /* Espace entre le texte et l'icône */
}

.tooltip-trigger {
    cursor: pointer;
    color: #cccccc;
    transition: color 0.3s;
}

.tooltip-trigger:hover {
    color: #ffffff;
}

.tooltip-content {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 10;
    bottom: 150%; /* Position au-dessus de l'icône */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
    pointer-events: none;
}

.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.tooltip-wrapper:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* --- CUSTOMIZATION SLIDER STYLES (DÉFAUT: DESKTOP) --- */
#customization-slider {
    /* ANCIEN : padding: 8px 6px; */
    padding: 0px 6px; /* Réduit le padding vertical pour diminuer la hauteur totale du menu */
    /* ANCIEN : bottom: 10px; */
    bottom: 14px; /* Optionnel : Remonte légèrement le slider si désiré */
    width: 550px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
}

/* Gardez #customization-viewport tel quel */
#customization-viewport {
    width: 550px; /* Conservez la largeur ou ajustez-la. Elle doit correspondre à la largeur de #customization-slider - padding - largeur flèches externes si elles existaient */
    overflow: hidden;
    display: flex;
    height: auto;
    position: relative;
}

/* Gardez .customization-slide tel quel, ou modifiez-le pour enlever le padding si vous l'ajoutez dans .slide-header */
.customization-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    color: white;
    transition: transform 0.3s ease-in-out;
    /* ANCIEN : padding: 10px 0; (dans la media query mobile, mais vérifiez ici aussi si c'est appliqué globalement) */
    /* Assurez-vous que ce padding ne fait pas double emploi avec le padding du slide-header */
}

.customization-slide h2 {
    /* ANCIEN : font-size: 20px; margin-bottom: 10px; margin-top: 0px */
    /* Ces styles seront gérés par .slide-header h2 et ne doivent pas être dupliqués ici s'ils sont déjà dans le nouveau bloc .slide-header */
    font-size: 20px; /* Gardez la taille */
    margin: 10; /* Important : remet la marge à 0 pour la gestion par flexbox dans .slide-header */
}

.nav-arrow {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.slide-header {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre le h2 */
    gap: 20px; /* Espace entre flèche et titre */
    margin-bottom: 10px; /* Espace entre header et options de couleur */
    position: relative;
    margin-bottom: 5px;
}

.slide-header h2 {
    margin: 40; /* Assurez-vous que cette marge reste à 0 */
    flex-grow: 1;
    text-align: center;
}

/* Nouveaux styles pour les flèches DANS le slide-header */
.slide-header .nav-arrow {
    font-size: 24px; /* Ajustez selon vos besoins */
    padding: 5px 10px; /* Ajoute du padding pour la cliquabilité */
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
}

.slide-header .nav-arrow:hover {
    color: #ccc;
}

.color-group {
    margin-bottom: 15px;
}

.color-label {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    margin-bottom: 5px;
    padding-top: 5px;
}

.color-options {
    /* ANCIEN :
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 350px;
    margin: 0 auto 10px;
    */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; /* Augmenté le gap */
    max-width: 100%; /* IMPORTANT : Prend toute la largeur */
    margin: 0 auto 10px;
    padding: 0 5px; /* Ajouté pour un peu d'espace sur les bords */
}

/* REMPLACEZ OU METTEZ À JOUR CETTE SECTION POUR .color-option */
.color-option {
    /* ANCIEN :
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    transition: transform 0.2s, box-shadow 0.2s;
    pointer-events: auto;
    */
    width: 34px; /* Plus grande taille pour plus d'ergonomie */
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    transition: transform 0.2s, box-shadow 0.2s;
    pointer-events: auto;
}

.color-option:hover {
    /* ANCIEN : transform: scale(1.2); box-shadow: 0 0 5px rgba(255,255,255,0.8); */
    transform: scale(1.1); /* Légèrement moins agressif */
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
}

.color-option::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: auto;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0; /* Garder l'opacité à 0 si jamais vous voulez la réactiver plus tard facilement */
    pointer-events: none;
    transition: none; /* Supprimer la transition pour qu'elle ne s'affiche pas */
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    max-width: auto;
    box-sizing: border-box;
    text-align: center;
    display: none; /* <--- AJOUTEZ CETTE LIGNE POUR LA MASQUER DÉFINITIVEMENT */
}

/* Petite flèche sous l'infobulle */
.color-option::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
    opacity: 0; /* Garder l'opacité à 0 */
    transition: none; /* Supprimer la transition */
    pointer-events: none;
    z-index: 100;
    display: none; /* <--- AJOUTEZ CETTE LIGNE POUR LA MASQUER DÉFINITIVEMENT */
}

/* Supprimez cette règle entièrement si vous utilisez display: none; ci-dessus */
.color-option:hover::after,
.color-option:hover::before {
    /* opacity: 1; */ /* Ne s'applique plus si display: none; est présent */
    /* transform: translateX(-50%) translateY(0); */ /* Ne s'applique plus */
}

.custom-tooltip {
    position: fixed; /* Ancrée au viewport */
    background-color: rgba(0, 0, 0, 0.9); /* Fond sombre */
    color: #fff; /* Texte blanc */
    padding: 6px 10px; /* Espacement interne */
    border-radius: 6px; /* Bords arrondis */
    font-size: 13px; /* Taille de la police */
    white-space: nowrap; /* Empêche le retour à la ligne */
    opacity: 0; /* Masquée par défaut */
    visibility: hidden; /* Masquée par défaut */
    transition: opacity 0.3s ease; /* Transition douce */
    z-index: 2000; /* Assure qu'elle est au-dessus de tous les autres éléments */
    pointer-events: none; /* Important : ne bloque pas les interactions sous l'infobulle */
    transform: translateX(-50%); /* Pour le centrage horizontal, à ajuster avec JS */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Légère ombre */
}

/* Optionnel: Flèche sous l'infobulle pour pointer vers le titre */
.custom-tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px; /* Place la flèche juste en dessous de l'infobulle */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent; /* Flèche pointant vers le bas */
}

button, 
#order-button, 
#order-button-inside-menu, 
#bottom-go-button,
#tarification-header-mobile {
  touch-action: manipulation;
}

/* Scroll stylé */
#customization-menu::-webkit-scrollbar {
    width: 8px;
}

#customization-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#customization-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    width: 100%;
}

/* Footer Positioning */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.3);
}

footer p {
    margin: 0;
}

/* --- RESPONSIVE DESIGN (Media Queries) --- */

/* Styles pour les écrans jusqu'à 768px de large (tablettes et petits ordinateurs) */
@media (max-width: 768px) {
    /* Première media query dupliquée - Gardons la seconde pour les styles */
    /* @media (max-width: 768px) { */ /* ❌ CORRECTION: Suppression de la media query dupliquée */

    /* Styles pour consoleSelectorContainer sur mobile */
    #consoleSelectorContainer {
        padding: 5px 2px;
        font-size: 0.9em;
        gap: 1.5vwpx; /* Un gap plus petit sur mobile */
        width: 100%;
        max-width: none;
        /* justify-content: space-between; REMPLACÉ par center ci-dessous pour alignement global */
        justify-content: center; /* ALIGNÉ : Centre tous les éléments flex sur mobile aussi */
        /* Supprimez `display: flex; flex-wrap: nowrap; align-items: center;` si dupliqués car ils sont déjà dans la règle générale */
        padding-left: calc(2vw + env(safe-area-inset-left, 0px));
        padding-right: calc(2vw + env(safe-area-inset-right, 0px));
    }

    /* Styles pour home-button sur mobile (spécifique aux petits écrans) */
    #home-button {
        font-size: 1.3em; /* Ajuste la taille de l'icône sur mobile */
        margin-right: 0; /* Ajuste la marge sur mobile */
        /* Pas besoin de position: fixed/top/left/z-index ici, car il est géré par son parent flex */
    }

    #settings-button {
        font-size: 1.3em;
        margin-left: 0; /* S'assure que les marges fixes sont supprimées ici aussi */
    }

    /* --- tarification-menu-wrapper sur mobile --- */
    #tarification-menu-wrapper {
        position: relative;
        top: 29px;
        left: 0;
        right: 0;
        transform: translateX(0);
        width: 100%;
        max-width: none;
        padding: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.7);
        /* Assurez-vous que les overflow et max-height sont gérés dans .open si le menu doit être scrollable */
    }

    #tarification-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 15px;
        cursor: default;
        font-weight: bold;
        font-size: 17px;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 21;
        position: relative;
        pointer-events: none;
    }

    #tarification-toggle-arrow {
        display: none; /* Masquer la flèche sur mobile */
    }

    /* Masque le contenu du menu par défaut sur mobile */
    #tarification-menu {
        overflow: hidden;
        max-height: 0;
        padding: 0 15px;
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
    }

    /* Affiche le contenu du menu quand le wrapper a la classe 'open' */
    #tarification-menu-wrapper.open #tarification-menu {
        max-height: 600px;
        padding-bottom: 70px;
        padding-top: calc(50px + 10px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Le flexbox interne pour les groupes doit s'empiler sur mobile */
    #tarification-menu > div {
        flex-direction: column;
        gap: 15px;
    }

    .tarification-group {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

    .tarification-group h3 {
        font-size: 15px;
        text-align: center;
    }

    .tarification-group label {
        font-size: 13px;
        justify-content: center;
    }

    .tarification-total {
        display: none; /* Masquer le prix total original sur mobile */
    }
    
    #tarification-header-mobile .tarification-total {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    #total-price-mobile {
        font-size: 18px;
        font-weight: bold;
    }

    /* Le bouton principal (#order-button) devient "Options" sur mobile */
    #order-button {
        width: calc(100% - 30px);
        margin: 15px auto 0;
        box-sizing: border-box;
        z-index: 20;
    }

    #tarification-menu-wrapper.open #order-button {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
        z-index: 25;
        background-color: #7a00c0;
        padding: 10px 20px;
    }

    /* Le bouton "Passer commande !" DANS LE MENU (#order-button-inside-menu) */
    #order-button-inside-menu {
        /* Vos styles existants pour ce bouton sont suffisants, il apparaîtra après le padding-top du #tarification-menu */
    }

    #bottom-go-button {
        display: none;
        width: calc(100% - 30px);
        margin: 15px auto 0;
        padding: 10px 20px;
        background-color: yellow;
        color: black;
        border: none;
        border-radius: 5px;
        font-size: 1.1em;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        transition: background-color 0.3s ease;
        
        /* Positionnement du nouveau bouton "Go" tout en bas du wrapper */
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 30;
    }

    #tarification-menu-wrapper.open #bottom-go-button {
        display: block;
    }
    
.custom-tooltip.mobile-modal-tooltip {
    /* Style de base pour la modale */
    position: fixed; /* On la positionne par rapport à la fenêtre */
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    z-index: 2000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    /* --- Les modifications clés --- */
    
    /* 1. Pour le retour à la ligne automatique */
    white-space: normal; /* Permet au texte de passer à la ligne */
    text-align: center;
    line-height: 1.5;

    /* 2. Pour le centrage parfait via JS */
    transform: translate(-50%, -50%); /* On le centrera sur son propre axe */

    /* 3. Pour éviter qu'elle soit trop large */
    max-width: 280px; /* ou 80vw, ce qui te semble le mieux */
    
    /* On s'assure qu'elle est bien visible */
    visibility: visible !important;
    opacity: 1 !important;
}

.tooltip-content {
    display: none !important;
}

    #customization-slider {
        /* ANCIEN :
        width: 100%;
        max-width: none;
        padding: 8px 4px;
        bottom: 14px;
        padding-left: 10px;
        padding-right: 10px;
        gap: 5px;
        */
        width: 100%;
        max-width: none;
        padding: 6px 4px; /* Encore réduit le padding */
        bottom: 8px; /* Positionnement ajusté */
        /* gap: 5px; Si le gap était entre les flèches externes et le viewport, il n'est plus pertinent ici */
        /* Les flèches sont maintenant internes au slide-header, donc le gap principal du slider n'est plus aussi important pour cet usage */
    }

    /* Gardez #customization-viewport tel quel pour mobile */
    #customization-viewport {
        width: 100%;
    }

    /* REMPLACEZ OU METTEZ À JOUR CETTE SECTION POUR .customization-slide EN MOBILE */
    .customization-slide {
        /* ANCIEN : padding: 10px 0; */
        /* Si vous avez mis un padding dans .slide-header, ce padding ici pourrait devenir redondant */
        padding: 10px 0; /* Gardez si nécessaire pour l'espacement global du slide */
    }

    .customization-slide h2 {
        /* ANCIEN : font-size: 18px; */
        font-size: 18px; /* Gardez la taille */
        /* margin: 0; (géré par .slide-header h2) */
    }

    .slide-header {
        gap: 5px; /* Réduit l'espacement sur mobile */
    }

    /* NOUVEAUX STYLES POUR .slide-header .nav-arrow EN MOBILE */
    .slide-header .nav-arrow {
        font-size: 20px; /* Flèches plus petites sur mobile */
        padding: 3px 8px; /* Padding ajusté pour mobile */
    }

    .color-options {
        /* ANCIEN : max-width: 100%; gap: 5px; padding: 0 10px; */
        max-width: 100%;
        gap: 5px; /* Ajusté */
        padding: 0 10px; /* Ajusté */
    }

    /* REMPLACEZ OU METTEZ À JOUR CETTE SECTION POUR .color-option EN MOBILE */
    .color-option {
        /* ANCIEN : width: 40px; height: 40px; */
        width: 32px; /* Plus petit sur mobile */
        height: 32px;
    }

    #customization-slider .nav-arrow {
        font-size: 18px;
        padding: 0 15px;
    }
}

/* Styles pour les écrans très petits (smartphones en mode portrait) */
/* ❌ CORRECTION: max="width" doit être max-width */
@media (max-width: 480px) {
    #consoleSelectorContainer {
        padding: 5px 1.5vw;
        font-size: 0.8em;
        width: 100%;
        max-width: none;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 1vw;
        padding-left: calc(1.5vw + env(safe-area-inset-left, 0px));
        padding-right: calc(1.5vw + env(safe-area-inset-right, 0px));
    }

    #tarification-menu-wrapper {
        top: 29px;
        left: 0;
        right: 0;
        transform: translateX(0);
        max-width: none;
    }

    #tarification-header-mobile {
        font-size: 16px;
        padding: 6px 10px;
    }

    #tarification-menu > div {
        gap: 10px;
    }

    .tarification-group h3 {
        font-size: 22px;
    }

    .tarification-group label {
        font-size: 18px;
    }

    #order-button { /* Le bouton "Options" sur mobile */
        width: 100%;
        margin: 10px 0 5px;
        font-size: 0.9em;
    }

    #tarification-menu-wrapper.open #order-button {
        top: 50px;
    }

    #tarification-menu-wrapper.open #tarification-menu {
        max-height: 500px;
        padding-top: calc(50px + 10px);
        padding-bottom: 70px;
    }
    
    #customization-slider {
        bottom: 14px;
        padding: 0px 2px;
        width: 100%;
        max-width: none;
        padding-left: 8px;
        padding-right: 8px;
        gap: 4px;
    }

    .customization-slide h2 {
        font-size: 18px;
    }

    .color-options {
        /* ANCIEN : gap: 8px; padding: 0 5px; */
        gap: 4px;
        padding: 0 5px;
    }

    /* REMPLACEZ OU METTEZ À JOUR CETTE SECTION POUR .color-option EN TRÈS PETIT MOBILE */
    .color-option {
        /* ANCIEN : width: 32px; height: 32px; */
        width: 26px; /* Encore plus petit pour les très petits écrans */
        height: 26px;
    }

    #customization-slider .nav-arrow {
        font-size: 18px;
        padding: 0 10px;
    }
}