enguerrandbusiness/obc-terrassement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add WordPress theme hooklab (réplique exacte du site Next.js)

Browse Source 
- 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
This commit is contained in:
Claude
2026-02-24 21:37:14 +00:00
parent c0ed7c50d7
commit 45d080197a
8 changed files with 1181 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
wordpress/themes/hooklab/footer.php Normal file
View File

@@ -0,0 +1,46 @@
<!-- FOOTER -->
<footer id="hl-footer">
<div class="container">
<div class="ft-grid">
<!-- Brand -->
<div class="ft-brand">
<div class="ft-logo">
<div class="lb">H</div>
Hook<em>Lab</em>
</div>
<p>Création de sites internet pour artisans.</p>
<small>59148 Flines-lez-Raches</small>
</div>
<!-- Expertises -->
<div class="ft-col">
<h4>Expertises</h4>
<ul>
<li><span>Site internet Couvreur</span></li>
<li><span>SEO Maçonnerie</span></li>
<li><span>Webmaster Paysagiste</span></li>
<li><span>Visibilité Menuisier</span></li>
</ul>
</div>
<!-- Legal -->
<div class="ft-col">
<h4>Légal</h4>
<ul>
<li><a href="<?php echo home_url('/mentions-legales'); ?>">Mentions légales</a></li>
<li><a href="<?php echo home_url('/confidentialite'); ?>">Politique de Confidentialité</a></li>
</ul>
</div>
</div>
<div class="ft-bot">
<p>&copy; <?php echo date('Y'); ?> HookLab &mdash; Enguerrand Ozano &middot; SIREN 994 538 932</p>
<p>Intervention&nbsp;: Douai &middot; Orchies &middot; Arleux &middot; Valenciennes</p>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

529
wordpress/themes/hooklab/front-page.php Normal file
View File

