/* ==========================================================================
   CAPRICEO - CORE DESIGN SYSTEM 
   Identité : Tiers de Confiance / UI Luxe (MacBook Pro / Mercedes / La Prairie)
   ========================================================================== */

:root {
    /* --- PALETTE "DARK UNIVERSE" - HARDCORE PASTEL (SATURATION +15%) --- */
    --c-sol-sombre: #806B05;   --c-sol-vif: #FFD60A;   --c-sol-pastel: #FDDD5E;
    --c-chauf-sombre: #801D18; --c-chauf-vif: #FF3B30; --c-chauf-pastel: #FF968F;
    --c-iso-sombre: #175763;   --c-iso-vif: #30B0C7;   --c-iso-pastel: #81D0DE;
    --c-menu-sombre: #19612B;  --c-menu-vif: #34C759;  --c-menu-pastel: #8CDD9F;
    --c-plom-sombre: #00366D;  --c-plom-vif: #0071E3;  --c-plom-pastel: #66AAED;
    --c-stru-sombre: #6E6E71;  --c-stru-vif: #E5E5EA;  --c-stru-pastel: #B1B1B8;
    --c-toit-sombre: #4D3F2D;  --c-toit-vif: #A2845E;  --c-toit-pastel: #BBA78A;
    --c-elec-sombre: #804A00;  --c-elec-vif: #FF9500;  --c-elec-pastel: #FFC066;
    --c-exp-sombre: #5A2B73;   --c-exp-vif: #BF5AF2;   --c-exp-pastel: #D390F6;

    /* --- BASES UI --- */
    --header-height: 70px;
    --app-radius: 24px;
    --radius-xl: 32px;
    --app-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    
    /* --- COULEURS UTILITAIRES --- */
    --cap-dark: #1d1d1f;
    --cap-dark-alt: #000000;
    --cap-grey: #86868b;
    --cap-bg: #fbfbfd;
    --cap-bg-alt: #f5f5f7;
    --cap-border: rgba(0,0,0,0.08);
    
    /* --- VARIABLES DYNAMIQUES (Pilotées par PHP) --- */
    --theme-color: #0071e3;
    --theme-bg: #000000;
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--cap-bg);
    color: var(--cap-dark);
    font-family: var(--font-stack);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Mode Sombre Immersif (Pages Landing Univers) */
body.tax-cap_univers { 
    background-color: #000000 !important; 
    color: #ffffff; 
}

a { text-decoration: none; color: inherit; transition: var(--app-transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   2. ANIMATIONS & BOUTONS PREMIUM
   ========================================================================== */
.fade-up { opacity: 0; transform: translateY(30px); transition: var(--app-transition); }
.fade-up.visible { opacity: 1; transform: translateY(0); }

@keyframes capPopIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.btn-apple {
    display: inline-flex; justify-content: center; align-items: center;
    background: var(--cap-dark); color: #ffffff;
    padding: 18px 36px; border-radius: 99px;
    font-weight: 800; font-size: 1.1rem; border: none; cursor: pointer;
}
.btn-apple:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.1); background: var(--cap-dark-alt); }

/* ==========================================================================
   3. FORMULAIRES & UI TACTILE (MERCEDES STYLE)
   ========================================================================== */
