/* Classe utilitaire — CRITIQUE pour le router SPA */
.hidden {
    display: none !important;
}

/* ── Classes portées depuis la maquette React (Mission 4) ─────────────── */

/* Carte produit (catalogue) */
.pcard {
    position: relative;
    overflow: hidden;
}
.pcard .quickadd {
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.25s ease;
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 10;
}
.pcard:hover .quickadd {
    opacity: 1;
    transform: none;
}

/* Bouton taille */
.sizeBtn {
    min-width: 52px;
    padding: 11px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Pastille couleur */
.swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--v2-border, #333);
    transition: transform 0.15s ease;
}
.swatch:hover {
    transform: scale(1.12);
}

/* Bouton principal (CTA) */
.btnMain {
    width: 100%;
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    background: #7a0c16;
    color: #f2ede4;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btnMain:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(122, 12, 22, 0.4);
}
.btnMain:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pastilles navigation photo */
.dotNav {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Variables Dark Tech Premium */
:root {
    --bg-dark: #0f0f13;
    --sidebar-bg: rgba(255, 255, 255, 0.02);
    --sidebar-border: rgba(255, 255, 255, 0.05);
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;

    /* Couleurs Carte Premium */
    --card-gradient-1: rgba(194, 69, 82, 0.5); /* Bordeaux clair */
    --card-gradient-2: rgba(10, 10, 12, 0.8); /* Noir profond */
    --card-border: rgba(255, 255, 255, 0.15);

    --accent-color: #c24552; /* Bordeaux Clair au lieu de violet */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Supprimé: dashboard-layout, sidebar, nav-item, main-content */

.top-header {
    margin-bottom: 40px;
}

.top-header h1 {
    font-size: 2.2rem;
    font-weight: 600;
}

/* Bannière Annonce */
.announcement-banner {
    background: linear-gradient(90deg, #7f1d1d, #450a0a);
    color: #fff;
    text-align: center;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 900px;
}

/* Carte Membre - Effet "Carte Bancaire Virtuelle" Premium */
.member-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1.59;
    border-radius: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #2a124c, #0d051a);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--card-border);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.member-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Reflet métallique animé */
.member-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-25deg);
    animation: shine 7s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    20% {
        left: 200%;
    }
    100% {
        left: 200%;
    }
}

.card-chip i {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.card-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.card-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

#user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    background: #2f3136;
}

.user-details {
    display: flex;
    flex-direction: column;
}

#user-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
}

