/* ===================================
   FAST SERVICES SA - Premium Construction v2.0
   White theme, Grey accent, 3D effects
   =================================== */

:root {
    --accent: #8C8279;
    --accent-dark: #6E655E;
    --accent-light: #A89E95;
    --accent-glow: rgba(140, 130, 121, 0.25);
    --bg: #ffffff;
    --bg-alt: #f7f6f5;
    --bg-dark: #1a1a1a;
    --text: #333333;
    --text-light: #666666;
    --text-muted: #999999;
    --border: #e5e2df;
    --white: #ffffff;
    --font-h: 'Playfair Display', Georgia, serif;
    --font-b: 'Montserrat', -apple-system, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius: 16px;
    --shadow: 0 4px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--font-b);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
em { font-style: normal; color: var(--accent); }

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

/* ===================================
   LOADER — ANIMATION PREMIUM
   =================================== */
.loader {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), visibility 0.9s;
    overflow: hidden;
}
.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.04);
    transition: opacity 0.9s, visibility 0.9s, transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

/* ── Champ d'étoiles argentées ── */
.loader-starfield {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

/* Couche 1 : centaines de micro-étoiles via box-shadow */
.star-layer-1 {
    position: absolute;
    width: 1px; height: 1px;
    top: 0; left: 0;
    background: white;
    border-radius: 50%;
    box-shadow:
        120px 45px 0 0 rgba(255,255,255,0.7), 240px 190px 0 0 rgba(255,255,255,0.6),
        380px 80px 0 0 rgba(255,255,255,0.8),  510px 320px 0 0 rgba(255,255,255,0.5),
        650px 150px 0 0 rgba(255,255,255,0.9),  780px 420px 0 0 rgba(255,255,255,0.6),
        900px 60px 0 0 rgba(255,255,255,0.7),   1050px 280px 0 0 rgba(255,255,255,0.8),
        1180px 500px 0 0 rgba(255,255,255,0.5), 1280px 130px 0 0 rgba(255,255,255,0.9),
        60px 350px 0 0 rgba(255,255,255,0.6),   200px 490px 0 0 rgba(255,255,255,0.7),
        310px 240px 0 0 rgba(255,255,255,0.8),  430px 580px 0 0 rgba(255,255,255,0.5),
        570px 410px 0 0 rgba(255,255,255,0.9),  690px 700px 0 0 rgba(255,255,255,0.6),
        820px 540px 0 0 rgba(255,255,255,0.7),  960px 370px 0 0 rgba(255,255,255,0.8),
        1100px 620px 0 0 rgba(255,255,255,0.5), 1230px 750px 0 0 rgba(255,255,255,0.6),
        40px 700px 0 0 rgba(255,255,255,0.8),   170px 620px 0 0 rgba(255,255,255,0.7),
        290px 780px 0 0 rgba(255,255,255,0.6),  410px 680px 0 0 rgba(255,255,255,0.9),
        540px 760px 0 0 rgba(255,255,255,0.5),  670px 590px 0 0 rgba(255,255,255,0.8),
        800px 800px 0 0 rgba(255,255,255,0.6),  930px 670px 0 0 rgba(255,255,255,0.7),
        1060px 720px 0 0 rgba(255,255,255,0.9), 1190px 490px 0 0 rgba(255,255,255,0.5),
        75px 120px 0 0 rgba(255,255,255,0.6),   195px 30px 0 0 rgba(255,255,255,0.8),
        315px 160px 0 0 rgba(255,255,255,0.7),  445px 90px 0 0 rgba(255,255,255,0.5),
        565px 210px 0 0 rgba(255,255,255,0.9),  685px 50px 0 0 rgba(255,255,255,0.6),
        805px 180px 0 0 rgba(255,255,255,0.8),  925px 110px 0 0 rgba(255,255,255,0.7),
        1045px 200px 0 0 rgba(255,255,255,0.5), 1165px 70px 0 0 rgba(255,255,255,0.9),
        1300px 300px 0 0 rgba(255,255,255,0.6), 1350px 600px 0 0 rgba(255,255,255,0.7),
        25px 250px 0 0 rgba(255,255,255,0.8),   150px 390px 0 0 rgba(255,255,255,0.5),
        270px 460px 0 0 rgba(255,255,255,0.7),  395px 310px 0 0 rgba(255,255,255,0.9),
        480px 520px 0 0 rgba(255,255,255,0.6),  615px 470px 0 0 rgba(255,255,255,0.8),
        740px 340px 0 0 rgba(255,255,255,0.5),  865px 450px 0 0 rgba(255,255,255,0.7),
        990px 560px 0 0 rgba(255,255,255,0.9),  1120px 380px 0 0 rgba(255,255,255,0.6),
        1260px 430px 0 0 rgba(255,255,255,0.8), 1340px 200px 0 0 rgba(255,255,255,0.5),
        88px 550px 0 0 rgba(255,255,255,0.7),   220px 730px 0 0 rgba(255,255,255,0.8),
        340px 640px 0 0 rgba(255,255,255,0.6),  460px 750px 0 0 rgba(255,255,255,0.9),
        580px 660px 0 0 rgba(255,255,255,0.5),  710px 730px 0 0 rgba(255,255,255,0.7),
        840px 630px 0 0 rgba(255,255,255,0.8),  970px 780px 0 0 rgba(255,255,255,0.6),
        1090px 660px 0 0 rgba(255,255,255,0.9), 1210px 570px 0 0 rgba(255,255,255,0.5),
        1320px 740px 0 0 rgba(255,255,255,0.7), 1370px 80px 0 0 rgba(255,255,255,0.6),
        10px 400px 0 0 rgba(255,255,255,0.8),   130px 170px 0 0 rgba(255,255,255,0.5),
        250px 300px 0 0 rgba(255,255,255,0.9),  370px 430px 0 0 rgba(255,255,255,0.6),
        490px 170px 0 0 rgba(255,255,255,0.7),  620px 350px 0 0 rgba(255,255,255,0.8),
        750px 250px 0 0 rgba(255,255,255,0.5),  880px 150px 0 0 rgba(255,255,255,0.9),
        1010px 310px 0 0 rgba(255,255,255,0.6), 1140px 440px 0 0 rgba(255,255,255,0.7),
        1270px 220px 0 0 rgba(255,255,255,0.8), 1380px 400px 0 0 rgba(255,255,255,0.5);
    opacity: 0;
    animation: starLayerFadeIn 1.5s ease 0.1s both;
}

/* Couche 2 : étoiles moyennes argentées/bleutées */
.star-layer-2 {
    position: absolute;
    width: 2px; height: 2px;
    top: 0; left: 0;
    background: rgba(210,225,255,0.9);
    border-radius: 50%;
    box-shadow:
        95px 170px 0 0 rgba(220,230,255,0.9),  280px 55px 0 0 rgba(210,225,255,0.8),
        450px 290px 0 0 rgba(225,235,255,0.95), 620px 480px 0 0 rgba(215,228,255,0.7),
        790px 120px 0 0 rgba(220,230,255,0.9),  960px 360px 0 0 rgba(210,225,255,0.85),
        1130px 560px 0 0 rgba(225,235,255,0.8), 1300px 80px 0 0 rgba(215,228,255,0.9),
        170px 420px 0 0 rgba(220,230,255,0.75), 350px 650px 0 0 rgba(210,225,255,0.9),
        520px 720px 0 0 rgba(225,235,255,0.8),  700px 580px 0 0 rgba(215,228,255,0.7),
        870px 680px 0 0 rgba(220,230,255,0.95), 1050px 780px 0 0 rgba(210,225,255,0.8),
        55px 590px 0 0 rgba(225,235,255,0.9),   230px 750px 0 0 rgba(215,228,255,0.75),
        400px 130px 0 0 rgba(220,230,255,0.85), 575px 390px 0 0 rgba(210,225,255,0.9),
        745px 240px 0 0 rgba(225,235,255,0.7),  915px 460px 0 0 rgba(215,228,255,0.95),
        1085px 160px 0 0 rgba(220,230,255,0.8), 1255px 530px 0 0 rgba(210,225,255,0.85),
        140px 290px 0 0 rgba(225,235,255,0.9),  320px 490px 0 0 rgba(215,228,255,0.7),
        490px 630px 0 0 rgba(220,230,255,0.95), 660px 340px 0 0 rgba(210,225,255,0.8),
        830px 760px 0 0 rgba(225,235,255,0.75), 1000px 200px 0 0 rgba(215,228,255,0.9),
        1175px 410px 0 0 rgba(220,230,255,0.85),1340px 650px 0 0 rgba(210,225,255,0.7);
    opacity: 0;
    animation: starLayerFadeIn 1.2s ease 0.3s both, starTwinkle 4s ease-in-out 1.8s infinite alternate;
}

/* Couche 3 : grandes étoiles brillantes avec halo argenté */
.star-layer-3 {
    position: absolute;
    width: 3px; height: 3px;
    top: 0; left: 0;
    background: white;
    border-radius: 50%;
    box-shadow:
        110px 95px 2px 1px rgba(200,215,255,0.6),
        310px 510px 2px 1px rgba(200,215,255,0.5),
        530px 180px 2px 1px rgba(200,215,255,0.7),
        720px 680px 2px 1px rgba(200,215,255,0.6),
        940px 290px 2px 1px rgba(200,215,255,0.8),
        1150px 600px 2px 1px rgba(200,215,255,0.5),
        1320px 420px 2px 1px rgba(200,215,255,0.7),
        80px 730px 2px 1px rgba(200,215,255,0.6),
        250px 350px 2px 1px rgba(200,215,255,0.9),
        460px 760px 2px 1px rgba(200,215,255,0.5),
        680px 140px 2px 1px rgba(200,215,255,0.7),
        880px 580px 2px 1px rgba(200,215,255,0.6),
        1070px 70px 2px 1px rgba(200,215,255,0.8),
        1240px 750px 2px 1px rgba(200,215,255,0.5),
        190px 640px 2px 1px rgba(200,215,255,0.7),
        390px 30px 2px 1px rgba(200,215,255,0.6),
        600px 440px 2px 1px rgba(200,215,255,0.9),
        800px 820px 2px 1px rgba(200,215,255,0.5),
        1000px 390px 2px 1px rgba(200,215,255,0.7),
        1360px 160px 2px 1px rgba(200,215,255,0.6);
    opacity: 0;
    animation: starLayerFadeIn 1.8s ease 0.5s both, starTwinkleBright 5s ease-in-out 2s infinite alternate;
}

@keyframes starLayerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes starTwinkle {
    0%   { opacity: 0.2; }
    50%  { opacity: 1;   }
    100% { opacity: 0.3; }
}
@keyframes starTwinkleBright {
    0%   { opacity: 0.3; transform: scale(0.8);  filter: blur(0px); }
    30%  { opacity: 1;   transform: scale(1.5);  filter: blur(0px); }
    60%  { opacity: 0.5; transform: scale(0.9);  filter: blur(0.5px); }
    100% { opacity: 1;   transform: scale(1.3);  filter: blur(0px); }
}

/* ── Explosion en étoile ── */
.loader-starburst {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0;
    pointer-events: none;
}

/* 4 rayons en forme d'étoile du logo */
.burst-ray {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: 0 0;
    background: linear-gradient(to right, rgba(255,255,255,0.0), rgba(255,255,255,0.9), rgba(255,255,255,0.0));
    border-radius: 50%;
    opacity: 0;
    animation: burstRayShoot 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s both;
}
.burst-ray-1 { width: 500px; height: 1.5px; transform: translate(-50%, -50%) rotate(0deg);   animation-delay: 0.50s; }
.burst-ray-2 { width: 500px; height: 1.5px; transform: translate(-50%, -50%) rotate(90deg);  animation-delay: 0.55s; }
.burst-ray-3 { width: 380px; height: 1px;   transform: translate(-50%, -50%) rotate(45deg);  animation-delay: 0.60s; }
.burst-ray-4 { width: 380px; height: 1px;   transform: translate(-50%, -50%) rotate(135deg); animation-delay: 0.65s; }

@keyframes burstRayShoot {
    0%   { opacity: 0; clip-path: inset(0 100% 0 50%); }
    30%  { opacity: 1; }
    70%  { opacity: 0.8; }
    100% { opacity: 0; clip-path: inset(0 0% 0 0%); }
}

/* Flash central */
.burst-core {
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.9),
                0 0 30px 15px rgba(220,220,240,0.6),
                0 0 80px 40px rgba(200,210,255,0.3);
    opacity: 0;
    animation: burstCore 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s both;
}
@keyframes burstCore {
    0%   { opacity: 0; transform: scale(0); box-shadow: 0 0 0 0 rgba(255,255,255,0.9); }
    20%  { opacity: 1; transform: scale(4); box-shadow: 0 0 60px 30px rgba(220,220,240,0.8), 0 0 120px 60px rgba(200,210,255,0.4); }
    60%  { opacity: 0.6; transform: scale(2); }
    100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* Wrapper centré */
.loader-inner {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Anneau lumineux tournant autour du logo */
.loader-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    margin-top: -160px;
    margin-left: -160px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(196,168,130,0.5) 25%,
        transparent 50%,
        rgba(196,168,130,0.3) 75%,
        transparent 100%
    ) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: loaderRingSpin 2.5s linear infinite;
    opacity: 0;
    animation-delay: 0.4s;
    animation-fill-mode: both;
}
/* Fallback simple pour les navigateurs sans mask-composite */
.loader-glow-ring::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(196,168,130,0.15);
    animation: loaderRingSpin 4s linear infinite reverse;
}
@keyframes loaderRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Wrapper logo — sans carte, sans overflow */
.loader-logo-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 2.5rem;
}


