/* Variables CSS globales pour le thème */
:root {
    /* Core Luxe Properties - Default is Dark Luxe */
    --bg-main: #050505;
    --bg-surface: rgba(15, 15, 15, 0.7);
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --color-gold: #d4af37;
    --color-gold-glow: rgba(212, 175, 55, 0.15);
    --border-color: rgba(212, 175, 55, 0.2);

    /* Mapped Variables */
    --primary-color: var(--color-gold);
    --primary-hover: #b89326;
    --bg-color: var(--bg-main);
    --text-color: var(--text-secondary);
    --heading-color: var(--text-primary);
    --card-bg: var(--bg-surface);
    --header-bg: rgba(5, 5, 5, 0.25);
    --header-text: var(--text-primary);
    --header-border: var(--border-color);
    --header-item-bg: rgba(212, 175, 55, 0.08);
    --header-item-hover: rgba(212, 175, 55, 0.15);
    --header-item-border: rgba(212, 175, 55, 0.2);
    --radius: 8px;
    --input-bg: var(--bg-main);
}

body.light-theme,
[data-theme="light"],
html[data-theme="light"] {
    /* Core Luxe Properties - Light Luxe */
    --bg-main: #fcfbfa;
    --bg-surface: rgba(255, 255, 255, 0.75);
    --text-primary: #111111;
    --text-secondary: #4b5563;
    --border-color: rgba(212, 175, 55, 0.3);
    --color-gold: #c59b27;
    --color-gold-glow: rgba(212, 175, 55, 0.1);

    /* Mapped Overrides */
    --primary-color: var(--color-gold);
    --primary-hover: #a37f1e;
    --bg-color: var(--bg-main);
    --text-color: var(--text-secondary);
    --heading-color: var(--text-primary);
    --card-bg: var(--bg-surface);
    --header-bg: rgba(252, 251, 250, 0.25);
    --header-text: var(--text-primary);
    --header-border: var(--border-color);
    --header-item-bg: rgba(212, 175, 55, 0.06);
    --header-item-hover: rgba(212, 175, 55, 0.12);
    --header-item-border: rgba(212, 175, 55, 0.18);
    --input-bg: var(--bg-main);
}

/* Reset de base & Typographie Système */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    height: auto;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    padding-top: 80px;
    /* Offset to prevent fixed header from overlapping content */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* HEADER & NAVIGATION */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;              /* Hauteur fixe de référence pour tout l'empilement */
    z-index: 1000;
    border-radius: 0;
    background: var(--header-bg);
    color: var(--header-text);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.header-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    height: auto;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav a {
    color: var(--header-text);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.main-nav a:hover {
    background-color: var(--header-item-bg);
}

/* Specific styling for header elements to override hardcoded white-theme styles in light theme */
.main-header #theme-toggle-btn {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font-family: inherit;
    background: var(--header-item-bg) !important;
    border-color: var(--header-item-border) !important;
    color: var(--header-text) !important;
}

.main-header #theme-toggle-btn:hover {
    background: var(--header-item-hover) !important;
}

.main-header select {
    background: var(--header-item-bg) !important;
    border-color: var(--header-item-border) !important;
    color: var(--header-text) !important;
}

.main-header select:hover {
    background: var(--header-item-hover) !important;
}

/* Conteneur Principal */
#app-main {
    width: 90%;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0;
    flex: 1;
    /* Pousse le footer vers le bas de la page */
}

/* Typographie */
h1,
h2,
h3 {
    color: var(--heading-color);
    margin-bottom: 20px;
}

/* =========================================
   DESIGN : BLOCS D'AVIS (Cartes)
   ========================================= */
.avis-list {
    margin-bottom: 40px;
}

.avis-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avis-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.avis-item strong {
    font-size: 1.15em;
    color: var(--heading-color);
}

.avis-item p:nth-of-type(1) {
    color: #64748b;
    font-size: 0.9em;
    margin-top: 5px;
    margin-bottom: 15px;
}

.avis-item p:nth-of-type(2) {
    margin: 0;
    color: var(--text-color);
}

/* =========================================
   DESIGN : FORMULAIRE MODERNE
   ========================================= */
.avis-form {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    margin-top: 40px;
}

.avis-form h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.avis-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
}

.avis-form input[type="text"],
.avis-form select,
.avis-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg);
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-color);
    transition: all 0.2s ease;
}

.avis-form input[type="text"]:focus,
.avis-form select:focus,
.avis-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--card-bg);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.avis-form button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    width: auto;
    margin-top: 15px;
    transition: all 0.2s ease;
}

.avis-form button[type="submit"]:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.avis-form button[type="submit"]:active {
    transform: translateY(1px);
}

/* =========================================
   FOOTER
   ========================================= */
/* =========================================
   LUXURY FOOTER REDESIGN
   ========================================= */
.main-footer {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 80px 0 40px 0 !important;
    margin-top: 60px !important;
    color: var(--text-secondary) !important;
}

.main-footer .footer-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: var(--text-secondary) !important;
}

