From 45d080197a36fbf42a56ad46616a1b6476fb59e5 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 24 Feb 2026 21:37:14 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20add=20WordPress=20theme=20hooklab=20(r?= =?UTF-8?q?=C3=A9plique=20exacte=20du=20site=20Next.js)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - style.css : design system complet (navy #1B2A4A, orange #E8772E, Inter, animations) - functions.php : enqueue scripts/styles + handler AJAX formulaire contact - header.php : navbar sticky avec burger mobile - front-page.php : toutes les sections (Hero, Problématique, Process, Demos, About, FAQ, Contact) - footer.php : footer 3 colonnes + bottom bar légal - js/main.js : scroll reveal, FAQ accordion, menu mobile, formulaire AJAX - index.php / page.php : templates fallback https://claude.ai/code/session_01PzA98VhLMmsHpzs7gnLHGs --- wordpress/themes/hooklab/footer.php | 46 +++ wordpress/themes/hooklab/front-page.php | 529 ++++++++++++++++++++++++ wordpress/themes/hooklab/functions.php | 45 ++ wordpress/themes/hooklab/header.php | 63 +++ wordpress/themes/hooklab/index.php | 10 + wordpress/themes/hooklab/js/main.js | 144 +++++++ wordpress/themes/hooklab/page.php | 10 + wordpress/themes/hooklab/style.css | 334 +++++++++++++++ 8 files changed, 1181 insertions(+) create mode 100644 wordpress/themes/hooklab/footer.php create mode 100644 wordpress/themes/hooklab/front-page.php create mode 100644 wordpress/themes/hooklab/functions.php create mode 100644 wordpress/themes/hooklab/header.php create mode 100644 wordpress/themes/hooklab/index.php create mode 100644 wordpress/themes/hooklab/js/main.js create mode 100644 wordpress/themes/hooklab/page.php create mode 100644 wordpress/themes/hooklab/style.css diff --git a/wordpress/themes/hooklab/footer.php b/wordpress/themes/hooklab/footer.php new file mode 100644 index 0000000..b1a6dc2 --- /dev/null +++ b/wordpress/themes/hooklab/footer.php @@ -0,0 +1,46 @@ + + + + + + diff --git a/wordpress/themes/hooklab/front-page.php b/wordpress/themes/hooklab/front-page.php new file mode 100644 index 0000000..10096ec --- /dev/null +++ b/wordpress/themes/hooklab/front-page.php @@ -0,0 +1,529 @@ + + + +
+
+
+
+
+
+
+ +
+
+ + +
+
+ + Flines-lez-Raches, Nord (59) +
+ +

+ Artisans du Nord : + Votre savoir-faire + mérite d'être vu. +

+ +

+ Vous construisez du solide sur vos chantiers. Je construis votre réputation solide sur internet. + Basé à Flines-lez-Raches, j'aide les professionnels du bâtiment de Douai, Orchies et Valenciennes + à être trouvés et choisis par les bons clients. +

+ +
+ + DÉMARRER MON DIAGNOSTIC GRATUIT + + + + +
+

Sans engagement. Réponse sous 24h.

+ +
+ +
+
+ + + +
+ +
+ +
+
+ + +
+
+
+
+ + Enguerrand Ozano – HookLab + +
+ + + +

Votre photo ici

+
+ +
+
Expert Nord (59)
+
+
+ +
+
+ + + Scroll + + + + +
+ + +
+
+ +
+

Mon rôle ? Faire savoir que vous êtes le meilleur.

+

+ Vous avez l'expertise terrain, j'ai les outils pour la valoriser. Mon travail est simple : + m'assurer que la qualité de votre travail se voit aussi bien sur Google que sur vos chantiers. +

+
+ +
+

Ce que je règle pour vous :

+
+ +
+ $item): + $delay = $i * 150; + ?> +
+
+ + + +
+
+ +

+
+
+ +
+ +
+
+

+ Mon engagement : + Je ne suis pas là pour vous vendre du « rêve digital ». Je construis votre + Dossier de Confiance numérique pour que vos devis soient signés plus vite, et plus souvent. +

+
+
+ +
+
+ + +
+
+ +
+ Le Triptyque HookLab +

3 piliers pour remplir votre carnet de commandes.

+

Un système complet qui travaille pour vous 24h/24, même quand vous êtes sur le chantier.

