/* ===================================================================
   IKO3D - THEME PRINCIPAL
   Design noir/or avec glassmorphism
   Fichier unifié pour tout le site
   =================================================================== */

/* ==================== 1. BASE - FONTES ET FOND ==================== */

body {
    font-family: 'Inter', sans-serif;
    background: #000000 !important;
    min-height: 100vh;
    overflow-x: hidden; /* 👈 AJOUTER CETTE LIGNE */
    max-width: 100vw; /* 👈 AJOUTER CETTE LIGNE */
}

h1, h2, h3, nav {
    font-family: 'Space Grotesk', sans-serif;
}

/* Hero Background - Image de fond */
#hero-background {    
    background-image: url('/static/hero_dark_bg.png?v=2');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;  /* 👈 CHANGE fixed en absolute */
    inset: 0;
    z-index: 0;
    min-height: 100vh;
}

#hero-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.0) 0%,
        rgba(0, 0, 0, 0.0) 100%
    );
    z-index: 1;
}

/* Override conteneurs principaux */
.min-h-screen.bg-slate-50 {
    background: transparent !important;
    padding-top: 100px !important;
}

/* Header transparent */
header {
    background-color: transparent !important;
    border: none !important;
}

/* ==================== 2. CARTES GLASSMORPHISM ==================== */

.bg-white.rounded-xl,
.bg-white.rounded-2xl {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bg-white.rounded-xl:hover,
.bg-white.rounded-2xl:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Cartes métriques */
.bg-slate-50.rounded-lg.p-3,
.bg-slate-50.rounded-xl {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.bg-slate-50.rounded-lg.p-3:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* ==================== 3. TEXTES ET COULEURS ==================== */

h2.text-lg.font-bold.text-slate-900,
h2.text-slate-900,
h3.text-slate-800,
.text-slate-900,
.text-slate-800,
.text-slate-700 {
    color: #ffffff !important;
}

.text-slate-600 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.text-slate-500,
.text-slate-400 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-slate-300 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Textes métriques */
.text-slate-400.uppercase {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Accents OR */
.text-blue-400,
.text-yellow-400,
.text-green-400 {
    color: #fbbf24 !important;
}

.text-blue-600,
.text-orange-500 {
    color: #ffffff !important;
}

/* ==================== 4. BOUTONS PRINCIPAUX (OR) ==================== */

/* Boutons principaux - Gradient OR */
button[type="submit"].bg-blue-600,
.bg-blue-600,
#btn-add-cart,
.bg-green-600,
.bg-yellow-500,
.btn-quote {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow:
        0 8px 20px rgba(245, 158, 11, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

button[type="submit"].bg-blue-600:hover,
.bg-blue-600:hover,
#btn-add-cart:hover,
.bg-green-600:hover,
.bg-yellow-500:hover,
.btn-quote:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    box-shadow:
        0 10px 30px rgba(245, 158, 11, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

.btn-quote:active {
    transform: translateY(0) !important;
}

/* Bouton secondaire (bordure OR) */
.btn-more-info {
    background: transparent;
    color: #FDB813;
    border: 2px solid #FDB813;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.btn-more-info:hover {
    background: linear-gradient(135deg, #FDB813 0%, #FDD835 100%);
    color: #1a1a1a;
    box-shadow: 0 8px 24px rgba(253, 184, 19, 0.3);
}

/* ==================== 5. INPUTS ET SELECTS ==================== */

input[type="email"],
input[type="text"],
select,
.border.border-slate-300 {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

input[type="email"]:focus,
input[type="text"]:focus,
select:focus {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08) !important;
    outline: none !important;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

select option {
    background: #1a1a1a;
    color: #ffffff;
}

label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==================== 6. DROP ZONE (PAGE DEVIS) ==================== */

#drop-zone {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 2px dashed rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

#drop-zone:hover {
    border-color: rgba(245, 158, 11, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: scale(1.005) !important;
}

#drop-zone svg {
    color: rgba(255, 255, 255, 0.4) !important;
}

#drop-zone h3 {
    color: #ffffff !important;
}

#drop-zone p {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Badge dimensions */
#drop-zone .bg-orange-50 {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
    color: rgba(245, 158, 11, 0.9) !important;
}

/* ==================== 7. VIEWER 3D ==================== */

#viewer-container .bg-slate-200 {
    background: transparent !important;
}

#3d-canvas {
    background: transparent !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

#viewer-container {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    background: #1a1a1a !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px !important;
}

/* Fix interactivité viewer */
#viewer-container:not(.hidden) ~ .relative input[type="file"] {
    pointer-events: none !important;
    z-index: -1 !important;
}

#viewer-container:not(.hidden) {
    pointer-events: auto !important;
}

.relative.group:has(#viewer-container:not(.hidden)) #file_upload {
    display: none !important;
}

#3d-canvas,
#3d-canvas canvas {
    pointer-events: auto !important;
    z-index: 20 !important;
}