.main-footer h3,
.main-footer h4 {
    font-family: "Cinzel", "Playfair Display", "Didot", "Georgia", serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--heading-color) !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.main-footer p {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

.main-footer a {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: inline-block !important;
}

.main-footer a:hover {
    color: var(--color-gold) !important;
    transform: translateX(4px) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px !important;
}

.main-footer svg {
    color: var(--color-gold) !important;
    transition: transform 0.3s ease !important;
}

.main-footer div[style*="border-top"] {
    margin-top: 60px !important;
    padding: 25px 0 !important;
    border-top: 1px solid var(--border-color) !important;
    opacity: 0.65 !important;
}

.main-footer div[style*="border-top"] p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
}

/* =========================================
   ADMIN PANEL INTEGRITY & ACTIONS
   ========================================= */
.admin-container {
    width: 100%;
    min-height: 100%;
    display: flow-root;
    /* Block Formatting Context pour englober les flottants et marges */
}

/* Responsive Rules for Admin Console Components */
@media (max-width: 768px) {

    /* Global border-box reset on mobile to prevent padding/borders from expanding widths beyond screen */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    /* Prevent clipping/cropping of cards by resetting inline overflow: hidden on mobile */
    .admin-container div[style*="overflow: hidden"],
    .admin-container div[style*="overflow:hidden"],
    main#app-main div[style*="overflow: hidden"],
    main#app-main div[style*="overflow:hidden"] {
        overflow: visible !important;
    }

    /* Ensure no container or element exceeds 100% of the viewport width */
    .admin-container div,
    .admin-container section,
    .admin-container form,
    main#app-main div,
    main#app-main section,
    main#app-main form {
        max-width: 100% !important;
    }

    /* 1. Main containers & wrappers responsiveness */
    #app-main {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .admin-subnav+#app-main {
        margin-top: 160px !important;
        /* Push it down so it starts clean below the tall black admin bar */
    }

    /* Clean and define backgrounds and borders for banners on mobile */
    .main-header {
        background: transparent !important;
        box-shadow: none !important;
        border-bottom: 1px solid var(--header-border) !important;
    }

    .main-header::before {
        background: rgba(10, 10, 10, 0.25) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    html[data-theme="light"] .main-header::before {
        background: rgba(255, 255, 255, 0.25) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    .admin-subnav {
        background: rgba(9, 9, 11, 0.25) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        box-shadow: none !important;
        /* Remove muddy shadows */
        border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
        /* Sharp golden border line */
    }

    .admin-container,
    main#app-main>div {
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Set inner padding to 12px and margin to zero for container elements inside admin view to preserve padding gutter within borders */
    .admin-container div[style*="padding"],
    .admin-container section[style*="padding"],
    .admin-container form[style*="padding"],
    main#app-main div[style*="padding"],
    main#app-main section[style*="padding"],
    main#app-main form[style*="padding"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .admin-container div[style*="margin"],
    .admin-container section[style*="margin"],
    .admin-container form[style*="margin"],
    main#app-main div[style*="margin"],
    main#app-main section[style*="margin"],
    main#app-main form[style*="margin"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .admin-container .avis-item,
    .admin-container .avis-form,
    main#app-main .avis-item,
    main#app-main .avis-form {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Force all grid containers to single-column vertical stacks on mobile */
    .admin-container div,
    main#app-main div {
        grid-template-columns: 1fr !important;
    }

    .admin-container div[style*="grid"],
    main#app-main div[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Convert flex layout rows (side-by-side sections) to vertical column stack */
    .admin-container div[style*="flex"]:not(.admin-table-actions):not(.admin-actions-container):not([style*="flex-direction: column"]):not([style*="flex-direction:column"]),
    main#app-main div[style*="flex"]:not(.admin-table-actions):not(.admin-actions-container):not([style*="flex-direction: column"]):not([style*="flex-direction:column"]) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }

    /* Expand children inside stacked flex layouts to 100% width and clean up side padding/borders */
    .admin-container div[style*="flex"]:not(.admin-table-actions):not(.admin-actions-container)>div,
    main#app-main div[style*="flex"]:not(.admin-table-actions):not(.admin-actions-container)>div {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        border-left: none !important;
        border-right: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Prevent horizontal scrolling by converting all data tables (except permission matrix) to card stacks on mobile */
    .admin-container table:not(#permissions-form table),
    main#app-main table:not(#permissions-form table) {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .admin-container table:not(#permissions-form table) thead,
    main#app-main table:not(#permissions-form table) thead {
        display: none !important;
    }

    .admin-container table:not(#permissions-form table) tbody,
    main#app-main table:not(#permissions-form table) tbody {
        display: block !important;
        width: 100% !important;
    }

    .admin-container table:not(#permissions-form table) tr,
    main#app-main table:not(#permissions-form table) tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
        padding: 10px !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
        box-sizing: border-box !important;
    }

    .admin-container table:not(#permissions-form table) td,
    main#app-main table:not(#permissions-form table) td {
        display: block !important;
        width: 100% !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
        text-align: left !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .admin-container table:not(#permissions-form table) td:last-child,
    main#app-main table:not(#permissions-form table) td:last-child {
        border-bottom: none !important;
        padding-top: 12px !important;
    }

    /* Target the table actions div inside stacked table rows on mobile */
    .admin-container table:not(#permissions-form table) td div,
    main#app-main table:not(#permissions-form table) td div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    /* Force parent scrolling divs to prevent horizontal scrolling */
    .admin-container div[style*="overflow-x: auto"],
    main#app-main div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Specific adjustment for permission matrix role alignment table layout on mobile */
    #permissions-form table {
        display: table !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    #permissions-form thead {
        display: table-header-group !important;
    }

    #permissions-form tbody {
        display: table-row-group !important;
    }

    #permissions-form tr {
        display: table-row !important;
    }

    #permissions-form td,
    #permissions-form th {
        display: table-cell !important;
        padding: 8px 4px !important;
        font-size: 0.8rem !important;
    }

    /* Optimize header text sizes on mobile to prevent overflow */
    h1,
    .admin-container h1,
    main#app-main h1 {
        font-size: 1.5rem !important;
    }

    h2,
    .admin-container h2,
    main#app-main h2 {
        font-size: 1.25rem !important;
    }

    h3,
    .admin-container h3,
    main#app-main h3 {
        font-size: 1.1rem !important;
    }
}