+
+ +
+ '01', + 'sub' => 'Être trouvé par les bons clients', + 'title' => 'Avis Google Maps automatiques', + 'desc' => 'Vos clients satisfaits laissent un avis en 30 secondes grâce à notre système automatisé. Plus d'avis = meilleur classement Google Maps = plus de clients qualifiés qui vous trouvent avant votre concurrent.', + 'pts' => ["Système d'envoi automatique après chaque chantier", 'QR Code personnalisé à montrer au client', 'Vos avis montent, votre classement Google aussi'], + 'img' => get_theme_mod('process_google', ''), + 'rev' => false, + ], + [ + 'num' => '02', + 'sub' => 'Montrer votre savoir-faire au quotidien', + 'title' => 'Facebook géré pour vous', + 'desc' => 'Je gère votre page Facebook avec vos photos de chantier. Vous prenez une photo, je la transforme en publication professionnelle qui donne envie. Micro-formation incluse pour prendre de belles photos sur le chantier.', + 'pts' => ['Publications régulières avec vos réalisations', 'Micro-formation : photos qui vendent', 'Vos futurs clients voient votre travail avant de vous appeler'], + 'img' => get_theme_mod('process_facebook', ''), + 'rev' => true, + ], + [ + 'num' => '03', + 'sub' => 'Transformer les visiteurs en devis qualifiés', + 'title' => 'Site internet qui convertit', + 'desc' => 'Un site pro qui met en avant votre travail, votre savoir-faire, votre plus-value. Avec un formulaire intelligent qui trie les curieux et augmente le nombre de devis qualifiés. Fini les appels pour « juste un prix ».', + 'pts' => ['Design pro qui inspire confiance immédiate', 'Formulaire intelligent : filtre les curieux', 'Optimisé Google pour votre zone (Douai, Orchies, Valenciennes)'], + 'img' => get_theme_mod('process_site', ''), + 'rev' => false, + ], + ]; + foreach ($steps as $i => $s): + $dir = ($i % 2 === 0) ? 'sr-lf' : 'sr-rt'; + $rev = $s['rev'] ? 'rev' : ''; + ?> +
+ + +
+
+ + <?php echo esc_attr($s['title']); ?> + +
+ Image à configurer +
+ +
+
+
+ + +
+ +

+

+
    + +
  • +
    + + + +
    + +
    • + +
+
+ +
+ +
+ +
+
+ + +
+
+ +
+ Exemples +

Ne signez pas les yeux fermés. Regardez ce que je peux faire pour vous.

+

Je ne vous demande pas de me croire sur parole. J'ai préparé des modèles adaptés à votre métier. Cliquez et imaginez votre logo à la place.

+
+ +
+ 'Le Modèle « Gros Œuvre »', + 'sub' => 'Maçons, Couvreurs', + 'desc' => 'Idéal pour montrer la technique. Un site qui met en avant vos photos « Avant / Après » pour prouver la qualité de vos finitions.', + 'cta' => 'Voir un exemple Maçonnerie', + 'href' => home_url('/macon'), + 'icon' => '', + ], + [ + 'title' => 'Le Modèle « Création »', + 'sub' => 'Paysagistes, Peintres', + 'desc' => 'Idéal pour vendre du rêve. Un design épuré qui laisse toute la place à la beauté de vos réalisations.', + 'cta' => 'Voir un exemple Paysagiste', + 'href' => home_url('/paysagiste'), + 'icon' => '', + ], + [ + 'title' => 'Le Modèle « Intervention »', + 'sub' => 'Plombiers, Électriciens', + 'desc' => 'Idéal pour l'urgence. Un site ultra-rapide avec votre numéro de téléphone bien visible pour être appelé en un clic.', + 'cta' => 'Voir un exemple Plombier', + 'href' => home_url('/plombier'), + 'icon' => '', + ], + ]; + foreach ($demos as $i => $d): + ?> +
+
+
+ +
+

+

+
+
+

+ + + + + + + +
+
+ +
+ +
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+ + Enguerrand Ozano + +
+ + + +

Votre photo ici
Personnalisable

+
+ +
+
Basé à Flines-lez-Raches
+
+
+ + +
+ Votre expert local +

Enguerrand Ozano. Votre voisin à Flines-lez-Raches.

+

Oubliez les plateformes téléphoniques à l'autre bout du monde. Je suis ici, dans le Nord (59). Je connais la réalité de vos métiers et vos contraintes géographiques.

+ +
    + +
  • +
    + + + +
    +

     :

    +
    • + +
+ + + Discutons de votre situation + + + + +
+ +
+
+
+
+ + +
+
+ +
+ FAQ +

Questions Franches

+
+ +
+ $faq): + ?> +
+ +
+
+
+
+ +
+ + + + +
+
+ + +
+
+
+
+ + +
+ Audit gratuit +

Prêt à sécuriser votre carnet de commandes ?

+

Je regarde votre situation actuelle sur internet (gratuitement) et je vous dis honnêtement ce qu'on peut améliorer.

+
    + +
  • +
    + + + +
    + +
    • + +
+
+ + +
+
+ +
+
+ + + +
+

Demande envoyée !

+

Je vous recontacte sous 24h pour planifier votre audit.

+
+ + +
+

Réserver mon audit gratuit

+

Remplissez le formulaire, je vous recontacte rapidement.

+ +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + + +

Gratuit · Sans engagement · Réponse sous 24h

+
+
+
+
+ +
+
+
+
+ + + + + + diff --git a/wordpress/themes/hooklab/functions.php b/wordpress/themes/hooklab/functions.php new file mode 100644 index 0000000..13420db --- /dev/null +++ b/wordpress/themes/hooklab/functions.php @@ -0,0 +1,45 @@ + 'Navigation principale']); +}); + +/* ── Enqueue ── */ +add_action('wp_enqueue_scripts', function () { + wp_enqueue_style('inter-font', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap', [], null); + wp_enqueue_style('hooklab-style', get_stylesheet_uri(), ['inter-font'], '1.0.0'); + wp_enqueue_script('hooklab-js', get_template_directory_uri() . '/js/main.js', [], '1.0.0', true); + wp_localize_script('hooklab-js', 'hlAjax', [ + 'url' => admin_url('admin-ajax.php'), + 'nonce' => wp_create_nonce('hl_contact_nonce'), + ]); +}); + +/* ── Contact form AJAX ── */ +add_action('wp_ajax_hl_contact', 'hl_handle_contact'); +add_action('wp_ajax_nopriv_hl_contact', 'hl_handle_contact'); + +function hl_handle_contact() { + check_ajax_referer('hl_contact_nonce', 'nonce'); + + $name = sanitize_text_field($_POST['name'] ?? ''); + $phone = sanitize_text_field($_POST['phone'] ?? ''); + $metier = sanitize_text_field($_POST['metier'] ?? ''); + $ville = sanitize_text_field($_POST['ville'] ?? ''); + + if (!$name || !$phone || !$metier || !$ville) { + wp_send_json_error(['message' => 'Tous les champs sont obligatoires.'], 400); + } + + $to = 'contact@hooklab.eu'; + $subject = "[HookLab] Nouveau diagnostic – $name ($metier)"; + $message = "Nom : $name\nTéléphone : $phone\nMétier : $metier\nVille : $ville"; + $headers = ['Content-Type: text/plain; charset=UTF-8', "From: HookLab "]; + + wp_mail($to, $subject, $message, $headers); + wp_send_json_success(['message' => 'Envoyé']); +} diff --git a/wordpress/themes/hooklab/header.php b/wordpress/themes/hooklab/header.php new file mode 100644 index 0000000..030edba --- /dev/null +++ b/wordpress/themes/hooklab/header.php @@ -0,0 +1,63 @@ + +> + + + + + +> + + + + diff --git a/wordpress/themes/hooklab/index.php b/wordpress/themes/hooklab/index.php new file mode 100644 index 0000000..fbd2a35 --- /dev/null +++ b/wordpress/themes/hooklab/index.php @@ -0,0 +1,10 @@ + +
+ +
+

+
+
+ +
+ diff --git a/wordpress/themes/hooklab/js/main.js b/wordpress/themes/hooklab/js/main.js new file mode 100644 index 0000000..e1d120e --- /dev/null +++ b/wordpress/themes/hooklab/js/main.js @@ -0,0 +1,144 @@ +(function () { + 'use strict'; + + /* ── Burger menu ── */ + const burger = document.getElementById('nav-burger'); + const mob = document.getElementById('nav-mob'); + const bOpen = document.getElementById('burger-open'); + const bClose = document.getElementById('burger-close'); + + if (burger && mob) { + burger.addEventListener('click', function () { + const isOpen = mob.classList.toggle('open'); + burger.setAttribute('aria-expanded', isOpen); + bOpen.style.display = isOpen ? 'none' : 'block'; + bClose.style.display = isOpen ? 'block' : 'none'; + }); + + // Close on anchor click + mob.querySelectorAll('a').forEach(function (a) { + a.addEventListener('click', function () { + mob.classList.remove('open'); + burger.setAttribute('aria-expanded', 'false'); + bOpen.style.display = 'block'; + bClose.style.display = 'none'; + }); + }); + } + + /* ── Scroll Reveal ── */ + const srEls = document.querySelectorAll('.sr'); + if ('IntersectionObserver' in window) { + const io = new IntersectionObserver(function (entries) { + entries.forEach(function (e) { + if (e.isIntersecting) { + e.target.classList.add('vis'); + io.unobserve(e.target); + } + }); + }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); + srEls.forEach(function (el) { io.observe(el); }); + } else { + srEls.forEach(function (el) { el.classList.add('vis'); }); + } + + /* ── FAQ Accordion ── */ + document.querySelectorAll('.faq-item').forEach(function (item) { + const btn = item.querySelector('.faq-q'); + const answer = item.querySelector('.faq-a'); + if (!btn || !answer) return; + + btn.addEventListener('click', function () { + const isOpen = item.classList.contains('open'); + + // Close all others + document.querySelectorAll('.faq-item.open').forEach(function (other) { + if (other !== item) { + other.classList.remove('open'); + other.querySelector('.faq-q').setAttribute('aria-expanded', 'false'); + } + }); + + item.classList.toggle('open', !isOpen); + btn.setAttribute('aria-expanded', !isOpen); + }); + }); + + /* ── Contact Form (AJAX) ── */ + const form = document.getElementById('hl-contact-form'); + const success = document.getElementById('ct-success'); + const wrap = document.getElementById('ct-form-wrap'); + const errEl = document.getElementById('ct-error'); + const submit = document.getElementById('ct-submit'); + + if (form && typeof hlAjax !== 'undefined') { + form.addEventListener('submit', function (e) { + e.preventDefault(); + + // Reset error + if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; } + + // Validate + const name = form.querySelector('[name="name"]').value.trim(); + const phone = form.querySelector('[name="phone"]').value.trim(); + const metier = form.querySelector('[name="metier"]').value.trim(); + const ville = form.querySelector('[name="ville"]').value.trim(); + + if (!name || !phone || !metier || !ville) { + if (errEl) { errEl.textContent = 'Veuillez remplir tous les champs.'; errEl.style.display = 'block'; } + return; + } + + // Loading state + if (submit) { + submit.classList.add('loading'); + submit.innerHTML = ' Envoi en cours…'; + } + + // Build FormData + const data = new FormData(); + data.append('action', 'hl_contact'); + data.append('nonce', hlAjax.nonce); + data.append('name', name); + data.append('phone', phone); + data.append('metier', metier); + data.append('ville', ville); + + fetch(hlAjax.url, { method: 'POST', body: data }) + .then(function (r) { return r.json(); }) + .then(function (res) { + if (res.success) { + if (wrap) { wrap.classList.add('hide'); } + if (success) { success.classList.add('show'); } + } else { + var msg = (res.data && res.data.message) ? res.data.message : 'Erreur lors de l\'envoi.'; + if (errEl) { errEl.textContent = msg; errEl.style.display = 'block'; } + if (submit) { + submit.classList.remove('loading'); + submit.innerHTML = 'RÉSERVER MON AUDIT GRATUIT'; + } + } + }) + .catch(function () { + if (errEl) { errEl.textContent = 'Erreur réseau. Veuillez réessayer.'; errEl.style.display = 'block'; } + if (submit) { + submit.classList.remove('loading'); + submit.innerHTML = 'RÉSERVER MON AUDIT GRATUIT'; + } + }); + }); + } + + /* ── Smooth scroll for anchor links ── */ + document.querySelectorAll('a[href^="#"]').forEach(function (a) { + a.addEventListener('click', function (e) { + const id = a.getAttribute('href').slice(1); + const el = document.getElementById(id); + if (el) { + e.preventDefault(); + el.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }); + }); + +})(); diff --git a/wordpress/themes/hooklab/page.php b/wordpress/themes/hooklab/page.php new file mode 100644 index 0000000..363e4a8 --- /dev/null +++ b/wordpress/themes/hooklab/page.php @@ -0,0 +1,10 @@ + +
+ +
+

+
+
+ +
+ diff --git a/wordpress/themes/hooklab/style.css b/wordpress/themes/hooklab/style.css new file mode 100644 index 0000000..6533285 --- /dev/null +++ b/wordpress/themes/hooklab/style.css @@ -0,0 +1,334 @@ +/* +Theme Name: HookLab +Theme URI: https://hooklab.eu +Author: Enguerrand Ozano +Version: 1.0.0 +Description: Thème HookLab – Agence web artisans du Nord (59) +Text Domain: hooklab +*/ + +/* ── VARIABLES ── */ +:root { + --navy: #1B2A4A; + --navy-l: #2A3D66; + --navy-d: #111D36; + --orange: #E8772E; + --orange-h: #D06522; + --bg: #F7F8FA; + --bg-w: #FFFFFF; + --text: #1A1A2E; + --text-l: #6B7280; + --text-m: #9CA3AF; + --border: #E5E7EB; + --success: #10B981; + --error: #EF4444; + --max-w: 1152px; +} + +*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} +html{scroll-behavior:smooth} +body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--bg-w);line-height:1.6;-webkit-font-smoothing:antialiased} +img{max-width:100%;height:auto;display:block} +a{text-decoration:none;color:inherit} +ul{list-style:none} +button{font-family:inherit;cursor:pointer;border:none;background:none} + +/* ── LAYOUT ── */ +.container{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)} +.sec{padding:5rem 0} +@media(min-width:768px){.sec{padding:6rem 0}} + +/* ── BUTTONS ── */ +.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:12px;font-weight:700;font-size:.875rem;transition:all .2s;cursor:pointer;border:none;font-family:inherit} +.btn-lg{padding:.9rem 2rem;font-size:1rem;border-radius:14px} +.btn-orange{background:var(--orange);color:#fff} +.btn-orange:hover{background:var(--orange-h);transform:translateY(-1px)} +.btn-navy{background:var(--navy);color:#fff} +.btn-navy:hover{background:var(--navy-l)} +.btn-full{width:100%} +.pulse{animation:pulseGlow 2.5s ease-in-out infinite} +@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,119,46,0)}50%{box-shadow:0 0 0 12px rgba(232,119,46,.18)}} + +/* ── BADGE ── */ +.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem;border-radius:999px;font-size:.75rem;font-weight:600} +.badge-or{background:rgba(232,119,46,.12);border:1px solid rgba(232,119,46,.25);color:var(--orange)} +.badge-nv{background:rgba(27,42,74,.06);border:1px solid rgba(27,42,74,.1);color:var(--navy)} +.badge-wh{background:rgba(255,255,255,.15);color:#fff} + +/* ── CARD ── */ +.card{background:var(--bg-w);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:border-color .3s,box-shadow .3s,transform .3s} +.card:hover{border-color:rgba(232,119,46,.25);box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-2px)} + +/* ── FORM ── */ +.form-g{display:flex;flex-direction:column;gap:.375rem} +.form-l{font-size:.875rem;font-weight:500;color:var(--text)} +.form-i{width:100%;padding:.75rem 1rem;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;font-size:.875rem;font-family:inherit;color:var(--text);transition:border-color .2s,box-shadow .2s;outline:none} +.form-i::placeholder{color:var(--text-m)} +.form-i:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,119,46,.12)} +.form-err{color:var(--error);font-size:.8125rem} +.form-hint{color:var(--text-m);font-size:.75rem;text-align:center} + +/* ── ICON CHECK ── */ +.chk{width:2rem;height:2rem;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center} +.chk svg{width:1rem;height:1rem} +.chk-or{background:rgba(232,119,46,.12)} +.chk-or svg{color:var(--orange)} +.chk-gn{background:rgba(16,185,129,.15)} +.chk-gn svg{color:var(--success)} +.chk-wh{background:rgba(255,255,255,.2)} +.chk-wh svg{color:#fff} + +/* ── SCROLL REVEAL ── */ +.sr{opacity:0;transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)} +.sr-up{transform:translateY(40px)} +.sr-dn{transform:translateY(-40px)} +.sr-lf{transform:translateX(-40px)} +.sr-rt{transform:translateX(40px)} +.sr-fd{transform:scale(.95)} +.sr.vis{opacity:1;transform:none} + +/* ════════════════════════════════ + NAVBAR +════════════════════════════════ */ +#hl-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} +.nav-in{display:flex;align-items:center;justify-content:space-between;height:4rem} +.nav-logo{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;color:var(--navy)} +.nav-logo .lb{width:2.25rem;height:2.25rem;background:var(--navy);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem} +.nav-logo em{color:var(--orange);font-style:normal} +.nav-links{display:none;align-items:center;gap:2rem} +@media(min-width:768px){.nav-links{display:flex}} +.nav-links a{font-size:.875rem;font-weight:500;color:var(--text-l);transition:color .2s} +.nav-links a:hover{color:var(--navy)} +.nav-cta{display:none} +@media(min-width:768px){.nav-cta{display:block}} +.nav-burger{display:flex;padding:.5rem;color:var(--text-l);transition:color .2s} +@media(min-width:768px){.nav-burger{display:none}} +.nav-burger:hover{color:var(--navy)} +.nav-burger svg{width:1.5rem;height:1.5rem} +.nav-mob{display:none;flex-direction:column;gap:.25rem;border-top:1px solid var(--border);padding:1rem 0} +.nav-mob.open{display:flex} +.nav-mob a{padding:.625rem 0;font-size:.875rem;font-weight:500;color:var(--text-l);transition:color .2s} +.nav-mob a:hover{color:var(--navy)} +.nav-mob .btn-orange{margin-top:.5rem;justify-content:center} + +/* ════════════════════════════════ + HERO +════════════════════════════════ */ +#hl-hero{position:relative;min-height:90vh;display:flex;align-items:center;background:var(--navy);overflow:hidden} +@media(min-width:768px){#hl-hero{min-height:100vh}} +.h-g1{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(232,119,46,.08),transparent 60%)} +.h-g2{position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.04),transparent 50%)} +.h-grid{position:absolute;inset:0;opacity:.03;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:60px 60px} +.h-blob{position:absolute;border-radius:50%;opacity:.06;animation:fltSlow 6s ease-in-out infinite} +.h-blob-1{width:12rem;height:12rem;background:var(--orange);top:10%;left:5%} +.h-blob-2{width:8rem;height:8rem;background:#fff;top:60%;right:8%;animation-delay:2s} +.h-blob-3{width:6rem;height:6rem;background:var(--orange);bottom:20%;left:30%;animation-delay:4s} + +.h-cont{position:relative;z-index:10;padding:5rem 0} +@media(min-width:768px){.h-cont{padding:8rem 0}} +.h-gl{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center} +@media(min-width:1024px){.h-gl{grid-template-columns:1fr 1fr}} + +.h-loc{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(232,119,46,.12);border:1px solid rgba(232,119,46,.25);border-radius:999px;color:var(--orange);font-size:.75rem;font-weight:600;margin-bottom:2rem;animation:fadeDown .6s ease both} +.h-loc .dot{width:.5rem;height:.5rem;background:var(--orange);border-radius:50%;animation:dot-pulse 2s infinite} + +.h-h1{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:1.5rem} +.h-h1 .l1{display:block;animation:heroTxt .5s ease .1s both} +.h-h1 .l2{display:block;animation:heroTxt .5s ease .3s both} +.h-h1 .l3{display:block;color:var(--orange);position:relative;animation:heroTxt .5s ease .5s both} +.h-h1 .l3::after{content:'';position:absolute;bottom:-.25rem;left:0;height:3px;background:rgba(232,119,46,.4);border-radius:99px;width:0;animation:ulGrow 1s ease .8s forwards} + +.h-sub{color:rgba(255,255,255,.65);font-size:1.0625rem;line-height:1.7;max-width:38rem;margin-bottom:2.5rem;animation:fadeUp .5s ease .6s both} +.h-ctas{display:flex;flex-direction:column;gap:1rem;animation:fadeUp .5s ease .8s both} +@media(min-width:640px){.h-ctas{flex-direction:row}} +.h-ne{color:rgba(255,255,255,.35);font-size:.75rem;margin-top:.75rem;animation:fadeUp .5s ease .8s both} + +.h-chks{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:2rem;animation:fadeUp .5s ease 1s both} +.h-chk{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.5);font-size:.875rem} +.h-chk .cc{width:1.25rem;height:1.25rem;background:rgba(16,185,129,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} +.h-chk .cc svg{width:.75rem;height:.75rem;color:var(--success)} + +.h-portrait{display:none} +@media(min-width:1024px){.h-portrait{display:flex;justify-content:center}} +.h-p-inner{position:relative} +.h-p-glow{position:absolute;inset:-1rem;background:rgba(232,119,46,.2);border-radius:1.5rem;filter:blur(2rem)} +.h-p-img{position:relative;width:20rem;height:24rem;border-radius:1rem;overflow:hidden;border:2px solid rgba(255,255,255,.1)} +.h-p-img img{width:100%;height:100%;object-fit:cover} +.h-p-ph{width:100%;height:100%;background:var(--navy-l);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem} +.h-p-ph svg{width:2.5rem;height:2.5rem;color:rgba(232,119,46,.5)} +.h-p-ph p{color:rgba(255,255,255,.3);font-size:.875rem} +.h-p-badge{position:absolute;bottom:-.75rem;right:-.75rem;background:var(--orange);color:#fff;font-size:.75rem;font-weight:700;padding:.5rem 1rem;border-radius:.75rem;box-shadow:0 4px 12px rgba(0,0,0,.2)} + +.h-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.3);font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;animation:bounce 2s ease-in-out infinite} +.h-scroll svg{width:1.25rem;height:1.25rem} + +/* ════════════════════════════════ + PROBLEMATIQUE +════════════════════════════════ */ +#hl-pb{background:var(--bg)} +.pb-title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:.75rem} +.pb-title em{font-style:normal;color:var(--orange)} +.pb-sub{color:var(--text-l);font-size:1.0625rem;max-width:38rem;margin:0 auto} +.pb-lead{font-weight:700;font-size:1.0625rem;color:var(--navy);margin:2rem 0 1.25rem} +.pb-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem} +.pb-item{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;background:var(--bg-w);border:1px solid var(--border);border-radius:16px;transition:border-color .3s} +.pb-item:hover{border-color:rgba(232,119,46,.25)} +.pb-item-text strong{display:block;font-weight:700;color:var(--navy);margin-bottom:.25rem} +.pb-item-text p{font-size:.875rem;color:var(--text-l);line-height:1.65} +.pb-engage{background:var(--navy);border-radius:1.25rem;padding:2rem;text-align:center;color:#fff;font-size:1rem;line-height:1.7} +@media(min-width:768px){.pb-engage{padding:2.5rem;font-size:1.125rem}} +.pb-engage strong{color:var(--orange);font-size:1.125rem;font-weight:900} +@media(min-width:768px){.pb-engage strong{font-size:1.25rem}} + +/* ════════════════════════════════ + PROCESS +════════════════════════════════ */ +#hl-proc{background:var(--bg)} +.sec-h{text-align:center;margin-bottom:4rem} +.sec-h h2{font-size:clamp(1.5rem,3vw,2.5rem);color:var(--navy);margin:.75rem 0} +.sec-h h2 em{font-style:normal;color:var(--orange)} +.sec-h p{color:var(--text-l);font-size:1.0625rem;max-width:38rem;margin:0 auto} + +.proc-steps{display:flex;flex-direction:column;gap:4rem} +@media(min-width:768px){.proc-steps{gap:6rem}} +.proc-step{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center} +@media(min-width:768px){.proc-step{grid-template-columns:1fr 1fr}} +.proc-step.rev .ps-img{order:0} +.proc-step.rev .ps-txt{order:0} +@media(min-width:768px){.proc-step.rev .ps-img{order:2}.proc-step.rev .ps-txt{order:1}} + +.ps-img{position:relative} +.ps-img-inner{border-radius:1.25rem;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.14);position:relative} +.ps-img-inner img{width:100%;height:16rem;object-fit:cover} +@media(min-width:768px){.ps-img-inner img{height:20rem}} +.ps-img-inner::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(27,42,74,.3),transparent)} +.ps-num{position:absolute;top:-1rem;left:-1rem;width:4rem;height:4rem;background:var(--orange);border-radius:1rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:1} + +.ps-txt .sub{color:var(--orange);font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em} +.ps-txt h3{font-size:clamp(1.375rem,2.5vw,1.875rem);color:var(--navy);margin:.5rem 0 1rem} +.ps-txt p{color:var(--text-l);line-height:1.7;margin-bottom:1.5rem} +.ps-pts{display:flex;flex-direction:column;gap:.75rem} +.ps-pt{display:flex;align-items:flex-start;gap:.75rem} +.ps-pt .chk-or{margin-top:.125rem} +.ps-pt span{font-size:.875rem;font-weight:500;color:var(--text)} + +/* ════════════════════════════════ + DEMOS +════════════════════════════════ */ +#hl-demos{background:var(--bg)} +.demos-grid{display:grid;grid-template-columns:1fr;gap:1.5rem} +@media(min-width:768px){.demos-grid{grid-template-columns:repeat(3,1fr)}} +.demos-grid .card{display:flex;flex-direction:column} +.dc-head{background:var(--navy);padding:1.5rem;text-align:center} +.dc-icon{width:4rem;height:4rem;background:rgba(232,119,46,.18);border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:var(--orange)} +.dc-icon svg{width:2.5rem;height:2.5rem} +.dc-head h3{color:#fff;font-size:1.125rem;margin-bottom:.25rem} +.dc-head p{color:var(--orange);font-size:.875rem;font-weight:600} +.dc-body{padding:1.25rem;display:flex;flex-direction:column;flex:1} +.dc-body p{color:var(--text-l);font-size:.875rem;line-height:1.65;flex:1} +.dc-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--orange);color:#fff;font-weight:700;font-size:.875rem;padding:.75rem 1.25rem;border-radius:.75rem;margin-top:1.25rem;transition:background .2s,transform .2s} +.dc-cta:hover{background:var(--orange-h);transform:scale(1.02)} +.dc-cta svg{width:1rem;height:1rem} + +/* ════════════════════════════════ + ABOUT +════════════════════════════════ */ +#hl-about{background:var(--orange);position:relative;overflow:hidden} +.ab-c1{position:absolute;top:5rem;right:5rem;width:10rem;height:10rem;border:2px solid rgba(255,255,255,.15);border-radius:50%} +.ab-c2{position:absolute;bottom:2rem;left:2rem;width:15rem;height:15rem;border:2px solid rgba(255,255,255,.1);border-radius:50%} +.ab-wrap{display:flex;justify-content:center} +.ab-inner{position:relative} +.ab-frame{width:16rem;height:22rem;border-radius:1.25rem;overflow:hidden;border:4px solid rgba(255,255,255,.2);box-shadow:0 10px 40px rgba(0,0,0,.14)} +@media(min-width:640px){.ab-frame{width:18rem;height:24rem}} +.ab-frame img{width:100%;height:100%;object-fit:cover} +.ab-ph{width:100%;height:100%;background:var(--orange-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem} +.ab-ph svg{width:2.5rem;height:2.5rem;color:rgba(255,255,255,.5)} +.ab-ph p{color:rgba(255,255,255,.5);font-size:.875rem;text-align:center} +.ab-loc{position:absolute;bottom:-.75rem;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:.75rem;font-weight:700;padding:.5rem 1.25rem;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2);white-space:nowrap} + +.ab-txt .badge{margin-bottom:1rem} +.ab-txt h2{font-size:clamp(1.5rem,3vw,2.5rem);color:#fff;margin-bottom:1rem} +.ab-txt h2 em{font-style:normal;color:var(--navy)} +.ab-txt>p{color:rgba(255,255,255,.9);line-height:1.7;margin-bottom:1.5rem} +.ab-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem} +.ab-li{display:flex;align-items:flex-start;gap:.75rem} +.ab-li .chk-wh{flex-shrink:0;margin-top:.125rem} +.ab-li p{color:rgba(255,255,255,.8);line-height:1.6} +.ab-li strong{color:#fff} + +/* ════════════════════════════════ + FAQ +════════════════════════════════ */ +#hl-faq{background:var(--bg)} +.faq-list{display:flex;flex-direction:column;gap:.75rem} +.faq-item{background:var(--bg-w);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:border-color .3s} +.faq-item:hover,.faq-item.open{border-color:rgba(232,119,46,.2)} +.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.25rem;text-align:left;cursor:pointer;background:none;border:none;font-family:inherit;font-size:.9375rem;font-weight:600;color:var(--navy);transition:background .2s} +.faq-q:hover{background:rgba(247,248,250,.8)} +.faq-icon{width:1.25rem;height:1.25rem;color:var(--text-m);flex-shrink:0;transition:transform .3s} +.faq-item.open .faq-icon{transform:rotate(180deg)} +.faq-a{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .35s ease} +.faq-item.open .faq-a{max-height:20rem;opacity:1} +.faq-a-in{padding:0 1.25rem 1.25rem;color:var(--text-l);font-size:.875rem;line-height:1.7} + +/* ════════════════════════════════ + CONTACT +════════════════════════════════ */ +#hl-contact{background:var(--navy)} +.ct-l .badge{margin-bottom:1rem} +.ct-l h2{font-size:clamp(1.5rem,3vw,2.5rem);color:#fff;margin-bottom:1rem} +.ct-l>p{color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:1.5rem} +.ct-chks{display:flex;flex-direction:column;gap:.75rem} +.ct-chk{display:flex;align-items:center;gap:.75rem} +.ct-chk .chk-or2{width:1.25rem;height:1.25rem;background:rgba(232,119,46,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} +.ct-chk .chk-or2 svg{width:.75rem;height:.75rem;color:var(--orange)} +.ct-chk span{color:rgba(255,255,255,.8);font-size:.875rem} + +.ct-box{background:#fff;border-radius:1.25rem;padding:2rem;box-shadow:0 10px 40px rgba(0,0,0,.14)} +@media(min-width:640px){.ct-box{padding:2.5rem}} +.ct-box h3{font-size:1.25rem;color:var(--navy);margin-bottom:.25rem} +.ct-box>p{color:var(--text-l);font-size:.875rem;margin-bottom:1.5rem} +.ct-form{display:flex;flex-direction:column;gap:1rem} +.ct-success{text-align:center;padding:2rem 0;display:none} +.ct-success.show{display:block} +.ct-success .si{width:4rem;height:4rem;background:rgba(16,185,129,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem} +.ct-success .si svg{width:2rem;height:2rem;color:var(--success)} +.ct-success h3{font-size:1.25rem;color:var(--navy);margin-bottom:.5rem} +.ct-success p{color:var(--text-l);font-size:.875rem} +.ct-form-wrap{display:block} +.ct-form-wrap.hide{display:none} + +/* ════════════════════════════════ + FOOTER +════════════════════════════════ */ +#hl-footer{background:var(--bg-w);border-top:1px solid var(--border);padding:3rem 0 2rem} +.ft-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem} +@media(min-width:768px){.ft-grid{grid-template-columns:repeat(3,1fr)}} +.ft-logo{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:700;color:var(--navy);margin-bottom:.75rem} +.ft-logo .lb{width:2rem;height:2rem;background:var(--navy);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8125rem} +.ft-logo em{font-style:normal;color:var(--orange)} +.ft-brand p{color:var(--text-l);font-size:.875rem;line-height:1.6;max-width:18rem} +.ft-brand small{color:var(--text-m);font-size:.75rem;display:block;margin-top:.75rem} +.ft-col h4{color:var(--navy);font-size:.875rem;font-weight:600;margin-bottom:1rem} +.ft-col li{margin-bottom:.5rem} +.ft-col li a,.ft-col li span{color:var(--text-l);font-size:.875rem;transition:color .2s} +.ft-col li a:hover{color:var(--navy)} +.ft-bot{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;flex-direction:column;gap:.75rem;align-items:center;justify-content:space-between} +@media(min-width:768px){.ft-bot{flex-direction:row}} +.ft-bot p{color:var(--text-m);font-size:.75rem;text-align:center} + +/* ── KEYFRAMES ── */ +@keyframes heroTxt{from{opacity:0;transform:translateY(20px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} +@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} +@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} +@keyframes ulGrow{from{width:0}to{width:100%}} +@keyframes fltSlow{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.05)}} +@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.4}} +@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}} +@keyframes spin{to{transform:rotate(360deg)}} + +/* misc */ +.text-orange{color:var(--orange)} +.text-navy{color:var(--navy)} +.spinner{width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite} +.btn.loading{opacity:.8;pointer-events:none}