/* Accessibilité : footer toujours visible, bouton plus contrasté au hover */
.coin_content_footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.coin_card .coin_content_link {
    filter: brightness(0.97) grayscale(0.08);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.10);
    transition: filter 0.3s, box-shadow 0.3s, background 0.3s, transform 0.3s;
}
.coin_card:hover .coin_content_link,
.coin_card:focus-within .coin_content_link {
    filter: none;
    background: linear-gradient(45deg, var(--primary-violet-dark), var(--primary-orange-dark));
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.22);
    transform: scale(1.03) translateY(-1px);
    z-index: 2;
}
/* Carte Logs & Activité */
.action-card.action-logs {
    border-top: 5px solid orange;
}
/* ====================================
   1. VARIABLES ET RESET - PALETTE VIOLET/ORANGE ADOUCIE
   ==================================== */

:root {
    /* Couleurs principales du site */
    --primary-violet: #8B5CF6;          /* Violet principal */
    --primary-violet-dark: #7C3AED;     /* Violet foncé */
    --primary-violet-light: #A78BFA;    /* Violet clair */
    --primary-orange: #F97316;          /* Orange principal */
    --primary-orange-dark: #EA580C;     /* Orange foncé */
    --primary-orange-light: #FB923C;    /* Orange clair */
    
    /* Texte */
    --text-color: #1F2937;
    --textColorLight: #4B5563; /* Contraste amélioré pour accessibilité (WCAG AA) */
    --textColorWhite: #FFFFFF;
    --textColorBlack: #111827;
    
    /* Backgrounds */
    --backgroundColorLight: #FAF5FF;     /* Violet très clair */
    --backgroundColorBeige: #FEF3F2;     /* Orange très clair */
    --backgroundColorBrown: #FBBF24;     /* Orange/beige */
    --backgroundColorGreen: #E8F0E3;     /* Gardé pour certains éléments */
    --backgroundColorWhite: #FFFFFF;
    --backgroundColorViolet: #EDE9FE;    /* Violet pastel */
    --backgroundButton: var(--primary-violet);
    
    /* Variables pour l'administration - Thème violet/orange */
    --admin-primary: var(--primary-violet);
    --admin-secondary: #6B7280;
    --admin-success: #10B981;
    --admin-danger: #EF4444;
    --admin-warning: var(--primary-orange);
    --admin-info: var(--primary-violet-light);
    
    /* Ombres avec teintes violet/orange */
    --shadow-light: 0 2px 4px rgba(139, 92, 246, 0.1);
    --shadow-medium: 0 2px 8px rgba(139, 92, 246, 0.15);
    --shadow-strong: 0 4px 12px rgba(139, 92, 246, 0.25);
    
    /* Gradients violet/orange ADOUCIS avec transparence */
    --gradient-primary: linear-gradient(135deg, rgba(139, 92, 246, 0.85) 0%, rgba(249, 115, 22, 0.85) 100%);
    --gradient-primary-light: linear-gradient(135deg, rgba(139, 92, 246, 0.6) 0%, rgba(249, 115, 22, 0.6) 100%);
    --gradient-primary-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(249, 115, 22, 0.3) 100%);
    --gradient-header: linear-gradient(135deg, rgba(237, 233, 254, 0.9) 0%, rgba(254, 243, 242, 0.9) 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 255, 0.8) 100%);
    --gradient-legend: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(249, 115, 22, 0.9) 100%);
    --gradient-main: linear-gradient(135deg, 
        rgba(254, 243, 242, 0.9) 0%,     /* ORANGE en premier (inverse) */
        rgba(255, 255, 255, 0.95) 25%,   /* Blanc */
        rgba(237, 233, 254, 0.9) 50%,    /* VIOLET au centre */
        rgba(255, 255, 255, 0.95) 75%,   /* Blanc */
        rgba(254, 243, 242, 0.9) 100%    /* ORANGE à la fin */
    );
}
    /* Masque visuellement mais reste dans le DOM pour le SEO/accessibilité */
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

* {
    color: var(--text-color);
}

/* ====================================
   HOMEPAGE - CABINET DE CURIOSITÉS
   ==================================== */

/* Variables spécifiques homepage */
.homepage-cabinet {
    --violet-profond: #4A2C52;
    --violet-sombre: #2F1B33;
    --orange-cuivre: #D17B42;
    --orange-hover: #B86830;
    --fond-clair: #F8F6F3;
    --blanc-casse: #FEFEFE;
}

/* Hero Section */
.hero-cabinet {
    position: relative;
    min-height: 600px;
    background: linear-gradient(135deg, #5a3d6d 0%, #3a2a4a 100%);
    color: #FEFEFE;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    overflow: hidden;
    margin: 2rem;
    border: 3px solid #D17B42;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(74, 44, 82, 0.3);
}

.hero-cabinet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    filter: blur(2px);
    background-size: cover;
    background-position: center;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    text-align: center;
}

.hero-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 1rem;
    max-width: 100%;
    flex-wrap: wrap;
}

.hero-brand-logo {
    width: 192px;
    height: 192px;
    object-fit: contain;
    flex: 0 0 auto;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #D17B42;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    line-height: 1.2;
}

.hero-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 2rem;
    color: #D17B42;
    opacity: 0.9;
}

.hero-text {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    color: #F0EDE9;
    font-weight: 500;
}

.hero-text p {
    color: #F0EDE9;
}

.hero-text strong {
    color: #FFFFFF;
    font-weight: 700;
}

.btn-cabinet {
    display: inline-block;
    padding: 1rem 3rem;
    background: #D17B42;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(209, 123, 66, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-top: auto; /* Pousse le bouton en bas de la carte */
}

.btn-cabinet:hover {
    background: #B86830;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(209, 123, 66, 0.6);
    color: white;
    border: 2px solid #D17B42;
}

/* Sections Pépites */
.section-pepites {
    padding: 5rem 2rem;
    background: #F8F6F3;
    overflow: hidden;
    max-width: 100%;
}

.section-pepites + .section-pepites {
    margin-top: 1.25rem;
}

.admin-dashboard .section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #4A2C52;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}