/* Halo radial derrière le logo qui s'étend doucement */
.loader-logo-wrap::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,168,130,0.25) 0%, transparent 70%);
    animation: loaderHaloExpand 2.5s cubic-bezier(0.16,1,0.3,1) 0.2s both;
    pointer-events: none;
}
@keyframes loaderHaloExpand {
    from { width: 0; height: 0; opacity: 0; }
    to   { width: 600px; height: 600px; opacity: 1; }
}

/* Logo : surgit du flash d'étoile */
.loader-logo {
    height: 240px;
    display: block;
    opacity: 0;
    filter: brightness(10) drop-shadow(0 0 0px rgba(255,255,255,0));
    animation: loaderStarReveal 1.4s cubic-bezier(0.16,1,0.3,1) 0.9s forwards,
               loaderLogoBreathe 3s ease-in-out 2.5s infinite alternate;
}
@keyframes loaderStarReveal {
    0%   {
        opacity: 0;
        filter: brightness(30) blur(15px) drop-shadow(0 0 60px rgba(255,255,255,1));
        transform: scale(1.08);
    }
    35%  {
        opacity: 1;
        filter: brightness(15) blur(2px) drop-shadow(0 0 40px rgba(220,220,255,0.8));
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        filter: brightness(10) blur(0) drop-shadow(0 0 25px rgba(200,210,240,0.4));
        transform: scale(1);
    }
}
@keyframes loaderLogoBreathe {
    from { filter: brightness(10) drop-shadow(0 0 20px rgba(200,210,240,0.3)); }
    to   { filter: brightness(10) drop-shadow(0 0 50px rgba(200,210,240,0.6)); }
}