.user-rank {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.card-logo {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}

/* Grille de statistiques Minimaliste */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 25px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-box:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.stat-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-icon {
    font-size: 1.4rem;
    color: var(--accent-color);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 800;
}

/* ----------------------------------------------------- */
/* NOUVEAUX STYLES POUR LES FORMULAIRES (Convertisseur & Admin) */
/* ----------------------------------------------------- */

.glass-form-container {
    max-width: 600px;
    background: rgba(25, 25, 30, 0.5);
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.glass-form-container h2 {
    font-size: 1.6rem;
    color: var(--text-primary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.glass-form-container h2 i {
    color: var(--accent-color);
}

.form-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.glass-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.glass-form input,
.glass-form select {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 18px;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.glass-form input:focus,
.glass-form select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}

.glass-form input[readonly] {
    background: rgba(0, 0, 0, 0.3);
    color: var(--accent-color);
    font-weight: 800;
    border-color: transparent;
}

.glass-form select option {
    background-color: var(--bg-dark);
    color: var(--text-primary);
}

.btn-submit {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background: #7c3aed;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
    transform: translateY(-2px);
}

.btn-delete {
    background: #4a0f0f;
    color: #ff9999;
    border: 1px solid rgba(255, 100, 100, 0.2);
    padding: 16px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-delete:hover {
    background: #6a1414;
    color: #fff;
    border-color: rgba(255, 100, 100, 0.5);
    box-shadow: 0 5px 20px rgba(255, 50, 50, 0.4);
    transform: translateY(-2px);
}

.grid-catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 20px;
    padding-bottom: 50px;
}

/* Intégration Faux Embed Discord */
.discord-embed {
    background-color: #2b2d31;
    border-left: 4px solid #ed4245;
    padding: 16px;
    border-radius: 4px;
    color: #dbdee1;
    font-size: 0.95rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.discord-btn-ticket {
    background-color: #da373c;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.discord-btn-ticket:hover {
    background-color: #a12828;
}

/* ============================================================
   STYLES V2 PREMIUM (Extraction de React)
   ============================================================ */

:root {
    --v2-bg: #0a0a0c;
    --v2-panel: #131316;
    --v2-panel2: #1b1b20;
    --v2-border: #2a2a30;
    --v2-bordeaux: #7a0c16;
    --v2-bordeauxHover: #9a1220;
    --v2-bordeauxLight: #c24552;
    --v2-ivory: #f2ede4;
    --v2-txt: #eae6de;
    --v2-txt2: #9c988f;
    --v2-txt3: #6a665f;
    --v2-gold: #d4b36a;
    --v2-green: #41b378;
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes gradMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}
@keyframes toastUp {
    from {
        opacity: 0;
        transform: translate(-50%, 16px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.heroTitle {
    animation: fadeUp 0.8s ease both;
}
.heroSub {
    animation: fadeUp 0.8s 0.15s ease both;
}
.heroCta {
    animation: fadeUp 0.8s 0.3s ease both;
}
.heroStats {
    animation: fadeIn 1s 0.5s ease both;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.reveal.in {
    opacity: 1;
    transform: none;
}

.toastIn {
    animation: toastUp 0.3s ease both;
}
.marqueeTrack {
    display: inline-flex;
    animation: marquee 22s linear infinite;
    white-space: nowrap;
}

/* Utilitaires V2 */
.v2-page {
    background: var(--v2-bg);
    color: var(--v2-txt);
    min-height: 100vh;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
    width: 100%;
}

.v2-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.v2-btn {
    background: var(--v2-bordeaux);
    color: var(--v2-ivory);
    border: none;
    padding: 14px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-btn:hover {
    background: var(--v2-bordeauxHover) !important;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 28px rgba(122, 12, 22, 0.5);
}

.v2-btn-ghost {
    background: transparent;
    color: var(--v2-txt);
    border: 1px solid var(--v2-border);
    padding: 14px 32px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.v2-btn-ghost:hover {
    border-color: var(--v2-bordeauxLight) !important;
    color: var(--v2-ivory) !important;
}

.v2-card {
    background: var(--v2-panel);
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.v2-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--v2-bordeauxLight);
    font-weight: 700;
}

/* Spécifiques V2 */
.pcard {
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
.pcard:focus,
.pcard:active,
.pcard:focus-visible {
    outline: none !important;
}
/* box-shadow (pas de changement de border-width/margin) pour l'effet de survol :
   un changement de border déclenche un reflow qui peut décaler le bouton
   "Ajouter au panier" pile au moment du clic et le faire rater sa cible. */
.pcard:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 2px var(--v2-bordeauxLight),
        inset 0 0 0 1px var(--v2-bordeauxLight),
        0 16px 40px rgba(122, 12, 22, 0.25);
}
.pcard .pimg {
    transition: transform 0.4s ease;
}
.pcard:hover .pimg {
    transform: scale(1.07);
}
.pcard .quickadd {
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.25s ease;
}
.pcard:hover .quickadd {
    opacity: 1;
    transform: none;
}
.quick-add-btn {
    position: relative;
    z-index: 1;
}

.chip {
    transition: all 0.2s ease;
}
.chip:hover {
    border-color: var(--v2-bordeauxLight) !important;
    color: var(--v2-ivory) !important;
}

/* Boutons de filtre par catégorie (catalogues) */
.filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--v2-panel2);
    color: var(--v2-txt2);
    border: 1px solid var(--v2-border);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
}
/* transform/box-shadow/filter neutralisés en !important : la règle globale
   button:hover (levée + luminosité, voir injectGlobalStyles dans dashboard.js)
   donnait un effet de "saut" indésirable sur des boutons de filtre. */
.filter-btn:hover {
    border-color: var(--v2-bordeauxLight);
    color: var(--v2-ivory);
    background: var(--v2-border);
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}
.filter-btn.active {
    background: var(--v2-bordeaux);
    border-color: var(--v2-bordeaux);
    color: var(--v2-ivory);
    font-weight: 700;
}
.filter-btn.active:hover {
    background: var(--v2-bordeauxHover);
    border-color: var(--v2-bordeauxHover);
}

.navlink {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none !important;
    color: var(--v2-txt2);
    white-space: nowrap;
}
.nav-links > * {
    flex-shrink: 0;
}
/* Les liens individuels refusent de se compresser (flex-shrink:0 ci-dessus),
   donc la largeur minimale de #nav-links vaut la somme de tout son contenu :
   avec assez de liens, ça déborde de .v2-container et pousse le Panier
   (dernier enfant, justify-content:space-between) hors de l'écran, où
   overflow-x:hidden (global) le coupe. min-width:0 autorise #nav-links à
   se compresser comme flex-item ; le débordement devient un défilement
   horizontal interne au lieu de pousser ses voisins. Sans effet sous
   1024px : .nav-links bascule déjà en colonne position:absolute (menu
   burger), hors du flux flex normal. */
.nav-links {
    min-width: 0;
    overflow-x: auto;
    /* Scrollbar VISIBLE (fine, discrète) plutôt que masquée : masquée, un
       lien coupé (ex. "Plus", ou "Admin" pour un compte admin — la liste
       dépasse largement dès que ce lien est affiché) devient invisible et
       inatteignable sans aucun indice qu'il existe encore. Mieux vaut un
       filet de défilement visible qu'un lien qui semble avoir disparu. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.nav-links::-webkit-scrollbar {
    height: 4px;
}
.nav-links::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
}
.navlink::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--v2-bordeauxLight);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.navlink:hover,
.nav-active {
    color: var(--v2-bordeauxLight) !important;
}
.navlink:hover::after {
    opacity: 0.5;
}
.nav-active::after {
    opacity: 1 !important;
}
.navlink svg,
.navlink i {
    color: inherit;
    fill: currentColor;
}
span[data-target='view-panier'] {
    transition: all 0.25s ease;
}
span[data-target='view-panier']:hover {
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(194, 69, 82, 0.4);
}

.sizeBtn {
    transition: all 0.15s ease;
}
.sizeBtn:hover {
    border-color: var(--v2-ivory) !important;
}

.swatch {
    transition: transform 0.15s ease;
}
.swatch:hover {
    transform: scale(1.15);
}

.dotNav {
    transition: all 0.2s ease;
    cursor: pointer;
}

/* position:fixed + déplacé en enfant direct de <body> par JS (voir
   dashboard.js, initNavDropdowns) plutôt que absolute/top:100% imbriqué
   dans #nav-links. Nécessaire depuis que #nav-links a overflow-x:auto
   (fix icône panier, commit bba9aac) : ça force overflow-y à devenir
   auto aussi (couplage CSS overflow-x/overflow-y dès qu'un axe n'est
   pas visible), ce qui clippait tout dropdown positionné à l'intérieur
   dès qu'il dépassait la hauteur de la barre. position:fixed seul ne
   suffit pas non plus : imbriqué sous <nav> (position:sticky + z-index),
   le menu reste piégé dans le contexte d'empilement de nav et peut se
   retrouver sous d'autres éléments de la page malgré z-index:1000 --
   d'où le déplacement réel dans le DOM. top/left sont fixés dynamiquement
   par JS au survol, plus par CSS. */
.dropdown-menu {
    position: fixed;
    background-color: #121212;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 0;
    min-width: 180px;
    z-index: 1000 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.dropdown-menu.dropdown-menu-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-menu li {
    list-style: none;
}
.dropdown-menu li a {
    display: block;
    padding: 8px 16px;
    color: #f2ede4;
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
    font-size: 14px;
}
.dropdown-menu li a:hover {
    background-color: rgba(194, 69, 82, 0.1);
    color: var(--v2-bordeauxLight) !important;
}

.nav-sep {
    width: 1px;
    height: 18px;
    background: var(--v2-border);
    display: inline-block;
    flex-shrink: 0;
}
/* Le menu horizontal a besoin de place (7-8 liens) : bascule en menu burger
   dès qu'on manque de largeur, avant que ça ne tasse ou ne déborde. */
@media (max-width: 1024px) {
    .nav-sep {
        display: none;
    }
    .nav-links {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 66px;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 12, 0.98);
        padding: 20px;
        z-index: 100;
        border-bottom: 1px solid #333;
        align-items: flex-start !important;
        /* Neutralise le overflow-y:auto hérité de la règle desktop (couplage
           CSS overflow-x/overflow-y : dès qu'un axe n'est pas visible, l'autre
           bascule automatiquement à auto s'il n'est pas fixé explicitement).
           Ce couplage était présumé "sans effet" ici tant que le contenu du
           menu mobile restait toujours plus court que l'écran -- ce n'est
           plus garanti depuis que le sous-menu Catalogue/Plus reste en flux
           normal dans #nav-links au lieu d'être sorti vers <body> (voir plus
           bas). Un overflow-y:auto accidentel sur ce panneau créerait une
           zone scrollable imbriquée, piège tactile connu sur iOS Safari.
           Meilleure hypothèse testée pour le bug "scroll bloqué en bas de
           page sur mobile" signalé par l'utilisateur -- pas confirmée à
           100%, à valider sur appareil réel. */
        overflow-y: visible !important;
        overflow-x: visible !important;
    }
    .nav-links.active {
        display: flex !important;
    }
    .mobile-menu-btn {
        display: block !important;
    }

    /* Sous-menus (Catalogue, Plus) : en desktop ils sont sortis vers <body>
       en position:fixed (voir dashboard.js et le commentaire sur
       .dropdown-menu plus haut dans ce fichier). En mobile/tablette ils
       redeviennent au contraire un enfant normal de leur <li>, pour pousser
       les liens suivants du menu en dessous d'eux à l'ouverture au lieu de
       les recouvrir. */
    .dropdown-menu {
        position: static !important;
        display: none;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        margin: 4px 0 8px;
    }
    .dropdown-menu.dropdown-menu-open {
        display: block;
    }
}

/* Rangée de pastilles catégories + paliers d'accès (desktop uniquement,
   demande directe de Farès -- voir dashboard.html, #navbar-pastilles).
   Le dropdown "Catalogue ▾" (#nav-catalogue-dropdown) et le lien
   "Livraison 2-4j" (#nav-livraison-standalone) restent dans le DOM et en
   CSS mobile exactement comme avant (jamais modifiés) -- seulement masqués
   ici, au-dessus du même seuil que le menu burger (1024px), puisque leur
   contenu est repris dans cette rangée. */
#navbar-pastilles {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 24px 14px;
    border-top: 1px solid var(--v2-border);
}
.pastille {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--v2-txt2);
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pastille:hover {
    background: rgba(122, 12, 22, 0.15);
    color: var(--v2-ivory);
}
.pastille-icon {
    font-size: 20px;
    line-height: 1;
}
.pastille-label {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pastille-sep {
    width: 1px;
    height: 28px;
    background: var(--v2-border);
    flex-shrink: 0;
    margin: 0 6px;
}

/* Cadenas visuel sur les pastilles de palier payant (Niche Privée, VIP,
   Ultimate) quand l'utilisateur connecté n'a pas ce rôle Discord -- ou
   n'est pas connecté du tout (locked par défaut, window.hasAccess(undefined,
   ...) renvoie déjà false). Objectif marketing/clarté (montrer ce qui
   existe sans donner l'impression que tout est ouvert), pas une sécurité
   réelle : le filtrage serveur des catalogues n'est pas concerné et reste
   inchangé. Reste cliquable (navigue normalement), juste atténué avec un
   petit cadenas superposé sur l'icône. Classe .locked posée/retirée par
   window.updateNavbarLockIcons() (dashboard.js), appelée après chaque
   résolution de window.USER. "Livraison 2-4j" (public par design) et les
   5 pastilles catégories n'ont pas data-tier -- jamais concernées. */
.pastille {
    position: relative;
}
.pastille-lock {
    display: none;
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: 10px;
    line-height: 1;
}
.pastille.locked {
    opacity: 0.45;
}
.pastille.locked .pastille-lock {
    display: block;
}

@media (max-width: 1024px) {
    #navbar-pastilles {
        display: none !important;
    }
}
@media (min-width: 1025px) {
    #nav-catalogue-dropdown,
    #nav-livraison-standalone {
        display: none !important;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Grilles et Modales */
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)) !important;
        gap: 10px !important;
    }
    .v2-container {
        padding: 0 15px !important;
    }

    /* Navbar mobile agrandie (demande client : barre plus imposante, cibles
       tactiles confortables au pouce) — hauteur de la barre, logo, bouton
       burger et liens du menu déplié, chacun +15 à +25% par rapport au
       desktop. Sélecteurs volontairement scopés (nav .v2-container, pas
       .v2-container seul ; .brand-logo dédié) pour ne pas affecter les
       autres usages de .v2-container (footer, section) ni la barre desktop. */
    nav .v2-container {
        height: 104px !important; /* 86px * 1.21 */
    }
    .brand-logo {
        font-size: 30px !important; /* 26px * 1.15 */
    }
    .mobile-menu-btn {
        font-size: 29px !important; /* 24px * 1.21 */
        /* Padding ajouté : le glyphe seul (24px) est bien en-deçà des ~44px
           recommandés pour une cible tactile ; ce padding porte la zone
           cliquable réelle à ~48px sans agrandir le glyphe autant que ça. */
        padding: 10px !important;
        margin: -10px !important; /* compense le padding pour ne pas décaler le logo à côté */
        line-height: 1 !important;
    }
    /* Liens du menu déplié (#nav-links.active, voir @media 1024px plus haut) :
       police agrandie + padding vertical ajouté SANS toucher au
       padding-bottom:4px existant (nécessaire au soulignement .navlink::after,
       positionné à bottom:-4px). */
    #nav-links.active .navlink,
    #nav-links.active .nav-item {
        font-size: 18px !important; /* 14.5px * 1.24 */
        padding: 20px 4px 4px !important; /* porte la cible tactile à ~44px de haut */
    }
    /* Le Panier n'est PAS dans #nav-links : c'est un sibling toujours visible
       dans la barre repliée (accès rapide au panier sans ouvrir le menu
       burger) — a besoin de sa propre règle, même sélecteur que le hover
       existant plus haut dans ce fichier (span[data-target='view-panier']). */
    span[data-target='view-panier'] {
        font-size: 19px !important; /* 16px * 1.19 */
        padding: 10px 6px !important;
        margin: -10px -6px !important; /* compense le padding, garde l'alignement à droite */
    }

    /* Le footer fixe son propre padding vertical en ligne (56px 24px 32px)
       pour espacer "LE PLUG" de la bordure du haut -- la règle .v2-container
       ci-dessus l'écrase à 0 sur mobile (même !important, elle gagne par
       ordre de déclaration). Sélecteur plus spécifique pour restaurer un
       espacement vertical raisonnable ici sans toucher aux autres usages de
       .v2-container ni au padding horizontal réduit voulu sur mobile. */
    footer .v2-container {
        padding: 40px 15px 32px !important;
    }
    /* Même cause, même remède que le footer ci-dessus : le hero de la page
       d'accueil (index.html) fixe son propre padding vertical en ligne
       (120px 96px sur desktop) pour espacer son contenu de la barre du
       haut -- la règle .v2-container écrase ça à 0 sur mobile/tablette.
       Sélecteur plus spécifique (gagne sur l'!important existant) pour
       restaurer un espacement vertical raisonnable, réduit par rapport au
       desktop comme pour le footer, sans toucher au padding horizontal
       réduit voulu sur mobile ni aux autres usages de .v2-container. */
    section .v2-container {
        padding-top: 64px !important;
        padding-bottom: 48px !important;
    }

    /* Fiche Produit & Panier */
    .product-layout {
        flex-direction: column !important;
    }
    #product-image {
        width: 100% !important;
        height: auto !important;
    }

    /* Mon Espace */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    /* Admin */
    .admin-table-container {
        overflow-x: auto;
    }
    #adminProductForm {
        grid-template-columns: 1fr !important;
    }
    #adminProductForm > div {
        grid-column: span 1 !important;
    }
}

/* Mon Espace — grille de 4 cartes stats (auto-fit, minmax(200px,1fr)).
   En dessous de ~480px elle retombe déjà naturellement sur 1 colonne (pas
   touché ici). Sur la plage tablette, elle forme naturellement 3 colonnes,
   ce qui isole la 4e carte seule sur une ligne avec un grand vide à droite
   — on force 2 colonnes pour un rendu équilibré (2+2). Au-delà de 900px
   (desktop), l'auto-fit reprend la main tel quel (4 colonnes propres). */
@media (min-width: 481px) and (max-width: 900px) {
    .mon-espace-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    #panier > div > div {
        flex-direction: column !important;
    }
    #panier > div > div > div {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .cart-item-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px !important;
    }
    .cart-item-row > div:nth-child(2) {
        width: 100% !important;
        justify-content: space-between !important;
        margin-top: 10px;
    }
}

