Voici le code complet et corrigé pour `about.php` avec les vidéos en dernière section :

```php

<!-- VSF FONT-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap" rel="stylesheet">
    <!-- FIN DU CODE LEAGUE SPARTAN -->
    <style>
    /* === CHARGEMENT DES POLICES LOCALES === */
    @font-face {
        font-family: 'Sansation';
        src: url('/fonts/Sansation_Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Sansation';
        src: url('/fonts/Sansation_Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    /* === VARIABLES === */
    :root {
        --primary: #232b4d;
        --cream: #fff9ed;
        --vintage-paper: #efdebd;
        --header-bg: #efdebd;
        --dark: #232b4d;
        --white: #ffffff;
        --transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        --transition-fast: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* === RESET ET BASE === */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Sansation', Arial, sans-serif;
        font-weight: 400;
        line-height: 1.7;
        color: var(--dark);
        background-color: var(--cream);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Sansation', Arial, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 4px;
    }

    strong {
        font-weight: 700;
        letter-spacing: 2px;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* === GRAIN TEXTURE === */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.03;
        pointer-events: none;
        z-index: 9999;
        animation: grain 8s steps(10) infinite;
    }

    @keyframes grain {
        0%, 100% { transform: translate(0, 0); }
        10% { transform: translate(-5%, -5%); }
        30% { transform: translate(3%, -8%); }
        50% { transform: translate(-8%, 3%); }
        70% { transform: translate(8%, 8%); }
        90% { transform: translate(-3%, 5%); }
    }

    /* === HEADER === */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: rgba(239, 222, 189, 0.95);
        backdrop-filter: blur(15px);
        transition: var(--transition-fast);
        box-shadow: 0 5px 30px rgba(239, 222, 189, 0.3);
    }

    .header.scrolled {
        background: rgba(239, 222, 189, 0.98);
        box-shadow: 0 8px 40px rgba(239, 222, 189, 0.4);
    }

    .header-container {
        max-width: 1800px;
        margin: 0 auto;
        padding: 5px 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    /* === LOGO === */
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        transition: var(--transition-fast);
        filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.15));
    }

    .logo::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(35, 43, 77, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: -1;
        opacity: 0;
    }

    .logo:hover::before {
        transform: translate(-50%, -50%) scale(2);
        opacity: 1;
    }

    /* ✅ LOGO NE BOUGE PLUS À GAUCHE AU HOVER */
    .logo:hover {
        transform: translateX(-50%) translateY(-3px) scale(1.03);
        filter: drop-shadow(0 8px 25px rgba(35, 43, 77, 0.3)) drop-shadow(0 0 20px rgba(35, 43, 77, 0.15));
    }

    .logo img {
        height: 120px;
        width: auto;
        display: block;
    }

    /* === NAV === */
    .nav-left,
    .nav-right {
        display: flex;
        gap: 42px;
        align-items: center;
    }

    .nav-left {
        justify-content: flex-start;
    }

    .nav-right {
        justify-content: flex-end;
        gap: 20px;
    }

    /* === MENU ITEMS === */
    .nav-item {
        position: relative;
    }

    .nav-link {
        color: var(--primary);
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: var(--transition-fast);
        padding: 12px 0;
        display: inline-block;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
    }

    .nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--primary);
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        transform: translateX(-50%);
    }

    .nav-link:hover::before,
    .nav-item:hover .nav-link::before {
        width: 100%;
    }

    .nav-link:hover,
    .nav-item:hover .nav-link {
        text-shadow: 0 4px 15px rgba(35, 43, 77, 0.3);
        transform: translateY(-2px);
    }

    .nav-link.active {
        color: var(--dark);
    }

    .nav-link.active::before {
        width: 100%;
        background: var(--dark);
    }

    /* === DROPDOWN === */
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        min-width: 280px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        box-shadow: 0 15px 60px rgba(35, 43, 77, 0.25);
        border-radius: 0;
        overflow: hidden;
        margin-top: 15px;
    }

    /* Dropdown 2 colonnes pour Nos Pièces Vintage */
    .dropdown-menu.dropdown-grid {
        min-width: 600px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 18px 20px;
        transition: var(--transition-fast);
        border-bottom: 1px solid rgba(35, 43, 77, 0.1);
    }

    .dropdown-grid .dropdown-item {
        border-right: 1px solid rgba(35, 43, 77, 0.1);
    }

    .dropdown-grid .dropdown-item:nth-child(2n) {
        border-right: none;
    }

    .dropdown-item:last-child,
    .dropdown-item:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }

    .dropdown-item:hover {
        background: var(--primary);
    }

    .dropdown-item-image {
        width: 70px;
        height: 55px;
        object-fit: cover;
        flex-shrink: 0;
        filter: grayscale(0.3);
        transition: var(--transition-fast);
    }

    .dropdown-item:hover .dropdown-item-image {
        filter: grayscale(0);
        transform: scale(1.1);
    }

    .dropdown-item-text {
        flex: 1;
    }

    .dropdown-item-text h4 {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: var(--primary);
        margin-bottom: 4px;
        transition: var(--transition-fast);
    }

    .dropdown-item:hover .dropdown-item-text h4 {
        color: var(--white);
    }

    .dropdown-item-text p {
        font-size: 0.8rem;
        color: #666;
        font-style: italic;
        line-height: 1.3;
        transition: var(--transition-fast);
        font-weight: 400;
    }

    .dropdown-item:hover .dropdown-item-text p {
        color: rgba(255, 255, 255, 0.85);
    }

    /* ✅ NOUVEAU : Style pour la catégorie de blog active dans le dropdown */
    .dropdown-menu .dropdown-item.active-cat {
        background: linear-gradient(135deg, #C89D66 0%, #A67C52 100%);
        border-color: transparent;
    }

    .dropdown-menu .dropdown-item.active-cat .dropdown-item-text h4 {
        color: #fff !important;
        font-weight: 700;
    }

    .dropdown-menu .dropdown-item.active-cat .dropdown-item-text p {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .dropdown-menu .dropdown-item.active-cat::before {
        content: '→';
        position: absolute;
        left: 10px;
        font-size: 16px;
        color: #fff;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    /* === CONTACT BUTTON (DESKTOP) === */
    .btn-contact {
        padding: 11px 32px;
        background: var(--vintage-paper);
        color: var(--primary);
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: var(--transition-fast);
        border: 2px solid var(--vintage-paper);
        position: relative;
        overflow: hidden;
        z-index: 1;
        display: inline-block;
        white-space: nowrap;
    }

    .btn-contact::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: var(--primary);
        z-index: -1;
        transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .btn-contact:hover {
        border-color: var(--primary);
        color: var(--white);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(35, 43, 77, 0.4);
    }

    .btn-contact:hover::before {
        width: 400%;
        height: 600%;
    }

    /* === ICÔNE PANIER (PETIT À DROITE DU CONTACT) === */
    .cart-icon-wrapper {
        position: relative;
    }

    .cart-icon-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: 2px solid var(--primary);
        color: var(--primary);
        transition: var(--transition-fast);
        position: relative;
    }

    .cart-icon-link::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--primary);
        transform: scale(0);
        transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: -1;
    }

    .cart-icon-link:hover {
        color: var(--white);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(35, 43, 77, 0.4);
    }

    .cart-icon-link:hover::before {
        transform: scale(1);
    }

    .cart-icon-svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        flex-shrink: 0;
    }

    .cart-count-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #e74c3c;
        color: var(--white);
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        box-shadow: 0 3px 10px rgba(231, 76, 60, 0.5);
        animation: pulse 2s infinite;
        z-index: 10;
    }

    .cart-count-badge.empty {
        display: none;
    }

    @keyframes pulse {
        0%, 100% { 
            transform: scale(1); 
            box-shadow: 0 3px 10px rgba(231, 76, 60, 0.5);
        }
        50% { 
            transform: scale(1.15); 
            box-shadow: 0 5px 20px rgba(231, 76, 60, 0.8);
        }
    }

    /* === BURGER MENU === */
    .burger-menu {
        display: none;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        z-index: 1002;
        width: 35px;
        height: 30px;
        position: relative;
    }

    .burger-line {
        width: 100%;
        height: 3px;
        background: var(--primary);
        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        border-radius: 3px;
    }

    .burger-menu.active .burger-line:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .burger-menu.active .burger-line:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }

    .burger-menu.active .burger-line:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* === MOBILE MENU === */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: linear-gradient(135deg, rgba(35, 43, 77, 0.98) 0%, rgba(35, 43, 77, 0.95) 100%);
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 100px 30px 60px 30px;
        transition: right 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 999;
        opacity: 0;
        overflow-y: auto;
    }

    .mobile-menu.active {
        right: 0;
        opacity: 1;
    }

    .mobile-menu a,
    .mobile-menu .mobile-link {
        color: var(--white);
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: var(--transition-fast);
        padding: 12px 30px;
        border: 2px solid transparent;
        opacity: 0;
        transform: translateX(50px);
        animation: slideInMobile 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        text-align: center;
        position: relative;
        width: 90%;
        max-width: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .mobile-menu.active a:nth-child(1) { animation-delay: 0.1s; }
    .mobile-menu.active a:nth-child(2) { animation-delay: 0.15s; }
    .mobile-menu.active a:nth-child(3) { animation-delay: 0.2s; }
    .mobile-menu.active a:nth-child(4) { animation-delay: 0.25s; }
    .mobile-menu.active a:nth-child(5) { animation-delay: 0.3s; }
    .mobile-menu.active .mobile-call-split-wrapper { animation-delay: 0.35s; }

    @keyframes slideInMobile {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .mobile-menu a:hover {
        border-color: var(--white);
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.03);
    }

    .mobile-menu a.active {
        background: var(--vintage-paper);
        color: var(--primary);
        border-color: var(--vintage-paper);
    }

    /* Badge panier dans menu mobile */
    .mobile-menu a .cart-count-badge {
        position: static;
        display: inline-flex;
        margin-left: 0;
        animation: none;
        margin-top: 0;
    }

    /* Icône panier mobile */
    .mobile-cart-icon {
        width: 18px;
        height: 18px;
        fill: currentColor;
        flex-shrink: 0;
    }

    /* === BOUTONS MOBILE SPLIT (Maps + Contact) === */
    .mobile-call-split-wrapper {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 25px;
        opacity: 0;
        transform: translateX(50px);
        animation: slideInMobile 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        width: 90%;
        max-width: 350px;
    }

    .mobile-call-btn {
        padding: 16px 30px;
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        border: 2px solid;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: var(--transition-fast);
        border-radius: 4px;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .mobile-call-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: -1;
    }

    /* BOUTON MAPS - Design amélioré */
    .mobile-call-btn.btn-maps {
        background: transparent;
        color: #34A853;
        border-color: #34A853;
    }

    .mobile-call-btn.btn-maps::before {
        background: #34A853;
    }

    .mobile-call-btn.btn-maps:hover {
        color: var(--white);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(52, 168, 83, 0.4);
    }

    .mobile-call-btn.btn-maps:hover::before {
        transform: scaleX(1);
    }

    /* BOUTON CONTACT - Design amélioré avec NOUVELLE ICÔNE */
    .mobile-call-btn.btn-contact-mobile {
        background: var(--vintage-paper);
        color: var(--primary);
        border-color: var(--vintage-paper);
    }

    .mobile-call-btn.btn-contact-mobile::before {
        background: var(--primary);
    }

    .mobile-call-btn.btn-contact-mobile:hover {
        color: var(--white);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(239, 222, 189, 0.4);
    }

    .mobile-call-btn.btn-contact-mobile:hover::before {
        transform: scaleX(1);
    }

    .mobile-call-btn svg {
        width: 18px;
        height: 18px;
    }

    /* === MAIN CONTENT === */
    .main-content {
        flex: 1;
        margin-top: 130px;
    }

    /* === UTILITAIRES === */
    .container {
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5%;
    }

    .section {
        padding: 120px 5%;
    }

    .section-title {
        font-size: clamp(2.8rem, 5vw, 4.5rem);
        text-align: center;
        margin-bottom: 80px;
        color: var(--primary);
        font-weight: 700;
        letter-spacing: 6px;
    }

    .btn {
        display: inline-block;
        padding: 20px 55px;
        background: var(--vintage-paper);
        color: var(--primary);
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        transition: var(--transition-fast);
        cursor: pointer;
        border: 2px solid var(--vintage-paper);
        text-align: center;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: var(--primary);
        z-index: -1;
        transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .btn:hover {
        color: var(--white);
        border-color: var(--primary);
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(35, 43, 77, 0.3);
    }

    .btn:hover::before {
        width: 400%;
        height: 600%;
    }

    .btn-secondary {
        background: transparent;
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-secondary::before {
        background: var(--primary);
    }

    .btn-secondary:hover {
        color: var(--white);
        border-color: var(--primary);
    }

    /* === RESPONSIVE === */
    @media (max-width: 1400px) {
        .nav-left,
        .nav-right {
            gap: 38px;
        }
        
        .logo img {
            height: 110px;
        }
    }

    @media (max-width: 1200px) {
        .nav-left,
        .nav-right {
            gap: 35px;
        }
        
        .logo img {
            height: 100px;
        }
        
        .nav-link {
            font-size: 0.76rem;
        }
        
        .dropdown-menu.dropdown-grid {
            min-width: 500px;
        }
    }

    @media (max-width: 1024px) {
        .nav-left,
        .nav-right {
            gap: 30px;
        }
        
        .nav-link {
            font-size: 0.72rem;
        }
        
        .logo img {
            height: 90px;
        }
        
        .dropdown-menu {
            min-width: 240px;
        }
        
        .dropdown-menu.dropdown-grid {
            min-width: 480px;
        }
        
        .dropdown-item-image {
            width: 60px;
            height: 45px;
        }
    }

    @media (max-width: 900px) {
        .nav-left,
        .nav-right {
            display: none;
        }
        
        .logo {
            position: relative;
            left: auto;
            transform: none;
        }
        
        .logo:hover {
            transform: translateY(-3px) scale(1.03);
        }
        
        .burger-menu {
            display: flex;
            position: absolute;
            right: 5%;
        }
        
        .main-content {
            margin-top: 115px;
        }
        
        .header-container {
            padding: 5px 5%;
            justify-content: flex-start;
        }
        
        .logo img {
            height: 110px;
        }
    }

    @media (max-width: 768px) {
        .section {
            padding: 80px 5%;
        }
        
        .section-title {
            margin-bottom: 60px;
        }
        
        .mobile-menu a {
            font-size: 1rem;
            padding: 10px 25px;
        }
        
        .logo img {
            height: 105px;
        }
        
        .main-content {
            margin-top: 110px;
        }
    }

    @media (max-width: 480px) {
        .logo img {
            height: 95px;
        }
        
        .mobile-menu a {
            font-size: 0.95rem;
            padding: 10px 20px;
        }
        
        .mobile-call-btn {
            padding: 14px 25px;
            font-size: 0.85rem;
        }
        
        .section {
            padding: 60px 5%;
        }
        
        .main-content {
            margin-top: 100px;
        }
    }
    </style>
    
</head>
<body>

    <!-- HEADER -->
    <header class="header">
        <div class="header-container">
            
            <!-- NAV LEFT -->
            <nav class="nav-left">
                <!-- ACCUEIL -->
                <div class="nav-item">
                    <a href="https://atelierbalagan.com" class="nav-link ">
                        Accueil
                    </a>
                </div>
                
                <!-- L'ATELIER → services.php (lien direct) -->
                <div class="nav-item">
                    <a href="https://atelierbalagan.com/services.php" class="nav-link ">
                        L'Atelier
                    </a>
                </div>
                
                <!-- NOS PIÈCES VINTAGE → pieces.php (AVEC DROPDOWN) -->
                <div class="nav-item">
                    <a href="https://atelierbalagan.com/pieces.php" class="nav-link ">
                        Nos Pièces Vintage
                    </a>
                    <div class="dropdown-menu dropdown-grid">
                                                <a href="https://atelierbalagan.com/category/chaises" class="dropdown-item">
                                                            <img src="" alt="Chaises" class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Chaises</h4>
                                <p>Chaises, fauteuils et assises design</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/category/decoration" class="dropdown-item">
                                                            <img src="" alt="Décoration" class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Décoration</h4>
                                <p>Objets et accessoires décoratifs</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/category/luminaires" class="dropdown-item">
                                                            <img src="" alt="Luminaires" class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Luminaires</h4>
                                <p>Lampes et luminaires d&#039;époque</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/category/meubles" class="dropdown-item">
                                                            <img src="" alt="Meubles" class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Meubles</h4>
                                <p>Collection de meubles vintage et design</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/category/signes" class="dropdown-item">
                                                            <img src="" alt="Signés" class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Signés</h4>
                                <p>Pièces signées par des designers reconnus</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/category/tables" class="dropdown-item">
                                                            <img src="" alt="Tables" class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Tables</h4>
                                <p>Tables basses, tables à manger et tables d&#039;appoint</p>
                            </div>
                        </a>
                                            </div>
                </div>
            </nav>
            
            <!-- LOGO CENTER -->
            <div class="logo">
                <a href="https://atelierbalagan.com">
                    <img src="https://atelierbalagan.com/img/ab.png" alt="Atelier Balagan">
                </a>
            </div>
            
            <!-- NAV RIGHT -->
            <nav class="nav-right">
                <!-- ✅ ACTUALITÉS CORRIGÉ (DROPDOWN AVEC DÉTECTION ACTIVE) -->
                <div class="nav-item">
                    <a href="https://atelierbalagan.com/actualites.php" class="nav-link ">
                        Actualités
                    </a>
                    <div class="dropdown-menu">
                                                <a href="https://atelierbalagan.com/blog/foires-expositions/" 
                           class="dropdown-item ">
                                                            <img src="https://atelierbalagan.com/img/default-blog.webp" 
                                     alt="Foires &amp; Expositions" 
                                     class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Foires &amp; Expositions</h4>
                                <p>Les événements incontournables du mobilier vintage à Marrakech et au Maroc. Agenda complet des foires, salons et expositions de design rétro.</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/blog/boutiques-inspirations/" 
                           class="dropdown-item ">
                                                            <img src="https://atelierbalagan.com/img/default-blog.webp" 
                                     alt="Boutiques &amp; Inspirations" 
                                     class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Boutiques &amp; Inspirations</h4>
                                <p>Nos adresses préférées et sources d&#039;inspiration à Marrakech. Découvrez les meilleures boutiques vintage, décoration et mobilier design.</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/blog/designers-iconiques/" 
                           class="dropdown-item ">
                                                            <img src="https://atelierbalagan.com/img/default-blog.webp" 
                                     alt="Designers Iconiques" 
                                     class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Designers Iconiques</h4>
                                <p>Les créateurs qui ont marqué l&#039;histoire du design 1950-1980. Portraits des designers emblématiques du mobilier vintage et leurs créations mythiques.</p>
                            </div>
                        </a>
                                                <a href="https://atelierbalagan.com/blog/selection-presse/" 
                           class="dropdown-item ">
                                                            <img src="https://atelierbalagan.com/img/default-blog.webp" 
                                     alt="Sélection Presse" 
                                     class="dropdown-item-image">
                                                        <div class="dropdown-item-text">
                                <h4>Sélection Presse</h4>
                                <p>Atelier Balagan dans les médias marocains et internationaux. Revue de presse, articles et reportages sur notre atelier de mobilier vintage.</p>
                            </div>
                        </a>
                                            </div>
                </div>
                
                <!-- BOUTON CONTACT -->
                <a href="https://atelierbalagan.com/contact.php" class="btn-contact">Contact</a>
                
                <!-- ICÔNE PANIER (petit à droite) -->
                                <div class="cart-icon-wrapper">
                    <a href="https://atelierbalagan.com/cart.php" class="cart-icon-link">
                        <svg class="cart-icon-svg" viewBox="0 0 24 24">
                            <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                        </svg>
                        <span class="cart-count-badge empty" id="cartCountDesktop">
                            0                        </span>
                    </a>
                </div>
                            </nav>
            
            <!-- BURGER MENU -->
            <div class="burger-menu" onclick="toggleMobileMenu()">
                <span class="burger-line"></span>
                <span class="burger-line"></span>
                <span class="burger-line"></span>
            </div>
        </div>
    </header>
    
    <!-- MOBILE MENU -->
    <div class="mobile-menu" id="mobileMenu">
        <a href="https://atelierbalagan.com" 
           class=""
           onclick="toggleMobileMenu()">
            Accueil
        </a>
        <a href="https://atelierbalagan.com/services.php" 
           class=""
           onclick="toggleMobileMenu()">
            L'Atelier
        </a>
        <a href="https://atelierbalagan.com/pieces.php" 
           class=""
           onclick="toggleMobileMenu()">
            Nos Pièces Vintage
        </a>
        <a href="https://atelierbalagan.com/actualites.php" 
           class=""
           onclick="toggleMobileMenu()">
            Actualités
        </a>
        
                <a href="https://atelierbalagan.com/cart.php" 
           class=""
           onclick="toggleMobileMenu()">
            <svg class="mobile-cart-icon" viewBox="0 0 24 24">
                <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
            </svg>
            Panier
            <span class="cart-count-badge empty" 
                  id="cartCountMobile">
                0            </span>
        </a>
        
        <!-- BOUTONS SPLIT MOBILE (Maps + Contact avec NOUVELLE ICÔNE) -->
        <div class="mobile-call-split-wrapper">
            <a href="https://www.google.com/maps?cid=17528777559752842326" target="_blank" class="mobile-call-btn btn-maps">
                <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                </svg>
                Maps
            </a>
            <a href="https://atelierbalagan.com/contact.php" class="mobile-call-btn btn-contact-mobile" onclick="toggleMobileMenu()">
                <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
                </svg>
                Contact
            </a>
        </div>
    </div>

    <!-- SCRIPT BURGER MENU -->
    <script>
        // Toggle mobile menu
        function toggleMobileMenu() {
            const burger = document.querySelector('.burger-menu');
            const mobileMenu = document.getElementById('mobileMenu');
            const body = document.body;
            
            burger.classList.toggle('active');
            mobileMenu.classList.toggle('active');
            
            // Bloquer le scroll quand le menu est ouvert
            if (mobileMenu.classList.contains('active')) {
                body.style.overflow = 'hidden';
            } else {
                body.style.overflow = '';
            }
        }
        
        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('.header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Fermer le menu mobile si on redimensionne au-dessus de 900px
        window.addEventListener('resize', () => {
            if (window.innerWidth > 900) {
                const burger = document.querySelector('.burger-menu');
                const mobileMenu = document.getElementById('mobileMenu');
                burger.classList.remove('active');
                mobileMenu.classList.remove('active');
                document.body.style.overflow = '';
            }
        });
    </script>

<!-- Styles spécifiques à la page about -->
<style>
    /* === VARIABLES ATELIER BALAGAN === */
    :root {
        --primary: #232b4d;
        --cream: #fff9ed;
        --vintage-paper: #efdebd;
        --dark: #232b4d;
        --white: #ffffff;
        --transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        --transition-fast: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Sansation', Arial, sans-serif;
        background: var(--cream);
        overflow-x: hidden;
        color: var(--dark);
        line-height: 1.7;
    }
    
    /* === SECTION PRÉSENTATION HERO === */
    .about-hero {
        background: var(--cream);
        padding: 120px 5% 100px;
        position: relative;
        overflow: hidden;
    }
    
    .about-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: 
            url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperFilter)' opacity='0.6'/%3E%3C/svg%3E");
        opacity: 0.4;
        pointer-events: none;
    }
    
    .about-hero-content {
        max-width: 1600px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    
    .about-hero-label {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.85rem;
        color: var(--primary);
        font-weight: 700;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin-bottom: 30px;
        display: block;
        opacity: 0;
        animation: fadeSlideUp 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s forwards;
    }
    
    .about-hero h1 {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: clamp(3rem, 7vw, 6rem);
        font-weight: 700;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--primary);
        line-height: 1.1;
        margin-bottom: 50px;
        opacity: 0;
        animation: fadeSlideUp 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
    }
    
    /* === MOTS-CLÉS SUR UNE SEULE LIGNE === */
    .magic-words {
        display: flex;
        flex-wrap: nowrap;
        gap: 30px;
        justify-content: center;
        align-items: center;
        margin-bottom: 60px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
    }
    
    .magic-words::-webkit-scrollbar {
        height: 4px;
    }
    
    .magic-words::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 10px;
    }
    
    .magic-word {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: clamp(1rem, 1.8vw, 1.5rem);
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--primary);
        position: relative;
        padding: 0 15px;
        white-space: nowrap;
        opacity: 0;
        animation: fadeSlideUp 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    }
    
    .magic-word:nth-child(1) { animation-delay: 0.6s; }
    .magic-word:nth-child(2) { animation-delay: 0.7s; }
    .magic-word:nth-child(3) { animation-delay: 0.8s; }
    .magic-word:nth-child(4) { animation-delay: 0.9s; }
    .magic-word:nth-child(5) { animation-delay: 1s; }
    .magic-word:nth-child(6) { animation-delay: 1.1s; }
    
    .magic-word::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
        height: 2px;
        background: var(--vintage-paper);
        transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .magic-word:hover::after {
        width: 100%;
    }
    
    /* === GRILLE 2 IMAGES CARRÉES === */
    .about-images-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 900px;
        margin: 0 auto 60px;
        opacity: 0;
        animation: fadeSlideUp 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s forwards;
    }
    
    .about-image-item {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(35, 43, 77, 0.15);
        transition: var(--transition-fast);
    }
    
    .about-image-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(35, 43, 77, 0.25);
    }
    
    .about-image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        filter: grayscale(0.2);
    }
    
    .about-image-item:hover img {
        transform: scale(1.1);
        filter: grayscale(0);
    }
    
    .about-hero-text {
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
    }
    
    .about-hero-text p {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: clamp(1.1rem, 2vw, 1.4rem);
        line-height: 2;
        color: var(--dark);
        font-style: italic;
        margin-bottom: 30px;
        opacity: 0;
        animation: fadeSlideUp 1s cubic-bezier(0.19, 1, 0.22, 1) 1.4s forwards;
    }
    
    @keyframes fadeSlideUp {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* === SECTION INSTAGRAM FEED === */
    .instagram-feed-section {
        background: var(--white);
        padding: 120px 5%;
        position: relative;
    }
    
    .instagram-feed-header {
        text-align: center;
        margin-bottom: 80px;
    }
    
    .instagram-feed-header h2 {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 700;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .instagram-icon {
        width: 48px;
        height: 48px;
        fill: var(--primary);
    }
    
    .instagram-feed-header p {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 1.2rem;
        color: #666;
        font-style: italic;
    }
    
    .instagram-handle-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--primary);
        text-decoration: none;
        font-weight: 700;
        font-size: 1.1rem;
        margin-top: 15px;
        transition: var(--transition-fast);
        border-bottom: 2px solid transparent;
    }
    
    .instagram-handle-link:hover {
        border-bottom-color: var(--primary);
        transform: translateY(-2px);
    }
    
    .instagram-handle-link svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }
    
    /* === INSTAGRAM GRID === */
    .instagram-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .instagram-post {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        cursor: pointer;
        background: var(--vintage-paper);
        transition: var(--transition-fast);
        box-shadow: 0 5px 20px rgba(35, 43, 77, 0.1);
    }
    
    .instagram-post:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 40px rgba(35, 43, 77, 0.2);
        z-index: 10;
    }
    
    .instagram-post img,
    .instagram-post video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        filter: grayscale(0.2);
    }
    
    .instagram-post:hover img,
    .instagram-post:hover video {
        transform: scale(1.1);
        filter: grayscale(0);
    }
    
    .instagram-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(35, 43, 77, 0.9) 0%, transparent 60%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .instagram-post:hover .instagram-overlay {
        opacity: 1;
    }
    
    .instagram-caption {
        color: var(--white);
        font-size: 0.9rem;
        line-height: 1.5;
        font-style: italic;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .instagram-stats {
        display: flex;
        gap: 20px;
        margin-top: 10px;
        color: var(--white);
        font-size: 0.85rem;
        font-weight: 700;
    }
    
    .instagram-stat {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .instagram-stat svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    
    /* === LOADING STATE === */
    .instagram-loading {
        text-align: center;
        padding: 60px 20px;
        color: var(--primary);
        font-size: 1.2rem;
        font-style: italic;
    }
    
    .instagram-error {
        text-align: center;
        padding: 60px 20px;
        color: #999;
        font-size: 1.1rem;
        font-style: italic;
    }
    
    .instagram-error-detail {
        font-size: 0.9rem;
        margin-top: 10px;
        color: #666;
    }
    
    /* === VIDEO INDICATOR === */
    .video-indicator {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
        background: rgba(35, 43, 77, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    
    .video-indicator svg {
        width: 14px;
        height: 14px;
        fill: var(--white);
    }
    
    /* === SECTION ON PARLE DE NOUS === */
    .press-section {
        background: var(--vintage-paper);
        padding: 120px 5%;
        position: relative;
    }
    
    .press-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: 
            repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(35,43,77,0.04) 2px, rgba(35,43,77,0.04) 4px),
            repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(35,43,77,0.04) 2px, rgba(35,43,77,0.04) 4px);
        opacity: 0.7;
        pointer-events: none;
    }
    
    .press-header {
        text-align: center;
        margin-bottom: 80px;
        position: relative;
        z-index: 1;
    }
    
    .press-header h2 {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 700;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 20px;
    }
    
    .press-header p {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 1.2rem;
        color: #666;
        font-style: italic;
    }
    
    .press-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    
    .press-card {
        background: var(--white);
        overflow: hidden;
        text-decoration: none;
        transition: var(--transition-fast);
        box-shadow: 0 10px 40px rgba(35, 43, 77, 0.15);
        position: relative;
    }
    
    .press-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 60px rgba(35, 43, 77, 0.25);
    }
    
    .press-logo {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 80px;
        height: 80px;
        background: var(--white);
        border-radius: 50%;
        padding: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .press-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .press-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        position: relative;
    }
    
    .press-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        filter: grayscale(0.2);
    }
    
    .press-card:hover .press-image img {
        transform: scale(1.1);
        filter: grayscale(0);
    }
    
    .press-content {
        padding: 35px 30px;
    }
    
    .press-content h3 {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 15px;
        line-height: 1.3;
    }
    
    .press-excerpt {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 1rem;
        line-height: 1.8;
        color: #666;
        font-style: italic;
        margin-bottom: 25px;
    }
    
    .press-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--primary);
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        border-bottom: 2px solid var(--primary);
        padding-bottom: 3px;
        transition: var(--transition-fast);
    }
    
    .press-link:hover {
        color: var(--dark);
        border-bottom-color: var(--dark);
        transform: translateX(5px);
    }
    
    .press-link svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }
    
    /* === SECTION 3 VIDÉOS 9:16 === */
    .about-videos-section {
        background: var(--cream);
        padding: 120px 5%;
        position: relative;
    }
    
    .about-videos-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: 
            url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperFilter)' opacity='0.6'/%3E%3C/svg%3E");
        opacity: 0.4;
        pointer-events: none;
    }
    
    .videos-title {
        font-family: 'Sansation', Arial, sans-serif;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 700;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--primary);
        text-align: center;
        margin-bottom: 80px;
        position: relative;
        z-index: 1;
    }
    
    .videos-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    
    .video-item {
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 16;
        overflow: hidden;
        background: var(--dark);
        box-shadow: 0 10px 40px rgba(35, 43, 77, 0.2);
        transition: var(--transition-fast);
    }
    
    .video-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(35, 43, 77, 0.3);
    }
    
    .video-item video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    .video-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        background: linear-gradient(to top, rgba(35, 43, 77, 0.95) 0%, transparent 100%);
        color: var(--white);
        font-family: 'Sansation', Arial, sans-serif;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: center;
        opacity: 0;
        transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .video-item:hover .video-caption {
        opacity: 1;
    }
    
    /* === RESPONSIVE === */
    @media (max-width: 1024px) {
        .instagram-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .press-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .videos-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 768px) {
        .about-hero {
            padding: 100px 5% 80px;
        }
        
        /* Mots-clés : scroll horizontal */
        .magic-words {
            justify-content: flex-start;
            padding: 10px 20px;
        }
        
        /* Images : scroll horizontal */
        .about-images-grid {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 20px;
            padding-bottom: 20px;
            -webkit-overflow-scrolling: touch;
            grid-template-columns: unset;
        }
        
        .about-image-item {
            flex: 0 0 85%;
            max-width: 400px;
            min-width: 280px;
            scroll-snap-align: center;
        }
        
        .about-images-grid::-webkit-scrollbar {
            height: 8px;
        }
        
        .about-images-grid::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }
        
        .about-images-grid::-webkit-scrollbar-track {
            background: rgba(35,43,77,0.1);
        }
        
        /* INSTAGRAM GRID - Scroll horizontal */
        .instagram-grid {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 15px;
            padding-bottom: 20px;
            -webkit-overflow-scrolling: touch;
            grid-template-columns: unset;
        }
        
        .instagram-post {
            flex: 0 0 85%;
            max-width: 400px;
            min-width: 280px;
            scroll-snap-align: center;
        }
        
        .instagram-grid::-webkit-scrollbar {
            height: 8px;
        }
        
        .instagram-grid::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }
        
        .instagram-grid::-webkit-scrollbar-track {
            background: rgba(35,43,77,0.1);
        }
        
        /* PRESS GRID - Scroll horizontal */
        .press-grid {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 25px;
            padding-bottom: 20px;
            -webkit-overflow-scrolling: touch;
            grid-template-columns: unset;
        }
        
        .press-card {
            flex: 0 0 85%;
            max-width: 400px;
            min-width: 280px;
            scroll-snap-align: center;
        }
        
        .press-grid::-webkit-scrollbar {
            height: 8px;
        }
        
        .press-grid::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }
        
        .press-grid::-webkit-scrollbar-track {
            background: rgba(35,43,77,0.1);
        }
        
        /* Vidéos : scroll horizontal */
        .videos-grid {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 20px;
            padding-bottom: 20px;
            -webkit-overflow-scrolling: touch;
            grid-template-columns: unset;
        }
        
        .video-item {
            flex: 0 0 70%;
            max-width: 350px;
            min-width: 250px;
            scroll-snap-align: center;
        }
        
        .videos-grid::-webkit-scrollbar {
            height: 8px;
        }
        
        .videos-grid::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }
        
        .videos-grid::-webkit-scrollbar-track {
            background: rgba(35,43,77,0.1);
        }
        
        .instagram-feed-section,
        .press-section,
        .about-videos-section {
            padding: 80px 5%;
        }
        
        .instagram-feed-header h2,
        .press-header h2 {
            flex-direction: column;
            gap: 15px;
        }
    }
    
    @media (max-width: 480px) {
        .about-hero h1 {
            font-size: 2.5rem;
            letter-spacing: 3px;
        }
        
        .magic-word {
            font-size: 0.9rem;
            padding: 0 10px;
        }
        
        .about-image-item {
            flex: 0 0 90%;
            max-width: 350px;
            min-width: 250px;
        }
        
        .video-item {
            flex: 0 0 80%;
            max-width: 300px;
            min-width: 220px;
        }
        
        .instagram-post,
        .press-card {
            flex: 0 0 90%;
            max-width: 350px;
            min-width: 250px;
        }
    }
</style>

<!-- SECTION PRÉSENTATION HERO -->
<section class="about-hero">
    <div class="about-hero-content">
        <span class="about-hero-label">Notre Histoire</span>
        <h1><strong>Atelier Balagan</strong></h1>
        
        <!-- Mots-clés sur une seule ligne -->
        <div class="magic-words">
            <span class="magic-word">Vintage</span>
            <span class="magic-word">Artisanat</span>
            <span class="magic-word">Marrakech</span>
            <span class="magic-word">Mémoire</span>
            <span class="magic-word">Patine</span>
            <span class="magic-word">Authenticité</span>
        </div>
        
        <!-- Grille : 2 images carrées -->
        <div class="about-images-grid">
            <div class="about-image-item">
                <img src="img/about/hero1.webp" alt="Atelier Balagan - Mobilier Vintage">
            </div>
            <div class="about-image-item">
                <img src="img/about/hero2.webp" alt="Atelier Balagan - Sidi Ghanem">
            </div>
        </div>
        
        <!-- Texte approfondi -->
        <div class="about-hero-text">
            <p>
                Niché au cœur de la zone industrielle de Sidi Ghanem à Marrakech, Atelier Balagan est bien plus qu'une boutique de mobilier vintage : 
                c'est un voyage dans le temps, une madeleine de Proust pour tous les amoureux<br>des années 50 à 80.
            </p>
            <p>
                Créé par Mika, passionné des objets d'antan et de leurs atmosphères si singulières, l'atelier met à l'honneur de véritables petits bijoux : 
                flippers, postes de radio, meubles vinyles, sièges iconiques, minibars… Chaque pièce est chinée en Europe avec soin et restaurée dans notre atelier 
                pour lui redonner une seconde vie authentique.
            </p>
            <p>
                Des designers de renom comme Willy Rizzo, Charles Pollock pour Knoll, ou encore des créations anonymes du quotidien des années 70 
                trouvent ici une nouvelle destinée. Notre mission : préserver la mémoire du design, célébrer l'artisanat et sublimer vos intérieurs 
                avec des pièces uniques chargées d'histoire.
            </p>
            <p>
                À la croisée des souks de Marrakech et de l'héritage du design européen, Atelier Balagan dialogue entre passé et présent, 
                entre authenticité et créativité. Bienvenue dans notre univers où chaque patine raconte une histoire.
            </p>
        </div>
    </div>
</section>

<!-- SECTION INSTAGRAM FEED -->
<section class="instagram-feed-section">
    <div class="instagram-feed-header">
        <h2>
            <svg class="instagram-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
            </svg>
            <strong>Suivez-nous sur Instagram</strong>
        </h2>
        <p>Découvrez nos dernières trouvailles et créations</p>
        <a href="https://www.instagram.com/atelier.balagan/" target="_blank" class="instagram-handle-link">
            <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
            </svg>
            @atelier.balagan
        </a>
    </div>
    
    <div id="instagram-feed-container">
        <div class="instagram-loading">Chargement des publications Instagram...</div>
    </div>
</section>

<!-- SECTION ON PARLE DE NOUS -->
<section class="press-section">
    <div class="press-header">
        <h2><strong>On Parle de Nous</strong></h2>
        <p>Atelier Balagan dans la presse</p>
    </div>
    
    <div class="press-grid">
        <!-- Article 1 : La Tribune de Marrakech -->
        <a href="https://latribunedemarrakech.com/atelier-balagan-le-temple-de-la-decoration-vintage/" target="_blank" class="press-card">
            <div class="press-logo">
                <img src="img/about/logoT.webp" alt="La Tribune de Marrakech">
            </div>
            <div class="press-image">
                <img src="img/about/press1.webp" alt="Article La Tribune">
            </div>
            <div class="press-content">
                <h3><strong>Le Temple de la Décoration Vintage</strong></h3>
                <p class="press-excerpt">
                    Atelier Balagan s'impose comme une référence incontournable du mobilier vintage à Marrakech. 
                    Un lieu unique où l'authenticité rencontre le design.
                </p>
                <span class="press-link">
                    Lire l'article
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
                    </svg>
                </span>
            </div>
        </a>
        
        <!-- Article 2 : Fleamapket -->
        <a href="https://www.fleamapket.com/listing/sidi-ghanems-antique-shops/" target="_blank" class="press-card">
            <div class="press-logo">
                <img src="img/about/logoF.webp" alt="Fleamapket">
            </div>
            <div class="press-image">
                <img src="img/about/press2.webp" alt="Article Fleamapket">
            </div>
            <div class="press-content">
                <h3><strong>Sidi Ghanem's Antique Shops</strong></h3>
                <p class="press-excerpt">
                    Découvrez les trésors cachés de Sidi Ghanem. Atelier Balagan figure parmi les adresses 
                    incontournables pour les amateurs de design vintage.
                </p>
                <span class="press-link">
                    Lire l'article
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
                    </svg>
                </span>
            </div>
        </a>
        
        <!-- Article 3 : El Fenn -->
        <a href="https://el-fenn.com/vintage-homeware-finds-in-marrakech/" target="_blank" class="press-card">
            <div class="press-logo">
                <img src="img/about/logo3.webp" alt="El Fenn">
            </div>
            <div class="press-image">
                <img src="img/about/press3.webp" alt="Article El Fenn">
            </div>
            <div class="press-content">
                <h3><strong>Vintage Homeware Finds</strong></h3>
                <p class="press-excerpt">
                    El Fenn partage ses meilleures adresses vintage à Marrakech. Atelier Balagan est présenté 
                    comme un lieu d'exception pour la décoration d'intérieur.
                </p>
                <span class="press-link">
                    Lire l'article
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
                    </svg>
                </span>
            </div>
        </a>
    </div>
</section>

<!-- SECTION 3 VIDÉOS 9:16 (DERNIÈRE SECTION AVANT FOOTER) -->
<section class="about-videos-section">
    <h2 class="videos-title"><strong>Découvrez Notre Univers</strong></h2>
    <div class="videos-grid">
        <div class="video-item">
            <video controls preload="metadata">
                <source src="assets/videos/about-video1.mp4" type="video/mp4">
                Votre navigateur ne supporte pas la lecture de vidéos.
            </video>
            <p class="video-caption">Notre Atelier</p>
        </div>
        <div class="video-item">
            <video controls preload="metadata">
                <source src="assets/videos/about-video2.mp4" type="video/mp4">
                Votre navigateur ne supporte pas la lecture de vidéos.
            </video>
            <p class="video-caption">Le Processus de Restauration</p>
        </div>
        <div class="video-item">
            <video controls preload="metadata">
                <source src="assets/videos/about-video3.mp4" type="video/mp4">
                Votre navigateur ne supporte pas la lecture de vidéos.
            </video>
            <p class="video-caption">Nos Pièces Iconiques</p>
        </div>
    </div>
</section>

    <!-- FOOTER -->
    <footer class="footer">
        <!-- ANIMATED BACKGROUND GRADIENT -->
        <div class="footer-gradient-bg"></div>
        
        <!-- FLOATING PARTICLES -->
        <div class="footer-particles">
            <span class="particle"></span>
            <span class="particle"></span>
            <span class="particle"></span>
            <span class="particle"></span>
            <span class="particle"></span>
            <span class="particle"></span>
            <span class="particle"></span>
            <span class="particle"></span>
        </div>
        
        <div class="footer-container">
            
            <!-- FOOTER TOP -->
            <div class="footer-top">
                <!-- LOGO FOOTER -->
                <div class="footer-logo">
                    <a href="https://atelierbalagan.com" class="footer-logo-link">
                        <img src="https://atelierbalagan.com/assets/images/logo1.webp" alt="Atelier Balagan">
                    </a>
                    <p class="footer-vision">L'art de redonner vie au mobilier vintage des années 1950-1980</p>
                    
                    <!-- ✅ BOUTON WHATSAPP -->
                    <a href="https://wa.me/212668558189?text=Bonjour%20Atelier%20Balagan%2C%20je%20suis%20intéressé(e)%20par%20vos%20pièces%20vintage%20et%20j'aimerais%20en%20savoir%20plus%20!" 
                       target="_blank" 
                       class="whatsapp-btn">
                        <svg class="whatsapp-icon" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                        </svg>
                        <span class="whatsapp-text">Contactez-nous sur WhatsApp</span>
                        <span class="whatsapp-ripple"></span>
                    </a>
                    
                    <!-- ✅ RÉSEAUX SOCIAUX MINIMALISTES -->
                    <div class="social-icons">
                        <a href="https://www.facebook.com/atelierbalagan" target="_blank" class="social-icon" aria-label="Facebook">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a>
                        
                        <a href="https://www.instagram.com/atelier.balagan/" target="_blank" class="social-icon" aria-label="Instagram">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                        </a>
                        
                        <a href="https://twitter.com/atelierbalagan" target="_blank" class="social-icon" aria-label="X (Twitter)">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                            </svg>
                        </a>
                        
                        <a href="https://www.linkedin.com/company/atelierbalagan" target="_blank" class="social-icon" aria-label="LinkedIn">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                        </a>
                        
                        <a href="https://www.youtube.com/@atelierbalagan" target="_blank" class="social-icon" aria-label="YouTube">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                            </svg>
                        </a>
                    </div>
                </div>
                
                <!-- NAVIGATION FOOTER -->
                <div class="footer-nav">
                    <div class="footer-nav-column">
                        <h4>L'Atelier</h4>
                        <a href="https://atelierbalagan.com/services.php">Restauration</a>
                        <a href="https://atelierbalagan.com/services.php">Fabrication</a>
                    </div>
                    
                    <div class="footer-nav-column">
                        <h4>Nos Pièces Vintage</h4>
                                                <a href="https://atelierbalagan.com/category/chaises">
                            Chaises                        </a>
                                                <a href="https://atelierbalagan.com/category/decoration">
                            Décoration                        </a>
                                                <a href="https://atelierbalagan.com/category/luminaires">
                            Luminaires                        </a>
                                                <a href="https://atelierbalagan.com/category/meubles">
                            Meubles                        </a>
                                                <a href="https://atelierbalagan.com/category/signes">
                            Signés                        </a>
                                            </div>
                    
                    <div class="footer-nav-column">
                        <h4>Actualités</h4>
                                                <a href="https://atelierbalagan.com/blog/foires-expositions/">
                            Foires &amp; Expositions                        </a>
                                                <a href="https://atelierbalagan.com/blog/boutiques-inspirations/">
                            Boutiques &amp; Inspirations                        </a>
                                                <a href="https://atelierbalagan.com/blog/designers-iconiques/">
                            Designers Iconiques                        </a>
                                                <a href="https://atelierbalagan.com/blog/selection-presse/">
                            Sélection Presse                        </a>
                                            </div>
                    
                    <div class="footer-nav-column">
                        <h4>Contact</h4>
                        <a href="https://www.google.com/maps?cid=17528777559752842326" target="_blank" class="footer-contact-item">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                            366 Rue Sidi Ghanem, Marrakesh 40000
                        </a>
                        <a href="tel:+212668558189" class="footer-contact-item">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
                            </svg>
                            +212 668-558 189
                        </a>
                        <a href="mailto:contact@atelierbalagan.com" class="footer-contact-item">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                            </svg>
                            contact@atelierbalagan.com
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- FOOTER DIVIDER ANIMATED -->
            <div class="footer-divider">
                <div class="footer-divider-line"></div>
            </div>
            
            <!-- FOOTER BOTTOM -->
            <div class="footer-bottom">
                <div class="footer-copyright">
                    <p>&copy; 2025 Atelier Balagan | Tous droits réservés</p>
                    <p class="footer-credits">Designed with <span class="heart">♥</span> By <a href="https://vsf-agency.ma" target="_blank" class="vsf-link">VSF AGENCY</a></p>
                </div>
                <div class="footer-legal">
                    <a href="https://atelierbalagan.com/politique-confidentialite.php">Politique de confidentialité</a>
                    <span class="separator">•</span>
                    <a href="https://atelierbalagan.com/cgv.php">CGV</a>
                    <span class="separator">•</span>
                    <span class="ssl-secure">
                        <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                        </svg>
                        SSL Sécurisé
                    </span>
                </div>
            </div>
        </div>
        
        <!-- SCROLL TO TOP BUTTON -->
        <button class="scroll-top" id="scrollTop" onclick="scrollToTop()" aria-label="Retour en haut">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                <path d="M12 19V5M5 12l7-7 7 7"/>
            </svg>
            <span class="scroll-top-ripple"></span>
        </button>
    </footer>

    <style>
        /* === FOOTER PREMIUM DESIGN === */
        .footer {
            background: #232b4d;
            color: var(--white);
            margin-top: auto;
            padding: 100px 5% 50px;
            position: relative;
            overflow: hidden;
        }
        
        /* === ANIMATED GRADIENT BACKGROUND === */
        .footer-gradient-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                rgba(35, 43, 77, 0.95) 0%,
                rgba(40, 48, 87, 0.98) 25%,
                rgba(35, 43, 77, 0.95) 50%,
                rgba(45, 53, 92, 0.92) 75%,
                rgba(35, 43, 77, 0.95) 100%
            );
            background-size: 400% 400%;
            animation: gradientFlow 20s ease infinite;
            z-index: 0;
        }
        
        @keyframes gradientFlow {
            0%, 100% { background-position: 0% 50%; }
            25% { background-position: 50% 100%; }
            50% { background-position: 100% 50%; }
            75% { background-position: 50% 0%; }
        }
        
        /* === FLOATING PARTICLES === */
        .footer-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(239, 222, 189, 0.6);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(239, 222, 189, 0.8);
            animation: float 15s infinite ease-in-out;
        }
        
        .particle:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
            animation-duration: 18s;
        }
        
        .particle:nth-child(2) {
            left: 25%;
            animation-delay: 2s;
            animation-duration: 22s;
        }
        
        .particle:nth-child(3) {
            left: 40%;
            animation-delay: 4s;
            animation-duration: 20s;
        }
        
        .particle:nth-child(4) {
            left: 55%;
            animation-delay: 1s;
            animation-duration: 19s;
        }
        
        .particle:nth-child(5) {
            left: 70%;
            animation-delay: 3s;
            animation-duration: 21s;
        }
        
        .particle:nth-child(6) {
            left: 85%;
            animation-delay: 5s;
            animation-duration: 17s;
        }
        
        .particle:nth-child(7) {
            left: 15%;
            animation-delay: 6s;
            animation-duration: 23s;
        }
        
        .particle:nth-child(8) {
            left: 90%;
            animation-delay: 2.5s;
            animation-duration: 19.5s;
        }
        
        @keyframes float {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) scale(1.5);
                opacity: 0;
            }
        }
        
        .footer-container {
            max-width: 1800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        /* === FOOTER TOP === */
        .footer-top {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 100px;
            margin-bottom: 70px;
            align-items: start;
        }
        
        /* === LOGO FOOTER === */
        .footer-logo {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        
        .footer-logo-link {
            display: block;
            margin-bottom: 25px;
            transition: var(--transition-fast);
            position: relative;
        }
        
        .footer-logo-link::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, rgba(239, 222, 189, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: -1;
            opacity: 0;
        }
        
        .footer-logo-link:hover::before {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        
        .footer-logo-link:hover {
            transform: scale(1.05);
        }
        
        .footer-logo img {
            height: 70px;
            width: auto;
            filter: drop-shadow(0 5px 20px rgba(239, 222, 189, 0.3));
        }
        
        .footer-vision {
            font-family: 'Sansation', Arial, sans-serif;
            font-size: 1rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
            font-style: italic;
            margin: 0 0 30px 0;
            text-align: left;
        }
        
        /* ✅ BOUTON WHATSAPP HYPER DESIGN */
        .whatsapp-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px 26px;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: var(--white);
            text-decoration: none;
            font-family: 'Sansation', Arial, sans-serif;
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            border-radius: 50px;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 8px 25px rgba(37, 211, 102, 0.4),
                0 4px 12px rgba(18, 140, 126, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.2);
            max-width: 320px;
            margin-bottom: 20px;
        }
        
        .whatsapp-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
            transform: translateX(-100%);
            transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 0;
        }
        
        .whatsapp-btn:hover::before {
            transform: translateX(0);
        }
        
        .whatsapp-btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 
                0 15px 40px rgba(37, 211, 102, 0.6),
                0 8px 20px rgba(18, 140, 126, 0.5);
            border-color: rgba(255, 255, 255, 0.4);
        }
        
        .whatsapp-icon {
            width: 22px;
            height: 22px;
            fill: currentColor;
            position: relative;
            z-index: 1;
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }
        
        .whatsapp-btn:hover .whatsapp-icon {
            transform: rotate(15deg) scale(1.15);
        }
        
        .whatsapp-text {
            position: relative;
            z-index: 1;
        }
        
        .whatsapp-ripple {
            position: absolute;
            inset: 0;
            border: 3px solid rgba(37, 211, 102, 0.6);
            border-radius: 50px;
            animation: whatsappRipple 2s ease-out infinite;
            opacity: 0;
        }
        
        @keyframes whatsappRipple {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.15);
                opacity: 0;
            }
        }
        
        /* ✅ RÉSEAUX SOCIAUX MINIMALISTES */
        .social-icons {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 5px;
        }
        
        .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            background: rgba(255, 255, 255, 0.08);
            border: 2px solid rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            position: relative;
            overflow: hidden;
        }
        
        .social-icon::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--vintage-paper);
            transform: scale(0);
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            border-radius: 50%;
            z-index: 0;
        }
        
        .social-icon:hover::before {
            transform: scale(1);
        }
        
        .social-icon:hover {
            color: #232b4d;
            border-color: var(--vintage-paper);
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 10px 25px rgba(239, 222, 189, 0.4);
        }
        
        .social-icon svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
            position: relative;
            z-index: 1;
            transition: transform 0.4s ease;
        }
        
        .social-icon:hover svg {
            transform: scale(1.1) rotate(5deg);
        }
        
        /* === NAVIGATION FOOTER === */
        .footer-nav {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 60px;
        }
        
        .footer-nav-column h4 {
            font-family: 'Sansation', Arial, sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--vintage-paper);
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .footer-nav-column h4::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--vintage-paper) 0%, transparent 100%);
            animation: lineExpand 1.5s ease-out forwards;
            animation-delay: 0.3s;
        }
        
        @keyframes lineExpand {
            to { width: 50px; }
        }
        
        .footer-nav-column a {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Sansation', Arial, sans-serif;
            font-size: 1.05rem;
            color: rgba(255, 255, 255, 0.88);
            margin-bottom: 14px;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            position: relative;
            padding-left: 0;
        }
        
        .footer-nav-column a::before {
            content: '→';
            position: absolute;
            left: -25px;
            opacity: 0;
            color: var(--vintage-paper);
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }
        
        .footer-nav-column a:hover {
            color: var(--vintage-paper);
            padding-left: 25px;
            text-shadow: 0 0 20px rgba(239, 222, 189, 0.5);
        }
        
        .footer-nav-column a:hover::before {
            left: 0;
            opacity: 1;
        }
        
        .footer-contact-item {
            display: flex !important;
            align-items: center;
            gap: 10px;
        }
        
        .footer-contact-item svg {
            flex-shrink: 0;
            opacity: 0.8;
            transition: all 0.4s ease;
        }
        
        .footer-contact-item:hover svg {
            opacity: 1;
            transform: scale(1.2) rotate(10deg);
        }
        
        /* === FOOTER DIVIDER ANIMATED === */
        .footer-divider {
            position: relative;
            width: 100%;
            height: 2px;
            margin: 50px 0;
            overflow: hidden;
        }
        
        .footer-divider-line {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(239, 222, 189, 0.2) 25%,
                rgba(239, 222, 189, 0.8) 50%,
                rgba(239, 222, 189, 0.2) 75%,
                transparent 100%
            );
            animation: dividerSlide 3s ease-in-out infinite;
        }
        
        @keyframes dividerSlide {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        /* === FOOTER BOTTOM === */
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 30px;
        }
        
        .footer-copyright {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .footer-copyright p {
            font-family: 'Sansation', Arial, sans-serif;
            font-size: 0.98rem;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
        }
        
        .footer-credits {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* === COEUR ROUGE BATTANT === */
        .heart {
            color: #ff3366;
            font-size: 1.15em;
            display: inline-block;
            animation: heartbeat 1.5s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.6));
        }
        
        @keyframes heartbeat {
            0%, 100% { 
                transform: scale(1); 
            }
            10%, 30% { 
                transform: scale(1.35); 
            }
            20%, 40% { 
                transform: scale(1.15); 
            }
        }
        
        /* ✅ VSF AGENCY EN ROUGE LEAGUE SPARTAN === */
        .vsf-link {
            color: #ff0000;
            font-family: 'League Spartan', sans-serif;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-decoration: none;
            transition: all 0.4s ease;
            position: relative;
            padding: 2px 0;
            text-transform: uppercase;
        }
        
        .vsf-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: #ff0000;
            transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }
        
        .vsf-link:hover {
            text-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
            transform: scale(1.05);
        }
        
        .vsf-link:hover::after {
            width: 100%;
        }
        
        /* === FOOTER LEGAL === */
        .footer-legal {
            display: flex;
            align-items: center;
            gap: 18px;
            font-family: 'Sansation', Arial, sans-serif;
            font-size: 0.92rem;
            color: rgba(255, 255, 255, 0.85);
        }
        
        .footer-legal a {
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .footer-legal a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--vintage-paper);
            transition: width 0.3s ease;
        }
        
        .footer-legal a:hover {
            color: var(--vintage-paper);
        }
        
        .footer-legal a:hover::after {
            width: 100%;
        }
        
        .footer-legal .separator {
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.8rem;
        }
        
        .ssl-secure {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: rgba(255, 255, 255, 0.85);
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            border: 1px solid rgba(239, 222, 189, 0.2);
            transition: all 0.4s ease;
        }
        
        .ssl-secure:hover {
            background: rgba(239, 222, 189, 0.15);
            border-color: rgba(239, 222, 189, 0.4);
            transform: scale(1.05);
        }
        
        .ssl-secure svg {
            animation: shieldPulse 2s ease-in-out infinite;
        }
        
        @keyframes shieldPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        /* === SCROLL TO TOP BUTTON === */
        .scroll-top {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--vintage-paper) 0%, #d4c9a8 100%);
            color: #232b4d;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transform: translateY(100px) scale(0.5);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 999;
            box-shadow: 0 10px 40px rgba(35, 43, 77, 0.4);
            border-radius: 50%;
            overflow: hidden;
        }
        
        .scroll-top::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
            transform: translate(-50%, -50%) scale(0);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            border-radius: 50%;
        }
        
        .scroll-top-ripple {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 3px solid var(--vintage-paper);
            border-radius: 50%;
            animation: ripple 2s ease-out infinite;
            opacity: 0;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.8);
                opacity: 0;
            }
        }
        
        .scroll-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        
        .scroll-top:hover {
            background: linear-gradient(135deg, #232b4d 0%, #1a2138 100%);
            color: var(--vintage-paper);
            transform: translateY(-10px) scale(1.15) rotate(360deg);
            box-shadow: 0 20px 60px rgba(239, 222, 189, 0.6);
        }
        
        .scroll-top:hover::before {
            transform: translate(-50%, -50%) scale(1.5);
        }
        
        .scroll-top svg {
            transition: transform 0.4s ease;
            position: relative;
            z-index: 1;
        }
        
        .scroll-top:hover svg {
            transform: translateY(-5px);
        }
        
        /* === RESPONSIVE === */
        @media (max-width: 1400px) {
            .footer-top {
                gap: 80px;
            }
            
            .footer-nav {
                gap: 50px;
            }
        }
        
        @media (max-width: 1200px) {
            .footer-top {
                grid-template-columns: 280px 1fr;
                gap: 60px;
            }
            
            .footer-nav {
                gap: 40px;
            }
        }
        
        @media (max-width: 1024px) {
            .footer {
                padding: 80px 5% 40px;
            }
            
            .footer-top {
                grid-template-columns: 1fr;
                gap: 60px;
            }
            
            .footer-logo {
                align-items: center;
                text-align: center;
            }
            
            .footer-vision {
                text-align: center;
            }
            
            .whatsapp-btn {
                width: 100%;
                max-width: 400px;
            }
            
            .social-icons {
                justify-content: center;
            }
            
            .footer-nav {
                grid-template-columns: repeat(2, 1fr);
                gap: 50px;
            }
            
            .footer-nav-column h4::after {
                left: 0;
            }
            
            .scroll-top {
                bottom: 40px;
                right: 40px;
                width: 55px;
                height: 55px;
            }
        }
        
        @media (max-width: 768px) {
            .footer {
                padding: 70px 5% 35px;
            }
            
            .whatsapp-btn {
                padding: 14px 25px;
                font-size: 0.88rem;
            }
            
            .whatsapp-icon {
                width: 22px;
                height: 22px;
            }
            
            .social-icon {
                width: 36px;
                height: 36px;
            }
            
            .social-icon svg {
                width: 17px;
                height: 17px;
            }
            
            .footer-nav {
                grid-template-columns: 1fr;
                gap: 45px;
                text-align: center;
            }
            
            .footer-nav-column h4::after {
                left: 50%;
                transform: translateX(-50%);
            }
            
            .footer-nav-column a::before {
                display: none;
            }
            
            .footer-nav-column a:hover {
                padding-left: 0;
                transform: scale(1.05);
            }
            
            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 25px;
            }
            
            .footer-copyright {
                align-items: center;
            }
            
            .footer-legal {
                flex-direction: column;
                gap: 12px;
            }
            
            .footer-legal .separator {
                display: none;
            }
            
            .footer-logo img {
                height: 60px;
            }
            
            .scroll-top {
                bottom: 30px;
                right: 30px;
                width: 50px;
                height: 50px;
            }
        }
        
        @media (max-width: 480px) {
            .footer {
                padding: 60px 5% 30px;
            }
            
            .footer-top {
                gap: 50px;
            }
            
            .footer-nav {
                gap: 40px;
            }
            
            .footer-logo img {
                height: 55px;
            }
            
            .footer-vision {
                font-size: 0.92rem;
            }
            
            .whatsapp-btn {
                padding: 13px 22px;
                font-size: 0.82rem;
            }
            
            .whatsapp-icon {
                width: 20px;
                height: 20px;
            }
            
            .social-icon {
                width: 34px;
                height: 34px;
            }
            
            .social-icon svg {
                width: 16px;
                height: 16px;
            }
            
            .footer-copyright p,
            .footer-legal {
                font-size: 0.88rem;
            }
            
            .scroll-top {
                bottom: 25px;
                right: 25px;
                width: 48px;
                height: 48px;
            }
            
            .scroll-top svg {
                width: 20px;
                height: 20px;
            }
        }
    </style>

    <script>
        // Scroll to top functionality
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        // Show/hide scroll to top button
        window.addEventListener('scroll', () => {
            const scrollTop = document.getElementById('scrollTop');
            if (window.pageYOffset > 500) {
                scrollTop.classList.add('visible');
            } else {
                scrollTop.classList.remove('visible');
            }
        });
        
        // Parallax effect sur le footer
        window.addEventListener('scroll', () => {
            const footer = document.querySelector('.footer');
            const footerOffset = footer.offsetTop;
            const scrollPos = window.pageYOffset + window.innerHeight;
            
            if (scrollPos > footerOffset) {
                const particles = document.querySelectorAll('.particle');
                particles.forEach((particle, index) => {
                    const speed = (index + 1) * 0.05;
                    particle.style.transform = `translateY(${(scrollPos - footerOffset) * speed}px)`;
                });
            }
        });
    </script>
<script>
// ========================================
// INSTAGRAM FEED API - CONFIGURATION
// ========================================

const INSTAGRAM_CONFIG = {
    // 🔑 METS TON ACCESS TOKEN ICI (après configuration de l'API)
    accessToken: 'METS_TON_ACCESS_TOKEN_ICI',
    
    // Nombre de posts à afficher
    postsLimit: 9,
    
    // Champs à récupérer
    fields: 'id,caption,media_type,media_url,thumbnail_url,permalink,timestamp'
};

// ========================================
// FONCTION POUR CHARGER LES POSTS INSTAGRAM
// ========================================
async function loadInstagramFeed() {
    const container = document.getElementById('instagram-feed-container');
    
    // Vérifier si le token est configuré
    if (INSTAGRAM_CONFIG.accessToken === 'METS_TON_ACCESS_TOKEN_ICI') {
        container.innerHTML = `
            <div class="instagram-error">
                <p>Configuration Instagram API requise</p>
                <p class="instagram-error-detail">
                    (Variable INSTAGRAM_CONFIG.accessToken)
                </p>
            </div>
        `;
        return;
    }
    
    try {
        // Afficher le loader
        container.innerHTML = '<div class="instagram-loading">Chargement des publications Instagram...</div>';
        
        // Construire l'URL de l'API
        const apiUrl = `https://graph.instagram.com/me/media?fields=${INSTAGRAM_CONFIG.fields}&access_token=${INSTAGRAM_CONFIG.accessToken}&limit=${INSTAGRAM_CONFIG.postsLimit}`;
        
        // Faire la requête
        const response = await fetch(apiUrl);
        
        if (!response.ok) {
            throw new Error(`Erreur API: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (!data.data || data.data.length === 0) {
            throw new Error('Aucun post trouvé');
        }
        
        // Afficher les posts
        displayInstagramPosts(data.data);
        
    } catch (error) {
        console.error('Erreur lors du chargement Instagram:', error);
        container.innerHTML = `
            <div class="instagram-error">
                <p>Impossible de charger les publications Instagram</p>
                <p class="instagram-error-detail">${error.message}</p>
            </div>
        `;
    }
}

// ========================================
// FONCTION POUR AFFICHER LES POSTS
// ========================================
function displayInstagramPosts(posts) {
    const container = document.getElementById('instagram-feed-container');
    
    const grid = document.createElement('div');
    grid.className = 'instagram-grid';
    
    posts.forEach(post => {
        const postElement = createPostElement(post);
        grid.appendChild(postElement);
    });
    
    container.innerHTML = '';
    container.appendChild(grid);
}

// ========================================
// FONCTION POUR CRÉER UN ÉLÉMENT POST
// ========================================
function createPostElement(post) {
    const postDiv = document.createElement('a');
    postDiv.className = 'instagram-post';
    postDiv.href = post.permalink;
    postDiv.target = '_blank';
    postDiv.rel = 'noopener noreferrer';
    
    // Déterminer le type de média
    const isVideo = post.media_type === 'VIDEO';
    const mediaUrl = isVideo ? post.thumbnail_url : post.media_url;
    
    // Créer le média
    let mediaElement;
    if (isVideo) {
        mediaElement = document.createElement('img');
        mediaElement.src = mediaUrl;
        mediaElement.alt = post.caption ? post.caption.substring(0, 100) : 'Instagram post';
        
        // Ajouter l'indicateur vidéo
        const videoIndicator = document.createElement('div');
        videoIndicator.className = 'video-indicator';
        videoIndicator.innerHTML = `
            <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z"/>
            </svg>
        `;
        postDiv.appendChild(videoIndicator);
    } else {
        mediaElement = document.createElement('img');
        mediaElement.src = mediaUrl;
        mediaElement.alt = post.caption ? post.caption.substring(0, 100) : 'Instagram post';
    }
    
    postDiv.appendChild(mediaElement);
    
    // Créer l'overlay avec la caption
    if (post.caption) {
        const overlay = document.createElement('div');
        overlay.className = 'instagram-overlay';
        
        const caption = document.createElement('p');
        caption.className = 'instagram-caption';
        caption.textContent = post.caption.length > 150 ? post.caption.substring(0, 150) + '...' : post.caption;
        
        overlay.appendChild(caption);
        postDiv.appendChild(overlay);
    }
    
    return postDiv;
}

// ========================================
// FONCTION POUR RAFRAÎCHIR LE TOKEN
// ========================================
async function refreshAccessToken() {
    if (INSTAGRAM_CONFIG.accessToken === 'METS_TON_ACCESS_TOKEN_ICI') {
        return;
    }
    
    try {
        const refreshUrl = `https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token=${INSTAGRAM_CONFIG.accessToken}`;
        const response = await fetch(refreshUrl);
        const data = await response.json();
        
        if (data.access_token) {
            console.log('✅ Token rafraîchi avec succès');
            console.log('Nouveau token (expire dans 60 jours):', data.access_token);
            console.log('⚠️ IMPORTANT: Mets à jour INSTAGRAM_CONFIG.accessToken avec ce nouveau token');
        }
    } catch (error) {
        console.error('Erreur lors du rafraîchissement du token:', error);
    }
}

// ========================================
// INITIALISATION AU CHARGEMENT DE LA PAGE
// ========================================
document.addEventListener('DOMContentLoaded', function() {
    // Charger le feed Instagram
    loadInstagramFeed();
    
    // Rafraîchir le feed toutes les heures
    setInterval(loadInstagramFeed, 3600000); // 1 heure = 3600000ms
});
</script>