/* Tagline */
.loader-tagline {
    font-family: var(--font-b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(196,168,130,0.9);
    margin-bottom: 1.8rem;
    opacity: 0;
    animation: loaderFadeUp 0.6s ease 0.7s both;
}
@keyframes loaderFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Message de bienvenue */
.loader-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.2rem;
}
.loader-welcome-line1 {
    font-family: var(--font-h);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    font-style: italic;
    color: #ffffff;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(20px);
    animation: loaderFadeUp 0.8s cubic-bezier(0.34,1.2,0.64,1) 1.1s both;
    text-shadow: 0 0 60px rgba(196,168,130,0.4);
}
.loader-welcome-line2 {
    font-family: var(--font-b);
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    font-weight: 400;
    color: rgba(196,168,130,0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(15px);
    animation: loaderFadeUp 0.8s ease 2.4s both;
}
.loader-welcome-line3 {
    font-family: var(--font-b);
    font-size: 0.65rem;
    font-weight: 300;
    color: rgba(255,255,255,0.3);
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    animation: loaderFadeUp 0.8s ease 2.9s both;
}

/* Barre de chargement */
.loader-bar {
    width: 280px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
    opacity: 0;
    animation: loaderFadeUp 0.6s ease 0.9s both;
}
.loader-progress {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(196,168,130,0.4), rgba(196,168,130,1), rgba(196,168,130,0.4));
    animation: loadBar 3.8s cubic-bezier(0.16,1,0.3,1) 0.8s forwards;
    border-radius: 2px;
}
@keyframes loadBar { to { width: 100%; } }

/* Sous-texte */
.loader-sub {
    font-family: var(--font-b);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    opacity: 0;
    animation: loaderFadeUp 0.6s ease 1.1s both;
}

/* ===================================
   SCROLL PROGRESS
   =================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    z-index: 9999;
    width: 0;
    transition: width 0.1s;
}

/* ===================================
   SIDE NAVIGATION DOTS
   =================================== */
.side-nav {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.side-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    transition: all 0.3s var(--ease);
    position: relative;
    cursor: pointer;
}
.side-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}
.side-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.side-dot:hover::after { opacity: 1; }

@media (max-width: 768px) {
    .side-nav { display: none; }
}