/* Carte catalogue : prix d'achat + prix de revente estimé côte à côte
   (voir .product-pricing, dashboard.js/renderProducts) s'écrasaient sur
   petit écran faute de place — passent en colonne, alignés à gauche,
   revente juste sous achat (déjà cet ordre dans le HTML). */
@media (max-width: 768px) {
    .product-pricing {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .product-revente {
        margin-top: 2px;
    }
}

/* Widget Guide / Assistant flottant */
#guide-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 900; /* sous le toast (9999) et le menu mobile (100), au-dessus du reste */
}
.guide-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--v2-bordeaux);
    color: var(--v2-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.2s ease,
        background 0.2s ease;
    user-select: none;
}
.guide-bubble:hover {
    transform: scale(1.08);
    background: var(--v2-bordeauxHover);
}

.guide-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 48px);
    max-height: min(520px, calc(100vh - 140px));
    background: var(--v2-panel);
    border: 1px solid var(--v2-border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.guide-panel.active {
    display: flex;
}

.guide-panel-header {
    flex-shrink: 0;
    background: var(--v2-bordeaux);
    color: var(--v2-ivory);
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.guide-close {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.guide-close:hover {
    opacity: 1;
}

.guide-panel-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.guide-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: var(--v2-panel2);
    border: 1px solid var(--v2-border);
    color: var(--v2-txt);
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}
.guide-option:last-child {
    margin-bottom: 0;
}
.guide-option:hover {
    border-color: var(--v2-bordeauxLight);
    color: var(--v2-ivory);
}

.guide-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--v2-panel2);
    border: 1px solid var(--v2-border);
    color: var(--v2-txt2);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all 0.2s ease;
}
.guide-back:hover {
    color: var(--v2-ivory);
    border-color: var(--v2-bordeauxLight);
    background: var(--v2-bordeaux);
}

