* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --marron-clair: #C8A882;
            --marron-moyen: #8B6F47;
            --marron-fonce: #5C4033;
            --marron-profond: #3E2723;
            --creme: #F5EBE0;
            --creme-clair: #FFF8F0;
            --creme-cacahuete: #E8D5C4;
            --blanc: #FAFAFA;
            --or: #D4AF7A;
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Montserrat', sans-serif;
            background: var(--creme-clair);
            color: var(--marron-profond);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* Titres chic */
        h1, h2, h3, .section-title { font-family: 'Playfair Display', serif; }

        /* Scrollbar personnalisée */
        ::-webkit-scrollbar { width: 11px; }
        ::-webkit-scrollbar-track { background: var(--creme); }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(var(--marron-clair), var(--marron-moyen));
            border-radius: 10px;
            border: 2px solid var(--creme);
        }
        ::-webkit-scrollbar-thumb:hover { background: var(--marron-moyen); }
        ::selection { background: var(--marron-clair); color: var(--blanc); }

        /* Barre de progression de lecture */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            width: 0%;
            background: linear-gradient(90deg, var(--marron-clair), var(--or), var(--marron-moyen));
            z-index: 2000;
            transition: width 0.1s linear;
            box-shadow: 0 0 12px rgba(212, 175, 122, 0.6);
        }

        /* ===== HEADER (verre dépoli) ===== */
        header {
            position: fixed;
            width: 100%;
            background: transparent;
            z-index: 1000;
            border-bottom: 1px solid transparent;
            transition: all 0.45s var(--ease);
        }

        header.scrolled {
            background: rgba(250, 250, 250, 0.9);
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
            box-shadow: 0 8px 40px rgba(62, 39, 35, 0.15);
            border-bottom-color: rgba(200, 168, 130, 0.5);
        }

        /* Barre supérieure d'informations */
        .topbar {
            background: var(--marron-profond);
            color: var(--creme-cacahuete);
            font-size: 0.83rem;
            overflow: hidden;
            max-height: 46px;
            transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease), padding 0.45s var(--ease);
        }
        header.scrolled .topbar { max-height: 0; opacity: 0; }

        .topbar-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.55rem 5%;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .topbar-left, .topbar-right { display: flex; align-items: center; gap: 1.8rem; }
        .topbar span { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.3px; }
        .topbar i { color: var(--or); font-size: 0.9rem; }
        .topbar a { color: var(--creme-cacahuete); text-decoration: none; transition: color 0.3s; }
        .topbar a:hover { color: var(--or); }
        .topbar-social { display: flex; gap: 0.9rem; }
        .topbar-social a { font-size: 0.9rem; }
        @media (max-width: 900px) { .topbar { display: none; } }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 0.2rem 5%;
            position: relative;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            z-index: 1001;
            transition: opacity 0.3s;
        }

        .hamburger.active { opacity: 0; pointer-events: none; }

        .hamburger span {
            width: 30px;
            height: 3px;
            background: var(--marron-fonce);
            border-radius: 3px;
            transition: all 0.3s;
        }

        .phone-btn {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.6rem 1.2rem;
            background: linear-gradient(135deg, var(--marron-clair), var(--or));
            color: var(--marron-profond);
            text-decoration: none;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.88rem;
            letter-spacing: 0.3px;
            transition: all 0.4s var(--ease);
            box-shadow: 0 6px 20px rgba(200, 168, 130, 0.4);
            margin-left: auto;
            position: relative;
            overflow: hidden;
        }

        .phone-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            left: -100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
            transition: left 0.6s;
        }
        .phone-btn:hover::before { left: 100%; }

        .phone-btn:hover {
            color: var(--blanc);
            transform: translateY(-3px) scale(1.04);
            box-shadow: 0 10px 28px rgba(200, 168, 130, 0.6);
        }

        .phone-btn i { font-size: 0.95rem; animation: ring 2.2s infinite; }

        @keyframes ring {
            0%, 100% { transform: rotate(0deg); }
            10%, 30% { transform: rotate(-12deg); }
            20%, 40% { transform: rotate(12deg); }
            50% { transform: rotate(0deg); }
        }

        .logo {
            height: 118px;
            width: auto;
            margin-left: 3rem;
            filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(0,0,0,0.4));
            transition: all 0.45s var(--ease);
        }
        header.scrolled .logo {
            height: 62px;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
        }
        header.scrolled nav {
            padding-top: 0.55rem;
            padding-bottom: 0.55rem;
        }
        .logo:hover { transform: scale(1.05); }

        .nav-links {
            display: flex;
            gap: 2.5rem;
            list-style: none;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .close-menu {
            display: none;
            position: absolute;
            top: 20px;
            right: 20px;
            width: 35px;
            height: 35px;
            cursor: pointer;
            z-index: 1003;
        }
        .close-menu span {
            position: absolute;
            width: 25px;
            height: 3px;
            background: var(--marron-fonce);
            top: 50%;
            left: 50%;
        }
        .close-menu span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
        .close-menu span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

        .nav-links a {
            color: var(--marron-fonce);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.98rem;
            letter-spacing: 0.4px;
            transition: all 0.3s;
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .nav-links a i { font-size: 1rem; transition: transform 0.3s; }
        .nav-links a:hover { color: var(--marron-moyen); }
        .nav-links a:hover i { transform: translateY(-2px); }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--marron-clair), var(--or));
            border-radius: 2px;
            transition: width 0.35s var(--ease);
        }
        .nav-links a:hover::after,
        .nav-links a.active::after { width: 100%; }
        .nav-links a.active { color: var(--marron-moyen); }

        /* Menu en blanc quand le header flotte sur le hero (desktop) */
        @media (min-width: 769px) {
            header:not(.scrolled) .nav-links a {
                color: #ffffff;
                text-shadow: 0 2px 10px rgba(0,0,0,0.45);
            }
            header:not(.scrolled) .nav-links a:hover,
            header:not(.scrolled) .nav-links a.active { color: var(--or); }
        }
        @media (max-width: 768px) {
            header:not(.scrolled) .hamburger span { background: #ffffff; }
        }

        /* ===== MENU DÉROULANT SERVICES ===== */
        .dropdown { position: relative; }
        .dropdown-toggle { cursor: pointer; }
        .dropdown-toggle .caret { font-size: 0.65rem; transition: transform 0.3s var(--ease); }
        .dropdown:hover .dropdown-toggle .caret { transform: rotate(180deg); }
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(16px);
            min-width: 300px;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(16px) saturate(160%);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
            border: 1px solid rgba(200, 168, 130, 0.4);
            border-radius: 18px;
            box-shadow: 0 24px 55px rgba(62, 39, 35, 0.22);
            padding: 0.6rem;
            list-style: none;
            opacity: 0;
            visibility: hidden;
            transition: all 0.35s var(--ease);
            z-index: 1002;
        }
        .dropdown-menu::before {
            content: '';
            position: absolute;
            top: -18px; left: 0; right: 0; height: 18px;
        }
        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(10px);
        }
        .dropdown-menu li { width: 100%; }
        .dropdown-menu a {
            display: flex !important;
            align-items: center;
            gap: 0.9rem;
            padding: 0.7rem 0.9rem !important;
            border-radius: 12px;
            color: var(--marron-fonce) !important;
            font-size: 0.95rem !important;
            font-weight: 600;
            text-shadow: none !important;
            transition: all 0.25s var(--ease);
            white-space: nowrap;
        }
        .dropdown-menu a::after { display: none; }
        .dropdown-menu a:hover {
            background: linear-gradient(135deg, var(--creme-clair), var(--creme-cacahuete));
            color: var(--marron-profond) !important;
            transform: translateX(4px);
        }
        .dropdown-menu a.active {
            background: linear-gradient(135deg, var(--marron-clair), var(--or));
            color: var(--marron-profond) !important;
        }
        .dd-ico { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--marron-moyen); }
        .dd-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
        .dropdown-menu a:hover .dd-ico, .dropdown-menu a.active .dd-ico { color: var(--marron-profond); }

        @media (max-width: 768px) {
            .dropdown-menu {
                position: static;
                transform: none;
                opacity: 1;
                visibility: visible;
                background: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border: none;
                box-shadow: none;
                padding: 0.3rem 0 0.3rem 0.8rem;
                min-width: 0;
            }
            .dropdown-menu::before { display: none; }
            .dropdown-toggle .caret { display: none; }
            .dropdown-menu a { color: var(--marron-fonce) !important; font-size: 0.9rem !important; }
        }

        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                height: 100vh;
                width: 72%;
                max-width: 320px;
                background: rgba(232, 213, 196, 0.97);
                backdrop-filter: blur(16px);
                flex-direction: column;
                padding: 90px 30px 30px;
                box-shadow: -8px 0 40px rgba(0,0,0,0.25);
                transition: right 0.4s var(--ease);
                transform: none;
                left: auto;
                gap: 1.8rem;
                z-index: 1002;
            }
            .close-menu { display: block; }
            .nav-links.active { right: 0; }
            .hamburger { display: flex; }
            .phone-btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
            .logo, header.scrolled .logo { height: 90px; margin-left: 0; }
        }

        /* ===== HERO ===== */
        .hero {
            height: 100vh;
            min-height: 620px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            width: 100%;
            animation: slideshow 18s infinite;
        }

        @keyframes slideshow {
            0%, 30% {
                background: linear-gradient(135deg, rgba(62, 39, 35, 0.55), rgba(92, 64, 51, 0.35)),
                            url('./img/photos/couverture-en-tuiles-canal-sur-plaques-support-de-tuiles.jpg');
                background-size: cover; background-position: center;
            }
            33%, 63% {
                background: linear-gradient(135deg, rgba(62, 39, 35, 0.55), rgba(92, 64, 51, 0.35)),
                            url('./img/photos/repose-d-une-nouvelle-charpente-traditionnelle-avec-chevronnage-apr-es.jpg');
                background-size: cover; background-position: center;
            }
            66%, 96% {
                background: linear-gradient(135deg, rgba(62, 39, 35, 0.55), rgba(92, 64, 51, 0.35)),
                            url('./img/photos/pose-de-charpente-traditionnelle-sur-une-toiture-invers-ee-avec-support-en-osb-isolant-et-plaques-support-de-tuiles.jpg');
                background-size: cover; background-position: center;
            }
            100% {
                background: linear-gradient(135deg, rgba(62, 39, 35, 0.55), rgba(92, 64, 51, 0.35)),
                            url('./img/photos/couverture-en-tuiles-canal-sur-plaques-support-de-tuiles.jpg');
                background-size: cover; background-position: center;
            }
        }

        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 40%, transparent 30%, rgba(62, 39, 35, 0.45) 100%);
            pointer-events: none;
        }

        .hero-content {
            color: var(--blanc);
            max-width: 950px;
            padding: 2rem;
            position: relative;
            z-index: 2;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.55rem 1.4rem;
            background: rgba(250, 250, 250, 0.12);
            border: 1px solid rgba(212, 175, 122, 0.6);
            backdrop-filter: blur(6px);
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--creme);
            margin-bottom: 1.8rem;
            opacity: 0;
            animation: fadeInUp 1s var(--ease) 0.2s forwards;
        }
        .hero-badge i { color: var(--or); }

        .hero h1 {
            font-size: clamp(2.6rem, 6vw, 5.2rem);
            margin-bottom: 1.5rem;
            font-weight: 700;
            line-height: 1.08;
            color: #ffffff;
            text-shadow: 3px 3px 24px rgba(0,0,0,0.6);
            opacity: 0;
            animation: fadeInUp 1s var(--ease) 0.4s forwards;
        }
        .hero h1 .accent {
            background: linear-gradient(120deg, var(--or), var(--marron-clair));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            font-size: clamp(1.1rem, 2.2vw, 1.55rem);
            margin-bottom: 2.8rem;
            color: #f3e9dd;
            font-weight: 300;
            text-shadow: 2px 2px 15px rgba(0,0,0,0.6);
            opacity: 0;
            animation: fadeInUp 1s var(--ease) 0.6s forwards;
        }

        .hero-cta-wrap {
            display: flex;
            gap: 1.2rem;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeInUp 1s var(--ease) 0.8s forwards;
        }

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

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.85rem 2rem;
            background: linear-gradient(135deg, var(--marron-clair), var(--or));
            color: var(--marron-profond);
            text-decoration: none;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 0.98rem;
            letter-spacing: 0.5px;
            transition: all 0.4s var(--ease);
            box-shadow: 0 10px 28px rgba(212, 175, 122, 0.4);
            position: relative;
            overflow: hidden;
        }
        .cta-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            left: -100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }
        .cta-btn:hover::before { left: 100%; }
        .cta-btn:hover {
            transform: translateY(-5px) scale(1.04);
            box-shadow: 0 22px 55px rgba(212, 175, 122, 0.65);
        }
        .cta-btn i { font-size: 1rem; }

        .cta-btn.ghost {
            background: transparent;
            color: var(--blanc);
            border: 2px solid rgba(250, 250, 250, 0.5);
            box-shadow: none;
        }
        .cta-btn.ghost:hover {
            background: rgba(250, 250, 250, 0.12);
            border-color: var(--or);
        }

        /* Indicateur de scroll */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            color: var(--creme);
            font-size: 1.6rem;
            animation: bounce 2s infinite;
            cursor: pointer;
            opacity: 0.8;
        }
        @keyframes bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(12px); }
        }

        /* ===== BANDE STATS (grande entreprise) ===== */
        .stats {
            background: linear-gradient(135deg, var(--marron-fonce), var(--marron-profond));
            padding: 3.5rem 5%;
            width: 100%;
        }
        .stats-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }
        .stat-item { color: var(--creme); position: relative; }
        .stat-item:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -1rem;
            top: 20%;
            height: 60%;
            width: 1px;
            background: rgba(212, 175, 122, 0.3);
        }
        .stat-number {
            font-family: 'Playfair Display', serif;
            font-size: 3.4rem;
            font-weight: 800;
            color: var(--or);
            line-height: 1;
            margin-bottom: 0.5rem;
        }
        .stat-label {
            font-size: 0.95rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--creme-cacahuete);
            font-weight: 500;
        }
        @media (max-width: 768px) {
            .stat-item::after { display: none !important; }
            .stat-number { font-size: 2.6rem; }
        }

        /* ===== SECTIONS ===== */
        section { padding: 7rem 5%; width: 100%; }

        .section-eyebrow {
            display: block;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--marron-clair);
            margin-bottom: 0.8rem;
        }

        .section-title {
            text-align: center;
            font-size: clamp(2.2rem, 4vw, 3.2rem);
            margin-bottom: 4rem;
            color: var(--marron-fonce);
            position: relative;
            font-weight: 700;
        }
        .section-title::after {
            content: '';
            display: block;
            width: 90px;
            height: 4px;
            background: linear-gradient(90deg, var(--marron-clair), var(--or));
            margin: 1.2rem auto 0;
            border-radius: 2px;
        }

        /* ===== À PROPOS / PRÉSENTATION ===== */
        .about { background: #ffffff; }
        .about-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.05fr 1fr;
            gap: 4rem;
            align-items: center;
        }
        .about-text .section-eyebrow { text-align: left; margin-bottom: 1rem; }
        .about-text h2 {
            font-size: clamp(2rem, 3.4vw, 2.9rem);
            color: var(--marron-fonce);
            line-height: 1.15;
            margin-bottom: 1.3rem;
        }
        .about-text h2 span {
            display: block;
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--marron-clair);
            margin-top: 0.6rem;
        }
        .about-lead {
            font-size: 1.15rem;
            color: var(--marron-moyen);
            line-height: 1.9;
            margin-bottom: 2.2rem;
        }
        .about-contact { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.2rem; }
        .about-contact li { display: flex; align-items: center; gap: 1rem; font-weight: 600; color: var(--marron-fonce); font-size: 1.05rem; }
        .about-contact .ico {
            width: 48px; height: 48px;
            flex-shrink: 0;
            border-radius: 14px;
            background: linear-gradient(145deg, var(--creme-clair), var(--creme-cacahuete));
            display: flex; align-items: center; justify-content: center;
            color: var(--marron-moyen); font-size: 1.15rem;
        }
        .about-contact a { color: inherit; text-decoration: none; transition: color 0.3s; }
        .about-contact a:hover { color: var(--or); }
        .about-visual {
            background: transparent;
            padding: 0;
            box-shadow: none;
            border: none;
        }
        .about-visual img {
            width: 100%;
            height: auto;
            display: block;
            mix-blend-mode: multiply;
        }
        @media (max-width: 860px) {
            .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
        }

        .services { background: var(--creme); }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
            gap: 2.5rem;
            max-width: 1300px;
            margin: 0 auto;
        }

        .service-card {
            background: linear-gradient(160deg, #ffffff, var(--creme-clair));
            padding: 3rem 2.2rem;
            border-radius: 24px;
            text-align: center;
            transition: all 0.5s var(--ease);
            box-shadow: 0 12px 35px rgba(92, 64, 51, 0.08);
            border: 1px solid rgba(200, 168, 130, 0.25);
            position: relative;
            overflow: hidden;
        }
        .service-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--marron-clair), var(--or));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s var(--ease);
        }
        .service-card:hover::after { transform: scaleX(1); }
        .service-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 28px 65px rgba(139, 111, 71, 0.28);
            border-color: var(--marron-clair);
        }

        .service-icon {
            width: 88px;
            height: 88px;
            margin: 0 auto 1.6rem;
            border-radius: 24px;
            background: linear-gradient(145deg, var(--creme-clair), var(--creme-cacahuete));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--marron-moyen);
            box-shadow: inset 0 2px 6px rgba(255,255,255,0.6), 0 8px 20px rgba(139, 111, 71, 0.12);
            transition: all 0.5s var(--ease);
        }
        .service-icon svg {
            width: 46px;
            height: 46px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.5s var(--ease);
        }
        .service-card:hover .service-icon {
            background: linear-gradient(145deg, var(--marron-clair), var(--or));
            color: var(--blanc);
            transform: translateY(-4px);
            box-shadow: 0 16px 34px rgba(200, 168, 130, 0.45);
        }
        .service-card:hover .service-icon svg { transform: scale(1.12) rotate(-4deg); }

        .service-card h3 {
            font-size: 1.6rem;
            margin-bottom: 1rem;
            color: var(--marron-fonce);
            font-weight: 700;
        }
        .service-card p { color: var(--marron-moyen); line-height: 1.8; font-size: 0.98rem; }

        /* ===== GALERIE ===== */
        .gallery {
            background: var(--creme-clair);
            overflow: hidden;
            padding-left: 0;
            padding-right: 0;
        }
        .gallery .section-title, .gallery .section-eyebrow { padding: 0 5%; }

        .gallery-viewport {
            overflow-x: auto;
            overflow-y: hidden;
            cursor: grab;
            scrollbar-width: none;
            padding: 1rem 5% 2rem;
        }
        .gallery-viewport::-webkit-scrollbar { display: none; }
        .gallery-viewport:active { cursor: grabbing; }

        .gallery-grid {
            display: flex;
            gap: 1.8rem;
            width: max-content;
            animation: scroll 90s linear infinite;
            will-change: transform;
            backface-visibility: hidden;
        }
        .gallery-viewport:hover .gallery-grid { animation-play-state: paused; }

        @keyframes scroll {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }

        .gallery-item {
            min-width: 400px;
            width: 400px;
            height: 360px;
            border-radius: 18px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            box-shadow: 0 14px 45px rgba(0,0,0,0.15);
            transition: all 0.45s var(--ease);
            flex-shrink: 0;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 0.7s var(--ease);
        }
        .gallery-item:hover { transform: translateY(-12px); box-shadow: 0 28px 70px rgba(0,0,0,0.3); }
        .gallery-item:hover img { transform: scale(1.1); }

        .gallery-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(62, 39, 35, 0.85) 0%, rgba(62, 39, 35, 0.1) 45%, transparent 70%);
            z-index: 1;
            transition: opacity 0.4s;
        }

        .gallery-item span {
            position: absolute;
            bottom: 1.8rem;
            left: 1.8rem;
            right: 1.8rem;
            color: var(--blanc);
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            font-weight: 600;
            z-index: 2;
            transform: translateY(8px);
            transition: transform 0.4s var(--ease);
        }
        .gallery-item::after {
            content: '';
            position: absolute;
            bottom: 1.4rem;
            left: 1.8rem;
            width: 40px;
            height: 3px;
            background: var(--or);
            z-index: 2;
            opacity: 0;
            transition: opacity 0.4s var(--ease);
        }
        .gallery-item:hover span { transform: translateY(-4px); }
        .gallery-item:hover::after { opacity: 1; }

        .gallery-hint {
            text-align: center;
            color: var(--marron-moyen);
            font-size: 0.9rem;
            letter-spacing: 1px;
            margin-top: 0.5rem;
        }
        .gallery-hint i { color: var(--marron-clair); }

        /* ===== AVANT / APRÈS ===== */
        .beforeafter { background: var(--creme); }
        .ba-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 2.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        .ba-card {
            background: #fff;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 12px 35px rgba(92, 64, 51, 0.1);
            border: 1px solid rgba(200, 168, 130, 0.25);
            transition: all 0.5s var(--ease);
        }
        .ba-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 24px 55px rgba(139, 111, 71, 0.25);
        }
        .ba-pair { display: grid; grid-template-columns: 1fr 1fr; }
        .ba-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
        .ba-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
        .ba-card:hover .ba-shot img { transform: scale(1.06); }
        .ba-shot + .ba-shot { border-left: 3px solid #fff; }
        .ba-tag {
            position: absolute;
            top: 14px;
            left: 14px;
            padding: 0.35rem 1rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            z-index: 2;
        }
        .ba-tag.before { background: rgba(62, 39, 35, 0.85); color: var(--creme); }
        .ba-tag.after { background: linear-gradient(135deg, var(--marron-clair), var(--or)); color: var(--marron-profond); }
        .ba-title {
            padding: 1.4rem;
            text-align: center;
            font-family: 'Playfair Display', serif;
            font-size: 1.3rem;
            color: var(--marron-fonce);
            font-weight: 700;
        }

        /* ===== CONTACT ===== */
        .contact {
            background: linear-gradient(135deg, var(--marron-fonce), var(--marron-profond));
            color: var(--blanc);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .contact::before {
            content: '';
            position: absolute;
            top: -50%; left: -10%;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(212, 175, 122, 0.12), transparent 70%);
            pointer-events: none;
        }
        .contact .section-title { color: var(--creme); }
        .contact .section-eyebrow { color: var(--or); }

        .contact-form {
            max-width: 620px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 1.3rem;
            position: relative;
            z-index: 2;
        }
        .contact-form input,
        .contact-form textarea {
            padding: 1.2rem 1.4rem;
            border-radius: 14px;
            font-size: 1rem;
            font-family: 'Montserrat', sans-serif;
            background: rgba(250, 250, 250, 0.06);
            color: var(--blanc);
            border: 1.5px solid rgba(200, 168, 130, 0.4);
            transition: all 0.4s var(--ease);
        }
        .contact-form input::placeholder,
        .contact-form textarea::placeholder { color: rgba(245, 235, 224, 0.6); }
        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: var(--or);
            background: rgba(250, 250, 250, 0.12);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(212, 175, 122, 0.2);
        }
        .contact-form textarea { min-height: 150px; resize: vertical; }

        .contact-form button {
            padding: 0.95rem;
            background: linear-gradient(135deg, var(--marron-clair), var(--or));
            color: var(--marron-profond);
            border: none;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.4s var(--ease);
            position: relative;
            overflow: hidden;
        }
        .contact-form button::before {
            content: '';
            position: absolute;
            inset: 0;
            left: -100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }
        .contact-form button:hover::before { left: 100%; }
        .contact-form button:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 35px rgba(212, 175, 122, 0.5);
        }

        /* ===== FOOTER ===== */
        footer {
            background: linear-gradient(135deg, var(--marron-profond), #2a1a14);
            color: var(--creme);
            padding: 4rem 5% 2rem;
        }
        .footer-content {
            max-width: 1300px;
            margin: 0 auto 2.5rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
        }
        .footer-logo {
            height: 100px;
            width: auto;
            margin-bottom: 1.2rem;
            filter: brightness(0) invert(1);
            opacity: 0.95;
        }
        .footer-section h3 {
            color: var(--or);
            margin-bottom: 1.2rem;
            font-size: 1.35rem;
            font-weight: 700;
        }
        .footer-section p,
        .footer-section a {
            color: var(--creme-cacahuete);
            line-height: 2;
            text-decoration: none;
            transition: color 0.3s;
            font-size: 0.96rem;
        }
        .footer-section p i { color: var(--marron-clair); width: 20px; }
        .footer-section a:hover { color: var(--or); }

        .social-links { display: flex; gap: 1rem; margin-top: 1.2rem; }
        .social-links a {
            width: 46px; height: 46px;
            background: rgba(200, 168, 130, 0.15);
            border: 1px solid rgba(212, 175, 122, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--or);
            font-size: 1.2rem;
            transition: all 0.4s var(--ease);
        }
        .social-links a:hover {
            background: linear-gradient(135deg, var(--marron-clair), var(--or));
            color: var(--marron-profond);
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 10px 25px rgba(212, 175, 122, 0.4);
        }
        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(200, 168, 130, 0.2);
            color: var(--creme-cacahuete);
            font-size: 0.88rem;
        }

        /* ===== ANIMATIONS D'APPARITION AU SCROLL ===== */
        .reveal {
            opacity: 0;
            transform: translateY(45px);
            transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
            will-change: opacity, transform;
        }
        .reveal.in { opacity: 1; transform: none; }
        .reveal.left { transform: translateX(-50px); }
        .reveal.right { transform: translateX(50px); }
        .reveal.left.in, .reveal.right.in { transform: none; }
        .reveal[data-delay="1"] { transition-delay: 0.08s; }
        .reveal[data-delay="2"] { transition-delay: 0.16s; }
        .reveal[data-delay="3"] { transition-delay: 0.24s; }
        .reveal[data-delay="4"] { transition-delay: 0.32s; }
        .reveal[data-delay="5"] { transition-delay: 0.40s; }

        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1 !important; transform: none !important; }
            .hero, .hero-badge, .hero h1, .hero p, .hero-cta-wrap { animation: none !important; opacity: 1 !important; }
        }

        @media (max-width: 768px) {
            section { padding: 4.5rem 5%; }
            .gallery-item { min-width: 300px; width: 300px; height: 280px; }
        }
    

        /* ===== PAGES SERVICE ===== */
        .page-hero {
            min-height: 62vh;
            display: flex; align-items: center; justify-content: center;
            text-align: center; position: relative; overflow: hidden;
            background-size: cover; background-position: center;
            padding: 9rem 5% 4rem;
        }
        .page-hero::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(62,39,35,0.74), rgba(92,64,51,0.55));
        }
        .page-hero-content { position: relative; z-index: 2; color: var(--blanc); max-width: 860px; }
        .page-hero-icon {
            width: 92px; height: 92px; margin: 0 auto 1.6rem; border-radius: 24px;
            background: rgba(255,255,255,0.12); border: 1px solid rgba(212,175,122,0.55);
            display: flex; align-items: center; justify-content: center; color: #fff;
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        }
        .page-hero-icon svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
        .breadcrumb { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--creme-cacahuete); margin-bottom: 1.2rem; }
        .breadcrumb a { color: var(--creme-cacahuete); text-decoration: none; transition: color 0.3s; }
        .breadcrumb a:hover { color: var(--or); }
        .breadcrumb span { color: var(--or); }
        .page-hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); color: #fff; text-shadow: 2px 2px 18px rgba(0,0,0,0.5); margin-bottom: 1rem; line-height: 1.1; }
        .page-hero p { font-size: clamp(1.05rem, 2vw, 1.35rem); color: #f3e9dd; font-weight: 300; text-shadow: 1px 1px 12px rgba(0,0,0,0.5); }

        .service-intro { padding: 6rem 5%; background: var(--creme-clair); }
        .service-intro-inner { max-width: 900px; margin: 0 auto; text-align: center; }
        .service-intro h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--marron-fonce); margin-bottom: 1.6rem; }
        .service-intro p { font-size: 1.12rem; color: var(--marron-moyen); line-height: 1.95; margin-bottom: 1.2rem; }

        .features { padding: 5rem 5%; background: var(--creme); }
        .features-grid { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
        .feature { background: linear-gradient(160deg, #fff, var(--creme-clair)); border-radius: 20px; padding: 2.2rem; border: 1px solid rgba(200,168,130,0.25); box-shadow: 0 10px 30px rgba(92,64,51,0.08); transition: all 0.4s var(--ease); }
        .feature:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(139,111,71,0.2); }
        .f-ico { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(145deg, var(--marron-clair), var(--or)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem; margin-bottom: 1.2rem; }
        .feature h3 { color: var(--marron-fonce); font-size: 1.22rem; margin-bottom: 0.6rem; }
        .feature p { color: var(--marron-moyen); line-height: 1.7; font-size: 0.97rem; }

        .service-gallery { padding: 5rem 5%; background: var(--creme-clair); }
        .sg-grid { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
        .sg-item { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 12px 35px rgba(0,0,0,0.14); position: relative; }
        .sg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
        .sg-item:hover img { transform: scale(1.07); }

        .cta-band { padding: 5.5rem 5%; background: linear-gradient(135deg, var(--marron-fonce), var(--marron-profond)); text-align: center; color: var(--blanc); }
        .cta-band h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--creme); margin-bottom: 1rem; }
        .cta-band p { color: var(--creme-cacahuete); margin-bottom: 2.2rem; font-size: 1.1rem; }

        .other-services { padding: 5.5rem 5%; background: var(--creme); text-align: center; }
        .os-grid { max-width: 1150px; margin: 2.5rem auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
        .os-card { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 1.8rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid rgba(200,168,130,0.25); text-decoration: none; color: var(--marron-fonce); font-weight: 600; transition: all 0.35s var(--ease); }
        .os-card:hover { transform: translateY(-6px); box-shadow: 0 16px 35px rgba(139,111,71,0.2); border-color: var(--marron-clair); }
        .os-card .dd-ico { width: 48px; height: 48px; color: var(--marron-moyen); }
        .os-card .dd-ico svg { width: 32px; height: 32px; }

        .footer-tagline { line-height: 1.5; max-width: 260px; }

        .footer-bottom a { color: inherit; text-decoration: underline; transition: color 0.3s; }
        .footer-bottom a:hover { color: var(--or); }

        /* ===== PAGES LÉGALES ===== */
        .legal-hero { min-height: 40vh; }
        .legal { padding: 6rem 5% 5rem; background: var(--creme-clair); }
        .legal-inner { max-width: 820px; margin: 0 auto; }
        .legal-inner > .updated { color: var(--marron-clair); font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 2.5rem; }
        .legal-inner h2 { font-family: 'Playfair Display', serif; color: var(--marron-fonce); font-size: 1.45rem; margin: 2.4rem 0 0.9rem; }
        .legal-inner p, .legal-inner li { color: var(--marron-moyen); line-height: 1.85; margin-bottom: 0.8rem; }
        .legal-inner ul { padding-left: 1.4rem; margin-bottom: 1.2rem; }
        .legal-inner a { color: var(--marron-fonce); }
        .legal-inner a:hover { color: var(--or); }
        .legal-inner .todo { background: rgba(212,175,122,0.15); border-left: 3px solid var(--or); padding: 0.15rem 0.5rem; border-radius: 4px; font-style: italic; }