/* ===================================
   TOP NAVBAR
   =================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    padding: 1.2rem 0;
    transition: all 0.4s var(--ease);
}
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 30px rgba(0,0,0,0.06);
    padding: 0.7rem 0;
}
.nav-container { display: flex; align-items: center; justify-content: space-between; }

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 0.3rem;
}
.logo-img {
    height: 160px;
    transition: transform 0.3s var(--ease);
    filter: brightness(10);
}
.navbar.scrolled .logo-img { filter: none; height: 90px; }
@media (max-width: 768px) {
    .logo-img { height: 60px !important; }
    .navbar.scrolled .logo-img { height: 50px !important; }
}
.logo-img:hover { transform: scale(1.05); }

/* Badge "FAST SERVICES SA GROUPE" sous le logo */
.logo-groupe {
    font-family: var(--font-b);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 0.2rem 1rem;
    border-radius: 50px;
    transition: all 0.4s var(--ease);
    white-space: nowrap;
}
.navbar.scrolled .logo-groupe {
    color: var(--accent);
    border-color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav-links a {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.3s;
}
.navbar.scrolled .nav-links a { color: var(--text); }
.nav-links a:hover { color: var(--accent); }

.btn-nav {
    background: var(--accent) !important;
    color: var(--white) !important;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
}
.btn-nav:hover { background: var(--accent-dark) !important; }

/* Boutons groupe dans la navbar */
.nav-groupe-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.btn-so {
    background: rgba(140, 110, 80, 0.85) !important;
    border: 1px solid rgba(196, 168, 130, 0.5) !important;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn-so:hover { background: rgba(140, 110, 80, 1) !important; }
.btn-en {
    background: rgba(30, 80, 130, 0.85) !important;
    border: 1px solid rgba(100, 160, 210, 0.5) !important;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn-en:hover { background: rgba(30, 80, 130, 1) !important; }
.navbar.scrolled .btn-so { background: rgba(140, 110, 80, 1) !important; }
.navbar.scrolled .btn-en { background: rgba(30, 80, 130, 1) !important; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-toggle span {
    width: 28px;
    height: 2px;
    background: var(--white);
    transition: all 0.3s;
}
.navbar.scrolled .nav-toggle span { background: var(--text); }

@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-links {
        position: fixed;
        top: 0; right: -100%;
        width: 80%;
        max-width: 360px;
        height: 100vh;
        background: var(--bg);
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        transition: right 0.4s var(--ease);
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    }
    .nav-links.active { right: 0; }
    .nav-links a { color: var(--text) !important; font-size: 1.1rem; }
    .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

/* ===================================
   BUTTONS
   =================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2.2rem;
    border-radius: 50px;
    font-family: var(--font-b);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease);
    border: 2px solid transparent;
    text-decoration: none;
}
.btn-primary {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}
.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}
.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.5);
}
.btn-outline:hover {
    background: var(--white);
    color: var(--text);
    border-color: var(--white);
    transform: translateY(-2px);
}
.btn-small {
    padding: 0.5rem 1.4rem;
    font-size: 0.8rem;
    background: var(--accent);
    color: var(--white);
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-block;
    transition: all 0.3s;
    text-decoration: none;
}
.btn-small:hover {
    background: var(--accent-dark);
    color: var(--white);
    transform: translateY(-2px);
}
.btn-full { width: 100%; justify-content: center; }

/* ===================================
   HERO
   =================================== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-slider {
    position: absolute;
    inset: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
    transform: scale(1.05);
}
.hero-slide.active {
    opacity: 1;
    animation: heroZoom 8s ease forwards;
}
@keyframes heroZoom {
    from { transform: scale(1.05); }
    to { transform: scale(1); }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.35) 50%,
        rgba(0,0,0,0.55) 100%
    );
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: 0 24px;
}
.hero-badge {
    display: inline-block;
    padding: 0.4rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease) 1.8s forwards;
}
.hero-logo {
    height: 120px;
    margin: 0 auto 1.5rem;
    filter: brightness(10);
    opacity: 0;
    animation: fadeUp 0.8s var(--ease) 2s forwards;
}
.hero-title {
    font-family: var(--font-h);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.hero-line {
    display: block;
    opacity: 0;
    transform: translateY(40px);
}
.line-1 { animation: fadeUp 0.8s var(--ease) 2.2s forwards; }
.line-2 { animation: fadeUp 0.8s var(--ease) 2.4s forwards; }
.hero-title em {
    color: var(--accent-light);
    font-style: italic;
}
.hero-sub {
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease) 2.6s forwards;
}
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease) 2.8s forwards;
}

/* Hero scroll indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
    animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); }
}

/* Hero slide indicators */
.hero-indicators {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}
.hero-ind {
    width: 40px;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.hero-ind.active { background: var(--white); width: 60px; }

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

/* ===================================
   BARRE NAVIGATION SECONDAIRE (Idée 2)
   =================================== */
.subnav {
    position: fixed;
    top: -80px; /* caché par défaut */
    left: 0;
    right: 0;
    z-index: 4500;
    display: flex;
    align-items: stretch;
    height: 64px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: 1px solid var(--border);
}
.subnav.visible {
    top: 76px; /* juste sous la navbar scrollée */
}

/* Onglets */
.subnav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    padding: 0 2rem;
    font-family: var(--font-b);
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}
.subnav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    transform: scaleX(0);
    transition: transform 0.35s var(--ease);
    border-radius: 3px 3px 0 0;
}

/* Onglet Second Œuvre — couleur brun/taupe */
.subnav-secondoeuvre {
    color: var(--accent-dark);
}
.subnav-secondoeuvre::after {
    background: var(--accent);
}
.subnav-secondoeuvre:hover,
.subnav-secondoeuvre.active {
    background: rgba(140,130,121,0.06);
    color: var(--accent-dark);
}
.subnav-secondoeuvre:hover::after,
.subnav-secondoeuvre.active::after {
    transform: scaleX(1);
}

/* Onglet Entretien — couleur bleu ardoise */
.subnav-entretien {
    color: #3a5a72;
}
.subnav-entretien::after {
    background: #4a7a9b;
}
.subnav-entretien:hover,
.subnav-entretien.active {
    background: rgba(74,122,155,0.06);
    color: #2d4a5e;
}
.subnav-entretien:hover::after,
.subnav-entretien.active::after {
    transform: scaleX(1);
}

/* Icône dans l'onglet */
.subnav-tab svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Texte principal */
.subnav-tab span {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Sous-texte discret */
.subnav-tab em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.55;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Séparateur vertical entre les deux onglets */
.subnav-divider {
    width: 1px;
    background: var(--border);
    margin: 12px 0;
}

/* État actif — fond coloré léger */
.subnav-secondoeuvre.active {
    background: linear-gradient(135deg, rgba(140,130,121,0.08) 0%, rgba(140,130,121,0.03) 100%);
}
.subnav-entretien.active {
    background: linear-gradient(135deg, rgba(74,122,155,0.08) 0%, rgba(74,122,155,0.03) 100%);
}

@media (max-width: 768px) {
    .subnav { height: 52px; }
    .subnav.visible { top: 60px; }
    .subnav-tab em { display: none; }
    .subnav-tab span { font-size: 0.78rem; }
    .subnav-tab { padding: 0 1rem; }
}

/* ===================================
   HERO SPLIT SCREEN
   =================================== */
.hero-split {
    position: relative;
    display: flex;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
}

.split-panel {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: flex 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-split:hover .split-panel { flex: 0.38; }
.hero-split .split-panel:hover { flex: 0.62; }

.split-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-panel:hover .split-bg { transform: scale(1.06); }

/* ── Overlays : couleur neutre par défaut ── */
.split-overlay {
    position: absolute;
    inset: 0;
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gauche : neutre gris-sombre par défaut */
.split-left .split-overlay {
    background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(70,70,70,0.60) 100%);
}
/* Droite : neutre bleu-sombre par défaut */
.split-right .split-overlay {
    background: linear-gradient(200deg, rgba(0,0,0,0.78) 0%, rgba(30,55,80,0.60) 100%);
}

/* ── Survol gauche (Second Œuvre) ── */
/* Panneau gauche : tinte gris neutre comme le logo */
.hero-split:has(.split-left:hover) .split-left .split-overlay {
    background: linear-gradient(160deg,
        rgba(50,50,50,0.82) 0%,
        rgba(110,110,110,0.55) 60%,
        rgba(0,0,0,0.20) 100%);
}
/* Panneau droit : prend la couleur gris sombre et disparaît */
.hero-split:has(.split-left:hover) .split-right .split-overlay {
    background: rgba(35,35,35,0.96);
}

/* ── Survol droit (Entretien & Nettoyage) ── */
/* Panneau droit : tinte bleu ardoise */
.hero-split:has(.split-right:hover) .split-right .split-overlay {
    background: linear-gradient(200deg,
        rgba(15,55,95,0.82) 0%,
        rgba(74,122,155,0.62) 60%,
        rgba(0,0,0,0.25) 100%);
}
/* Panneau gauche : prend la couleur bleu et disparaît */
.hero-split:has(.split-right:hover) .split-left .split-overlay {
    background: rgba(20,55,90,0.96);
}

/* ── Contenu ── */
.split-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding: 2rem 3rem;
    padding-top: 12vh;
    max-width: 520px;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* L'autre côté disparaît complètement */
.hero-split:has(.split-left:hover)  .split-right .split-content { opacity: 0; transform: scale(0.92) translateX(20px); }
.hero-split:has(.split-right:hover) .split-left  .split-content { opacity: 0; transform: scale(0.92) translateX(-20px); }

.split-logo {
    height: 70px;
    filter: brightness(10);
    margin-bottom: 0.5rem;
    transition: transform 0.4s var(--ease);
}
.split-panel:hover .split-logo { transform: scale(1.06); }

/* Badge Groupe — couleur selon côté au survol */
.split-groupe {
    font-family: var(--font-b);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 0.25rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    transition: all 0.4s var(--ease);
}
.split-left:hover .split-groupe {
    border-color: #a8a8a8;
    color: #a8a8a8;
}
.split-right:hover .split-groupe {
    border-color: #6fa3c0;
    color: #6fa3c0;
}

/* Séparateur court */
.split-sep {
    width: 40px;
    height: 1px;
    background: rgba(255,255,255,0.35);
    margin-bottom: 1.5rem;
    transition: width 0.4s var(--ease), background 0.4s;
}
.split-left:hover .split-sep  { width: 70px; background: #a8a8a8; }
.split-right:hover .split-sep { width: 70px; background: #6fa3c0; }

/* Titre */
.split-title {
    font-family: var(--font-h);
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.8rem;
    color: var(--white);
    text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.8);
}
/* em : gris clair à gauche, bleu à droite */
.split-left  .split-title em { color: #c8c8c8; font-style: italic; text-shadow: 0 2px 15px rgba(0,0,0,0.5); }
.split-right .split-title em { color: #8dc8e8; font-style: italic; text-shadow: 0 2px 15px rgba(0,0,0,0.5); }

/* Services */
.split-services {
    list-style: none;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.split-services li {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 8px rgba(0,0,0,0.9);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s, transform 0.4s;
}
.split-panel:hover .split-services li { opacity: 1; transform: translateY(0); }
.split-panel:hover .split-services li:nth-child(1) { transition-delay: 0.05s; }
.split-panel:hover .split-services li:nth-child(2) { transition-delay: 0.12s; }
.split-panel:hover .split-services li:nth-child(3) { transition-delay: 0.19s; }

/* CTA */
.split-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,0.45);
    padding-bottom: 0.3rem;
    transition: all 0.4s var(--ease);
}
.split-arrow { transition: transform 0.4s var(--ease); }
.split-left:hover  .split-cta { border-color: #a8a8a8; color: #a8a8a8; }
.split-right:hover .split-cta { border-color: #6fa3c0; color: #6fa3c0; }
.split-panel:hover .split-arrow { transform: translateX(6px); }

/* ── Logos flottants dans le hero-split (page groupe) ── */
/* top: 36% = position exacte du titre mesuré (279px / 783px panel) */
.group-logo {
    position: absolute;
    top: 36%;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    filter: brightness(10);
    transition:
        transform 0.70s cubic-bezier(0.16, 1, 0.3, 1),
        opacity   0.45s ease,
        filter    0.5s  ease;
}
.group-logo img {
    height: clamp(120px, 12vw, 170px);
    width: auto;
    max-width: none;
    display: block;
    background: transparent;
}
.group-logo {
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

/* Logo dans panneau DROIT contracté — centre à 81% */
.group-logo-right {
    left: 81%;
    transform: translate(calc(-50% + 450px), 0);
}

/* Logo dans panneau GAUCHE contracté — centre à 19% */
.group-logo-left {
    left: 19%;
    transform: translate(calc(-50% - 450px), 0);
}

/* Survol gauche → logo droit, aligné avec le titre, halo doré */
.hero-split:has(.split-left:hover) .group-logo-right {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    filter: brightness(10)
            drop-shadow(0 0 20px rgba(180,180,180,1))
            drop-shadow(0 0 50px rgba(180,180,180,0.4));
}

/* Survol droit → logo gauche, aligné avec le titre, halo bleu */
.hero-split:has(.split-right:hover) .group-logo-left {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    filter: brightness(10)
            drop-shadow(0 0 20px rgba(111,163,192,1))
            drop-shadow(0 0 50px rgba(111,163,192,0.4));
}

/* (logos mobile intégrés dans le bloc @media 768px ci-dessous) */

.split-center-divider,
.split-center-line,
.split-center-badge {
    display: none;
}

.hero-split .hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

/* ══════════════════════════════════
   TABLETTE (≤ 1024px)
   ══════════════════════════════════ */
@media (max-width: 1024px) {
    /* Loader */
    .loader-logo { height: 190px; }
    .loader-glow-ring { width: 260px; height: 260px; margin-top: -130px; margin-left: -130px; }
    .loader-welcome-line2 { font-size: 0.72rem; letter-spacing: 2px; }

    /* Split */
    .split-title { font-size: clamp(1.8rem, 3vw, 2.8rem); }
    .split-content { padding: 1.5rem 2rem; padding-top: 10vh; }

    /* Logos tablette : réduits, animation horizontale, cachés par défaut */
    .group-logo img { height: clamp(80px, 9vw, 120px); }
    .group-logo-right { left: 81%; opacity: 0; pointer-events: none; transform: translate(calc(-50% + 320px), 0); }
    .group-logo-left  { left: 19%; opacity: 0; pointer-events: none; transform: translate(calc(-50% - 320px), 0); }
    .hero-split:has(.split-left:hover)  .group-logo-right { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
    .hero-split:has(.split-right:hover) .group-logo-left  { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
}

/* ══════════════════════════════════
   MOBILE (≤ 768px) — empilement vertical
   ══════════════════════════════════ */
@media (max-width: 768px) {

    /* ── LOADER ── */
    .loader-logo { height: 140px; }
    .loader-logo-wrap { margin-bottom: 1.2rem; }
    .loader-glow-ring { width: 190px; height: 190px; margin-top: -95px; margin-left: -95px; }
    .loader-welcome { margin-bottom: 1.4rem; gap: 0.35rem; }
    .loader-welcome-line2 { font-size: 0.58rem; letter-spacing: 1.5px; padding: 0 1rem; text-align: center; }
    .loader-welcome-line3 { font-size: 0.5rem; letter-spacing: 2px; padding: 0 1rem; text-align: center; }
    .loader-bar { width: 200px; }
    .burst-ray-1, .burst-ray-2 { width: 260px; }
    .burst-ray-3, .burst-ray-4 { width: 180px; }

    /* ── SPLIT SCREEN : vertical ── */
    .hero-split { flex-direction: column; height: 100vh; min-height: 500px; }
    .split-panel { flex: 1; min-height: 0; }

    /* Expansion au tap */
    .hero-split:has(.split-left:hover)  .split-left  { flex: 1.6; }
    .hero-split:has(.split-left:hover)  .split-right { flex: 0.4; }
    .hero-split:has(.split-right:hover) .split-right { flex: 1.6; }
    .hero-split:has(.split-right:hover) .split-left  { flex: 0.4; }

    /* Overlays mobile */
    .split-left  .split-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(60,60,60,0.50) 100%); }
    .split-right .split-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(20,45,70,0.50) 100%); }
    .hero-split:has(.split-left:hover)  .split-right .split-overlay { background: rgba(25,25,25,0.92) !important; }
    .hero-split:has(.split-right:hover) .split-left  .split-overlay { background: rgba(15,30,50,0.92) !important; }

    /* Contenu contracté : masqué */
    .hero-split:has(.split-left:hover)  .split-right .split-content { opacity: 0 !important; transform: none !important; }
    .hero-split:has(.split-right:hover) .split-left  .split-content { opacity: 0 !important; transform: none !important; }

    /* Contenu actif : centré, compact */
    .split-content {
        padding: 1rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .split-sep { margin-bottom: 0.5rem; }
    .split-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 0.6rem; line-height: 1.15; }
    .split-services { gap: 0.3rem; margin-bottom: 0.9rem; }
    .split-services li { font-size: 0.75rem; letter-spacing: 1.5px; }
    .split-cta { font-size: 0.72rem; padding: 0.5rem 1.2rem; letter-spacing: 2px; }

    /* ── LOGOS mobile : animation verticale ── */
    .group-logo img { height: clamp(90px, 25vw, 120px); }

    /* Logo haut → invisible + hors-écran par défaut */
    .group-logo-right {
        left: 50%;
        top: 13%;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, calc(-50% - 340px));
    }
    /* Logo bas → invisible + hors-écran par défaut */
    .group-logo-left {
        left: 50%;
        top: 87%;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, calc(-50% + 340px));
    }
    /* Tap panneau haut → logo descend et s'affiche */
    .hero-split:has(.split-left:hover)  .group-logo-right {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%);
    }
    /* Tap panneau bas → logo monte et s'affiche */
    .hero-split:has(.split-right:hover) .group-logo-left {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%);
    }

    /* ── TICKER mobile ── */
    .ticker-item { font-size: 0.68rem; letter-spacing: 1.5px; padding: 0 1.2rem; }
    .ticker-dot { font-size: 0.45rem; }
    .ticker-row::before, .ticker-row::after { width: 50px; }
}

/* ===================================
   TICKER BANNIÈRE DÉFILANTE
   =================================== */
.ticker-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: transparent;
    overflow: hidden;
    padding: 0;
    border-top: none;
    border-bottom: none;
}

.ticker-row {
    overflow: hidden;
    padding: 0.75rem 0;
    position: relative;
}

/* Fondu transparent sur les bords */
.ticker-row::before,
.ticker-row::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}
.ticker-row::before { left: 0;  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent); }
.ticker-row::after  { right: 0; background: linear-gradient(to left,  rgba(0,0,0,0.6), transparent); }

.ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: tickerScroll 40s linear infinite;
    width: max-content;
}