@media (max-width: 480px) {
    #guide-widget {
        bottom: 16px;
        right: 16px;
    }
    .guide-bubble {
        width: 50px;
        height: 50px;
        font-size: 21px;
    }
    .guide-panel {
        bottom: 64px;
        right: -8px;
        width: calc(100vw - 32px);
        max-height: min(460px, calc(100vh - 120px));
    }
}

/* Formulaire admin produit : aperçu en direct sous le formulaire sur petit
   écran, et grilles internes (Infos générales, Prix, Badge & promo) qui
   réduisaient chaque champ à ~119px de large une fois le débordement
   ci-dessous corrigé -- pas de chevauchement ni de texte caché, mais des
   champs de saisie trop étroits pour être confortables. Même seuil que
   .admin-form-layout (déjà en place) : à ce stade le formulaire entier est
   déjà passé en 1 colonne, donc les grilles internes ont largement la
   place de faire pareil. */
@media (max-width: 900px) {
    .admin-form-layout {
        grid-template-columns: 1fr !important;
    }
    .admin-form-grid-2 {
        grid-template-columns: 1fr !important;
    }
    /* Le champ Description utilise grid-column:span 2 pour la grille 2
       colonnes desktop -- une fois celle-ci repassée à 1 seule colonne
       ci-dessus, ce span force quand même une 2e colonne implicite (et les
       autres champs non-spannés continuent d'utiliser les deux), annulant
       en pratique le passage à 1 colonne. */
    .admin-form-span2 {
        grid-column: 1 !important;
    }
}

