<?php
// ============================================
// LANDING PAGE - HICHAM BOUCHAREB
// Contact form: enregistre dans la database + envoie email
// ============================================
require_once 'config.php';

$success = false;
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_form'])) {
    $name    = trim($_POST['name'] ?? '');
    $email   = trim(filter_var($_POST['email'] ?? '', FILTER_SANITIZE_EMAIL));
    $phone   = trim($_POST['phone'] ?? '');
    $subject = trim($_POST['subject'] ?? '');
    $message = trim($_POST['message'] ?? '');

    // Validation
    if (empty($name) || empty($email) || empty($phone) || empty($message)) {
        $error = "Veuillez remplir tous les champs obligatoires.";
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = "Veuillez fournir une adresse email valide.";
    } elseif (strlen($message) < 10) {
        $error = "Votre message doit contenir au moins 10 caractères.";
    } else {
        try {
            // 1️⃣ ENREGISTRER DANS LA DATABASE
            $db = getDB();
            $stmt = $db->prepare("
                INSERT INTO messages (name, email, phone, subject, message, ip_address, created_at)
                VALUES (?, ?, ?, ?, ?, ?, NOW())
            ");
            $stmt->execute([
                $name,
                $email,
                $phone,
                $subject ?: 'Contact général',
                $message,
                getClientIP()
            ]);

            // 2️⃣ ENVOYER EMAIL DE NOTIFICATION (à l'avocat)
            $to = ADMIN_EMAIL;
            $email_subject = "Nouveau message du site — " . ($subject ?: 'Contact');

            $email_body = "Vous avez reçu un nouveau message via le formulaire du site.\r\n\r\n";
            $email_body .= "----------------------------------------\r\n";
            $email_body .= "Nom complet : $name\r\n";
            $email_body .= "Email       : $email\r\n";
            $email_body .= "Téléphone   : $phone\r\n";
            $email_body .= "Sujet       : " . ($subject ?: 'Non spécifié') . "\r\n";
            $email_body .= "Date        : " . date('d/m/Y H:i') . "\r\n";
            $email_body .= "----------------------------------------\r\n\r\n";
            $email_body .= "Message :\r\n$message\r\n\r\n";
            $email_body .= "----------------------------------------\r\n";
            $email_body .= "Voir tous les messages :\r\n";
            $email_body .= SITE_URL . "/mail/messages.php\r\n";

            $headers  = "From: " . MAIL_FROM_NAME . " <" . ADMIN_EMAIL . ">\r\n";
            $headers .= "Reply-To: $name <$email>\r\n";
            $headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";
            $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

            @mail($to, $email_subject, $email_body, $headers);

            $success = true;
        } catch (PDOException $e) {
            $error = "Une erreur est survenue. Veuillez réessayer plus tard.";
            // En production, logger l'erreur: error_log($e->getMessage());
        }
    }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Maître Hicham Bouchareb, avocat au Barreau du Maroc. Cabinet à Casablanca spécialisé en recouvrement, procédures collectives, contentieux commercial et droit social."/>
    <meta name="keywords" content="avocat Maroc, Hicham Bouchareb, avocat Casablanca, recouvrement créances, contentieux commercial, droit social"/>
    <title>Maître Hicham Bouchareb — Avocat au Barreau du Maroc</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=Italiana&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --noir: #0a0a0a; --noir-soft: #1a1a1a;
            --cream: #f5f1e8; --cream-dark: #ebe5d4;
            --or: #c9a961; --or-light: #d4b878; --or-dark: #a8893d;
            --gris: #8a8478; --gris-light: #c4bdaf;
            --serif: 'Cormorant Garamond', serif;
            --display: 'Italiana', serif;
            --sans: 'Inter', sans-serif;
        }
        html { scroll-behavior: smooth; }
        body { font-family: var(--sans); color: var(--noir); background: var(--cream); overflow-x: hidden; font-weight: 300; line-height: 1.6; }
        body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); opacity:0.06; pointer-events:none; z-index:9999; mix-blend-mode:multiply; }

        .cursor { position:fixed; width:8px; height:8px; background:var(--or); border-radius:50%; pointer-events:none; z-index:10000; transition:transform .15s ease, width .3s, height .3s; mix-blend-mode:difference; }
        .cursor.hover { width:50px; height:50px; background:transparent; border:1px solid var(--or); }

        #preloader { position:fixed; inset:0; background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%); display:flex; align-items:center; justify-content:center; z-index:99999; transition:opacity .8s ease, visibility .8s ease; }
        #preloader.hide { opacity:0; visibility:hidden; }
        .preloader-logo { width:150px; height:150px; border:4px solid var(--or); border-top-color:transparent; border-radius:50%; display:flex; align-items:center; justify-content:center; animation:rotate 1.5s linear infinite; margin:0 auto 20px; }
        .preloader-logo img { width:96px; height:96px; object-fit:contain; }
        .preloader-text { color:var(--or); letter-spacing:4px; font-weight:300; font-size:.9rem; font-family:var(--display); text-align:center; }
        @keyframes rotate { to { transform:rotate(360deg); } }

        .nav { position:fixed; top:0; left:0; width:100%; padding:20px 60px; display:flex; justify-content:space-between; align-items:center; z-index:1000; transition:all .6s cubic-bezier(.16,1,.3,1); background:rgba(10,10,10,.95); backdrop-filter:blur(15px); border-bottom:1px solid rgba(201,169,97,.1); }
        .nav.scrolled { padding:12px 60px; background:rgba(10,10,10,.98); }
        .nav-logo { display:flex; align-items:center; gap:15px; text-decoration:none; }
        .nav-logo img { height:70px; filter:brightness(1.1); transition:transform .4s; }
        .nav-logo:hover img { transform:scale(1.05); }
        .nav-logo-text { display:flex; flex-direction:column; }
        .nav-logo-name { font-family:var(--display); font-size:18px; color:var(--cream); letter-spacing:3px; line-height:1; }
        .nav-logo-sub { font-size:9px; color:var(--or); letter-spacing:4px; text-transform:uppercase; margin-top:5px; }
        .nav-menu { display:flex; gap:40px; list-style:none; align-items:center; }
        .nav-menu a { color:var(--cream); text-decoration:none; font-size:11px; letter-spacing:3px; text-transform:uppercase; transition:all .4s; position:relative; padding:5px 0; }
        .nav-menu a::before { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--or); transition:width .4s; }
        .nav-menu a:hover, .nav-menu a.active { color:var(--or); }
        .nav-menu a:hover::before, .nav-menu a.active::before { width:100%; }
        .nav-cta { color:var(--cream); text-decoration:none; font-size:11px; letter-spacing:3px; text-transform:uppercase; padding:12px 25px; border:1px solid var(--or); transition:all .4s; }
        .nav-cta:hover { background:var(--or); color:var(--noir); }
        .menu-toggle { display:none; background:none; border:none; color:var(--or); font-size:24px; cursor:pointer; padding:8px; }

        .hero { min-height:100vh; background:var(--noir); color:var(--cream); position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding-top:100px; }
        .hero-bg { position:absolute; inset:0; z-index:0; }
        .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease-in-out; }
        .hero-slide.active { opacity:1; }
        .hero-slide img { width:100%; height:100%; object-fit:cover; filter:grayscale(40%) brightness(0.5); }
        .hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--noir) 0%,rgba(10,10,10,.7) 50%,transparent 100%); z-index:1; }
        .hero-decorative { position:absolute; right:0; top:0; width:50%; height:100%; z-index:1; pointer-events:none; }
        .hero-content { position:relative; z-index:2; padding:60px 60px 60px 100px; }
        .hero-eyebrow { display:flex; align-items:center; gap:20px; margin-bottom:35px; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--or); opacity:0; animation:slideUp 1s ease .5s forwards; }
        .hero-eyebrow::before { content:''; width:60px; height:1px; background:var(--or); }
        .hero h1 { font-family:var(--display); font-size:clamp(50px,7vw,110px); line-height:.95; font-weight:400; margin-bottom:35px; letter-spacing:-1px; }
        .hero h1 .line { display:block; overflow:hidden; }
        .hero h1 .line span { display:inline-block; opacity:0; transform:translateY(100%); animation:slideUp 1s cubic-bezier(.16,1,.3,1) forwards; }
        .hero h1 .line:nth-child(1) span { animation-delay:.7s; }
        .hero h1 .line:nth-child(2) span { animation-delay:.9s; }
        .hero h1 .italic { font-style:italic; color:var(--or); }
        @keyframes slideUp { to { opacity:1; transform:translateY(0); } }
        .hero-desc { font-family:var(--serif); font-size:21px; line-height:1.6; max-width:540px; margin-bottom:45px; color:var(--gris-light); opacity:0; animation:slideUp 1s ease 1.2s forwards; font-weight:300; }
        .hero-actions { display:flex; gap:25px; align-items:center; opacity:0; animation:slideUp 1s ease 1.4s forwards; flex-wrap:wrap; }

        .btn-or { background:var(--or); color:var(--noir); padding:18px 40px; text-decoration:none; font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:600; transition:color .4s; position:relative; overflow:hidden; border:none; cursor:pointer; }
        .btn-or::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--cream); transition:left .4s; z-index:0; }
        .btn-or span { position:relative; z-index:1; }
        .btn-or:hover::before { left:0; }
        .btn-text { color:var(--cream); text-decoration:none; font-size:11px; letter-spacing:3px; text-transform:uppercase; display:flex; align-items:center; gap:12px; transition:gap .3s, color .3s; }
        .btn-text:hover { gap:20px; color:var(--or); }
        .btn-text-line { width:30px; height:1px; background:var(--cream); transition:all .3s; }
        .btn-text:hover .btn-text-line { background:var(--or); width:50px; }

        .hero-aside { position:absolute; right:60px; bottom:80px; z-index:3; text-align:right; }
        .hero-aside-num { font-family:var(--display); font-size:110px; color:var(--or); line-height:1; opacity:.25; }
        .hero-aside-text { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gris-light); margin-top:10px; }

        .hero-marquee { position:absolute; bottom:0; left:0; width:100%; padding:18px 0; border-top:1px solid rgba(201,169,97,.2); overflow:hidden; z-index:3; background:rgba(10,10,10,.6); }
        .hero-marquee-track { display:flex; gap:60px; animation:marquee 35s linear infinite; white-space:nowrap; }
        .hero-marquee-item { font-family:var(--display); font-size:22px; color:var(--gris-light); display:flex; align-items:center; gap:60px; letter-spacing:2px; }
        .hero-marquee-item::after { content:'✦'; color:var(--or); font-size:14px; }
        @keyframes marquee { to { transform:translateX(-50%); } }

        .section { padding:130px 60px; position:relative; scroll-margin-top:90px; }
        .section-num { font-family:var(--display); font-size:14px; color:var(--or); letter-spacing:4px; margin-bottom:25px; display:inline-block; }
        .section-title { font-family:var(--display); font-size:clamp(42px,5.5vw,80px); line-height:1; font-weight:400; color:var(--noir); margin-bottom:25px; letter-spacing:-1px; }
        .section-title .italic { font-style:italic; color:var(--or); }
        .section-lead { font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--gris); max-width:600px; font-weight:300; }

        .about { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start; }
        .about-visual { position:relative; height:700px; position:sticky; top:110px; }
        .about-img-1 { position:absolute; top:0; left:0; width:75%; height:80%; background-image:url('hero1.jpg'); background-size:cover; background-position:center; filter:grayscale(40%); box-shadow:0 30px 80px rgba(0,0,0,.2); }
        .about-img-2 { position:absolute; bottom:0; right:0; width:55%; height:50%; background-image:url('hero2.jpg'); background-size:cover; background-position:center; border:8px solid var(--cream); box-shadow:0 30px 80px rgba(0,0,0,.25); }
        .about-mark { position:absolute; top:30%; right:-30px; font-family:var(--display); font-size:200px; color:var(--or); opacity:.15; line-height:1; z-index:-1; }
        .about-content h2 { margin-bottom:35px; }
        .about-text { font-family:var(--serif); font-size:18px; line-height:1.7; color:var(--noir-soft); margin-bottom:25px; }
        .about-quote { border-left:2px solid var(--or); padding:18px 30px; margin:35px 0; font-family:var(--serif); font-style:italic; font-size:21px; color:var(--noir); line-height:1.5; }

        .timeline-section { margin-top:50px; padding-top:40px; border-top:1px solid var(--gris-light); }
        .timeline-section-title { font-family:var(--display); font-size:28px; color:var(--noir); margin-bottom:30px; font-style:italic; }
        .timeline { display:grid; gap:20px; }
        .timeline-item { display:grid; grid-template-columns:140px 1fr; gap:25px; padding:22px 25px; background:var(--cream-dark); border-left:3px solid var(--or); transition:all .4s; align-items:center; }
        .timeline-item:hover { transform:translateX(10px); background:var(--noir); border-left-color:var(--or-light); }
        .timeline-item:hover .timeline-year, .timeline-item:hover .timeline-content { color:var(--cream); }
        .timeline-year { font-family:var(--display); font-size:18px; color:var(--or); font-style:italic; transition:color .4s; }
        .timeline-content { font-family:var(--serif); font-size:16px; color:var(--noir-soft); line-height:1.5; transition:color .4s; }

        .expertises { background:var(--noir); color:var(--cream); }
        .expertises .section-title { color:var(--cream); }
        .expertises .section-lead { color:var(--gris-light); }
        .expertises-header { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin-bottom:80px; align-items:end; }
        .expertises-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,169,97,.15); border:1px solid rgba(201,169,97,.15); }
        .expertise-card { background:var(--noir); padding:55px 45px; transition:all .6s cubic-bezier(.16,1,.3,1); position:relative; cursor:pointer; overflow:hidden; min-height:360px; display:flex; flex-direction:column; }
        .expertise-card::before { content:''; position:absolute; inset:0; background:var(--or); transform:translateY(100%); transition:transform .6s cubic-bezier(.16,1,.3,1); z-index:0; }
        .expertise-card:hover::before { transform:translateY(0); }
        .expertise-card > * { position:relative; z-index:1; transition:color .4s; }
        .expertise-card:hover .expertise-num, .expertise-card:hover .expertise-title, .expertise-card:hover .expertise-desc, .expertise-card:hover .expertise-link { color:var(--noir); }
        .expertise-card:hover .expertise-icon { color:var(--noir); transform:rotate(-10deg) scale(1.1); }
        .expertise-num { font-family:var(--display); font-size:14px; color:var(--or); letter-spacing:3px; margin-bottom:25px; opacity:.7; }
        .expertise-icon { font-size:42px; color:var(--or); margin-bottom:25px; transition:all .5s; display:block; }
        .expertise-title { font-family:var(--display); font-size:28px; color:var(--cream); margin-bottom:18px; line-height:1.15; }
        .expertise-desc { font-family:var(--serif); font-size:16px; color:var(--gris-light); line-height:1.6; margin-bottom:auto; }
        .expertise-link { display:flex; align-items:center; gap:10px; color:var(--or); text-decoration:none; font-size:11px; letter-spacing:3px; text-transform:uppercase; margin-top:25px; font-family:var(--sans); font-weight:500; }

        .valeurs { background:var(--cream-dark); position:relative; overflow:hidden; }
        .valeurs::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; border:1px solid var(--or); border-radius:50%; opacity:.2; }
        .valeurs::after { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border:1px solid var(--or); border-radius:50%; opacity:.3; }
        .valeurs-header { text-align:center; margin-bottom:80px; position:relative; z-index:2; }
        .valeurs-header .section-lead { margin:20px auto 0; }
        .valeurs-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:25px; position:relative; z-index:2; }
        .valeur-card { background:var(--cream); padding:40px 25px; text-align:center; transition:all .5s cubic-bezier(.16,1,.3,1); position:relative; border:1px solid rgba(201,169,97,.2); }
        .valeur-card:hover { transform:translateY(-15px); border-color:var(--or); box-shadow:0 30px 60px rgba(10,10,10,.15); background:var(--noir); }
        .valeur-card:hover .valeur-icon { color:var(--or); }
        .valeur-card:hover .valeur-title, .valeur-card:hover .valeur-list li { color:var(--cream); }
        .valeur-card:hover .valeur-list li::before { background:var(--or); }
        .valeur-icon { font-size:38px; color:var(--or); margin-bottom:20px; transition:all .4s; }
        .valeur-title { font-family:var(--display); font-size:22px; color:var(--noir); margin-bottom:20px; transition:color .4s; }
        .valeur-list { list-style:none; padding:0; }
        .valeur-list li { font-family:var(--serif); font-size:14px; color:var(--gris); margin-bottom:10px; padding-left:18px; position:relative; transition:color .4s; line-height:1.4; }
        .valeur-list li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:1px; background:var(--or); transition:background .4s; }

        .references-header { text-align:center; margin-bottom:70px; }
        .references-header .section-lead { margin:20px auto 0; }
        .references-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(10,10,10,.1); border:1px solid rgba(10,10,10,.1); }
        .reference-card { background:var(--cream); padding:50px 40px; text-align:center; transition:all .4s; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px; }
        .reference-card:hover { background:var(--noir); transform:scale(1.02); }
        .reference-card img { max-height:80px; max-width:160px; object-fit:contain; margin-bottom:20px; filter:grayscale(100%); transition:all .4s; }
        .reference-card:hover img { filter:grayscale(0%) brightness(1.2); }
        .reference-card h3 { font-family:var(--display); font-size:18px; color:var(--noir); transition:color .4s; letter-spacing:1px; }
        .reference-card:hover h3 { color:var(--or); }

        .contact { background:var(--cream); position:relative; overflow:hidden; }
        .contact-header { text-align:center; margin-bottom:70px; }
        .contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start; }
        .contact-info-block { position:sticky; top:110px; }
        .contact-info-block h2 { margin-bottom:30px; }
        .contact-info-block .section-lead { margin-bottom:50px; }
        .contact-details { display:flex; flex-direction:column; gap:30px; }
        .contact-detail { display:grid; grid-template-columns:50px 1fr; gap:20px; align-items:start; padding-bottom:25px; border-bottom:1px solid var(--gris-light); }
        .contact-detail-icon { width:50px; height:50px; border:1px solid var(--or); display:flex; align-items:center; justify-content:center; color:var(--or); font-size:16px; transition:all .4s; }
        .contact-detail:hover .contact-detail-icon { background:var(--or); color:var(--cream); }
        .contact-detail-label { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gris); margin-bottom:8px; }
        .contact-detail-value { font-family:var(--serif); font-size:18px; color:var(--noir); line-height:1.5; text-decoration:none; }
        a.contact-detail-value:hover { color:var(--or); }

        .contact-form-block { background:var(--cream-dark); padding:55px; position:relative; }
        .contact-form-block::before { content:''; position:absolute; top:-1px; left:-1px; width:60px; height:60px; border-top:2px solid var(--or); border-left:2px solid var(--or); }
        .contact-form-block::after { content:''; position:absolute; bottom:-1px; right:-1px; width:60px; height:60px; border-bottom:2px solid var(--or); border-right:2px solid var(--or); }
        .form-title { font-family:var(--display); font-size:32px; color:var(--noir); margin-bottom:8px; }
        .form-subtitle { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--gris); margin-bottom:35px; }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
        .form-field { margin-bottom:25px; }
        .form-field label { display:block; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gris); margin-bottom:8px; }
        .form-field input, .form-field select, .form-field textarea { width:100%; padding:12px 0; background:transparent; border:none; border-bottom:1px solid var(--gris-light); font-family:var(--serif); font-size:17px; color:var(--noir); transition:all .4s; outline:none; }
        .form-field input::placeholder, .form-field textarea::placeholder { color:var(--gris); font-style:italic; }
        .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--or); }
        .form-field textarea { resize:vertical; min-height:100px; }
        .form-submit { width:100%; padding:20px; background:var(--noir); color:var(--cream); border:none; font-family:var(--sans); font-size:11px; letter-spacing:4px; text-transform:uppercase; font-weight:600; cursor:pointer; transition:color .4s; position:relative; overflow:hidden; margin-top:15px; }
        .form-submit::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--or); transition:left .4s; z-index:0; }
        .form-submit span { position:relative; z-index:1; }
        .form-submit:hover::before { left:0; }
        .form-submit:hover { color:var(--noir); }

        .form-message { padding:20px 25px; margin-bottom:30px; font-family:var(--serif); font-size:16px; border-left:3px solid; display:flex; align-items:flex-start; gap:15px; }
        .form-message i { font-size:24px; flex-shrink:0; margin-top:2px; }
        .form-message.success { background:rgba(76,175,80,.1); border-color:#4caf50; color:#2e7d32; }
        .form-message.error { background:rgba(244,67,54,.1); border-color:#f44336; color:#c62828; }
        .form-message strong { display:block; font-size:18px; margin-bottom:5px; font-style:normal; }

        .map-section { padding:0 60px 130px; }
        .map-container { width:100%; height:500px; box-shadow:0 30px 80px rgba(0,0,0,.15); border:1px solid rgba(201,169,97,.2); position:relative; overflow:hidden; }
        .map-container iframe { width:100%; height:100%; border:0; filter:grayscale(20%); }

        .footer { background:var(--noir); color:var(--cream); padding:100px 60px 40px; position:relative; }
        .footer-top { display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:60px; margin-bottom:70px; padding-bottom:60px; border-bottom:1px solid rgba(201,169,97,.2); }
        .footer-brand-logo img { height:90px; margin-bottom:25px; filter:brightness(1.1); }
        .footer-tagline { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--gris-light); line-height:1.6; margin-bottom:35px; max-width:380px; }
        .footer-social { display:flex; gap:15px; }
        .footer-social a { width:42px; height:42px; border:1px solid var(--or); display:flex; align-items:center; justify-content:center; color:var(--or); text-decoration:none; transition:all .4s; font-size:14px; }
        .footer-social a:hover { background:var(--or); color:var(--noir); }
        .footer h4 { font-family:var(--display); font-size:18px; color:var(--or); letter-spacing:3px; text-transform:uppercase; margin-bottom:25px; }
        .footer-list { list-style:none; padding:0; }
        .footer-list li { margin-bottom:14px; }
        .footer-list a { color:var(--gris-light); text-decoration:none; font-family:var(--serif); font-size:16px; transition:all .3s; display:inline-flex; align-items:center; gap:12px; }
        .footer-list a i { color:var(--or); font-size:13px; width:16px; }
        .footer-list a:hover { color:var(--or); transform:translateX(5px); }
        .footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--gris); letter-spacing:1px; }
        .footer-bottom a { color:var(--gris); text-decoration:none; margin-left:25px; transition:color .3s; }
        .footer-bottom a:hover { color:var(--or); }

        .floating-icons { position:fixed; bottom:30px; right:30px; z-index:998; display:flex; flex-direction:column; gap:12px; }
        .floating-icon { width:55px; height:55px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cream); text-decoration:none; font-size:22px; transition:all .4s; box-shadow:0 10px 30px rgba(0,0,0,.25); }
        .floating-icon.whatsapp { background:#25d366; }
        .floating-icon.phone { background:var(--noir); }
        .floating-icon.email { background:var(--or); color:var(--noir); }
        .floating-icon:hover { transform:translateY(-5px) scale(1.1); }

        @media (max-width:1100px) {
            .hero { grid-template-columns:1fr; }
            .hero-content { padding:60px 40px 100px; }
            .hero-decorative { display:none; }
            .about, .expertises-header, .contact-grid { grid-template-columns:1fr; gap:60px; }
            .about-visual { position:relative; top:0; height:500px; }
            .expertises-grid, .valeurs-grid, .references-grid { grid-template-columns:repeat(2,1fr); }
            .footer-top { grid-template-columns:1fr 1fr; }
        }
        @media (max-width:768px) {
            .nav { padding:15px 25px; }
            .nav-logo img { height:55px; }
            .nav-logo-name { font-size:14px; }
            .nav-logo-sub { font-size:8px; }
            .nav-menu, .nav-cta { display:none; }
            .menu-toggle { display:block; }
            .nav-menu.open { display:flex; position:fixed; top:80px; left:0; width:100%; background:var(--noir); flex-direction:column; padding:40px; gap:30px; z-index:999; }
            .section { padding:80px 25px; }
            .map-section { padding:0 25px 80px; }
            .hero-content { padding:40px 25px 100px; }
            .hero-aside { display:none; }
            .hero-marquee-item { font-size:16px; }
            .expertises-grid, .references-grid, .form-row, .valeurs-grid { grid-template-columns:1fr; }
            .timeline-item { grid-template-columns:1fr; gap:8px; }
            .footer-top { grid-template-columns:1fr; gap:40px; }
            .footer-bottom { flex-direction:column; gap:15px; text-align:center; }
            .contact-form-block { padding:35px 25px; }
            .cursor { display:none; }
        }
    </style>
</head>
<body>
    <div class="cursor" id="cursor"></div>

    <div id="preloader">
        <div>
            <div class="preloader-logo"><img src="logo.png" alt="Logo"></div>
        </div>
    </div>

    <nav class="nav" id="nav">
        <a href="#home" class="nav-logo">
            <img src="logo.png" alt="Logo Hicham Bouchareb">
        </a>
        <ul class="nav-menu" id="navMenu">
            <li><a href="#home" class="nav-link active">Accueil</a></li>
            <li><a href="#about" class="nav-link">À propos</a></li>
            <li><a href="#practice-areas" class="nav-link">Domaines</a></li>
            <li><a href="#vision" class="nav-link">Vision</a></li>
            <li><a href="#references" class="nav-link">Références</a></li>
        </ul>
        <a href="#contact" class="nav-cta">Rendez-vous</a>
        <button class="menu-toggle" id="menuToggle"><i class="fas fa-bars"></i></button>
    </nav>

    <section class="hero" id="home">
        <div class="hero-bg">
            <div class="hero-slide active"><img src="hero1.jpg" alt="Cabinet"></div>
            <div class="hero-slide"><img src="hero2.jpg" alt="Justice"></div>
        </div>
        <svg class="hero-decorative" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice">
            <circle cx="450" cy="400" r="300" fill="none" stroke="#c9a961" stroke-width="0.5" opacity="0.2"/>
            <circle cx="450" cy="400" r="240" fill="none" stroke="#c9a961" stroke-width="0.5" opacity="0.3"/>
            <circle cx="450" cy="400" r="180" fill="none" stroke="#c9a961" stroke-width="0.5" opacity="0.4"/>
            <circle cx="450" cy="400" r="120" fill="none" stroke="#c9a961" stroke-width="1" opacity="0.5"/>
            <line x1="450" y1="280" x2="450" y2="520" stroke="#c9a961" stroke-width="1" opacity="0.4"/>
            <line x1="350" y1="350" x2="550" y2="350" stroke="#c9a961" stroke-width="1" opacity="0.4"/>
            <circle cx="350" cy="380" r="40" fill="none" stroke="#c9a961" stroke-width="1" opacity="0.5"/>
            <circle cx="550" cy="380" r="40" fill="none" stroke="#c9a961" stroke-width="1" opacity="0.5"/>
        </svg>
        <div class="hero-content">
            <div class="hero-eyebrow">Avocat au Barreau du Maroc — Casablanca</div>
            <h1>
                <span class="line"><span>Maître Hicham</span></span>
                <span class="line"><span class="italic">Bouchareb</span></span>
            </h1>
            <p class="hero-desc">Expertise en recouvrement, procédures collectives, contentieux commercial, droit social et accompagnement juridique préventif.</p>
            <div class="hero-actions">
                <a href="#practice-areas" class="btn-or"><span>Nos domaines</span></a>
                <a href="#contact" class="btn-text">
                    <span class="btn-text-line"></span>
                    Prendre rendez-vous
                </a>
            </div>
        </div>
        <div class="hero-aside">
            <div class="hero-aside-num">2015</div>
            <div class="hero-aside-text">Cabinet à Casablanca</div>
        </div>
        <div class="hero-marquee">
            <div class="hero-marquee-track">
                <div class="hero-marquee-item">Recouvrement</div>
                <div class="hero-marquee-item">Procédures Collectives</div>
                <div class="hero-marquee-item">Contentieux Commercial</div>
                <div class="hero-marquee-item">Droit Social</div>
                <div class="hero-marquee-item">Conseil Préventif</div>
                <div class="hero-marquee-item">Recouvrement</div>
                <div class="hero-marquee-item">Procédures Collectives</div>
                <div class="hero-marquee-item">Contentieux Commercial</div>
                <div class="hero-marquee-item">Droit Social</div>
                <div class="hero-marquee-item">Conseil Préventif</div>
            </div>
        </div>
    </section>

    <section class="section" id="about">
        <div class="about">
            <div class="about-visual" data-aos="fade-right">
                <div class="about-img-1"></div>
                <div class="about-img-2"></div>
                <div class="about-mark">"</div>
            </div>
            <div class="about-content" data-aos="fade-left">
                <span class="section-num">— 01 / À Propos</span>
                <h2 class="section-title">Notre <span class="italic">Cabinet</span></h2>
                <p class="section-lead" style="margin-bottom:35px;">Présent à Casablanca depuis 2015 — intervention sur l'ensemble du territoire national.</p>
                <p class="about-text">Notre cabinet d'avocats présidé par Maître Bouchareb Hicham, établi depuis 2015 à proximité du tribunal de première instance social sur le Boulevard Mohamed Taieb Naciri Casablanca, bénéficie d'une position stratégique et d'un réseau national de partenaires couvrant les principales villes du Royaume.</p>
                <div class="about-quote">« Tanger-Tétouan, Agadir, Marrakech, Casablanca, Oujda-Nador, Fès, Laâyoune, Meknès et Rabat. »</div>
                <div class="timeline-section">
                    <h3 class="timeline-section-title">Parcours professionnel</h3>
                    <div class="timeline">
                        <div class="timeline-item"><div class="timeline-year">2004 — 2006</div><div class="timeline-content">Conseil juridique au sein du cabinet LARAQUI JAWAD</div></div>
                        <div class="timeline-item"><div class="timeline-year">2006 — 2011</div><div class="timeline-content">Spécialisation en recouvrement et gestion des dossiers hypothécaires (CIH) au sein du cabinet Bassamat et Associée</div></div>
                        <div class="timeline-item"><div class="timeline-year">2012 — 2015</div><div class="timeline-content">Avocat stagiaire et expertise en recouvrement de créances, liquidation et redressement judiciaires</div></div>
                        <div class="timeline-item"><div class="timeline-year">2015 — Présent</div><div class="timeline-content">Avocat titulaire spécialisé en recouvrement et contentieux commercial</div></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section expertises" id="practice-areas">
        <div class="expertises-header">
            <div data-aos="fade-up">
                <span class="section-num">— 02 / Domaines</span>
                <h2 class="section-title">Domaines d'<span class="italic">intervention</span></h2>
            </div>
            <p class="section-lead" data-aos="fade-up" data-aos-delay="200">Le cabinet prend en charge les contentieux devant l'ensemble des juridictions nationales et propose un conseil d'anticipation pour sécuriser vos opérations.</p>
        </div>
        <div class="expertises-grid">
            <div class="expertise-card" data-aos="fade-up">
                <div class="expertise-num">01</div>
                <i class="fas fa-file-invoice-dollar expertise-icon"></i>
                <h3 class="expertise-title">Recouvrement<br>de créances</h3>
                <p class="expertise-desc">Amiable et contentieux — stratégies adaptées pour récupérer efficacement vos créances.</p>
                <a href="#contact" class="expertise-link">Découvrir →</a>
            </div>
            <div class="expertise-card" data-aos="fade-up" data-aos-delay="100">
                <div class="expertise-num">02</div>
                <i class="fas fa-balance-scale-left expertise-icon"></i>
                <h3 class="expertise-title">Procédures<br>collectives</h3>
                <p class="expertise-desc">Gestion des procédures de redressement et de liquidation judiciaires avec approche stratégique.</p>
                <a href="#contact" class="expertise-link">Découvrir →</a>
            </div>
            <div class="expertise-card" data-aos="fade-up" data-aos-delay="200">
                <div class="expertise-num">03</div>
                <i class="fas fa-gavel expertise-icon"></i>
                <h3 class="expertise-title">Contentieux<br>commercial & civil</h3>
                <p class="expertise-desc">Représentation devant toutes les juridictions avec une stratégie de défense efficace.</p>
                <a href="#contact" class="expertise-link">Découvrir →</a>
            </div>
            <div class="expertise-card" data-aos="fade-up">
                <div class="expertise-num">04</div>
                <i class="fas fa-users expertise-icon"></i>
                <h3 class="expertise-title">Droit social<br>& de famille</h3>
                <p class="expertise-desc">Conseil et représentation en droit du travail, droit familial et successoral.</p>
                <a href="#contact" class="expertise-link">Découvrir →</a>
            </div>
            <div class="expertise-card" data-aos="fade-up" data-aos-delay="100">
                <div class="expertise-num">05</div>
                <i class="fas fa-shield-alt expertise-icon"></i>
                <h3 class="expertise-title">Accompagnement<br>juridique préventif</h3>
                <p class="expertise-desc">Audit, conformité et conseil pour anticiper les risques juridiques et sécuriser vos opérations.</p>
                <a href="#contact" class="expertise-link">Découvrir →</a>
            </div>
            <div class="expertise-card" data-aos="fade-up" data-aos-delay="200" style="background:linear-gradient(135deg,var(--or) 0%,var(--or-dark) 100%);">
                <div class="expertise-num" style="color:var(--noir); opacity:.6;">— —</div>
                <i class="fas fa-arrow-right expertise-icon" style="color:var(--noir);"></i>
                <h3 class="expertise-title" style="color:var(--noir);">Une question<br>juridique ?</h3>
                <p class="expertise-desc" style="color:var(--noir-soft);">Contactez-nous pour une première consultation et bénéficiez d'un avis professionnel.</p>
                <a href="#contact" class="expertise-link" style="color:var(--noir);">Nous contacter →</a>
            </div>
        </div>
    </section>

    <section class="section valeurs" id="vision">
        <div class="valeurs-header">
            <span class="section-num" data-aos="fade-up">— 03 / Vision & Valeurs</span>
            <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">Vision et <span class="italic">Valeurs</span></h2>
            <p class="section-lead" data-aos="fade-up" data-aos-delay="200">Notre approche se structure autour de principes forts pour garantir efficacité et confiance.</p>
        </div>
        <div class="valeurs-grid">
            <div class="valeur-card" data-aos="fade-up">
                <i class="fas fa-hands-helping valeur-icon"></i>
                <h3 class="valeur-title">Proximité<br>Client</h3>
                <ul class="valeur-list"><li>Interlocuteur dédié</li><li>Suivi personnalisé</li><li>Réunions de coordination</li></ul>
            </div>
            <div class="valeur-card" data-aos="fade-up" data-aos-delay="100">
                <i class="fas fa-bolt valeur-icon"></i>
                <h3 class="valeur-title">Réactivité<br>Opérationnelle</h3>
                <ul class="valeur-list"><li>Traitement prioritaire</li><li>Reporting régulier</li><li>Solutions adaptées</li></ul>
            </div>
            <div class="valeur-card" data-aos="fade-up" data-aos-delay="200">
                <i class="fas fa-graduation-cap valeur-icon"></i>
                <h3 class="valeur-title">Expertise<br>Sectorielle</h3>
                <ul class="valeur-list"><li>Connaissance approfondie</li><li>Veille juridique</li><li>Formation continue</li></ul>
            </div>
            <div class="valeur-card" data-aos="fade-up" data-aos-delay="300">
                <i class="fas fa-eye valeur-icon"></i>
                <h3 class="valeur-title">Transparence</h3>
                <ul class="valeur-list"><li>Honoraires clairs</li><li>Reporting détaillé</li><li>Communication régulière</li></ul>
            </div>
            <div class="valeur-card" data-aos="fade-up" data-aos-delay="400">
                <i class="fas fa-lock valeur-icon"></i>
                <h3 class="valeur-title">Confidentialité</h3>
                <ul class="valeur-list"><li>Protection des données</li><li>Archivage sécurisé</li><li>Engagements signés</li></ul>
            </div>
        </div>
    </section>

    <section class="section" id="references">
        <div class="references-header">
            <span class="section-num" data-aos="fade-up">— 04 / Références</span>
            <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">Ils nous font <span class="italic">confiance</span></h2>
            <p class="section-lead" data-aos="fade-up" data-aos-delay="200">Quelques entreprises et partenaires avec lesquels nous avons collaboré au fil des années.</p>
        </div>
        <div class="references-grid">
            <div class="reference-card" data-aos="fade-up"><img src="pneurama.png" alt="Pneurama"><h3>Pneurama</h3></div>
            <div class="reference-card" data-aos="fade-up" data-aos-delay="50"><img src="azellis.png" alt="Azellis"><h3>Azellis</h3></div>
            <div class="reference-card" data-aos="fade-up" data-aos-delay="100"><img src="appollo.png" alt="Appollo"><h3>Appollo</h3></div>
            <div class="reference-card" data-aos="fade-up"><img src="copima.png" alt="Copima"><h3>Copima</h3></div>
            <div class="reference-card" data-aos="fade-up" data-aos-delay="50"><img src="bgi petroleum.png" alt="BGI"><h3>BGI Petroleum</h3></div>
            <div class="reference-card" data-aos="fade-up" data-aos-delay="100"><img src="znaga carreaux.png" alt="Znaga"><h3>Znaga Carreaux</h3></div>
            <div class="reference-card" data-aos="fade-up"><img src="africa shining fuel.png" alt="Africa"><h3>Africa Shining Fuel</h3></div>
            <div class="reference-card" data-aos="fade-up" data-aos-delay="50"><img src="apavlogo.png" alt="APPAVE"><h3>APPAVE International</h3></div>
            <div class="reference-card" data-aos="fade-up" data-aos-delay="100"><img src="gllogo.png" alt="GL"><h3>General Lighting</h3></div>
        </div>
    </section>

    <section class="section contact" id="contact">
        <div class="contact-header">
            <span class="section-num" data-aos="fade-up">— 05 / Contact</span>
            <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">Discutons de votre <span class="italic">dossier</span></h2>
        </div>
        <div class="contact-grid">
            <div class="contact-info-block">
                <p class="section-lead" data-aos="fade-up">Notre équipe est à votre écoute pour étudier votre dossier en toute confidentialité et vous proposer un accompagnement adapté.</p>
                <div class="contact-details" data-aos="fade-up" data-aos-delay="100">
                    <div class="contact-detail">
                        <div class="contact-detail-icon"><i class="fas fa-map-marker-alt"></i></div>
                        <div>
                            <div class="contact-detail-label">Adresse</div>
                            <div class="contact-detail-value">Boulevard Mohamed Taieb Naciri,<br>Casablanca, Maroc</div>
                        </div>
                    </div>
                    <div class="contact-detail">
                        <div class="contact-detail-icon"><i class="fas fa-phone"></i></div>
                        <div>
                            <div class="contact-detail-label">Téléphone</div>
                            <a href="tel:+212601535768" class="contact-detail-value">+212 601 53 57 68</a>
                        </div>
                    </div>
                    <div class="contact-detail">
                        <div class="contact-detail-icon"><i class="fas fa-envelope"></i></div>
                        <div>
                            <div class="contact-detail-label">Email</div>
                            <a href="mailto:contact@hichamboucharebavocat.ma" class="contact-detail-value">contact@hichamboucharebavocat.ma</a>
                        </div>
                    </div>
                    <div class="contact-detail">
                        <div class="contact-detail-icon"><i class="far fa-clock"></i></div>
                        <div>
                            <div class="contact-detail-label">Heures d'ouverture</div>
                            <div class="contact-detail-value">Lundi — Vendredi : 9h00 — 18h00<br>Samedi : 9h00 — 13h00</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="contact-form-block" data-aos="fade-up">
                <h3 class="form-title">Demande de consultation</h3>
                <p class="form-subtitle">Réponse confidentielle dans les plus brefs délais</p>

                <?php if ($success): ?>
                    <div class="form-message success" id="formMessage">
                        <i class="fas fa-check-circle"></i>
                        <div>
                            <strong>Message envoyé avec succès !</strong>
                            Votre demande a bien été enregistrée. Nous vous répondrons dans les plus brefs délais à l'adresse email fournie.
                        </div>
                    </div>
                <?php elseif ($error): ?>
                    <div class="form-message error" id="formMessage">
                        <i class="fas fa-exclamation-circle"></i>
                        <div><strong>Erreur</strong><?= escape($error) ?></div>
                    </div>
                <?php endif; ?>

                <form method="POST" action="#contact">
                    <input type="hidden" name="contact_form" value="1">
                    <div class="form-row">
                        <div class="form-field">
                            <label for="name">Nom complet *</label>
                            <input id="name" name="name" type="text" placeholder="Votre nom" required value="<?= !$success ? escape($_POST['name'] ?? '') : '' ?>">
                        </div>
                        <div class="form-field">
                            <label for="phone">Téléphone *</label>
                            <input id="phone" name="phone" type="tel" placeholder="+212 ..." required value="<?= !$success ? escape($_POST['phone'] ?? '') : '' ?>">
                        </div>
                    </div>
                    <div class="form-field">
                        <label for="email">Email *</label>
                        <input id="email" name="email" type="email" placeholder="votre@email.com" required value="<?= !$success ? escape($_POST['email'] ?? '') : '' ?>">
                    </div>
                    <div class="form-field">
                        <label for="subject">Sujet</label>
                        <select id="subject" name="subject">
                            <option value="">Sélectionnez un sujet</option>
                            <option value="Recouvrement de créances">Recouvrement de créances</option>
                            <option value="Procédures collectives">Procédures collectives</option>
                            <option value="Contentieux commercial">Contentieux commercial</option>
                            <option value="Droit social">Droit social & famille</option>
                            <option value="Conseil préventif">Conseil juridique préventif</option>
                            <option value="Autre">Autre</option>
                        </select>
                    </div>
                    <div class="form-field">
                        <label for="message">Message *</label>
                        <textarea id="message" name="message" rows="4" placeholder="Décrivez brièvement votre situation..." required><?= !$success ? escape($_POST['message'] ?? '') : '' ?></textarea>
                    </div>
                    <button type="submit" class="form-submit"><span>Envoyer le message</span></button>
                </form>
            </div>
        </div>
    </section>

    <section class="map-section">
        <div class="map-container" data-aos="fade-up">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3325.07128482667!2d-7.671942125400004!3d33.55152417334954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda62d583049c9e5%3A0xc102899454eeba49!2sHichamBoucharebAvocat!5e0!3m2!1sfr!2sma!4v1763390445064!5m2!1sfr!2sma" loading="lazy" allowfullscreen=""></iframe>
        </div>
    </section>

    <footer class="footer">
        <div class="footer-top">
            <div>
                <div class="footer-brand-logo"><img src="logo.png" alt="Logo"></div>
                <p class="footer-tagline">Maître Hicham Bouchareb offre des services juridiques de haut niveau avec professionnalisme, rigueur et intégrité.</p>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div>
                <h4>Liens rapides</h4>
                <ul class="footer-list">
                    <li><a href="#home">Accueil</a></li>
                    <li><a href="#about">À propos</a></li>
                    <li><a href="#practice-areas">Domaines</a></li>
                    <li><a href="#vision">Vision & Valeurs</a></li>
                    <li><a href="#references">Références</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4>Contact</h4>
                <ul class="footer-list">
                    <li><a href="tel:+212601535768"><i class="fas fa-phone"></i> +212 601 53 57 68</a></li>
                    <li><a href="mailto:contact@hichamboucharebavocat.ma"><i class="fas fa-envelope"></i> contact@hichamboucharebavocat.ma</a></li>
                    <li><a><i class="fas fa-map-marker-alt"></i> Bd Mohamed Taieb Naciri, Casablanca</a></li>
                    <li><a><i class="far fa-clock"></i> Lun — Ven : 9h00 — 18h00</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; <span id="year"></span> Maître Hicham Bouchareb. Tous droits réservés.</p>
            <div>
                <a href="#">Mentions légales</a>
                <a href="#">Confidentialité</a>
            </div>
        </div>
    </footer>

    <div class="floating-icons">
        <a class="floating-icon whatsapp" href="https://wa.me/212601535768" target="_blank"><i class="fab fa-whatsapp"></i></a>
        <a class="floating-icon phone" href="tel:+212601535768"><i class="fas fa-phone"></i></a>
        <a class="floating-icon email" href="mailto:contact@hichamboucharebavocat.ma"><i class="fas fa-envelope"></i></a>
    </div>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        document.getElementById('year').textContent = new Date().getFullYear();
        AOS.init({ duration: 1200, once: true, offset: 100, easing: 'ease-out-cubic' });

        window.addEventListener('load', () => {
            setTimeout(() => document.getElementById('preloader').classList.add('hide'), 800);
        });

        const cursor = document.getElementById('cursor');
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX - 4 + 'px';
            cursor.style.top = e.clientY - 4 + 'px';
        });
        document.querySelectorAll('a, button, .expertise-card, .reference-card, .valeur-card').forEach(el => {
            el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
            el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
        });

        const nav = document.getElementById('nav');
        window.addEventListener('scroll', () => {
            nav.classList.toggle('scrolled', window.scrollY > 50);
        });

        let currentSlide = 0;
        const slides = document.querySelectorAll('.hero-slide');
        setInterval(() => {
            slides[currentSlide].classList.remove('active');
            currentSlide = (currentSlide + 1) % slides.length;
            slides[currentSlide].classList.add('active');
        }, 5000);

        const menuToggle = document.getElementById('menuToggle');
        const navMenu = document.getElementById('navMenu');
        menuToggle?.addEventListener('click', () => {
            navMenu.classList.toggle('open');
            const icon = menuToggle.querySelector('i');
            icon.classList.toggle('fa-bars');
            icon.classList.toggle('fa-times');
        });
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('open');
                const icon = menuToggle.querySelector('i');
                icon.classList.add('fa-bars');
                icon.classList.remove('fa-times');
            });
        });

        const sections = document.querySelectorAll('section[id]');
        const navLinks = document.querySelectorAll('.nav-link');
        window.addEventListener('scroll', () => {
            let current = '';
            const scrollY = window.pageYOffset + 150;
            sections.forEach(section => {
                if (scrollY >= section.offsetTop && scrollY < section.offsetTop + section.clientHeight) {
                    current = section.getAttribute('id');
                }
            });
            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === `#${current}`) link.classList.add('active');
            });
            if (scrollY < 100) {
                navLinks.forEach(link => link.classList.remove('active'));
                document.querySelector('.nav-link[href="#home"]')?.classList.add('active');
            }
        });

        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    e.preventDefault();
                    const offsetPosition = target.getBoundingClientRect().top + window.pageYOffset - 90;
                    window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
                }
            });
        });

        <?php if ($success || $error): ?>
        window.addEventListener('load', () => {
            setTimeout(() => {
                document.getElementById('contact').scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 1000);
        });
        <?php endif; ?>
    </script>
</body>
</html>