.ticker-reverse {
    animation: tickerScrollRev 45s linear infinite;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes tickerScrollRev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.ticker-item {
    font-family: var(--font-b);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0 1.8rem;
    transition: color 0.3s;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
/* Second Œuvre : gris logo */
.ticker-item.so  { color: #b8b8b8; }
/* Entretien & Nettoyage : bleu ardoise */
.ticker-item.en  { color: #7ab8d4; }
/* Villes & termes généraux : blanc */
.ticker-item.loc { color: rgba(255,255,255,0.85); }

.ticker-dot {
    color: rgba(255,255,255,0.15);
    font-size: 0.5rem;
    flex-shrink: 0;
}


/* Pause au survol */
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }

/* ===================================
   STATS BANNER
   =================================== */
.stats-banner {
    background: var(--bg-dark);
    color: var(--white);
    padding: 3.5rem 0;
    position: relative;
}
.stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-number {
    font-family: var(--font-h);
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-light);
}
.stat-suffix {
    font-family: var(--font-h);
    font-size: 2rem;
    color: var(--accent-light);
}
.stat-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.6);
    margin-top: 0.3rem;
}
.stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(255,255,255,0.15);
}
@media (max-width: 768px) {
    .stats-grid { gap: 2rem; }
    .stat-divider { display: none; }
    .stat-number { font-size: 2.2rem; }
}