/* Formulaire admin produit : #adminProductForm débordait horizontalement à
   375px (jusqu'à ~150px de dépassement mesuré), forçant un scroll latéral
   sur toute la page admin -- pas dû à un seul champ, mais à chaque niveau
   de grid/flex imbriqué (form > grille 2 colonnes > wrapper label+input)
   qui hérite par défaut de min-width:auto et refuse de rétrécir sous la
   largeur de son contenu (ex. le <select> Catalogue avec ses options
   longues). Un seul reset ciblé sur tout le formulaire au lieu de corriger
   chaque niveau un par un. Aucun effet en desktop (2fr de large, jamais
   contraint à rétrécir en dessous du contenu). */
#adminProductForm,
#adminProductForm * {
    min-width: 0;
}

/* Formulaire admin produit : agrandit la zone cliquable des boutons de
   réorganisation des vignettes photo (▲▼✖) sur petit écran -- 22x22px réel
   est bien en dessous d'une taille tactile fiable (même défaut que le
   bouton retirer du panier, cf. commit 256fb71). La vignette elle-même est
   agrandie en même temps pour que les boutons plus gros restent
   entièrement contenus dedans (right:3/top:3/bottom:3 inchangés en px),
   sans chevaucher les vignettes voisines : marge calculée et vérifiée à
   375px (3 vignettes/ligne -> 2/ligne, aucun chevauchement mesuré). */
@media (max-width: 768px) {
    .admin-thumb {
        width: 112px !important;
        height: 112px !important;
    }
    .admin-thumb-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }
    .admin-thumb-btn-row {
        gap: 8px !important;
    }
}

/* Panneau Admin : barre d'onglets (Commandes/Produits/Corbeille/...) déborde
   en portrait mobile (ex: 375px) -- scroll horizontal tactile plutôt que de
   la faire wrapper, pour garder tous les onglets accessibles d'un swipe.
   Desktop inchangé (règle scopée à la media query). */
@media (max-width: 768px) {
    .admin-tabs-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .admin-tabs-bar button {
        flex-shrink: 0;
    }
}