/* ==================== 8. BADGES ET ALERTS ==================== */

.bg-slate-100 {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bg-purple-50,
.bg-blue-50 {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.text-purple-700,
.text-blue-700 {
    color: rgba(245, 158, 11, 0.9) !important;
}

.bg-green-100 {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}

.border.border-yellow-400 {
    background: rgba(245, 158, 11, 0.05) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.text-yellow-600 {
    color: rgba(245, 158, 11, 0.9) !important;
}

.bg-blue-100 {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.bg-blue-100.text-white-600,
span.bg-blue-100 {
    color: #f59e0b !important;
    font-weight: 900 !important;
    font-size: 1.125rem !important;
}

/* ==================== 9. ZONE PRIX ==================== */

.bg-slate-50.rounded-xl.border {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.text-4xl.font-black.text-blue-600 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3) !important;
    font-weight: 900 !important;
}

/* ==================== 10. SECTION INFO BAS ==================== */

.bg-slate-900 {
    background: rgba(15, 15, 20, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* ==================== 11. SECTION 2 - COMMENT ÇA MARCHE (HOME) ==================== */

.section-2 {
    background: #f9f9f9;
    padding: 100px 40px;
}

.section-2 .container {
    max-width: 1400px;
    margin: 0 auto;
}

.section-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 60px;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    position: relative;
}

.step {
    background: white;
    padding: 20px 18px;
    border-radius: 10px;
    border: 2px solid #FDB813;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    z-index: 2;
}

.step:hover {
    border-color: #FDD835;
    box-shadow: 0 8px 24px rgba(253, 184, 19, 0.2);
    transform: translateY(-3px);
}

.step-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #FDB813;
    margin-bottom: 8px;
    line-height: 1;
}

.step h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.3;
}

.step p {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #888;
    line-height: 1.4;
}

.section-header {
    padding-top: 12px;
}

.section-header-tag {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #FDB813;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.section-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-header p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    max-width: 450px;
}

.section-cta {
    text-align: center;
}

/* ==================== 12. SECTION 3 - NOS FORCES (HOME) ==================== */

.section-3 {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    padding: 40px 40px 100px 40px;
    position: relative;
    overflow: hidden;
}

.section-3::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(253, 184, 19, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.section-3 .container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.section-3-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-3-tag {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #FDB813;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.section-3-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-3-header p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(253, 184, 19, 0.2);
    border-radius: 12px;
    padding: 40px 32px;
    transition: all 0.3s ease;
    text-align: center;
    backdrop-filter: blur(10px);
}

.feature-card:hover {
    border-color: rgba(253, 184, 19, 0.5);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(253, 184, 19, 0.1);
}

.feature-icon {
    font-size: 56px;
    margin-bottom: 20px;
    display: inline-block;
    color: white;
}

.feature-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    line-height: 1.3;
}

.feature-card p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 20px;
}

.section-3-cta {
    text-align: center;
}

.btn-devis-section3 {
    background: linear-gradient(135deg, #FDB813 0%, #FDD835 100%);
    color: #1a1a1a;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.btn-devis-section3:hover {
    box-shadow: 0 8px 24px rgba(253, 184, 19, 0.3);
    transform: translateY(-2px);
}

/* ==================== 13. HERO FEATURES (HOME) ==================== */

.hero-feature-card {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    align-items: flex-start;
}

.hero-feature-card:hover {
    border-color: rgba(209, 166, 94, 0.4);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.card-icon {
    font-size: 22px;
    min-width: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

.hero-feature-card h3 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.2px;
    font-weight: 600;
}

.hero-feature-card p {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: #999;
}

/* ==================== 14. FOOTER ==================== */

footer {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-top: 1px solid rgba(253, 184, 19, 0.1);
    padding: 80px 40px 40px 40px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #FDB813 50%, transparent 100%);
    opacity: 0.3;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-col-logo {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    height: 40px;
    margin-bottom: 20px;
}

.footer-description {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.footer-col h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-col a:hover {
    color: #FDB813;
}

.footer-bottom {
    border-top: 1px solid rgba(253, 184, 19, 0.1);
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.footer-copyright {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
}

.footer-legal a {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-legal a:hover {
    color: #FDB813;
}

/* ==================== 15. PANIER (CART) ==================== */

/* Items individuels */
.divide-y.divide-slate-100 > li {
    border-color: rgba(255, 255, 255, 0.05) !important;
}
/* Tronquer les noms de fichiers trop longs - Desktop */
#cart-container li h3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 400px !important; /* Plus large sur desktop */
    display: block !important;
}
/* Miniature 3D agrandie */
.w-24.h-24 {
    width: 150px !important;
    height: 150px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Textes items */
li .text-slate-900,
li .text-slate-700,
li .text-slate-600 {
    color: #ffffff !important;
}

li .text-slate-500,
li .text-slate-400 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Contrôles quantité */
.border.border-slate-200.rounded-lg {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.border.border-slate-200.rounded-lg button {
    color: rgba(255, 255, 255, 0.7) !important;
}

.border.border-slate-200.rounded-lg button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.border-x.border-slate-100 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Bouton supprimer */
.text-red-500:hover {
    color: #ef4444 !important;
}

/* Résumé commande sidebar */
.lg\:col-span-4 .text-slate-500,
.lg\:col-span-4 .text-slate-900 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.lg\:col-span-4 .font-medium.text-slate-900 {
    color: #ffffff !important;
}

/* ==================== 16. LOGIN / REGISTER / ADMIN LOGIN ==================== */

/* Cartes login/register */
.max-w-md .bg-white,
body:has(form[action*="login"]) .max-w-md .bg-white,
body:has(form[action*="admin"]) .max-w-md .bg-white {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Titres */
.max-w-md h2.text-slate-900,
body:has(form[action*="login"]) h2.text-slate-900,
body:has(form[action*="admin"]) h2.text-slate-900 {
    color: #ffffff !important;
}

.max-w-md .text-slate-600,
body:has(form[action*="login"]) .text-slate-600,
body:has(form[action*="admin"]) .text-slate-600 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Bouton Google */
.max-w-md .bg-white.border,
body:has(form[action*="login"]) .bg-white.border,
body:has(form[action*="admin"]) .bg-white.border {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.max-w-md .text-slate-700,
body:has(form[action*="login"]) .text-slate-700,
body:has(form[action*="admin"]) .text-slate-700 {
    color: #ffffff !important;
}

/* Séparateur */
.max-w-md .text-slate-400,
body:has(form[action*="login"]) .text-slate-400,
body:has(form[action*="admin"]) .text-slate-400 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.max-w-md .border-slate-200,
body:has(form[action*="login"]) .border-slate-200,
body:has(form[action*="admin"]) .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Inputs login/register */
.max-w-md input,
body:has(form[action*="login"]) input,
body:has(form[action*="admin"]) input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.max-w-md input::placeholder,
body:has(form[action*="login"]) input::placeholder,
body:has(form[action*="admin"]) input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.max-w-md input:focus,
body:has(form[action*="login"]) input:focus,
body:has(form[action*="admin"]) input:focus {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08) !important;
}

/* Liens */
.max-w-md .text-blue-600,
body:has(form[action*="login"]) .text-blue-600,
body:has(form[action*="admin"]) .text-blue-600 {
    color: #fbbf24 !important;
}

.max-w-md .text-blue-600:hover,
body:has(form[action*="login"]) .text-blue-600:hover,
body:has(form[action*="admin"]) .text-blue-600:hover {
    color: #fbbf24 !important;
}

.max-w-md .text-slate-500,
body:has(form[action*="login"]) .text-slate-500,
body:has(form[action*="admin"]) .text-slate-500 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Supprimer blobs animés */
.animate-blob,
div.bg-indigo-400,
div.bg-blue-400,
.max-w-md ~ .absolute.bg-indigo-400,
.max-w-md ~ .absolute.bg-blue-400 {
    display: none !important;
    opacity: 0 !important;
}

/* ==================== 17. ANIMATIONS ==================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lg\:col-span-7,
.lg\:col-span-5 {
    animation: fadeInUp 0.6s ease-out;
}

/* ==================== 18. STICKY ELEMENTS ==================== */

.lg\:sticky {
    position: sticky !important;
    top: 7rem !important;
}

/* ==================== 19. LIENS ==================== */

a[href="/mode-emploi"],
a[href="/devis"] {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease;
}

a[href="/mode-emploi"]:hover,
a[href="/devis"]:hover {
    color: #fbbf24 !important;
}

/* ==================== 20. RESPONSIVE ==================== */

/* Section 2 - Responsive */
@media (max-width: 1024px) {
    .section-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .steps-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header h2 {
        font-size: 36px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    footer {
        padding: 60px 30px 30px 30px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-legal {
        justify-content: flex-start;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .section-3-header h2 {
        font-size: 36px;
    }

    .section-3 {
        padding: 40px 30px 60px 30px;
    }
}

@media (max-width: 768px) {
    html, body {
        background: #000000 !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    /* PAGE PANIER - Items en colonne */
    #cart-container li.p-6 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    #cart-container .flex-shrink-0[style*="150px"] {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto !important;
    }
    
    #cart-container li .flex-1 {
        width: 100% !important;
    }
/* Réduire padding des items */
    #cart-container li.p-6 {
        padding: 1rem !important;
    }
    
    /* Prix sur une seule ligne */
    #cart-container .text-xl {
        font-size: 1rem !important;
    }
    
    /* Badges plus petits */
    #cart-container .bg-white\/5,
    #cart-container .bg-amber-500\/10 {
        font-size: 10px !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Titre fichier plus petit */
    #cart-container li h3 {
        font-size: 0.875rem !important;
    }
    /* Tronquer les noms de fichiers trop longs */
    #cart-container li h3 {
        font-size: 0.875rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 200px !important; /* 👈 Largeur fixe */
    }

    /* Sidebar en overlay */
    #dashboard-content aside {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 80% !important;
        max-width: 280px !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.5) !important;
    }
    
    #dashboard-content aside.mobile-open {
        left: 0 !important;
    }
    
    /* Header responsive */
    #dashboard-content header {
        padding-left: 3.5rem !important;
    }
    /* Cache le titre sur mobile */
    #dashboard-content header h1 {
        display: none !important;
    }
    /* Images 3D plus petites */
    #quotes-list .w-20,
    #orders-list .w-20 {
        width: 80px !important;
        height: 80px !important;
    }
    
    /* Grilles specs en 2 colonnes max */
    #quotes-list .grid-cols-4,
    #orders-list .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Boutons en pleine largeur */
    #quotes-list button,
    #orders-list button {
        width: 100% !important;
    }
}
@media (max-width: 640px) {
    .section-2 {
        padding: 40px 20px;
    }

    .section-wrapper {
        margin-bottom: 40px;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .section-header p {
        font-size: 14px;
    }

    .steps-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .step {
        padding: 16px 14px;
    }

    .step-number {
        font-size: 24px;
    }

    .step h3 {
        font-size: 12px;
    }

    .step p {
        font-size: 10px;
    }

    .section-3 {
        padding: 40px 20px;
    }

    .section-3-header {
        margin-bottom: 40px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section-3-header h2 {
        font-size: 28px;
    }

    .section-3-header p {
        font-size: 14px;
    }

    .feature-card {
        padding: 24px 16px;
    }

    .feature-icon {
        font-size: 36px;
    }

    .feature-card h3 {
        font-size: 15px;
    }

    .feature-card p {
        font-size: 12px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    footer {
        padding: 40px 20px 20px 20px;
    }

    .footer-bottom {
        gap: 12px;
    }

    .footer-legal {
        flex-direction: column;
        gap: 12px;
    }
}
/* ==================== 21. DASHBOARD CLIENT ==================== */

/* Fond noir pour le dashboard */
body:has(#dashboard-content) {
    background: #000000 !important;
}

/* Hero background pour dashboard */
body:has(#dashboard-content) #hero-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url('/static/hero_dark_bg.png?v=2');
    background-size: cover;
    background-position: center;
}

/* Sidebar noire opaque */
/* Sidebar glassmorphism gris (comme navbar) */
#dashboard-content aside,
#dashboard-content aside.bg-slate-900 {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 10 !important;
    position: relative;
}

/* Header glassmorphism (comme sidebar) */
#dashboard-content header {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 2px solid rgba(245, 158, 11, 0.3) !important;
    position: relative;
    z-index: 10 !important;
}

/* Titres header */
#dashboard-content header h1 {
    color: #ffffff !important;
}