label { display: block; margin-bottom: 12px; font-weight: 800; font-size: 1.2rem; color: inherit; letter-spacing: -0.5px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select, .cap-input {
    width: 100%; padding: 20px;
    background-color: var(--cap-bg-alt);
    border: 2px solid transparent; border-radius: 16px;
    font-family: inherit; font-size: 1.1rem; font-weight: 600; color: var(--cap-dark);
    transition: 0.3s; outline: none; box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
    background-color: #ffffff; border-color: var(--theme-color);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
}

/* Grilles de Boutons Tactiles */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tactile-opt { cursor: pointer; display: block; }
.tactile-opt input { display: none; }
.tactile-box { 
    background: var(--cap-bg-alt); border: 2px solid transparent; border-radius: 16px; 
    padding: 22px 15px; text-align: center; font-weight: 800; font-size: 15px; color: #515154; 
    transition: var(--app-transition); height: 100%; display: flex; align-items: center; justify-content: center; 
}
.tactile-opt input:checked + .tactile-box { 
    background: var(--theme-color); color: #ffffff; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: translateY(-2px); 
}

/* ==========================================================================
   4. MAPPING DYNAMIQUE DES UNIVERS
   ========================================================================== */
.theme-solaire     { --theme-color: var(--c-sol-vif);   --theme-bg: var(--c-sol-sombre); }
.theme-chauffage   { --theme-color: var(--c-chauf-vif); --theme-bg: var(--c-chauf-sombre); }
.theme-isolation   { --theme-color: var(--c-iso-vif);   --theme-bg: var(--c-iso-sombre); }
.theme-menuiserie  { --theme-color: var(--c-menu-vif);  --theme-bg: var(--c-menu-sombre); }
.theme-plomberie   { --theme-color: var(--c-plom-vif);  --theme-bg: var(--c-plom-sombre); }
.theme-structure   { --theme-color: var(--c-stru-vif);  --theme-bg: var(--c-stru-sombre); }
.theme-toiture     { --theme-color: var(--c-toit-vif);  --theme-bg: var(--c-toit-sombre); }
.theme-electricite { --theme-color: var(--c-elec-vif);  --theme-bg: var(--c-elec-sombre); }
.theme-expertise   { --theme-color: var(--c-exp-vif);   --theme-bg: var(--c-exp-sombre); }

/* Landing Univers (Dark) */
.univers-wrapper { min-height: 100vh; padding-top: 100px; background-color: var(--theme-bg) !important; position: relative; }
.ambient-glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 90vw; height: 80vh; background: radial-gradient(circle, var(--theme-color), transparent 70%); opacity: 0.2; filter: blur(120px); pointer-events: none; }

/* ==========================================================================
   5. BENTO GRID (PRODUCT CATALOG)
   ========================================================================== */
.bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.bento-card { 
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); 
    border-radius: var(--radius-xl); padding: 40px; border: 1px solid rgba(255,255,255,0.1); 
    transition: var(--app-transition); display: flex; flex-direction: column;
}
body:not(.tax-cap_univers) .bento-card { background: #ffffff; border-color: var(--cap-border); color: var(--cap-dark); box-shadow: var(--shadow-sm); }
.bento-card:hover { transform: translateY(-10px); border-color: var(--theme-color); box-shadow: 0 30px 60px rgba(0,0,0,0.3); }

/* ==========================================================================
   6. SIDEBAR D'ENGAGEMENT (SONDAGE / QUIZ)
   ========================================================================== */
.prod-sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 30px; }
.sidebar-widget { 
    background: #ffffff; border-radius: var(--app-radius); padding: 30px; 
    border: 1px solid var(--cap-border); box-shadow: var(--shadow-sm); 
}
.sb-slogan-box { 
    background: var(--cap-dark-alt); color: #ffffff; padding: 35px; 
    border-radius: var(--app-radius); text-align: center; position: relative; overflow: hidden; 
}
.sb-slogan-box span { color: var(--theme-color); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
.sb-slogan-box p { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.5px; margin-top: 10px; line-height: 1.2; }

/* ==========================================================================
   7. FOOTER & NAVIGATION
   ========================================================================== */
.site-header { 
    position: sticky; top: 0; z-index: 9999; 
    background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(20px); 
    border-bottom: 1px solid var(--cap-border); 
}
body.tax-cap_univers .site-header { background: rgba(0, 0, 0, 0.8); border-bottom-color: rgba(255,255,255,0.05); }

.site-footer { background: var(--cap-dark-alt); color: var(--cap-grey); padding: 100px 24px 50px; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 50px; max-width: 1400px; margin: 0 auto; }
.footer-col h4 { color: #ffffff; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px; }
.footer-col a:hover { color: #ffffff; }

/* ==========================================================================
   8. RESPONSIVE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 768px) {
    .page-layout-split { grid-template-columns: 1fr; }
    .opt-grid { grid-template-columns: 1fr; }
    .bento-grid { grid-template-columns: 1fr; }
}