/* ===================================
   SECTIONS
   =================================== */
.section {
    padding: 7rem 0;
    position: relative;
}
.section-alt { background: var(--bg-alt); }
.section-dark {
    background: var(--bg-dark);
    color: var(--white);
}
.section-dark em { color: var(--accent-light); }
.section-dark .section-label { color: var(--accent-light); border-color: var(--accent-light); }
.section-dark .section-divider { background: var(--accent-light); }

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}
.section-title {
    font-family: var(--font-h);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.section-divider {
    width: 60px;
    height: 3px;
    background: var(--accent);
    margin: 0 auto;
    border-radius: 3px;
}
.section-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.section-dark .section-sub { color: rgba(255,255,255,0.5); }

/* ===================================
   SPLIT SECTION (À propos)
   =================================== */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.split-text .section-label { margin-bottom: 1rem; }
.split-text .section-title { text-align: left; }
.split-text .section-divider { margin: 1.5rem 0; }
.lead-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text);
    margin-bottom: 1rem;
}
.split-text p { color: var(--text-light); margin-bottom: 0.8rem; }

/* Image Stack */
.image-stack {
    position: relative;
    height: 500px;
    perspective: 1000px;
}
.stack-img {
    position: absolute;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.stack-back {
    width: 75%;
    height: 80%;
    top: 0;
    left: 0;
    transform: rotate(-3deg);
}
.stack-front {
    width: 70%;
    height: 75%;
    bottom: 0;
    right: 0;
    transform: rotate(2deg);
    z-index: 1;
}
.image-stack:hover .stack-back { transform: rotate(-6deg) translateX(-10px); }
.image-stack:hover .stack-front { transform: rotate(5deg) translateX(10px); }

@media (max-width: 768px) {
    .split-section { grid-template-columns: 1fr; gap: 3rem; }
    .image-stack { height: 350px; }
    .split-text .section-title { text-align: center; }
    .split-text .section-divider { margin: 1.5rem auto; }
}

/* ===================================
   FLIP CARDS (Services)
   =================================== */
.flip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
/* Prevent reveal-up transform on flip-grid: transform on parent breaks perspective/3D on flip-cards */
.flip-grid.reveal-up {
    transform: none !important;
}
.flip-grid.reveal-up.visible {
    transform: none !important;
}
.flip-card {
    perspective: 1000px;
    height: 320px;
    cursor: pointer;
}
/* Override reveal-up on flip-cards to prevent 3D conflict */
.flip-card.reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s var(--ease);
    transform-style: preserve-3d;
}
.flip-card:hover .flip-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
.flip-front {
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.section-alt .flip-front { background: var(--white); }
.flip-front h3 {
    font-family: var(--font-h);
    font-size: 1.4rem;
    margin-top: 1rem;
    color: var(--text);
}
.flip-icon { color: var(--accent); }
.flip-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.flip-back {
    background: var(--accent);
    color: var(--white);
    transform: rotateY(180deg);
}
.flip-back h3 {
    font-family: var(--font-h);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.flip-back p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}
.flip-back .btn-small {
    background: var(--white);
    color: var(--accent-dark);
}
.flip-back .btn-small:hover {
    background: var(--bg-alt);
    color: var(--accent-dark);
}

@media (max-width: 768px) {
    .flip-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .flip-card { height: 280px; }
}

/* ===================================
   PROJECT MASONRY GRID
   =================================== */
.project-filters {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 0.5rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.6);
    border-radius: 50px;
    font-family: var(--font-b);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.filter-btn.active,
.filter-btn:hover {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.project-masonry {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.2rem;
    grid-auto-rows: 220px;
}
.project-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.project-card:hover img { transform: scale(1.08); }
.project-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.4); }

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s;
}
.project-card:hover .project-overlay { opacity: 1; }