/* Main content */
#dashboard-content main {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Zone de contenu avec fond léger */
#dashboard-content main > div {
    position: relative;
    z-index: 1;
}

/* Cartes dashboard (comme sidebar) */
#dashboard-content .bg-white {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

#dashboard-content .bg-white:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

/* Cartes secondaires plus légères */
#dashboard-content .bg-slate-50,
#dashboard-content .bg-slate-100 {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Textes dashboard */
#dashboard-content h2,
#dashboard-content h3,
#dashboard-content h4,
#dashboard-content .text-slate-900,
#dashboard-content .text-slate-800,
#dashboard-content .text-slate-700 {
    color: #ffffff !important;
}

#dashboard-content .text-slate-600 {
    color: rgba(255, 255, 255, 0.8) !important;
}

#dashboard-content .text-slate-500,
#dashboard-content .text-slate-400 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Badges et labels */
#dashboard-content .bg-blue-600,
#dashboard-content .bg-blue-100,
#dashboard-content .bg-green-100,
#dashboard-content .bg-orange-100,
#dashboard-content .bg-purple-100,
#dashboard-content .bg-indigo-100 {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Boutons verts → OR */
#dashboard-content .bg-green-600,
#dashboard-content .bg-green-700 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #000000 !important;
    border: none !important;
}