/* Alignement moderne et fluide des boutons d'actions */
.admin-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.admin-table-actions.justify-center {
    justify-content: center;
}

.admin-table-actions.justify-end {
    justify-content: flex-end;
}

.admin-actions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 5px;
    width: 100%;
}

/* =========================================
   CONSOLE ADMIN SUBNAV LAYOUT & RESPONSIVENESS
   ========================================= */
.admin-subnav {
    background-color: rgba(30, 41, 59, 0.25);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid #334155;
    padding: 12px 0;
    height: auto !important;
}

.admin-subnav .header-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
    height: auto !important;
    align-items: stretch;
}

.admin-subnav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.admin-subnav-links a {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s;
}

.admin-subnav-links a:hover {
    background-color: #334155;
    color: #fff;
}

.admin-subnav-title {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 5px;
}

/* =========================================
   ADMIN PANEL SEARCH BOX & RESULTS
   ========================================= */
.admin-search-container {
    align-self: flex-end;
    position: relative;
    width: 250px;
    z-index: 999;
}

#global-search-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    border: 1px solid #334155;
    background-color: #0f172a;
    color: #f8fafc;
    outline: none;
    transition: border-color 0.2s;
}

#global-search-input:focus {
    border-color: var(--primary-color);
}

#global-search-results {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 350px;
    max-height: 400px;
    overflow-y: auto;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    display: none;
    padding: 10px;
    z-index: 1000;
}

/* =========================================
   BLOCK FORMATTING CONTEXT / CONTENT SPACING
   ========================================= */
.admin-subnav+#app-main {
    margin-top: 20px !important;
    clear: both;
    display: flow-root;
}

@media print {

    /* 1. Masquer tous les éléments d'interface inutiles sur le papier */
    header,
    .main-header,
    .admin-subnav,
    .admin-search-container,
    footer,
    .main-footer,
    .btn-print,
    /* Masque le bouton "Imprimer" s'il y en a un */
    .no-print,
    .btn {
        display: none !important;
    }

    /* 2. Réinitialiser les marges du corps principal pour l'impression */
    body {
        background: #fff !important;
        color: #000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .admin-subnav+#app-main,
    #app-main,
    .invoice-container,
    .admin-container,
    .invoice-paper {
        margin-top: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================
   HOMEPAGE LUXURY GOLD OVERRIDES
   ========================================= */
.pricing-card.featured {
    border-color: var(--color-gold) !important;
    box-shadow: 0 15px 35px -10px var(--color-gold-glow) !important;
    background: linear-gradient(180deg, var(--card-bg) 0%, var(--color-gold-glow) 100%) !important;
}

.pricing-card.featured::after {
    background: var(--color-gold) !important;
    color: #050505 !important;
}

.pricing-card:hover {
    border-color: var(--color-gold) !important;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15) !important;
}

.pricing-card-price {
    color: var(--color-gold) !important;
}

.btn-pricing-cta {
    border-color: var(--border-color) !important;
}

.pricing-card.featured .btn-pricing-cta {
    background: var(--color-gold) !important;
    color: #050505 !important;
}


/* Canvas/Three.js Transparency Guard */
#canvas-3d,
.canvas-container,
.threejs-container {
    background-color: transparent !important;
}

/* =====================================================================
   ADMIN BAR LAYOUT — décalage de main#app-main (élément Flex)
   -----------------------------------------------------------------------
   Desktop : Header 80px + admin-subnav ~50px  = margin-top: 130px
   Mobile  : Header 80px + admin-subnav 150px  = margin-top: 210px (mesuré inspecteur)
   On utilise margin-top (et non padding-top) car main#app-main est un Flex item.
   ===================================================================== */
body.has-admin-bar main#app-main {
    margin-top: 160px !important; /* Bureau : Header 80px + sous-barre admin ~80px */
}

@media (max-width: 768px) {
    body.has-admin-bar main#app-main {
        margin-top: 210px !important; /* Mobile : Header 80px + sous-barre admin empilée 150px */
    }
}