.project-tag {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    background: var(--accent);
    color: var(--white);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    width: fit-content;
}
.project-overlay h3 {
    font-family: var(--font-h);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 0.2rem;
}
.project-overlay p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

/* Grid sizes */
.size-large { grid-column: span 7; grid-row: span 2; }
.size-medium { grid-column: span 6; grid-row: span 2; }
.size-small { grid-column: span 5; }

/* 3D tilt on project cards */
.project-card {
    transform-style: preserve-3d;
    will-change: transform;
}

@media (max-width: 768px) {
    .project-masonry {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
    }
    .size-large, .size-medium, .size-small {
        grid-column: span 1;
        grid-row: span 1;
    }
    .size-large { grid-column: span 2; grid-row: span 1; }
    .project-overlay { opacity: 1; }
}

/* ===================================
   LIGHTBOX
   =================================== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
    cursor: zoom-out;
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    transition: transform 0.3s;
    z-index: 1;
}
.lightbox-close:hover { transform: rotate(90deg); }
.lightbox-img {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.4s var(--ease);
}
.lightbox.active .lightbox-img { transform: scale(1); }
.lightbox-info {
    color: white;
    margin-top: 1.5rem;
    text-align: center;
    font-size: 1rem;
}

/* ===================================
   TESTIMONIALS
   =================================== */
.testimonials-carousel {
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.testimonial-track {
    display: flex;
    transition: transform 0.5s var(--ease);
}
.testimonial-slide {
    min-width: 100%;
    padding: 3rem;
    text-align: center;
}
.testimonial-quote {
    font-family: var(--font-h);
    font-size: 5rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: -1rem;
}
.testimonial-slide p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 2rem;
}
.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.testimonial-author strong { color: var(--text); }
.testimonial-author span { font-size: 0.85rem; color: var(--text-muted); }

.testimonial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}
.test-prev, .test-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.test-prev:hover, .test-next:hover {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}
.test-dots {
    display: flex;
    gap: 0.5rem;
}
.test-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}
.test-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