#dashboard-content .bg-green-600:hover,
#dashboard-content .bg-green-700:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}

/* Inputs dashboard */
#dashboard-content input,
#dashboard-content select,
#dashboard-content textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

#dashboard-content input:focus,
#dashboard-content select:focus,
#dashboard-content textarea:focus {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

#dashboard-content input::placeholder,
#dashboard-content textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Bordures */
#dashboard-content .border-slate-200,
#dashboard-content .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Loading screen */
#loading-screen {
    background: #000000 !important;
    z-index: 9999 !important;
}

#loading-screen p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Banner vérification */
#verification-banner {
    position: relative;
    z-index: 100;
}

/* --- CORRECTION : STYLE DES CARTES (Comme la Sidebar) --- */
#quotes-list .border-slate-200,
#orders-list .border-slate-200 {
    background: rgba(255, 255, 255, 0.08) !important; /* Fond verre fumé */
    backdrop-filter: blur(20px) !important; /* Flou d'arrière-plan */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Bordure subtile */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Ombre portée */
    transition: all 0.3s ease !important;
}

/* Effet au survol de la carte */
#quotes-list .border-slate-200:hover,
#orders-list .border-slate-200:hover {
    background: rgba(255, 255, 255, 0.12) !important; /* Un peu plus clair */
    border-color: rgba(245, 158, 11, 0.4) !important; /* Bordure dorée */
    transform: translateY(-5px); /* Légère remontée */
}
/* --- CORRECTION FINALE : BORDURES HEADER & SIDEBAR --- */