.carousel-wrapper {
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.carousel-pepites {
    display: grid;
    grid-template-columns: repeat(3, 350px);
    gap: 2rem;
    padding: 2rem 2rem;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-pepites::-webkit-scrollbar {
    height: 10px;
}

.carousel-pepites::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}

.carousel-pepites::-webkit-scrollbar-thumb {
    background: #D17B42;
    border-radius: 10px;
}

.pepite-card {
    min-width: 350px;
    max-width: 350px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    opacity: 0;
    transform: scale(0.95);
    display: none;
    /* Flexbox pour aligner le bouton en bas */
    flex-direction: column;
}

.pepite-card.visible {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.pepite-card.visible:hover {
    transform: translateY(-5px) scale(1);
    box-shadow: 0 8px 30px rgba(74, 44, 82, 0.2);
}

.pepite-images {
    position: relative;
    height: 200px;
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pepite-images img {
    width: 48%;
    height: 100%;
    object-fit: contain;
    padding-top: 3.2rem;
    padding-bottom: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.badge-tirage {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #D17B42;
    color: white;
    padding: 0.2rem 1rem;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.90rem;
    box-shadow: 0 3px 10px rgba(209, 123, 66, 0.4);
}

.pepite-content {
    padding: 0.8rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pepite-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #4A2C52;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.pepite-story {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    flex: 1;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Section Thématique */
.section-themes {
    padding: 5rem 2rem;
    background: #F8F6F3;
}

.section-pepites + .section-themes {
    margin-top: 1.25rem;
}

.themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.theme-card {
    padding: 2rem;
    background: #F8F6F3;
    border-radius: 15px;
    border-left: 5px solid #D17B42;
    transition: all 0.3s ease;
    min-width: 0;
}

.theme-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.theme-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #4A2C52;
    margin-bottom: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.theme-text {
    font-family: 'Lato', sans-serif;
    color: #555;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Section À Propos */
.section-about {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #6B4C7A 0%, #4A3860 100%);
    color: #FEFEFE;
    margin: 2rem;
    border: 3px solid #D17B42;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(74, 44, 82, 0.3);
}

.section-about h2,
.section-about .section-title {
    color: #D17B42 !important;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-text {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    line-height: 1.9;
    font-style: italic;
    margin-bottom: 2rem;
    color: #F5F3F0;
    font-weight: 500;
}

.about-text strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* Footer Cabinet */
.footer-cabinet {
    background: #4a3657;
    color: #FEFEFE;
    text-align: center;
    padding: 2rem;
    font-family: 'Lato', sans-serif;
    margin: 2rem;
    border: 3px solid #D17B42;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(74, 44, 82, 0.3);
}

.footer-cabinet p {
    color: #F5F3F0;
    font-weight: 500;
}

.footer-cabinet strong {
    color: #FFFFFF;
    font-weight: 700;
}

.footer-tagline {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.5rem;
}

/* Responsive pour homepage Cabinet */
@media (max-width: 1024px) {
    .carousel-pepites {
        grid-template-columns: repeat(2, 350px);
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}


@media (max-width: 768px) {
    .carousel-pepites {
        grid-template-columns: 1fr;
    }
    
    .pepite-card {
        min-width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.15;
    }

    .hero-brand {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 0.75rem;
    }

    .hero-brand-logo {
        width: 144px;
        height: 144px;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .section-pepites,
    .section-themes,
    .section-about {
        padding: 3rem 1rem;
    }

    .themes-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .theme-card {
        padding: 1.2rem;
    }

    .theme-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }
}

html, body {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    margin: 0;
    overflow-x: clip;
}

a, a:link, a:visited, a:hover, a:active {
    text-decoration: none !important;
}

/* Touch targets accessibilité WCAG (min 44x44px) */
body:not([class*="ea-"]) button,
body:not([class*="ea-"]) .btn,
body:not([class*="ea-"]) input[type="submit"],
body:not([class*="ea-"]) input[type="button"] {
    min-height: 44px;
    padding: 0.5rem 1rem;
}

body:not([class*="ea-"]) a:not(p a):not(li a):not(span a) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ====================================
   2. CLASSES UTILITAIRES
   ==================================== */

.d-f {
    display: flex;
}

.jc-sb {
    justify-content: space-between;
}

.jc-c {
    justify-content: center;
}

.fd-c {
    flex-direction: column;
}

.fw-w {
    flex-wrap: wrap;
}

.ai-c {
    align-items: center;
}

.hr {
    border: 0;
    height: 1px;
    background-color: var(--textColorBlack);
    margin: 0;
    width: 100%;
    display: block;
}

/* Classes utilitaires ajoutées */
.flex-grow-1 {
    flex: 1;
}

.text-muted {
    color: var(--textColorLight) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

/* ====================================
   CLASSES UTILITAIRES POUR CARTES ET CONTENEURS
   ==================================== */

/* Carte standard avec gradient violet/orange */
.card-gradient {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
}

/* Transition standard pour interactions */
.transition-standard {
    transition: all 0.3s ease;
}

/* Ombre medium réutilisable */
.shadow-medium {
    box-shadow: var(--shadow-medium);
}

/* Ombre light réutilisable */
.shadow-light {
    box-shadow: var(--shadow-light);
}

/* Ombre strong pour hover */
.shadow-strong {
    box-shadow: var(--shadow-strong);
}

/* ====================================
   3. SYSTÈME DE BOUTONS UNIFIÉ - CONTRASTE AMÉLIORÉ
   ==================================== */

/* Bouton principal (style original du site) */
.btn {
    background: var(--gradient-primary);
    color: var(--textColorWhite) !important; /* Force le blanc */
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: 0;
    text-align: center;
    font-weight: 600;
    box-shadow: var(--shadow-medium);
}

.btn:hover {
    background: linear-gradient(135deg, var(--primary-violet-dark) 0%, var(--primary-orange-dark) 100%);
    color: var(--textColorWhite) !important; /* Force le blanc au hover */
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
}

/* Bouton secondaire pour le site principal */
.btn-secondary-site {
    display: block;
    margin: 12px auto 0;
    text-align: center;
    background: transparent;
    color: var(--primary-violet-dark) !important; /* Violet foncé pour contraste */
    border: 2px solid var(--primary-violet-dark);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700; /* Plus gras pour plus de lisibilité */
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secondary-site:hover {
    background: var(--primary-violet-dark);
    color: var(--textColorWhite) !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

/* Bouton accent orange */
.btn-orange, button.btn-orange {
    background: var(--primary-orange-dark) !important; /* Orange plus foncé pour contraste */
    color: var(--textColorWhite) !important;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    box-shadow: var(--shadow-light);
}

.btn-orange:hover, button.btn-orange:hover {
    background: #DC2626 !important; /* Rouge-orange très foncé au hover */
    color: var(--textColorWhite) !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

/* Système de boutons pour l'administration */
.btn-primary {
    background-color: var(--primary-violet-dark) !important; /* Violet plus foncé */
    border-color: var(--primary-violet-dark) !important;
    color: var(--textColorWhite) !important;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 600; /* Plus gras */
    margin: 0;
}

.btn-primary:hover {
    background-color: #6D28D9 !important; /* Encore plus foncé */
    border-color: #6D28D9 !important;
    color: var(--textColorWhite) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

.btn-secondary {
    background-color: #4B5563 !important; /* Gris plus foncé */
    border-color: #4B5563 !important;
    color: var(--textColorWhite) !important;
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    margin: 0;
}

.btn-secondary:hover {
    background-color: #374151 !important; /* Gris très foncé */
    border-color: #374151 !important;
    color: var(--textColorWhite) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

.btn-outline-primary {
    background-color: transparent;
    color: #1F2937 !important; /* Gris très foncé (quasi-noir) pour meilleur contraste */
    border: 2px solid #1F2937 !important; /* Bordure assortie */
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 700; /* Très gras pour contraste */
}

.btn-outline-primary:hover {
    background-color: #1F2937 !important;
    color: var(--textColorWhite) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #374151 !important; /* Gris très foncé */
    border: 2px solid #374151 !important;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 700;
}

.btn-outline-secondary:hover {
    background-color: #374151 !important;
    color: var(--textColorWhite) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

.btn-outline-danger {
    background-color: transparent;
    color: #DC2626 !important; /* Rouge foncé */
    border: 2px solid #DC2626 !important;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 700;
}

.btn-outline-danger:hover {
    background-color: #DC2626 !important;
    color: var(--textColorWhite) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

.btn-success {
    background-color: #059669 !important; /* Vert plus foncé */
    border-color: #059669 !important;
    color: var(--textColorWhite) !important;
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 600;
}

.btn-success:hover {
    background-color: #047857 !important; /* Vert très foncé */
    border-color: #047857 !important;
    color: var(--textColorWhite) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

/* Variantes de taille */
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 180px;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Actions d'ordres */
.order_actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

/* ====================================
   4. SYSTÈME D'ALERTES
   ==================================== */

.flash-messages {
    width: 100%;
    text-align: center;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert h4 {
    margin-top: 0;
    color: inherit;
}

.alert .alert-link {
    font-weight: 700;
}

.alert > p, .alert > ul {
    margin-bottom: 0;
}

.alert > p + p {
    margin-top: 5px;
}

.alert-dismissable, .alert-dismissible {
    padding-right: 35px;
}

.alert-dismissable .close, .alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}

.alert-success {
    background-color: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}

.alert.w-100 {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.alert-success hr {
    border-top-color: #86efac;
}

.alert-success .alert-link {
    color: #047857;
}

.alert-info {
    background-color: var(--backgroundColorViolet);
    border-color: var(--primary-violet-light);
    color: var(--primary-violet-dark);
}

.alert-info hr {
    border-top-color: var(--primary-violet);
}

.alert-info .alert-link {
    color: var(--primary-violet-dark);
}

.alert-warning {
    background-color: #fef3c7;
    border-color: var(--primary-orange-light);
    color: var(--primary-orange-dark);
}

.alert-warning hr {
    border-top-color: var(--primary-orange);
}

.alert-warning .alert-link {
    color: var(--primary-orange-dark);
}

.alert-danger {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.alert-danger hr {
    border-top-color: #f87171;
}

.alert-danger .alert-link {
    color: #b91c1c;
}

/* ====================================
   5. LAYOUT GÉNÉRAL - THÈME VIOLET/ORANGE
   ==================================== */

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

.header_container, .footer_container {
    width: auto;
    background: var(--gradient-header);
    border-bottom: 2px solid var(--primary-violet-light);
}

.header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 80;
}

.main_container {
    background: var(--gradient-main);
    width: 100%;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    /* padding-bottom: 20px; */
    min-height: 60vh;
}

@media (max-width: 576px) {
    .main_container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.header_container_ul {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.header_left_logo_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: 0;
    line-height: 0;
    border-radius: 14px;
}

.header_left_logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    display: block;
}

.header_left_title {
    text-decoration: none;
    margin-left: 10px;
}

.header_mobile_toggle {
    display: none;
    margin-left: auto;
    border: 1px solid var(--primary-violet-light);
    border-radius: 8px;
    background: var(--backgroundColorWhite);
    color: var(--primary-violet-dark);
    width: 42px;
    height: 42px;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.header_mobile_overlay {
    display: none;
}

.header_lang_select {
    border: 1px solid var(--primary-violet-light);
    border-radius: 8px;
    background: var(--backgroundColorWhite);
    color: var(--primary-violet-dark);
    padding: 7px 10px;
    font-size: 0.92rem;
    max-width: 155px;
}

.header_center {
    flex-wrap: wrap;
}

.header_center_link {
    text-decoration: none;
    color: var(--primary-violet-dark);
    margin: 0 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.header_center_link:hover {
    color: var(--primary-orange);
    text-decoration: none;
    transform: translateY(-1px);
}

.header_right {
    margin-right: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.header_right a {
    text-decoration: none;
    color: var(--primary-violet-dark);
    margin: 0 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.header_right a:hover {
    color: var(--primary-orange);
    text-decoration: none;
    transform: translateY(-1px);
}

.header_right form {
    margin: 0;
}

/* === Loupe de recherche header === */
.header-search-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.header-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 6px 8px;
    color: var(--primary-violet-dark);
    border-radius: 8px;
    transition: background 0.15s ease;
    line-height: 1;
}

.header-search-toggle:hover {
    background: rgba(139, 92, 246, 0.08);
}

.header-search-form {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.2s ease;
    white-space: nowrap;
}

.header-search-wrap.is-open .header-search-form {
    max-width: 280px;
    opacity: 1;
}

.header-search-wrap.is-open .header-search-toggle {
    display: none;
}

.header-search-input {
    border: 1px solid var(--primary-violet-light);
    border-radius: 8px 0 0 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
    color: var(--primary-violet-dark);
    background: var(--backgroundColorWhite);
    outline: none;
    width: 200px;
    box-sizing: border-box;
}

.header-search-input:focus {
    border-color: var(--primary-violet);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.header-search-submit {
    border: 1px solid var(--primary-violet-light);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: var(--backgroundColorWhite);
    color: var(--primary-violet-dark);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.header-search-submit:hover {
    background: rgba(139, 92, 246, 0.08);
}

.header_right_button {
    border: 1px solid var(--primary-violet-light);
    border-radius: 6px;
    background: var(--backgroundColorWhite);
    color: var(--primary-violet-dark);
    padding: 8px 12px;
    font-weight: 500;
    cursor: pointer;
}

.header_right_button:hover {
    color: var(--primary-orange);
}

.footer_container {
    justify-content: space-between;
    margin-top: 1px;
    align-items: flex-start;
    column-gap: 24px;
    padding: 10px 24px;
    font-size: 0.92rem;
    line-height: 1.15;
}

.footer_left, .footer_center, .footer_right {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}

.footer_left p {
    margin: 0;
    line-height: 1.15;
}

.footer_center {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.footer_right {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-align: right;
}

.footer_socials {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer_left_title, .footer_center_title, .footer_right_title {
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary-violet-dark);
}

.footer_center a, .footer_right a {
    display: inline-flex;
    margin: 0;
    line-height: 1.15;
    text-decoration: none;
    color: var(--primary-violet-dark);
    transition: color 0.2s ease;
}

.footer_center a:hover, .footer_right a:hover {
    color: var(--primary-orange);
}

@media (max-width: 992px) {
    .header_container {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 10px 12px;
        gap: 8px;
    }

    .header_center {
        width: 100%;
        justify-content: flex-start;
        order: 3;
        gap: 6px;
        row-gap: 8px;
    }

    .header_center_link {
        margin: 0 8px 4px 0;
        font-size: 0.95rem;
    }

    .header_right {
        margin-right: 0;
        margin-left: auto;
        justify-content: flex-end;
    }

    .header_right a {
        margin: 0 8px 4px 0;
        font-size: 0.95rem;
    }

    .header_lang_form {
        margin-left: 0 !important;
    }

    .footer_container {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 14px;
    }

    .footer_left, .footer_center, .footer_right {
        width: 100%;
    }

    .footer_center,
    .footer_right {
        gap: 8px;
        justify-content: flex-start;
    }

    .footer_right {
        text-align: left;
    }

    .footer_socials {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .header_left {
        position: relative;
        z-index: 92;
    }

    .header_left {
        width: 100%;
    }

    .header_left_logo_link {
        padding: 4px;
    }

    .header_left_logo {
        width: 66px;
        height: 66px;
    }

    .header_left_title {
        font-size: 1.05rem;
    }

    .header_mobile_toggle {
        display: inline-flex;
    }

    .header_mobile_overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(22, 16, 26, 0.45);
        z-index: 90;
        opacity: 0;
        transition: opacity 0.18s ease;
    }

    .header_container.header-menu-open .header_mobile_overlay {
        display: block;
        opacity: 1;
    }

    .header_center,
    .header_right {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        z-index: 91;
        background: var(--backgroundColorWhite);
        border: 1px solid var(--primary-violet-light);
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        will-change: opacity, transform;
    }

    .header_container.header-menu-open .header_center,
    .header_container.header-menu-open .header_right {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .header_center {
        gap: 7px;
        align-items: flex-start;
        margin-top: 8px;
    }

    .header_center_link,
    .header_right a {
        margin: 0;
        padding: 6px 9px;
        border: 1px solid var(--primary-violet-light);
        border-radius: 8px;
        background: var(--backgroundColorWhite);
        font-size: 0.89rem;
        line-height: 1.25;
    }

    .header_center_link.admin-dropdown {
        display: inline-flex;
        align-items: center;
    }

    .header_right {
        width: 100%;
        justify-content: flex-start;
        gap: 7px;
        margin-top: 8px;
    }

    @media (prefers-reduced-motion: reduce) {
        .header_mobile_overlay,
        .header_center,
        .header_right {
            transition: none !important;
            transform: none !important;
        }
    }

    .header_right_button {
        padding: 7px 10px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .header_lang_form {
        margin-top: 2px;
    }

    /* Loupe mobile : toujours visible, formulaire déplié */
    .header-search-wrap {
        width: 100%;
        padding: 6px 0;
    }

    .header-search-toggle {
        display: none !important;
    }

    .header-search-form {
        max-width: 100% !important;
        opacity: 1 !important;
        overflow: visible !important;
        width: 100%;
    }

    .header-search-input {
        width: calc(100% - 44px);
        font-size: 0.95rem;
    }

    .header_lang_select {
        max-width: 132px;
        font-size: 0.84rem;
        padding: 6px 8px;
    }

    .admin-dropdown-content {
        position: static;
        min-width: 0;
        margin-top: 6px;
        border: 1px solid var(--primary-violet-light);
        box-shadow: none;
        border-radius: 8px;
        overflow: hidden;
    }

    .admin-dropdown-content a {
        padding: 8px 10px;
        font-size: 0.88rem;
    }
}

@media (max-width: 576px) {
    .header_left_logo_link {
        padding: 3px;
    }

    .header_left_logo {
        width: 58px;
        height: 58px;
    }

    .header_left_title {
        font-size: 0.98rem;
    }

    .header_center_link,
    .header_right a,
    .header_right_button {
        font-size: 0.84rem;
        padding: 5px 8px;
    }

    .header_lang_select {
        max-width: 118px;
        font-size: 0.8rem;
    }
}

/* ====================================
   6. PAGE D'ACCUEIL - THÈME VIOLET/ORANGE
   ==================================== */

a.home_header_content_link,
a.home_header_content_link:link,
a.home_header_content_link:visited {
    text-decoration: none !important;
    color: var(--textColorWhite) !important;
    font-weight: 700;
    border: 2px solid var(--textColorWhite);
    padding: 15px 30px;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    background: var(--primary-violet) !important;
    display: inline-block;
}

a.home_header_content_link:hover,
a.home_header_content_link:active {
    background: var(--textColorWhite) !important;
    color: var(--primary-violet) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.home_coin_title {
    padding: 30px 100px 30px 100px;
    color: var(--primary-violet-dark);
}

.home_coin_img {
    width: 130px;
    height: 130px;
    object-fit: cover;
}

/* ====================================
   7. CATALOGUE ET FILTRES - THÈME VIOLET/ORANGE
   ==================================== */

.catalogue_sort {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 2em;
    background: var(--gradient-card);
    padding: 1.2em 1.5em;
    border-radius: 15px;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--primary-violet-light);
}

.catalogue_sort label {
    font-weight: 600;
    color: var(--primary-violet-dark);
}

.catalogue_sort select {
    padding: 0.5em 0.7em;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: 1em;
}

/* ====================================
   8. CARTES DE PIÈCES - THÈME VIOLET/ORANGE ADOUCI
   ==================================== */

.coin {
    align-items: center;
    padding: 30px;
}

/* 🎨 CARTES AVEC DÉGRADÉS SUBTILS ET EFFETS HOVER ADOUCIS */
.coin_card {
    text-align: center;
    width: 275px;
    border: 2px solid var(--primary-violet-light);
    border-radius: 15px;
    margin: 0 20px 50px 20px;
    padding: 20px;
    /* ✅ DÉGRADÉ TRÈS SUBTIL PAR DÉFAUT */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 255, 0.9) 100%);
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* 🌈 VARIANTES DE DÉGRADÉS TRÈS SUBTILS POUR DIVERSITÉ */
.coin_card:nth-child(3n+1) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(237, 233, 254, 0.3) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

.coin_card:nth-child(3n+2) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 243, 242, 0.3) 100%);
    border-color: rgba(249, 115, 22, 0.3);
}

.coin_card:nth-child(3n+3) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(236, 254, 255, 0.3) 100%);
    border-color: rgba(6, 182, 212, 0.3);
}

/* ✨ EFFETS HOVER PLUS DOUX ET ÉLÉGANTS */
.coin_card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    /* Dégradé hover plus subtil */
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    border-color: var(--primary-violet-light);
}

.coin_card:nth-child(3n+1):hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
    border-color: var(--primary-violet);
}

.coin_card:nth-child(3n+2):hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(251, 146, 60, 0.1) 100%);
    border-color: var(--primary-orange);
}

.coin_card:nth-child(3n+3):hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(103, 232, 249, 0.1) 100%);
    border-color: #06b6d4;
}

/* 🔗 AMÉLIORATION DU LIEN "VOIR LE PRODUIT" - PLUS SUBTIL */
.coin_content_link {
    display: inline-block;
    background: var(--gradient-primary);
    color: white !important;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.coin_content_link:hover {
    background: linear-gradient(45deg, var(--primary-violet-dark), var(--primary-orange-dark));
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    text-decoration: none;
    color: white !important;
}

/* 🖼️ AMÉLIORATION DES IMAGES - PLUS SUBTIL */
.coin_card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.coin_card:hover img {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 📦 EFFET DE BRILLANCE TRÈS SUBTIL */
.coin_card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.coin_card:hover::before {
    opacity: 1;
    animation: gentleShine 0.8s ease-in-out;
}

@keyframes gentleShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.coin_card_detail {
    margin-bottom: 50px;
    width: 100%;
    max-width: 1200px;
}

.coin_card_img {
    width: 500px;
    height: 500px;
    object-fit: contain;
}

.coin_card_img_slice {
    width: 150px;
    object-fit: contain;
    margin-top: 100px;
}

.coin_content {
    margin: 20px;
}

.coin_content_name {
    font-weight: 600;
    color: var(--primary-violet-dark);
}

.coin_content_price {
    color: var(--primary-orange-dark);
    font-weight: 600;
    font-size: 1.1em;
    display:flex;
    width: 100px;
}

.coin_content_cart {
    margin: 0 100px;
}

.coin_content_info, .coin_content_form {
    margin: 20px 100px;
}

.coin_content_form {
    margin: 20px 100px 0 100px;
}

.coin_content_form_quantity {
    margin: 20px 0;
}

.coin_content_form_quantity input {
    padding: 10px;
    width: 40px;
}

.coin_content_img {
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.coin_content_info_brand_img {
    max-width: 1.3em;
    max-height: 1.3em;
    vertical-align: middle;
    object-fit: scale-down;
}

.coin_content_info_name, .home_coin_title, .coin_content_info_price {
    font-size: 20px;
    font-weight: 600;
}

.coin_content_info_name, .coin_content_info_price {
    text-align: center;
}

.coin_content_info_line,
.coin_content_info_monetaryworkshop,
.coin_content_info_notename2,
.coin_content_info_reference,
.coin_content_info_title {
    word-break: break-word;
}

/* ====================================
   8.1. ANIMATIONS ET EFFETS SPÉCIAUX POUR LES CARTES
   ==================================== */

/* Animation d'apparition des cartes */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive pour les cartes */
@media (max-width: 768px) {
    .coin_card {
        width: 100%;
        max-width: 300px;
        margin: 0 auto 30px auto;
    }
    
    .coin_card:hover {
        transform: translateY(-5px) scale(1.01);
    }
}

@media (max-width: 576px) {
    .coin_card {
        margin: 0 10px 20px 10px;
        padding: 15px;
    }
    
    .coin_card img {
        height: 140px;
    }
}

/* ====================================
   8.2. PAGE CATALOGUE COIN - LAYOUT OPTIMISÉ AVEC FILTRES PLUS ÉTROITS
   ==================================== */

/* Container principal du catalogue */
.catalogue_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 1.5rem; /* Réduit le gap entre sidebar et contenu */
    display: flex;
    align-items: flex-start;
}

.catalogue-pagination-top-mobile {
    display: none !important;
}

/* ✅ SIDEBAR DES FILTRES PLUS ÉTROITE */
.catalogue_filters {
    flex: 0 0 220px; /* Réduit de 280px à 220px */
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1rem; /* Réduit le padding */
    height: fit-content;
    box-shadow: var(--shadow-medium);
    position: sticky;
    top: 20px;
}

.catalogue_filters h3 {
    color: var(--primary-violet-dark);
    font-weight: 600;
    margin-bottom: 1rem; /* Réduit la marge */
    text-align: center;
    border-bottom: 2px solid var(--primary-orange);
    padding-bottom: 0.5rem;
    font-size: 1.1rem; /* Légèrement plus petit */
}

.catalogue_filters .filter_group {
    margin-bottom: 0.75rem; /* Réduit l'espacement */
}

.catalogue_filters label {
    display: block;
    color: var(--primary-violet-dark);
    font-weight: 500;
    margin-bottom: 0.25rem; /* Réduit la marge */
    font-size: 0.9rem; /* Plus petit */
}

/* ✅ CHAMPS DE FILTRES PLUS COMPACTS */
.catalogue_filters select {
    width: 100%;
    padding: 0.5rem; /* Réduit le padding */
    border: 1px solid var(--primary-violet-light);
    border-radius: 4px; /* Plus petit */
    background: var(--backgroundColorWhite);
    font-size: 0.85rem; /* Plus petit */
    transition: all 0.3s ease;
}

.catalogue_filters input[type="text"] {
    width: 130px; /* Réduit de 150px à 130px */
    padding: 0.5rem;
    border: 1px solid var(--primary-violet-light);
    border-radius: 4px;
    background: var(--backgroundColorWhite);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.catalogue_filters input[type="number"] {
    width: 100px; /* Réduit de 120px à 100px */
    padding: 0.5rem;
    border: 1px solid var(--primary-violet-light);
    border-radius: 4px;
    background: var(--backgroundColorWhite);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.filter_btn {
    width: 100%;
    background: var(--gradient-primary);
    color: var(--textColorWhite);
    border: none;
    padding: 0.6rem 0.8rem; /* Réduit le padding */
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.75rem;
    font-size: 0.9rem; /* Plus petit */
}

.filter_btn:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #EA580C 100%); /* Gradient plus foncé et saturé */
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* ✅ CONTAINER DU CONTENU PRINCIPAL OPTIMISÉ */
.catalogue_content {
    flex: 1;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; /* Réduit de 2rem à 1.5rem pour plus d'espace */
    align-items: stretch;
    justify-content: center;
    max-width: calc(1400px - 220px - 1.5rem); /* Calcul exact de l'espace disponible */
}

/* ✅ OPTIMISATION DES CARTES POUR 3 COLONNES NETTES */
.catalogue_content .coin_card {
    width: 100% !important;
    max-width: 300px; /* Réduit de 320px à 300px */
    min-width: 0;
    margin: 0 !important;
    justify-self: center;
    box-sizing: border-box;
    
    /* Hauteur uniforme mais réduite */
    min-height: 400px; /* Réduit de 420px à 400px */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    
    /* Espacement interne optimisé */
    padding: 15px; /* Réduit de 20px à 15px */
}

/* ✅ IMAGES CÔTE À CÔTE PLUS COMPACTES */
.coin_card .coin_images_container {
    display: flex;
    gap: 6px; /* Réduit de 8px à 6px */
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 12px; /* Réduit de 15px à 12px */
    min-height: 120px; /* Réduit de 140px à 120px */
}

.coin_card .coin_images_container img {
    width: calc(50% - 3px) !important; /* Ajusté pour le gap plus petit */
    /* height: 120px !important; Réduit de 140px à 120px */
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 6px; /* Plus petit */
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 3px; /* Réduit de 4px à 3px */
}

/* ✅ CONTENU DES CARTES PLUS COMPACT */
.coin_card .coin_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 0 8px; /* Réduit de 10px à 8px */
}

.coin_card .coin_content_name {
    font-weight: 600;
    color: var(--primary-violet-dark);
    font-size: 1rem; /* Réduit de 1.1em à 1rem */
    margin-bottom: 6px; /* Réduit de 8px à 6px */
    min-height: 2.2em; /* Réduit de 2.5em à 2.2em */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.coin_card .coin_content_price {
    margin-bottom: 12px; /* Réduit de 15px à 12px */
    color: var(--primary-orange-dark);
    font-weight: 700;
    font-size: 1.1em; /* Réduit de 1.2em à 1.1em */
    min-height: 1.3em; /* Réduit de 1.5em à 1.3em */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ RESPONSIVE SPÉCIFIQUE OPTIMISÉ */
@media (min-width: 1440px) {
    /* 3 cartes parfaites en largeur pour les grands écrans */
    .catalogue_content {
        grid-template-columns: repeat(3, 1fr);
        max-width: 950px; /* 3 × 300px + 2 × 25px gap = 950px */
        gap: 1.25rem;
    }
    
    .catalogue_container {
        max-width: 1400px;
        gap: 1.25rem;
    }
    
    .catalogue_filters {
        flex: 0 0 200px; /* Encore plus étroit sur grand écran */
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    /* 3 cartes aussi pour 1200px+ */
    .catalogue_content {
        grid-template-columns: repeat(3, 1fr);
        max-width: 950px;
        gap: 1.25rem;
        margin: 0 auto;
    }
    
    .catalogue_filters {
        flex: 0 0 200px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* 2 cartes pour tablettes en mode paysage */
    .catalogue_content {
        grid-template-columns: repeat(2, 1fr);
        max-width: 620px;
        gap: 1.25rem;
    }
    
    .catalogue_filters {
        flex: 0 0 180px;
    }
}

@media (max-width: 991px) {
    /* Layout vertical pour tablettes et mobiles */
    .catalogue_container {
        flex-direction: column;
        align-items: stretch;
        padding: 0 15px;
        gap: 1rem;
    }
    
    .catalogue_filters {
        flex: none;
        width: 100%;
        margin-bottom: 1rem;
        position: static;
        padding: 1rem;
    }
    
    /* Champs de filtres responsive */
    .catalogue_filters input[type="text"],
    .catalogue_filters input[type="number"] {
        width: 100%;
    }
    
    .catalogue_content {
        width: 100%;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        max-width: none;
        justify-items: stretch;
    }
    
    .catalogue_content .coin_card {
        max-width: none;
        min-height: 380px;
    }
    
    .coin_card .coin_images_container {
        min-height: 100px;
    }
    
    .coin_card .coin_images_container img {
        height: 100px !important;
    }
}

@media (max-width: 768px) {
    .catalogue_content {
        grid-template-columns: 1fr;
        gap: 1rem;
        justify-items: center;
    }
    
    .catalogue_content .coin_card {
        width: min(100%, 350px) !important;
        min-height: 370px;
        max-width: 350px;
        margin: 0 auto !important;
        padding: 12px;
    }
    
    .coin_card .coin_content {
        margin: 12px 0 0;
        padding: 0 4px;
    }
    
    .coin_card .coin_images_container {
        min-height: 120px;
        margin-bottom: 14px;
    }
    
    .coin_card .coin_images_container img {
        height: 120px !important;
    }
}

@media (max-width: 576px) {
    .catalogue_container {
        padding: 0 8px;
    }
    
    .catalogue_filters {
        padding: 0.75rem;
    }
    
    .catalogue_content {
        gap: 0.65rem;
        justify-items: center;
    }
    
    .catalogue_content .coin_card {
        width: min(100%, 320px) !important;
        padding: 10px !important;
        min-height: 350px !important;
        max-width: 320px !important;
    }
    
    .coin_card .coin_content_name {
        font-size: 0.92rem;
        min-height: 2.4em;
        line-height: 1.2;
    }
    
    .coin_card .coin_content_price {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .coin_content_link {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .coin_card .coin_images_container {
        min-height: 110px;
        margin-bottom: 12px;
    }
    
    .coin_card .coin_images_container img {
        height: 110px !important;
    }
}

/* ====================================
   8.3. TITRE DE PAGE CATALOGUE - COHÉRENCE AVEC LE SITE
   ==================================== */

.coin_title {
    text-align: center;
    color: var(--primary-violet-dark);
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
}

.coin_title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.coin_title::after {
    content: '';
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2rem;
    opacity: 0.3;
}

@media (max-width: 768px) {
    .coin_title {
        font-size: 2rem;
        padding: 1.5rem 1rem;
    }
    
    .coin_title::after {
        top: 0.5rem;
        right: 1rem;
        font-size: 1.5rem;
    }
}

/* ====================================
   9. PANIER - THÈME VIOLET/ORANGE
   ==================================== */

.cart {
    background-color: var(--backgroundColorBeige);
    align-items: center;
    padding: 30px;
}

.cart_coin {
    background: var(--gradient-card);
    padding: 15px;
    margin: 10px;
    border-radius: 12px;
    border: 1px solid var(--primary-violet-light);
    box-shadow: var(--shadow-light);
    width: 430px;
}

.cart_empty {
    margin-bottom: 10px;
}

.cart_empty a {
    text-decoration: none;
}

.cart_coin_img {
    width: 130px;
    height: 130px;
    object-fit: cover;
}

.cart_coin_content {
    padding: 20px 20px 10px 20px;
}

.cart_coin_content_title {
    font-weight: 600;
    color: var(--primary-violet-dark);
}

.cart_coin_content_price {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-orange-dark);
}

.cart_totalPrice {
    background: var(--gradient-primary);
    color: var(--textColorWhite);
    padding: 20px 30px;
    margin: 10px 5px 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
}

.cart_totalPrice_title {
    font-weight: 500;
    font-size: 18px;
    color: var(--textColorWhite);
}

.cart_totalPrice p {
    font-weight: 400;
    color: var(--textColorWhite);
}

.cart_order {
    margin: 20px 350px 20px 20px;
}

.cart_order a {
    text-decoration: none;
    color: var(--textColorWhite);
}

@media (max-width: 1200px) {
    .coin_card_img {
        width: 400px;
        height: 400px;
    }

    .coin_card_img_slice {
        width: 200px;
        margin-top: 70px;
    }

    .coin_content_info,
    .coin_content_form {
        margin: 16px 40px;
    }

    .coin_content_form {
        margin: 16px 40px 0;
    }

    .cart_order {
        margin: 20px 0;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .coin {
        padding: 16px 10px;
    }

    .coin_card_detail {
        margin-bottom: 24px;
    }

    .coin_content_img {
        gap: 10px;
        row-gap: 14px;
        align-items: flex-start;
    }

    .coin_card_img {
        width: clamp(150px, 44vw, 320px);
        max-width: 320px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .coin_card_img_slice {
        width: clamp(118px, 40vw, 240px);
        max-width: 240px;
        margin-top: 0;
    }

    .coin_content_info,
    .coin_content_form {
        margin: 12px 8px;
    }

    .coin_content_form {
        margin: 12px 8px 0;
    }

    .coin_content_info_name,
    .coin_content_info_price {
        font-size: 1.1rem;
    }

    .coin_content_form .btn,
    .coin_content_cart_login .btn {
        width: 100%;
        max-width: 360px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .cart {
        padding: 16px 10px;
    }

    .cart_coin {
        width: 100%;
        max-width: 560px;
        margin: 8px 0;
        align-items: flex-start;
        gap: 10px;
    }

    .cart_coin_img {
        width: 88px;
        height: 88px;
        flex: 0 0 88px;
    }

    .cart_coin_content {
        padding: 4px 8px 4px 0;
        flex: 1;
        min-width: 0;
    }

    .cart_coin_content_title {
        font-size: 0.96rem;
        line-height: 1.35;
    }

    .cart_coin_content_price {
        font-size: 1rem;
    }

    .cart_remove_form {
        margin-left: 0 !important;
    }

    .cart_totalPrice {
        width: 100%;
        max-width: 560px;
        box-sizing: border-box;
        padding: 14px 16px;
        margin: 10px 0 14px;
    }

    .cart_order {
        width: 100%;
        max-width: 560px;
        margin: 8px 0 0;
    }

    .cart_order .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .coin_content_img {
        gap: 8px;
        row-gap: 10px;
    }

    .coin_card_img {
        width: calc(50% - 6px);
        max-width: 200px;
    }

    .coin_card_img_slice {
        width: calc(50% - 6px);
        max-width: 160px;
    }
}

.cart_link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cart_badge {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.75rem;
    line-height: 20px;
    color: #fff;
    background: var(--gradient-primary);
    border-radius: 999px;
    text-align: center;
    box-shadow: var(--shadow-light);
    margin-left: 6px;
}

/* ====================================
   10. COMPTE UTILISATEUR
   ==================================== */

.account {
    align-items: center;
    padding: 0 40px 30px 0;
}

.account_content_table {
    width: 100%;
    text-align: left;
}

.account_content_table_th {
    color: var(--textColorLight);
}

.account_content_table_tr {
    border-bottom: 1px solid var(--textColorLight);
    align-items: center;
}

.account_content_table_tr:last-child {
    border-bottom: none;
}

.account_content_link {
    text-decoration: none;
    color: var(--primary-violet);
    font-weight: 700;
    border: 3px solid var(--primary-violet);
    padding: 15px 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.account_content_link:hover {
    background: var(--primary-violet);
    color: var(--textColorWhite);
    transform: translateY(-1px);
}

.account_profile, .account_content {
    background: var(--backgroundColorWhite);
    border: 1px solid rgba(139, 92, 246, 0.1);
    padding: 20px;
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto 24px;
    box-shadow: var(--shadow-light);
}

.profile_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: start;
}

.profile_grid label {
    padding-right: 10px;
    color: var(--primary-violet-dark);
    font-weight: 500;
}

/* ====================================
   11. PAGE D'ERREUR
   ==================================== */

.error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 50px 50px;
    background-color: var(--backgroundColorBrown);
    height: 550px;
}

.error h1 {
    font-size: 50px;
    color: var(--admin-danger);
    margin: 40px 0 10px;
}

/* ====================================
   12. ADMINISTRATION - FORMULAIRE DE PIÈCES - THÈME VIOLET/ORANGE
   ==================================== */

.coin-form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.coin-form-title {
    color: var(--primary-violet-dark);
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
    border-bottom: 3px solid var(--primary-orange);
    padding-bottom: 1rem;
}

.coin-form fieldset {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-light);
}

.coin-form fieldset legend {
    background: var(--gradient-primary);
    color: var(--textColorWhite);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-light);
}

.coin-form .form-group,
.coin-form .mb-3 {
    margin-bottom: 1.5rem;
}

.entity-fieldset {
    background: linear-gradient(135deg, var(--backgroundColorViolet) 0%, var(--backgroundColorLight) 100%);
    border-color: var(--primary-violet-light);
}

.collection-fieldset {
    background: linear-gradient(135deg, var(--backgroundColorBeige) 0%, var(--backgroundColorLight) 100%);
    border-color: var(--primary-orange-light);
}

.standard-fieldset {
    background: var(--gradient-card);
    border-color: var(--primary-violet-light);
}

.entity-select-container {
    display: flex;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.entity-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

.entity-actions .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: auto;
}

.entity-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

.entity-actions .btn-secondary {
    background-color: var(--admin-secondary);
    border-color: var(--admin-secondary);
    color: white;
}

.entity-actions .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: white;
}

.entity-actions .btn-success {
    background-color: var(--admin-success);
    border-color: var(--admin-success);
    font-weight: 600;
}

.entity-actions .btn-success:hover {
    background-color: #0d9488;
    border-color: #0f766e;
}

.create-entity-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--primary-violet-light);
}

.create-entity-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.create-entity-link:hover {
    transform: translateY(-1px);
}

.create-help-text {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--primary-violet);
}

.form-actions {
    background: var(--gradient-card);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    text-align: center;
    border: 1px solid var(--primary-violet-light);
}

.form-actions .btn {
    min-width: 120px;
}

.field-restored {
    background-color: #fef3c7 !important;
    border: 2px solid var(--admin-warning) !important;
    transition: background-color 3s ease, border 3s ease;
}

.field-auto-selected {
    background-color: #d1fae5 !important;
    border: 2px solid var(--admin-success) !important;
    transition: background-color 3s ease, border 3s ease;
}

/* ====================================
   AMÉLIORATION DES CHAMPS DE FORMULAIRE - THÈME VIOLET/ORANGE
   ==================================== */

.coin-form .form-group label,
.coin-form .mb-3 label,
.coin-form fieldset label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-violet-dark);
}

.coin-form .form-group label:after,
.coin-form .mb-3 label:after,
.coin-form fieldset label:after {
    content: " :";
    color: var(--primary-orange);
    font-weight: bold;
}

/* Tailles adaptées des champs selon leur contenu */
.coin-form input[type="text"],
.coin-form input[type="number"],
.coin-form input[type="email"],
.coin-form input[type="url"],
.coin-form textarea,
.coin-form select {
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 0.75rem;
}

.coin-form input[type="text"]:focus,
.coin-form input[type="number"]:focus,
.coin-form input[type="email"]:focus,
.coin-form input[type="url"]:focus,
.coin-form textarea:focus,
.coin-form select:focus {
    border-color: var(--primary-violet);
    outline: 0;
    box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25);
}

/* Tailles spécifiques selon le type de champ */

/* Nom de la pièce - champ long */
.coin-form input[name*="name"],
.coin-form input[name*="title"],
.coin-form input[name*="description"] {
    width: 100%;
    max-width: 600px;
}

/* Année, quantité, prix - champs moyens */
.coin-form input[name*="year"],
.coin-form input[name*="quantity"],
.coin-form input[name*="price"],
.coin-form input[name*="value"] {
    width: 200px;
}

/* Références, codes - champs moyens */
.coin-form input[name*="reference"],
.coin-form input[name*="code"],
.coin-form input[name*="catalog"] {
    width: 250px;
}

/* Dimensions, poids - champs courts */
.coin-form input[name*="diameter"],
.coin-form input[name*="weight"],
.coin-form input[name*="thickness"] {
    width: 120px;
}

/* Zones de texte plus grandes */
.coin-form textarea {
    width: 100%;
    max-width: 600px;
    min-height: 120px;
    resize: vertical;
}

/* Sélecteurs - largeur adaptée */
.coin-form select {
    width: auto;
    min-width: 200px;
    max-width: 400px;
}

/* Collections - sélecteurs plus larges */
.collection-selector {
    width: 100% !important;
    max-width: 500px;
}

/* Espacement des groupes de champs */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* Style pour les champs obligatoires */
.coin-form label.required:before {
    content: "* ";
    color: var(--primary-orange);
    font-weight: bold;
    font-size: 1.1em;
}

/* Aide contextuelle */
.form-help {
    font-size: 0.875rem;
    color: var(--primary-violet);
    margin-top: 0.25rem;
    font-style: italic;
}

/* Style pour les champs en erreur */
.coin-form .is-invalid {
    border-color: var(--admin-danger);
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}

.coin-form .invalid-feedback {
    color: var(--admin-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Groupes de champs en ligne */
.form-row {
    display: flex;
    gap: 1rem;
    align-items: end;
}

.form-row .form-group {
    flex: 1;
}

.form-row .form-group.form-group-small {
    flex: 0 0 auto;
    width: 150px;
}

.form-row .form-group.form-group-medium {
    flex: 0 0 auto;
    width: 250px;
}

/* Style pour les boutons d'upload d'images */
.coin-form input[type="file"] {
    padding: 0.5rem;
    border: 2px dashed #ced4da;
    border-radius: 6px;
    background: #f8f9fa;
    width: 100%;
    max-width: 400px;
}

.coin-form input[type="file"]:hover {
    border-color: var(--primary-violet);
    background: var(--backgroundColorViolet);
}

/* ====================================
   13. GESTION DES COLLECTIONS - THÈME VIOLET/ORANGE
   ==================================== */

.collection-quick-management {
    background: linear-gradient(135deg, var(--backgroundColorViolet) 0%, var(--backgroundColorLight) 100%);
    border: 2px solid var(--primary-violet);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-light);
}

.collection-quick-management h5 {
    color: var(--primary-violet-dark);
    margin-bottom: 1rem;
    font-weight: 600;
}

.collection-current {
    background: linear-gradient(135deg, var(--backgroundColorBeige) 0%, var(--backgroundColorLight) 100%);
    border: 1px solid var(--primary-orange-light);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
}

.collection-current h5 {
    color: var(--primary-orange-dark);
    margin-bottom: 1rem;
    font-weight: 600;
}

.collection-management {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--gradient-card);
    border-radius: 8px;
    border-left: 4px solid var(--primary-violet);
    box-shadow: var(--shadow-light);
}

.collection-item {
    background: var(--backgroundColorWhite);
    border: 1px solid var(--primary-violet-light);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.collection-item:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-orange);
    transform: translateY(-1px);
}

.collection-item-content {
    flex: 1;
}

.collection-item-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.collection-item-actions .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

/* Émetteurs - Affichage hiérarchique */
.issuer-display {
    line-height: 1.4;
}

.issuer-country {
    color: #1976d2 !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    display: block !important;
}

.issuer-states {
    color: #666;
    font-size: 0.9em;
    margin-top: 0.2em;
    display: block;
}

.issuer-name {
    color: #2e7d32;
    font-weight: 500;
    font-size: 0.95em;
    margin-top: 0.2em;
    display: block;
}

/* Badge pièces associées */
.coins-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    display: inline-block;
}

.coins-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coins-detail {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--textColorLight);
}

/* Debug (temporaire) */
.debug-box {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 0.5rem;
    margin: 0.5rem 0;
    font-size: 0.8rem;
    border-radius: 4px;
}

/* ====================================
   13.1. GESTION DES COMPOSITIONS - THÈME VIOLET/ORANGE
   ==================================== */

.composition-quick-management {
    background: linear-gradient(135deg, rgba(168, 237, 234, 0.6) 0%, rgba(254, 214, 227, 0.6) 100%);
    border: 2px solid #a8edea;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-light);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.composition-quick-management h5 {
    color: #0891b2;
    margin-bottom: 1rem;
    font-weight: 600;
}

.composition-current {
    background: linear-gradient(135deg, rgba(168, 237, 234, 0.4) 0%, rgba(250, 245, 255, 0.4) 100%);
    border: 1px solid #a8edea;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.composition-current h5 {
    color: #0e7490;
    margin-bottom: 1rem;
    font-weight: 600;
}

.composition-management {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(168, 237, 234, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 8px;
    border-left: 4px solid #06b6d4;
    box-shadow: var(--shadow-light);
}

.composition-item {
    background: var(--backgroundColorWhite);
    border: 1px solid #a8edea;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.composition-item:hover {
    box-shadow: var(--shadow-medium);
    border-color: #06b6d4;
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(168, 237, 234, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
}

/* ====================================
   13.2. GESTION DES ÉMETTEURS - THÈME VIOLET/ORANGE
   ==================================== */

.issuer-quick-management {
    background: linear-gradient(135deg, rgba(255, 236, 210, 0.6) 0%, rgba(252, 182, 159, 0.6) 100%);
    border: 2px solid #ffecd2;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-light);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.issuer-quick-management h5 {
    color: #ea580c;
    margin-bottom: 1rem;
    font-weight: 600;
}

.issuer-current {
    background: linear-gradient(135deg, rgba(255, 236, 210, 0.4) 0%, rgba(250, 245, 255, 0.4) 100%);
    border: 1px solid #ffecd2;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.issuer-current h5 {
    color: #c2410c;
    margin-bottom: 1rem;
    font-weight: 600;
}

.issuer-management {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 236, 210, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 8px;
    border-left: 4px solid #f97316;
    box-shadow: var(--shadow-light);
}

.issuer-item {
    background: var(--backgroundColorWhite);
    border: 1px solid #ffecd2;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.issuer-item:hover {
    box-shadow: var(--shadow-medium);
    border-color: #f97316;
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(255, 236, 210, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
}

/* ====================================
   13.3. GESTION DES CONSERVATIONS - THÈME VIOLET/ORANGE
   ==================================== */

.conservation-quick-management {
    background: linear-gradient(135deg, rgba(210, 153, 194, 0.6) 0%, rgba(254, 249, 215, 0.6) 100%);
    border: 2px solid #d299c2;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-light);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.conservation-quick-management h5 {
    color: #a21caf;
    margin-bottom: 1rem;
    font-weight: 600;
}

.conservation-current {
    background: linear-gradient(135deg, rgba(210, 153, 194, 0.4) 0%, rgba(250, 245, 255, 0.4) 100%);
    border: 1px solid #d299c2;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.conservation-current h5 {
    color: #86198f;
    margin-bottom: 1rem;
    font-weight: 600;
}

.conservation-management {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(210, 153, 194, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 8px;
    border-left: 4px solid #c026d3;
    box-shadow: var(--shadow-light);
}

.conservation-item {
    background: var(--backgroundColorWhite);
    border: 1px solid #d299c2;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.conservation-item:hover {
    box-shadow: var(--shadow-medium);
    border-color: #c026d3;
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(210, 153, 194, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
}

/* ====================================
   14. RESPONSIVE DESIGN
   ==================================== */

@media (max-width: 768px) {
    html, body {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .main_container {
        width: 100%;
        padding: 10px;
    }
    
    .header_container {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }
    
    .header_container_ul {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Formulaires de pièces */
    .coin-form-container {
        padding: 1rem;
    }
    
    .entity-select-container {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .entity-actions {
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .form-actions .btn {
        display: block;
        width: 100%;
        margin: 0.25rem 0;
        min-width: auto;
    }
    
    .coin-form fieldset {
        padding: 1rem;
    }
    
    /* Collections responsive */
    .collection-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .collection-item-actions {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }
    
    .collection-item-actions .btn {
        flex: 1;
        min-width: 120px;
    }
    
    .collection-quick-management {
        padding: 1rem;
    }
    
    .collection-current {
        padding: 1rem;
    }
    
    .coin-form input[type="text"],
    .coin-form input[type="number"],
    .coin-form input[type="email"],
    .coin-form input[type="url"],
    .coin-form textarea,
    .coin-form select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .entity-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
    }
    
    .entity-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ====================================
   AJUSTEMENTS GRADIENTS ADOUCIS 
   ==================================== */

/* Page d'accueil - Header avec gradient plus doux */
.home_header {
    background: var(--gradient-primary-light); /* Gradient plus transparent */
    margin: 30px;
    border: 2px solid var(--primary-violet);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    color: var(--textColorBlack); /* Texte noir pour meilleur contraste */
    -webkit-backdrop-filter: blur(10px); /* Effet de flou subtil - Safari */
    backdrop-filter: blur(10px); /* Effet de flou subtil */
}

.home_header_content_title {
    font-size: 48px;
    font-weight: 700; /* Plus gras pour contraste */
    color: var(--textColorBlack);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Ombre blanche subtile */
}

.home_header_content_title span {
    font-weight: 800;
    color: var(--primary-violet-dark); /* Violet foncé au lieu d'orange clair */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
}

.home_header_content p {
    margin: 20px 60px;
    line-height: 1.5;
    text-align: center;
    color: var(--textColorBlack);
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}

/* ====================================
   15. UNIFORMISATION STYLE ADMIN - THÈME VIOLET/ORANGE
   ==================================== */

/* Pages d'administration - Style uniforme */
.admin-container {
    background: var(--gradient-main);
    min-height: 100vh;
    padding: 2rem;
}

.admin-header {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-medium);
    text-align: center;
}

.admin-header h1 {
    color: var(--primary-violet-dark);
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--primary-orange);
    padding-bottom: 1rem;
    display: inline-block;
}

.admin-header p {
    color: var(--textColorLight);
    font-size: 1.1rem;
    margin: 0;
}

/* Tables d'administration uniformes */
.admin-table-container {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.admin-table th {
    background: var(--gradient-primary);
    color: var(--textColorWhite);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.admin-table th:first-child {
    border-top-left-radius: 8px;
}

.admin-table th:last-child {
    border-top-right-radius: 8px;
}

.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--primary-violet-light);
    vertical-align: middle;
}

.admin-table tr:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(249, 115, 22, 0.05) 100%);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

/* Actions uniformes pour l'admin */
.admin-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    margin: 1.5rem 0;
}

.admin-actions .btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: auto;
    margin: 0;
}

/* Breadcrumb admin uniforme */
.admin-breadcrumb {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid var(--primary-violet-light);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.admin-breadcrumb a {
    color: var(--primary-violet-dark);
    text-decoration: none;
    font-weight: 500;
}

.admin-breadcrumb a:hover {
    color: var(--primary-orange);
    text-decoration: underline;
}

.admin-breadcrumb span {
    color: var(--textColorLight);
    margin: 0 0.5rem;
}

/* Messages flash admin uniformes */
.admin-flash-container {
    margin-bottom: 2rem;
}

.admin-flash-container .alert {
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    border: none;
    font-weight: 500;
}

/* Pagination admin uniforme */
.admin-pagination {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 2rem;
    text-align: center;
}

.admin-pagination .pagination {
    margin: 0;
    justify-content: center;
}

.admin-pagination .page-link {
    color: var(--primary-violet-dark);
    border-color: var(--primary-violet-light);
    font-weight: 500;
}

.admin-pagination .page-link:hover {
    background-color: var(--primary-violet-light);
    border-color: var(--primary-violet);
    color: var(--textColorWhite);
}

.admin-pagination .page-item.active .page-link {
    background-color: var(--primary-violet);
    border-color: var(--primary-violet);
}

/* Cartes de statistiques admin */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.admin-stat-card {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-medium);
    text-align: center;
    transition: all 0.3s ease;
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    border-color: var(--primary-orange);
}

.admin-stat-card h3 {
    color: var(--primary-violet-dark);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.admin-stat-card p {
    color: var(--textColorLight);
    margin: 0;
    font-weight: 500;
}

/* Formulaires admin uniformes */
.admin-form-container {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-medium);
}

.admin-form-title {
    color: var(--primary-violet-dark);
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
    border-bottom: 3px solid var(--primary-orange);
    padding-bottom: 1rem;
}

/* Sidebar admin uniforme */
.admin-sidebar {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
    height: fit-content;
}

.admin-sidebar h4 {
    color: var(--primary-violet-dark);
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary-orange-light);
    padding-bottom: 0.5rem;
}

.admin-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-sidebar li {
    margin-bottom: 0.5rem;
}

.admin-sidebar a {
    color: var(--primary-violet-dark);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem;
    display: block;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.admin-sidebar a:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    color: var(--primary-orange);
    text-decoration: none;
}

.admin-sidebar a.active {
    background: var(--gradient-primary);
    color: var(--textColorWhite);
    font-weight: 600;
}

/* ====================================
   15.1. RESPONSIVE POUR LES NOUVELLES SECTIONS ADMIN
   ==================================== */

@media (max-width: 768px) {
    /* Gestion responsive des nouvelles sections */
    .composition-quick-management,
    .issuer-quick-management,
    .conservation-quick-management {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .composition-item,
    .issuer-item,
    .conservation-item {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .composition-item-actions,
    .issuer-item-actions,
    .conservation-item-actions {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }
    
    /* Admin responsive */
    .admin-container {
        padding: 1rem;
    }
    
    .admin-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .admin-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .admin-table-container {
        padding: 1rem;
    }
    
    .admin-table {
        font-size: 0.875rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .admin-header {
        padding: 1rem;
    }
    
    .admin-header h1 {
        font-size: 1.5rem;
    }
    
    .admin-sidebar {
        padding: 1rem;
    }
}

/* ====================================
   PAGE D'ACCUEIL - ADAPTATION DES CARTES CORRIGÉE
   ==================================== */

.home_coin {
    justify-content: center;
    gap: 30px;
    padding-bottom: 50px;
    align-items: center;
    padding: 30px;
}

.home_coin .jc-sb {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    justify-content: center;
    align-items: stretch; /* Force toutes les cartes à la même hauteur */
    width: 100%;
    max-width: 1200px; /* Limite la largeur totale */
    margin: 0 auto; /* Centre le grid */
}

.home_coin .coin_card {
    width: 100% !important;
    max-width: 320px;
    margin: 0 !important;
    justify-self: center;
    min-height: 420px; /* Même hauteur que les cartes du catalogue */
}

/* Force l'affichage en grille même si la classe flex est présente */
.home_coin .d-f.jc-sb.fw-w {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    justify-content: center !important;
    align-items: stretch !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
}

@media (max-width: 1200px) {
    .home_coin .jc-sb {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 700px;
    }
}

@media (max-width: 768px) {
    .home_coin .jc-sb {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 350px;
    }
}

@media (max-width: 576px) {
    .home_coin .jc-sb {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 320px;
    }
}

/* ====================================
   16. TABLEAU DE BORD ADMIN - DESIGN MODERNE AVEC DÉGRADÉS
   ==================================== */

.admin-dashboard {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.03) 0%, rgba(249, 115, 22, 0.03) 100%);
    min-height: 100vh;
    padding: 2rem;
}

/* ✅ HEADER DU DASHBOARD */
.dashboard-header {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 16px;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    text-align: center;
    box-shadow: var(--shadow-strong);
    position: relative;
    overflow: hidden;
}

.dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.dashboard-title {
    color: var(--primary-violet-dark);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.dashboard-icon {
    font-size: 3rem;
    animation: pulse 2s infinite;
}

.dashboard-badge {
    background: var(--gradient-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
}

.dashboard-subtitle {
    color: var(--textColorLight);
    font-size: 1.2rem;
    margin: 0;
    font-style: italic;
}

/* ✅ MESSAGES FLASH STYLISÉS */
.flash {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-light);
}

.flash-success {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.flash-error {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.flash-info {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.flash-icon {
    font-size: 1.2rem;
}

/* ✅ CARTES DE STATISTIQUES */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1rem 1rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stat-coins::before { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.stat-users::before { background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%); }
.stat-value::before { background: linear-gradient(90deg, #10b981 0%, #047857 100%); }
.stat-union-latine::before { background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-card.stat-sold::before {background: linear-gradient(90deg, #ffb6b6 0%, #dc2626 100%);}
.stat-card.stat-followed::before {background: linear-gradient(90deg, #ffe066 0%, #f59e0b 100%);}
.stat-card.stat-published-value::before {
    background: linear-gradient(90deg, #34d399 0%, #059669 100%);
}
.stat-card.stat-unpublished-unsold-value::before {
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}
.stat-card.stat-unpublished-sold-value::before {
    background: linear-gradient(90deg, #fca5a5 0%, #dc2626 100%);
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.stat-content h3 {
    color: var(--primary-violet-dark);
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.stat-number {
    color: var(--primary-violet-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.25rem 0;
}

.stat-label {
    color: var(--textColorLight);
    font-size: 0.85rem;
}

/* ✅ ACTIONS PRINCIPALES */
.dashboard-actions {
    margin-bottom: 3rem;
}

.section-title {
    color: var(--primary-violet-dark);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--primary-orange-light);
    padding-bottom: 0.5rem;
}

.admin-dashboard .section-icon {
    font-size: 1.5rem;
}

.admin-dashboard .action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.admin-dashboard .action-card {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
}

.admin-dashboard .action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
    text-decoration: none;
    color: inherit;
}

.admin-dashboard .action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.admin-dashboard .action-coins::before { background: var(--gradient-primary); }
.admin-dashboard .action-users::before { background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%); }
.admin-dashboard .action-add::before { background: linear-gradient(90deg, #10b981 0%, #047857 100%); }
.admin-dashboard .action-export::before { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.admin-dashboard .action-napoleonienne-country::before,
.admin-dashboard .action-napoleonienne-subpart::before { background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%); }
.admin-dashboard .action-napoleonide-country::before,
.admin-dashboard .action-napoleonide-subpart::before { background: linear-gradient(90deg, #facc15 0%, #f59e42 100%); }
.admin-dashboard .action-union-latine::before { background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);}

.admin-dashboard .action-icon {
    font-size: 2.5rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.admin-dashboard .action-content {
    flex: 1;
}

.admin-dashboard .action-content h3 {
    color: var(--primary-violet-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.admin-dashboard .action-content p {
    color: var(--textColorLight);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.admin-dashboard .action-badge {
    background: var(--primary-violet-light);
    color: #4b094b;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-dashboard .action-arrow {
    font-size: 1.5rem;
    color: var(--primary-violet);
    transition: all 0.3s ease;
}

.admin-dashboard .action-card:hover .action-arrow {
    transform: translateX(5px);
}

/* Evite les collisions avec EasyAdmin qui utilise aussi .action-icon */
.ea .action-icon {
    font-size: 1rem !important;
    opacity: 1 !important;
    flex-shrink: initial !important;
}

/* Hard reset for EasyAdmin action controls in datagrid to avoid global CSS collisions */
.ea .datagrid td.actions a:not(.dropdown-item) {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.ea .datagrid td.actions a:not(.dropdown-item) .action-icon {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    font-size: 1rem !important;
}

.ea .datagrid .dropdown-actions .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 32px !important;
    max-width: none !important;
    min-height: 28px !important;
    padding: 1px 5px !important;
}

.ea .datagrid .dropdown-actions .dropdown-toggle .icon,
.ea .datagrid .dropdown-actions .dropdown-toggle .icon svg {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* ✅ ACTIVITÉ RÉCENTE */
.dashboard-activity {
    margin-bottom: 3rem;
}

.activity-timeline {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--primary-violet-light);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-add { background: #10b981; }
.activity-edit { background: #f59e0b; }
.activity-user { background: #3b82f6; }

.activity-content p {
    margin: 0;
    color: var(--primary-violet-dark);
    font-weight: 500;
}

.activity-time {
    color: var(--textColorLight);
    font-size: 0.85rem;
}

/* ✅ RACCOURCIS RAPIDES */
.dashboard-shortcuts {
    margin-bottom: 2rem;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.shortcut-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
}

.shortcut-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95) 0%, rgba(234, 88, 12, 0.95) 100%);
}

.shortcut-icon {
    font-size: 1.2rem;
}

/* ✅ STATISTIQUES DÉTAILLÉES */
.dashboard-detailed-stats {
    margin-bottom: 3rem;
}

.detailed-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.detailed-stat-card {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
}

.detailed-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

.detailed-stat-card h3 {
    color: var(--primary-violet-dark);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--primary-orange-light);
    padding-bottom: 0.75rem;
}

.stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.stat-item:hover {
    background: rgba(139, 92, 246, 0.1);
    transform: translateX(3px);
}

.stat-name {
    color: var(--primary-violet-dark);
    font-weight: 500;
    font-size: 0.95rem;
}

.stat-value {
    color: var(--primary-orange);
    font-weight: 700;
    font-size: 1rem;
}

/* ✅ ANIMATIONS */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ✅ RESPONSIVE */
@media (max-width: 768px) {
    .admin-dashboard {
        padding: 1rem;
    }
    
    .dashboard-header {
        padding: 2rem 1rem;
    }
    
    .dashboard-title {
        font-size: 2rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .action-grid {
        grid-template-columns: 1fr;
    }
    
    .shortcuts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dashboard-title {
        font-size: 1.5rem;
    }
    
    .shortcuts-grid {
        grid-template-columns: 1fr;
    }
    
    .action-card {
        flex-direction: column;
        text-align: center;
    }
    
    .action-arrow {
        transform: rotate(90deg);
    }
}

/* ====================================
   17. PAGE EXPORT - DESIGN MODERNE
   ==================================== */

.export-section {
    margin-bottom: 3rem;
}

.export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.export-card {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.export-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
}

.export-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.export-card:nth-child(1)::before {
    background: linear-gradient(90deg, #10b981 0%, #047857 100%);
}

.export-card:nth-child(2)::before {
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
}

.export-card:nth-child(3)::before {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.export-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.export-content h3 {
    color: var(--primary-violet-dark);
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.export-content p {
    color: var(--textColorLight);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.export-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
}

.export-features li {
    color: var(--text-color);
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.9rem;
}

.export-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.export-btn:hover {
    transform: scale(1.05);
    text-decoration: none;
    color: white !important;
}

.export-csv {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.export-csv:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.export-json {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.export-json:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.export-pdf {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.export-pdf:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.admin-dashboard .action-back {
    background: var(--gradient-card);
    border: 1px solid var(--primary-violet-light);
}

.admin-dashboard .action-back::before {
    background: var(--gradient-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .export-grid {
        grid-template-columns: 1fr;
    }
    
    .export-card {
        padding: 1.5rem;
    }
}
/* ====================================
   18. RAPPORT PDF - STYLES D'IMPRESSION
   ==================================== */

/* Container principal du rapport */
.rapport-container {
    max-width: 210mm;
    margin: 0 auto;
    padding: 20mm;
    background: white;
    min-height: 297mm;
    color: #333;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

/* ✅ HEADER DU RAPPORT */
.rapport-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 3px solid var(--primary-violet);
    padding-bottom: 20px;
}

.rapport-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-violet);
    margin-bottom: 10px;
}

.rapport-subtitle {
    font-size: 16px;
    color: var(--textColorLight);
    margin-bottom: 5px;
}

.rapport-date {
    font-size: 12px;
    color: #999;
}

/* ✅ SECTIONS */
.rapport-section {
    margin-bottom: 30px;
    page-break-inside: avoid;
}

.rapport-section .section-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-violet);
    margin-bottom: 15px;
    border-left: 4px solid var(--primary-orange);
    padding-left: 15px;
}

/* ✅ STATISTIQUES PRINCIPALES */
.rapport-section .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.rapport-section .stat-box {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rapport-section .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-violet);
    margin-bottom: 5px;
}

.rapport-section .stat-label {
    font-size: 12px;
    color: var(--textColorLight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ✅ TABLEAUX DE DONNÉES */
.rapport-section .data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rapport-section .data-table th {
    background: var(--gradient-primary);
    color: white;
    padding: 12px 8px;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}

.rapport-section .data-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
}

.rapport-section .data-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.rapport-section .data-table tbody tr:hover {
    background: #f3f4f6;
}

.rapport-section .no-data {
    text-align: center;
    font-style: italic;
    color: var(--textColorLight);
    padding: 20px !important;
}

/* ✅ GRAPHIQUES ET CHARTS */
.rapport-section .chart-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.rapport-section .chart-box {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.rapport-section .chart-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-violet-dark);
    margin-bottom: 10px;
    text-align: center;
}

.rapport-section .chart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.rapport-section .chart-item:last-child {
    border-bottom: none;
}

.rapport-section .chart-label {
    font-size: 12px;
    color: var(--text-color);
}

.rapport-section .chart-value {
    font-size: 12px;
    font-weight: bold;
    color: var(--primary-violet);
}

.rapport-section .chart-bar {
    height: 8px;
    background: var(--gradient-primary);
    border-radius: 4px;
    margin: 5px 0;
    min-width: 5px; /* Assure une barre visible même pour 0% */
    transition: all 0.3s ease;
}

/* ✅ FOOTER */
.rapport-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
    text-align: center;
    color: var(--textColorLight);
    font-size: 12px;
}

/* ✅ BOUTONS D'ACTION */
.rapport-actions {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 10px;
}

.rapport-btn {
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 14px;
}

.rapport-btn-print {
    background: var(--primary-violet);
    color: white;
}

.rapport-btn-print:hover {
    background: var(--primary-violet-dark);
    transform: translateY(-2px);
}

.rapport-btn-close {
    background: #6b7280;
    color: white;
}

.rapport-btn-close:hover {
    background: #4b5563;
    transform: translateY(-2px);
}

/* ✅ STYLES D'IMPRESSION */
@media print {
    body {
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    
    .rapport-container {
        margin: 0;
        padding: 15mm;
        box-shadow: none;
        max-width: none;
    }
    
    .page-break {
        page-break-before: always;
    }
    
    .no-print {
        display: none !important;
    }
    
    .rapport-section .chart-bar {
        background: #8b5cf6 !important; /* Couleur solide pour l'impression */
    }
    
    .rapport-section .data-table th {
        background: #8b5cf6 !important;
        color: white !important;
    }
    
    /* Force les couleurs pour l'impression */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ✅ RESPONSIVE */
@media (max-width: 768px) {
    .rapport-container {
        padding: 15px;
        font-size: 12px;
    }
    
    .rapport-section .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .rapport-section .chart-container {
        grid-template-columns: 1fr;
    }
    
    .rapport-section .data-table {
        font-size: 11px;
    }
    
    .rapport-section .data-table th,
    .rapport-section .data-table td {
        padding: 8px 4px;
    }
    
    .rapport-actions {
        position: static;
        justify-content: center;
        margin: 20px 0;
    }
    
    .rapport-title {
        font-size: 20px;
    }
    
    .rapport-subtitle {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .rapport-section .data-table {
        font-size: 10px;
    }
    
    .rapport-section .data-table th,
    .rapport-section .data-table td {
        padding: 6px 2px;
    }
    
    .rapport-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .rapport-btn {
        width: 200px;
        margin-bottom: 10px;
    }
}

/* ✅ ANIMATION COIN */
#coin-spin,
.page-loader-spin {
    animation: spin 3s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-logo {
    width: 320px !important;
    height: 320px !important;
    object-fit: contain;
}

@media (max-width: 576px) {
    .page-loader-logo {
        width: 240px !important;
        height: 240px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader-spin {
        animation: none !important;
    }
}

/* ========================================= */
/* GESTION DES IMAGES DANS LE FORMULAIRE */
/* ========================================= */

.current-image-preview {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--gradient-primary-subtle);
    border-radius: 8px;
}

.image-preview-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.image-preview-thumbnail {
    max-width: 150px;
    height: auto;
    border-radius: 4px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.image-preview-details {
    flex: 1;
    min-width: 250px;
}

.image-preview-filename {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--primary-violet-dark);
}

.image-delete-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 4px;
    border: 2px solid var(--admin-danger);
    transition: all 0.2s ease;
}

.image-delete-label:hover {
    background: #fff5f5;
    border-color: #dc3545;
}

.image-delete-label.checked {
    background: #f8d7da !important;
    border-color: #dc3545 !important;
}

.image-delete-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.image-delete-text {
    color: var(--admin-danger);
    font-weight: 600;
}

.image-upload-hint {
    display: block;
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--text-muted);
}

.pagination {
    margin: 2em 0;
    text-align: center;
}
.pagination .btn {
    margin: 0 5px;
}
.pagination span {
    margin: 0 5px;
}

.pagination-compact {
    align-items: center;
}

.pagination-compact .pagination-btn {
    line-height: 1.2;
}

@media (max-width: 576px) {
    .pagination-compact {
        gap: 0.35rem !important;
    }

    .pagination-compact .pagination-btn {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.86rem !important;
    }
}

/* Pour le tableau des compositions */
.compositions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2em;
    background: var(--gradient-card);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
}

.compositions-table th {
    background: var(--gradient-primary);
    color: var(--textColorWhite);
    padding: 1em;
    text-align: left;
    font-weight: 600;
    border: none;
}

.compositions-table td {
    padding: 0.75em 1em;
    border-bottom: 1px solid var(--primary-violet-light);
    vertical-align: middle;
}

.compositions-table tr:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(249, 115, 22, 0.05) 100%);
}

.compositions-table tr:last-child td {
    border-bottom: none;
}

/* Pour le métal */
.composition-metal {
    font-weight: 600;
    color: var(--primary-violet-dark);
    padding: 0.2em 0.6em;
    border-radius: 0.2em;
    background: var(--backgroundColorViolet);
}

/* Pour les actions */
.composition-actions {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

/* ✅ ZOOM IMAGE COIN */
.coin-zoom-frame {
    display: contents;
}

.zoomable {
    cursor: zoom-in;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    display: block;
    touch-action: manipulation;
}

.zoomable:hover {
    transform: scale(1.5);
    z-index: 130;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    border: 2px solid #888;
    border-radius: 180px;
}

.coin-zoom-trigger {
    display: none !important;
}

.coin-magnifier-lens {
    position: fixed;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(0, 0, 0, 0.25);
    background-repeat: no-repeat;
    background-color: #111;
    pointer-events: none;
    z-index: 110000;
    display: none;
}

.coin-magnifier-lens.is-visible {
    display: block;
}

@media (hover: none), (pointer: coarse) {
    .coin-magnifier-lens {
        display: none !important;
    }

    .zoomable:hover {
        transform: none;
        box-shadow: none;
        border: 0;
    }

    .zoomable:active {
        transform: scale(1.06);
        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        border: 0;
    }
}

.coin-image-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    z-index: 100000;
    padding: 10px;
}

.coin-image-lightbox.is-open {
    display: flex;
}

.coin-image-lightbox-img {
    width: min(92vw, 1400px);
    max-width: 1400px;
    max-height: 92vh;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.coin-image-lightbox-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* ✅ SOUS MENU ADMIN*/
.header_center {
    position: relative;
    z-index: 95;
}
.admin-dropdown {
    position: relative;
    display: inline-block;
}
.admin-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 1000;
}
.admin-dropdown:hover .admin-dropdown-content,
.admin-dropdown:focus-within .admin-dropdown-content {
    display: block;
}
.admin-dropdown-content a {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}
.admin-dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* ✅ PAGE UNION LATINE */
.union-latine-page {
    width: min(100%, 1200px);
    margin: 0 auto;
    max-width: 100%;
}

.union-latine-page h1,
.union-latine-page h2,
.union-latine-page h3 {
    padding: 0 clamp(0.75rem, 4vw, 4rem);
    text-align: center;
    margin-bottom: 1em;
    overflow-wrap: anywhere;
}
.union-latine-page h1 {
    font-size: 2em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: var(--primary-violet-dark);
}
.union-latine-page h2 {
    font-size: 1.4em;
    margin-top: 2em;
    color: var(--primary-orange-dark);
    border-bottom: 2px solid var(--primary-violet-light);
    padding-bottom: 0.2em;
}
.union-latine-page h3 {
    font-size: 1.15em;
    margin-top: 1.5em;
    color: var(--primary-violet);
}
.union-latine-page ul {
    list-style: none;
    padding: 0 clamp(0.75rem, 4vw, 4rem);
    max-width: 100%;
}
.union-latine-page p,
.union-latine-page li,
.union-latine-page em,
.union-latine-page strong {
    overflow-wrap: anywhere;
}
.union-latine-page ul > li {
    background: #fff;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(44,62,80,0.04);
    border-left: 4px solid #3949ab;
    font-size: 1em;
    max-width: 100%;
    box-sizing: border-box;
}
.union-latine-page ul > li em {
    color: #607d8b;
    font-size: 0.97em;
}
.union-latine-page ul > li strong {
    color: #222;
}
.union-latine-page .uml-presentation {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 24px 20px;
    margin: 0 clamp(0.5rem, 3vw, 1rem) 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    font-size: 1.08em;
    box-sizing: border-box;
    max-width: 100%;
}
.union-latine-page .uml-presentation h2 {
    margin-top: 1.5em;
    color: #2c3e50;
    font-size: 1.2em;
}
.union-latine-page .uml-presentation ul, 
.union-latine-page .uml-presentation ol {
    margin-left: 1.5em;
}
.union-latine-page pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.95rem;
}
.union-latine-page .union-latine-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    background: var(--backgroundColorViolet);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.union-latine-page .union-latine-table th, 
.union-latine-page .union-latine-table td {
    border: 1px solid #e0e0e0;
    padding: 14px 10px;
    text-align: left;
    vertical-align: top;
}
.union-latine-page .union-latine-table th {
    background: var(--primary-violet-dark);
    color: var(--textColorWhite);
    font-weight: 600;
}
.union-latine-page .union-latine-table td {
    background: var(--backgroundColorWhite);
}
.union-latine-page .union-latine-table td div {
    margin-bottom: 8px;
}
.union-latine-page .union-latine-table a {
    color: #1976d2;
    text-decoration: none;
}
.union-latine-page .union-latine-table a:hover {
    text-decoration: underline;
}
@media (max-width: 700px) {
    .union-latine-page .uml-presentation, 
    .union-latine-page ul > li {
        font-size: 0.98em;
        padding: 10px 8px;
    }
    .union-latine-page h1 { font-size: 1.3em; }
    .union-latine-page h2 { font-size: 1.1em; }
}

@media (max-width: 992px) {
    .union-latine-page h1,
    .union-latine-page h2,
    .union-latine-page h3,
    .union-latine-page ul {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .union-latine-page .uml-presentation {
        padding: 16px 12px;
        margin-left: 0;
        margin-right: 0;
    }

    .union-latine-page .union-latine-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .union-latine-page .union-latine-table th,
    .union-latine-page .union-latine-table td {
        white-space: normal;
        min-width: 140px;
    }

    .union-latine-country-page ul > li {
        width: 100%;
    }

    .country-list-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .country-list-3col {
        grid-template-columns: 1fr;
    }
}

/* ✅ PAGE UNION LATINE COUNTRY */
.union-latine-country-page h1 {
    text-align: center;
    margin: 1em;
    color: var(--primary-violet-dark);
}
.union-latine-country-page h2 {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;
    color: var(--primary-orange-dark);
    border-bottom: 2px solid var(--primary-violet-light);
    padding-bottom: 0.2em;
}
.union-latine-country-page p {
    font-size: 1.08em;
    margin: 0.5em 0 0.5em 0;
}
.union-latine-country-page ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    justify-content: center;
}
.union-latine-country-page ul > li {
    width: 400px;
    min-height: 56px;
    background: #fff;
    margin-bottom: 0;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(44,62,80,0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.union-latine-country-page a.back-link {
    display: block;
    margin: 2em auto 0 auto;
    text-align: center;
    color: var(--primary-violet-dark);
    text-decoration: none;
    font-weight: 500;
}
.union-latine-country-page a.back-link:hover {
    text-decoration: underline;
}
.union-latine-country-page .country-infos {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 1.5em auto 2em auto;
    box-shadow: 0 2px 8px rgba(44,62,80,0.06);
    font-size: 1.08em;
}
.union-latine-country-page .country-infos p {
    margin: 0.5em 0;
}
.union-latine-country-page .country-description {
    margin-top: 1em;
    color: #444;
}

/* Grille 3 colonnes pour la liste des pays */
.country-list-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7em 2em;
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
}
.country-list-3col li {
    background: #f0f4fa;
    border-radius: 4px;
    padding: 0.7em 1.2em;
    font-size: 1.05em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    text-align: left;
}

/* Correction carte Leaflet derrière le header */
.header_center_link.admin-dropdown {
    position: relative;
    z-index: 99999;
}
#worldMap {
    z-index: 1;
}

/* ====================================
   99. RESPONSIVE GLOBAL - LOT COMPLET
   ==================================== */

@media (max-width: 992px) {
    .legal-page {
        margin: 1rem auto !important;
        padding: 1.25rem !important;
        line-height: 1.65 !important;
    }

    .legal-page h1 {
        font-size: 2rem !important;
        line-height: 1.25;
    }

    .legal-page h2 {
        font-size: 1.4rem !important;
        line-height: 1.3;
    }

    .legal-page h3 {
        font-size: 1.15rem !important;
        line-height: 1.35;
    }

    .legal-page h4 {
        font-size: 1.02rem !important;
        line-height: 1.35;
    }

    .legal-page ul {
        margin-left: 1rem !important;
        padding-left: 0.8rem !important;
    }

    .legal-page [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    .legal-page [style*="padding: 2em"],
    .legal-page [style*="padding: 1.8em"],
    .legal-page [style*="padding: 1.5em"] {
        padding: 1rem !important;
    }
}

@media (max-width: 576px) {
    .legal-page {
        margin: 0.6rem auto !important;
        padding: 0.9rem !important;
    }

    .legal-page h1 {
        font-size: 1.65rem !important;
    }

    .legal-page h2 {
        font-size: 1.2rem !important;
    }

    .legal-page h3 {
        font-size: 1.05rem !important;
    }
}

@media (max-width: 992px) {
    .table,
    .account_content_table,
    .compositions-table,
    .union-latine-table,
    .legal-page table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
    }

    .table th,
    .table td,
    .account_content_table th,
    .account_content_table td,
    .compositions-table th,
    .compositions-table td,
    .union-latine-table th,
    .union-latine-table td,
    .legal-page table th,
    .legal-page table td {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .flash-messages {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .alert {
        font-size: 0.93rem;
        padding: 10px 12px;
    }

    .account {
        padding: 0 10px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .account_profile,
    .account_content,
    .account_security {
        width: 100%;
        box-sizing: border-box;
    }

    .profile_grid {
        grid-template-columns: 1fr;
    }

    .catalogue-search-form {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .catalogue-search-form label {
        width: 100%;
    }

    .catalogue-search-form input,
    .catalogue-search-form button {
        width: 100%;
        box-sizing: border-box;
    }

    .catalogue-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .catalogue-sort-form {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.6rem;
        box-sizing: border-box;
    }

    .catalogue-sort-form select {
        width: 100%;
        margin-left: 0 !important;
    }

    .catalogue-pagination-top-desktop {
        display: none !important;
    }

    .catalogue-pagination-top-mobile {
        display: flex !important;
        width: 100%;
        align-self: stretch;
    }

    .catalogue-pagination {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .catalogue-pagination span {
        width: 100%;
        text-align: center;
        margin: 0 !important;
    }

    .section-pepites-bonaparte,
    .section-pepites-rarity-intro {
        padding: 2rem 1rem !important;
    }
}

@media (max-width: 576px) {
    .section-pepites-bonaparte,
    .section-pepites-rarity-intro {
        padding: 1.4rem 0.75rem !important;
    }
}

/* === Tableau commandes : layout carte sur mobile === */
@media (max-width: 640px) {
    .account_content_table {
        overflow-x: visible !important;
    }

    .account_content_table thead {
        display: none;
    }

    .account_content_table,
    .account_content_table tbody,
    .account_content_table tr,
    .account_content_table td {
        display: block;
        width: 100%;
    }

    .account_content_table tr {
        border: 1px solid rgba(139, 92, 246, 0.2);
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 12px 14px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .account_content_table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        white-space: normal !important;
        border: none;
        font-size: 0.9rem;
    }

    .account_content_table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary-violet-dark);
        margin-right: 8px;
        flex-shrink: 0;
    }

    .account_content_table td.td-action {
        margin-top: 10px;
        justify-content: flex-end;
    }

    .account_content_table td.td-action::before {
        display: none;
    }
}