/* ===================================
   CONTACT
   =================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border);
}
.contact-card:last-of-type { border-bottom: none; }
.contact-icon {
    width: 48px;
    height: 48px;
    background: var(--accent);
    color: var(--white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-card h4 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.contact-card p, .contact-card a {
    font-size: 0.95rem;
    color: var(--text-light);
}
.contact-map {
    margin-top: 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* Contact Form */
.contact-form {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow);
}
.contact-form h3 {
    font-family: var(--font-h);
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}
.form-group {
    position: relative;
    margin-bottom: 1.2rem;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem 1rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-b);
    font-size: 0.95rem;
    background: var(--bg-alt);
    color: var(--text);
    transition: all 0.3s;
    outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.3s;
    pointer-events: none;
    background: transparent;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -0.5rem;
    left: 0.8rem;
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--bg-alt);
    padding: 0 4px;
}
.section-alt .form-group input:focus + label,
.section-alt .form-group input:not(:placeholder-shown) + label,
.section-alt .form-group textarea:focus + label,
.section-alt .form-group textarea:not(:placeholder-shown) + label {
    background: var(--white);
}

@media (max-width: 768px) {
    .contact-layout { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* ===================================
   FOOTER
   =================================== */
.footer {
    background: var(--bg-dark);
    color: rgba(255,255,255,0.7);
    padding: 4rem 0 2rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-logo {
    height: 45px;
    margin-bottom: 1rem;
    filter: brightness(10);
}
.footer-brand p { font-size: 0.9rem; line-height: 1.6; }
.footer-col h4 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--white);
    margin-bottom: 1.2rem;
}
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col ul a {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    transition: color 0.3s;
}
.footer-col ul a:hover { color: var(--accent-light); }
.footer-col p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.footer-col p a { color: rgba(255,255,255,0.5); }
.footer-col p a:hover { color: var(--accent-light); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.3);
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ===================================
   ANIMATIONS & REVEALS
   =================================== */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-3d {
    opacity: 0;
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal-up { transform: translateY(60px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-3d { transform: perspective(800px) rotateX(8deg) translateY(40px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-3d.visible {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.25s; }
.stagger-3 { transition-delay: 0.4s; }

/* Project card filtering */
.project-card { transition: opacity 0.5s, transform 0.5s var(--ease); }
.project-card.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute;
}

/* ===================================
   CUSTOM CURSOR — ÉTOILE LOGO
   =================================== */
@media (hover: hover) {
    body, a, button, .flip-card, .project-card, .filter-btn,
    .hero-ind, .split-panel {
        cursor: url('cursor-star.svg') 17 24, auto !important;
    }
}

/* L'ancien curseur point est masqué — on garde le follower comme halo */
.cursor {
    display: none;
}
.cursor-follower {
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(140, 130, 121, 0.5);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    transition: transform 0.25s var(--ease), width 0.3s, height 0.3s, border-color 0.3s, opacity 0.3s;
    transform: translate(-50%, -50%);
    opacity: 0.6;
}
.cursor-follower.hover {
    width: 60px;
    height: 60px;
    border-color: rgba(140, 130, 121, 0.8);
    background: rgba(140, 130, 121, 0.08);
    opacity: 1;
}
@media (max-width: 768px) {
    .cursor, .cursor-follower { display: none !important; }
}

/* ===================================
   PARTICLE CANVAS
   =================================== */
.particle-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ===================================
   WAVE DIVIDER
   =================================== */
.wave-divider {
    position: relative;
    margin-top: -2px;
    z-index: 2;
    line-height: 0;
}
.wave-divider svg {
    width: 100%;
    height: 60px;
    display: block;
}

/* ===================================
   MARQUEE BANNER
   =================================== */
.marquee-banner {
    background: var(--bg-alt);
    padding: 1.2rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.marquee-track {
    display: flex;
    animation: marqueeScroll 30s linear infinite;
    white-space: nowrap;
}
.marquee-banner.reverse .marquee-track {
    animation-direction: reverse;
}
.marquee-track span {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--accent);
    opacity: 0.5;
    padding-right: 2rem;
}
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===================================
   NAVBAR LOGO SHRINK ON SCROLL
   =================================== */
.navbar.scrolled .logo-img {
    height: 50px;
    filter: none;
}

/* ===================================
   ENHANCED BUTTON EFFECTS
   =================================== */
.btn {
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}
.btn:hover::after {
    width: 400px;
    height: 400px;
}

/* ===================================
   ENHANCED FLIP CARDS (glow border)
   =================================== */
.flip-front {
    overflow: hidden;
}
.flip-front::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, transparent, var(--accent), transparent, var(--accent), transparent);
    border-radius: var(--radius);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
    animation: rotateBorder 3s linear infinite;
}
.flip-card:hover .flip-front::before { opacity: 0.5; }
@keyframes rotateBorder {
    to { transform: rotate(360deg); }
}

/* ===================================
   ANIMATED SECTION DIVIDER
   =================================== */
.section-divider {
    position: relative;
    overflow: hidden;
}
.section-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmerDivider 3s infinite;
}
@keyframes shimmerDivider {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* ===================================
   FLOATING SHAPES (decorative)
   =================================== */
.section {
    overflow: hidden;
}
.section::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    top: -100px;
    right: -100px;
    opacity: 0.3;
    pointer-events: none;
    animation: floatShape 8s ease-in-out infinite;
}
@keyframes floatShape {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 20px) scale(1.1); }
}

/* ===================================
   PROJECT CARD ENHANCED OVERLAY
   =================================== */
.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;
    border-radius: var(--radius);
}
.project-card:hover::before { opacity: 0.4; }
.project-overlay { z-index: 2; }

/* ===================================
   STATS BANNER ANIMATED GRADIENT
   =================================== */
.stats-banner {
    background: linear-gradient(-45deg, #1a1a1a, #2d2d2d, #1a1a1a, #333);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===================================
   HERO TITLE GLOW
   =================================== */
.hero-title {
    text-shadow: 0 0 60px rgba(140, 130, 121, 0.3);
}

/* ===================================
   SMOOTH IMAGE HOVER (about section)
   =================================== */
.stack-img {
    transition: transform 0.6s var(--ease), box-shadow 0.6s;
}
.image-stack:hover .stack-front {
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}

/* ===================================
   TESTIMONIAL ENHANCED
   =================================== */
.testimonial-quote {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}