/* 1. On nettoie toutes les bordures 'slate' (gris-bleu) du dashboard */
#dashboard-content .border-slate-100,
#dashboard-content .border-slate-200,
#dashboard-content .border-slate-800,
#dashboard-content .border-b,
#dashboard-content .border-t,
#dashboard-content .divide-y > * {
    border-color: rgba(255, 255, 255, 0.1) !important; /* Gris subtil et transparent */
}

/* 2. Spécifique : La ligne sous le Header (On la met en OR pour souligner) */
#dashboard-content header {
    border-bottom: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* 3. Spécifique : La ligne à droite de la Sidebar (Si tu en veux une) */
#dashboard-content aside {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* --- CORRECTION BOUTON RETOUR ACCUEIL --- */
#dashboard-content aside a.border-slate-700\/50 {
    border-color: rgba(255, 255, 255, 0.15) !important; /* Gris neutre */
    color: rgba(255, 255, 255, 0.6) !important; /* Texte gris clair */
}

/* Au survol : Bordure dorée et texte blanc */
#dashboard-content aside a.border-slate-700\/50:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
/* ==================== 22. ADMIN DASHBOARD ==================== */

/* Body admin - fond noir */
body:has(#analyse),
body:has(#commandes),
body:has(#clients) {
    background: #000000 !important;
}

/* Glass panels admin */
.glass-panel {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* KPI Cards */
.kpi-card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.kpi-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    transform: translateY(-3px);
}

/* Navigation tabs admin */
.nav-tab {
    color: rgba(255, 255, 255, 0.4) !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.nav-tab:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

.nav-tab.active {
    color: #f59e0b !important;
    border-bottom-color: #f59e0b !important;
}

/* Tables admin */
body:has(#commandes) table,
body:has(#clients) table {
    background: transparent !important;
}

body:has(#commandes) thead,
body:has(#clients) thead {
    background: rgba(255, 255, 255, 0.03) !important;
}

body:has(#commandes) th,
body:has(#clients) th {
    color: rgba(255, 255, 255, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:has(#commandes) td,
body:has(#clients) td {
    color: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body:has(#commandes) tr:hover,
body:has(#clients) tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Textes admin - Override slate */
body:has(.nav-tab) .text-slate-400,
body:has(.nav-tab) .text-neutral-500 {
    color: rgba(255, 255, 255, 0.4) !important;
}

body:has(.nav-tab) .text-slate-500,
body:has(.nav-tab) .text-neutral-600 {
    color: rgba(255, 255, 255, 0.5) !important;
}

body:has(.nav-tab) .text-slate-700 {
    color: rgba(255, 255, 255, 0.7) !important;
}

body:has(.nav-tab) .text-white {
    color: #ffffff !important;
}

/* Inputs admin */
body:has(.nav-tab) input[type="date"],
body:has(.nav-tab) input[type="number"],
body:has(.nav-tab) input[type="text"],
body:has(.nav-tab) select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body:has(.nav-tab) input:focus,
body:has(.nav-tab) select:focus {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
    outline: none !important;
}

/* Labels admin */
body:has(.nav-tab) label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Bordures admin */
body:has(.nav-tab) .border-neutral-900,
body:has(.nav-tab) .border-slate-700,
body:has(.nav-tab) .border-neutral-800 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body:has(.nav-tab) .divide-slate-700 > * {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Boutons admin */
body:has(.nav-tab) .bg-amber-500 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2) !important;
}

body:has(.nav-tab) .bg-amber-500:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    transform: translateY(-2px) !important;
}

body:has(.nav-tab) .bg-neutral-700 {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:has(.nav-tab) .bg-neutral-700:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Header sections tarifs/blog */
body:has(.nav-tab) h3.text-xs {
    color: rgba(255, 255, 255, 0.5) !important;
}

body:has(.nav-tab) h3.text-emerald-500 {
    color: #10b981 !important;
}

/* Blog items */
body:has(.nav-tab) .bg-slate-900\/50 {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:has(.nav-tab) .bg-slate-900\/50:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

/* Bouton déconnexion */
body:has(.nav-tab) .bg-red-950\/30 {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

body:has(.nav-tab) .bg-red-950\/30:hover {
    background: #ef4444 !important;
}

/* ==================== DASHBOARD SIDEBAR - OVERRIDES ==================== */
/* Boutons sidebar inactifs */
#nav-commandes:not(.bg-amber-500),
#nav-profil:not(.bg-amber-500),
button[onclick="logout()"] {
    color: #a3a3a3 !important;
}

#nav-commandes:not(.bg-amber-500):hover,
#nav-profil:not(.bg-amber-500):hover,
button[onclick="logout()"]:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

/* Bouton sidebar actif */
#nav-devis.bg-amber-500,
#nav-commandes.bg-amber-500,
#nav-profil.bg-amber-500 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #000000 !important;
}

/* Override global pour tous les hover:bg-slate-800 dans le dashboard */
.hover\:bg-slate-800:hover {
    background: rgba(245, 158, 11, 0.15) !important;
}

/* Texte slate en neutral */
.text-slate-400 {
    color: #a3a3a3 !important;
}

.hover\:text-white:hover {
    color: #f59e0b !important;
}

/* === FOOTER PAYMENTS === */
.footer-payments {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-payments .payment-label {
    color: #737373;
    font-size: 13px;
    margin-right: 8px;
}
.footer-payments svg, .footer-payments img {
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.footer-payments svg:hover, .footer-payments img:hover {
    opacity: 1;
}
.footer-payments svg {
    width: 38px;
    height: 24px;
    border-radius: 3px;
}

/* Footer payment icons - Font Awesome */
.footer-payments i {
    font-size: 32px;
    color: #888;
    transition: color 0.3s;
}
.footer-payments i:hover {
    color: #fff;
}
.footer-payments .fa-cc-visa:hover { color: #1A1F71; }
.footer-payments .fa-cc-mastercard:hover { color: #EB001B; }
.footer-payments .fa-cc-stripe:hover { color: #635BFF; }
.footer-payments .fa-cc-apple-pay:hover { color: #fff; }
.footer-payments .fa-google-pay:hover { color: #4285F4; }

/* Couleurs des icônes de paiement */
.footer-payments .fa-cc-visa { color: #aaa; }
.footer-payments .fa-cc-mastercard { color: #aaa; }
.footer-payments .fa-cc-stripe { color: #635BFF; }
.footer-payments .fa-cc-apple-pay { color: #aaa; }
.footer-payments .fa-google-pay { color: #aaa; }