@@ -0,0 +1,529 @@
<?php get_header(); ?>
<!-- ══════════════════════════════════
HERO
══════════════════════════════════ -->
<section id="hl-hero" aria-label="Introduction">
<div class="h-g1"></div>
<div class="h-g2"></div>
<div class="h-grid"></div>
<div class="h-blob h-blob-1"></div>
<div class="h-blob h-blob-2"></div>
<div class="h-blob h-blob-3"></div>
<div class="h-cont container">
<div class="h-gl">
<!-- Left -->
<div>
<div class="h-loc">
<span class="dot"></span>
Flines-lez-Raches, Nord (59)
</div>
<h1 class="h-h1">
<span class="l1">Artisans du Nord&nbsp;:</span>
<span class="l2">Votre savoir-faire</span>
<span class="l3">mérite d'être vu.</span>
</h1>
<p class="h-sub">
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.
</p>
<div class="h-ctas">
<a href="#contact" class="btn btn-orange btn-lg pulse">
DÉMARRER MON DIAGNOSTIC GRATUIT
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg>
</a>
</div>
<p class="h-ne">Sans engagement. Réponse sous 24h.</p>
<div class="h-chks">
<?php foreach (['Réponse sous 24h', '100% Géré pour vous', 'Pas de jargon'] as $item): ?>
<div class="h-chk">
<div class="cc">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span><?php echo esc_html($item); ?></span>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Right – portrait -->
<div class="h-portrait">
<div class="h-p-inner">
<div class="h-p-glow"></div>
<div class="h-p-img">
<?php
$portrait = get_theme_mod('hero_portrait', '');
if ($portrait):
?>
<img src="<?php echo esc_url($portrait); ?>" alt="Enguerrand Ozano – HookLab">
<?php else: ?>
<div class="h-p-ph">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<p>Votre photo ici</p>
</div>
<?php endif; ?>
</div>
<div class="h-p-badge">Expert Nord (59)</div>
</div>
</div>
</div>
</div>
<a href="#hl-pb" class="h-scroll" aria-label="Défiler vers le bas">
<span>Scroll</span>
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
</a>
</section>
<!-- ══════════════════════════════════
PROBLÉMATIQUE
══════════════════════════════════ -->
<section id="hl-pb" class="sec" aria-label="La problématique">
<div class="container" style="max-width:56rem">
<div class="sr sr-up" style="text-align:center;margin-bottom:3rem">
<h2 class="pb-title">Mon rôle&nbsp;? <em>Faire savoir que vous êtes le meilleur.</em></h2>
<p class="pb-sub">
Vous avez l'expertise terrain, j'ai les outils pour la valoriser. Mon travail est simple&nbsp;:
m'assurer que la qualité de votre travail se voit aussi bien sur Google que sur vos chantiers.
</p>
</div>
<div class="sr sr-up" style="transition-delay:.1s">
<p class="pb-lead">Ce que je règle pour vous&nbsp;:</p>
</div>
<div class="pb-list">
<?php
$items = [
['Fini les « touristes »', 'Votre site filtre les demandes. Ceux qui vous appellent ont déjà vu vos réalisations et votre sérieux. Ils ne cherchent pas « un prix », ils cherchent votre qualité.'],
['Devant les concurrents', 'Quand un client tape « Terrassement » ou « Sol équestre » dans le secteur, c'est votre entreprise qui doit s'afficher en premier. Pas celle du voisin moins équipé.'],
['Zéro jargon, 100 % efficace', 'Pas de baratin technique. Je m'occupe de toute la mécanique (référencement, mises à jour, sécurité). Vous, vous avez juste un outil qui tourne et qui remplit le planning.'],
];
foreach ($items as $i => $item):
$delay = $i * 150;
?>
<div class="pb-item sr sr-lf" style="transition-delay:<?php echo $delay; ?>ms">
<div class="chk chk-or">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
</svg>
</div>
<div class="pb-item-text">
<strong><?php echo esc_html($item[0]); ?></strong>
<p><?php echo esc_html($item[1]); ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="sr sr-fd">
<div class="pb-engage">
<p>
<strong>Mon engagement&nbsp;:</strong>
Je ne suis pas là pour vous vendre du &laquo;&nbsp;rêve digital&nbsp;&raquo;. Je construis votre
<strong>Dossier de Confiance</strong> numérique pour que vos devis soient signés plus vite, et plus souvent.
</p>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════
PROCESS
══════════════════════════════════ -->
<section id="hl-proc" class="sec" aria-label="Le processus" style="background:var(--bg)">
<div class="container">
<div class="sec-h sr sr-up">
<span class="badge badge-or">Le Triptyque HookLab</span>
<h2>3 piliers pour remplir votre <em>carnet de commandes.</em></h2>
<p>Un système complet qui travaille pour vous 24h/24, même quand vous êtes sur le chantier.</p>
</div>
<div class="proc-steps">
<?php
$steps = [
[
'num' => '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' : '';
?>
<div class="proc-step <?php echo $rev; ?> sr <?php echo $dir; ?>" style="transition-delay:<?php echo $i*100; ?>ms">
<!-- Image -->
<div class="ps-img">
<div class="ps-img-inner">
<?php if ($s['img']): ?>
<img src="<?php echo esc_url($s['img']); ?>" alt="<?php echo esc_attr($s['title']); ?>" loading="lazy">
<?php else: ?>
<div style="width:100%;height:20rem;background:var(--navy-l);display:flex;align-items:center;justify-content:center">
<span style="color:rgba(255,255,255,.3);font-size:.875rem">Image à configurer</span>
</div>
<?php endif; ?>
</div>
<div class="ps-num"><?php echo esc_html($s['num']); ?></div>
</div>
<!-- Text -->
<div class="ps-txt">
<span class="sub"><?php echo esc_html($s['sub']); ?></span>
<h3><?php echo esc_html($s['title']); ?></h3>
<p><?php echo esc_html($s['desc']); ?></p>
<ul class="ps-pts">
<?php foreach ($s['pts'] as $pt): ?>
<li class="ps-pt">
<div class="chk chk-or" style="margin-top:.125rem">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span><?php echo esc_html($pt); ?></span>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ══════════════════════════════════
DEMOS LIVE
══════════════════════════════════ -->
<section id="exemples" class="sec" aria-label="Exemples" style="background:var(--bg)">
<div class="container">
<div class="sec-h sr sr-up" style="margin-bottom:3.5rem">
<span class="badge badge-or">Exemples</span>
<h2>Ne signez pas les yeux fermés. <em>Regardez ce que je peux faire pour vous.</em></h2>
<p>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.</p>
</div>
<div class="demos-grid">
<?php
$demos = [
[
'title' => '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' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>',
],
[
'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' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>',
],
[
'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' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>',
],
];
foreach ($demos as $i => $d):
?>
<div class="card sr sr-up" style="transition-delay:<?php echo $i*200; ?>ms">
<div class="dc-head">
<div class="dc-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><?php echo $d['icon']; ?></svg>
</div>
<h3><?php echo esc_html($d['title']); ?></h3>
<p><?php echo esc_html($d['sub']); ?></p>
</div>
<div class="dc-body">
<p><?php echo esc_html($d['desc']); ?></p>
<a href="<?php echo esc_url($d['href']); ?>" class="dc-cta">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
<?php echo esc_html($d['cta']); ?>
</a>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ══════════════════════════════════
ABOUT ME
══════════════════════════════════ -->
<section id="qui-suis-je" class="sec" aria-label="Qui suis-je">
<div id="hl-about">
<div class="ab-c1"></div>
<div class="ab-c2"></div>
<div class="container" style="position:relative;z-index:1">
<div style="display:grid;grid-template-columns:1fr;gap:3rem;align-items:center" id="about-grid">
<!-- Photo -->
<div class="ab-wrap sr sr-lf">
<div class="ab-inner">
<div class="ab-frame">
<?php
$photo = get_theme_mod('about_photo', '');
if ($photo):
?>
<img src="<?php echo esc_url($photo); ?>" alt="Enguerrand Ozano">
<?php else: ?>
<div class="ab-ph">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<p>Votre photo ici<br><small style="color:rgba(255,255,255,.35)">Personnalisable</small></p>
</div>
<?php endif; ?>
</div>
<div class="ab-loc">Basé à Flines-lez-Raches</div>
</div>
</div>
<!-- Text -->
<div class="ab-txt sr sr-rt">
<span class="badge badge-wh" style="margin-bottom:1rem">Votre expert local</span>
<h2>Enguerrand Ozano. <em>Votre voisin à Flines-lez-Raches.</em></h2>
<p>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.</p>
<ul class="ab-list">
<?php
$items = [
['Un interlocuteur unique', 'C'est moi qui gère votre dossier du début à la fin.'],
['100% Géré pour vous', 'Une fois le site lancé, vous n'avez rien à faire. Si vous avez une nouvelle photo de chantier, vous me l'envoyez, je la mets en ligne.'],
['Pas de mauvaise surprise', 'Tout est clair dès le départ.'],
];
foreach ($items as $item):
?>
<li class="ab-li">
<div class="chk chk-wh" style="flex-shrink:0;margin-top:.125rem">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p><strong><?php echo esc_html($item[0]); ?>&nbsp;:</strong> <?php echo esc_html($item[1]); ?></p>
</li>
<?php endforeach; ?>
</ul>
<a href="#contact" class="btn btn-navy">
Discutons de votre situation
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════
FAQ
══════════════════════════════════ -->
<section id="hl-faq" class="sec" aria-label="Questions fréquentes">
<div class="container" style="max-width:48rem">
<div class="sec-h sr sr-up" style="margin-bottom:3rem">
<span class="badge badge-nv">FAQ</span>
<h2 style="color:var(--navy)">Questions Franches</h2>
</div>
<div class="faq-list">
<?php
$faqs = [
['Je n'y connais rien en informatique, est-ce un problème ?', 'Absolument pas. C'est mon travail. Vous continuez à gérer vos chantiers, je m'occupe de tout ce qui est technique (sécurité, mise en ligne, affichage sur mobile).'],
['J'ai déjà une page Facebook, ça suffit non ?', 'Facebook est utile, mais ce n'est pas à vous. Un site internet est votre propriété et inspire beaucoup plus confiance pour signer des devis importants. C'est la différence entre un bricoleur et une entreprise établie.'],
['Combien ça coûte ?', 'Chaque artisan a des besoins différents. Je propose des forfaits clairs et adaptés aux TPE. Pas de frais cachés. Nous en parlerons de vive voix lors de l'audit.'],
];
foreach ($faqs as $i => $faq):
?>
<div class="faq-item sr sr-up" style="transition-delay:<?php echo $i*100; ?>ms">
<button class="faq-q" aria-expanded="false">
<span><?php echo esc_html($faq[0]); ?></span>
<svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="faq-a" role="region">
<div class="faq-a-in"><?php echo esc_html($faq[1]); ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- JSON-LD FAQ -->
<script type="application/ld+json">
<?php
$faq_ld = ['@context'=>'https://schema.org','@type'=>'FAQPage','mainEntity'=>[]];
foreach ($faqs as $f) {
$faq_ld['mainEntity'][] = ['@type'=>'Question','name'=>$f[0],'acceptedAnswer'=>['@type'=>'Answer','text'=>$f[1]]];
}
echo json_encode($faq_ld, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES);
?>
</script>
</div>
</section>
<!-- ══════════════════════════════════
CONTACT
══════════════════════════════════ -->
<section id="contact" class="sec" aria-label="Contact">
<div id="hl-contact">
<div class="container">
<div style="display:grid;grid-template-columns:1fr;gap:3rem;align-items:center" id="contact-grid">
<!-- Left -->
<div class="ct-l sr sr-lf">
<span class="badge badge-or">Audit gratuit</span>
<h2>Prêt à sécuriser votre carnet de commandes&nbsp;?</h2>
<p>Je regarde votre situation actuelle sur internet (gratuitement) et je vous dis honnêtement ce qu'on peut améliorer.</p>
<ul class="ct-chks">
<?php
$checks = [
'Audit de votre présence Google actuelle',
'Analyse de vos concurrents locaux',
'Plan d'action concret et chiffré',
'Réponse sous 24h',
];
foreach ($checks as $c):
?>
<li class="ct-chk">
<div class="chk-or2">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
</svg>
</div>
<span><?php echo esc_html($c); ?></span>
</li>
<?php endforeach; ?>
</ul>
</div>
<!-- Right – form -->
<div class="sr sr-rt">
<div class="ct-box">
<!-- Success -->
<div class="ct-success" id="ct-success">
<div class="si">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<h3>Demande envoyée&nbsp;!</h3>
<p>Je vous recontacte sous 24h pour planifier votre audit.</p>
</div>
<!-- Form -->
<div class="ct-form-wrap" id="ct-form-wrap">
<h3>Réserver mon audit gratuit</h3>
<p>Remplissez le formulaire, je vous recontacte rapidement.</p>
<form class="ct-form" id="hl-contact-form" novalidate>
<?php wp_nonce_field('hl_contact_nonce', 'hl_nonce'); ?>
<div class="form-g">
<label class="form-l" for="hl-name">Votre nom</label>
<input class="form-i" id="hl-name" name="name" type="text" required placeholder="Marc Dupont">
</div>
<div class="form-g">
<label class="form-l" for="hl-phone">Téléphone</label>
<input class="form-i" id="hl-phone" name="phone" type="tel" required placeholder="06 12 34 56 78">
</div>
<div class="form-g">
<label class="form-l" for="hl-metier">Votre métier</label>
<input class="form-i" id="hl-metier" name="metier" type="text" required placeholder="Couvreur, Menuisier, Paysagiste...">
</div>
<div class="form-g">
<label class="form-l" for="hl-ville">Ville / Zone</label>
<input class="form-i" id="hl-ville" name="ville" type="text" required placeholder="Douai, Valenciennes, Orchies...">
</div>
<p class="form-err" id="ct-error" style="display:none"></p>
<button type="submit" class="btn btn-orange btn-lg btn-full" id="ct-submit">
RÉSERVER MON AUDIT GRATUIT
</button>
<p class="form-hint">Gratuit &middot; Sans engagement &middot; Réponse sous 24h</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
// Responsive about grid
add_action('wp_footer', function () {
?>
<style>
@media(min-width:768px){
#about-grid{grid-template-columns:1fr 1fr}
#contact-grid{grid-template-columns:1fr 1fr}
}
</style>
<?php
});
?>
<?php get_footer(); ?>

45
wordpress/themes/hooklab/functions.php Normal file
View File

@@ -0,0 +1,45 @@
<?php
if (!defined('ABSPATH')) exit;
/* ── Setup ── */
add_action('after_setup_theme', function () {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
register_nav_menus(['primary' => '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 <noreply@hooklab.eu>"];
wp_mail($to, $subject, $message, $headers);
wp_send_json_success(['message' => 'Envoyé']);
}

63
wordpress/themes/hooklab/header.php Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- NAVBAR -->
<nav id="hl-nav" role="navigation" aria-label="Navigation principale">
<div class="container">
<div class="nav-in">
<!-- Logo -->
<a href="<?php echo home_url('/'); ?>" class="nav-logo" aria-label="HookLab – Accueil">
<div class="lb">H</div>
Hook<em>Lab</em>
</a>
<!-- Desktop links -->
<div class="nav-links">
<a href="#methode">Notre Méthode</a>
<a href="#exemples">Exemples</a>
<a href="#qui-suis-je">Qui suis-je</a>
</div>
<!-- Desktop CTA -->
<div class="nav-cta">
<a href="tel:+33604408157" class="btn btn-orange">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
06 04 40 81 57
</a>
</div>
<!-- Burger -->
<button class="nav-burger" id="nav-burger" aria-label="Menu" aria-expanded="false">
<svg id="burger-open" width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg id="burger-close" style="display:none" width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Mobile menu -->
<div class="nav-mob" id="nav-mob">
<a href="#methode">Notre Méthode</a>
<a href="#exemples">Exemples</a>
<a href="#qui-suis-je">Qui suis-je</a>
<a href="tel:+33604408157" class="btn btn-orange">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
06 04 40 81 57
</a>
</div>
</div>
</nav>

10
wordpress/themes/hooklab/index.php Normal file
View File

@@ -0,0 +1,10 @@
<?php get_header(); ?>
<main style="max-width:800px;margin:4rem auto;padding:0 1.5rem">
<?php if (have_posts()): while (have_posts()): the_post(); ?>
<article>
<h1 style="color:var(--navy);margin-bottom:1.5rem"><?php the_title(); ?></h1>
<div style="color:var(--text-l);line-height:1.8"><?php the_content(); ?></div>
</article>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

144
wordpress/themes/hooklab/js/main.js Normal file
View File

@@ -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 = '<div class="spinner"></div>&nbsp;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' });
}
});
});
})();

10
wordpress/themes/hooklab/page.php Normal file
View File

@@ -0,0 +1,10 @@
<?php get_header(); ?>
<main style="max-width:800px;margin:4rem auto;padding:0 1.5rem">
<?php if (have_posts()): while (have_posts()): the_post(); ?>
<article>
<h1 style="font-size:2rem;color:var(--navy);margin-bottom:2rem;font-weight:800"><?php the_title(); ?></h1>
<div style="color:var(--text-l);line-height:1.8;font-size:1rem"><?php the_content(); ?></div>
</article>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

334
wordpress/themes/hooklab/style.css Normal file
View File

@@ -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}