<!--
=====================================================================
GLOBAL PAGE TEMPLATE
MASTER HTML STRUCTURE
=====================================================================

This file is a MASTER HTML TEMPLATE used to generate all pages of the site.

It contains:

• structural sections
• design layout blocks
• placeholder variables
• accessibility attributes
• reusable content structures

This template is intentionally generic. It does not represent a final
page but a structural blueprint used to build real pages by replacing
placeholder values with real content.

---------------------------------------------------------------------
PLACEHOLDERS
---------------------------------------------------------------------

All placeholder values in this template must be replaced when generating
a real page.

Placeholders follow a simple convention: lowercase words separated
with underscores.

Example:
title_page
description_page
nav_item_1

These placeholders represent dynamic content such as SEO metadata,
navigation labels, company information, text content or media data.

Below is the list of placeholders used in this template.

---------------------------------------------------------------------
SEO & PAGE META
---------------------------------------------------------------------

lang_page
title_page
description_page
url_page
image_partage

---------------------------------------------------------------------
NAVIGATION
---------------------------------------------------------------------

nav_item_1
nav_item_2
nav_item_3
nav_item_4
nav_cta_label

skip_link_label

---------------------------------------------------------------------
CALL TO ACTION
---------------------------------------------------------------------

cta_label_primary
cta_label_secondary

---------------------------------------------------------------------
LINKS
---------------------------------------------------------------------

description_lien

---------------------------------------------------------------------
ARIA / ACCESSIBILITY
---------------------------------------------------------------------

aria_home
aria_menu
aria-label_id_section

---------------------------------------------------------------------
SECTION IDENTIFIERS
---------------------------------------------------------------------

id_section

These identifiers are placeholders and must be replaced with
unique IDs in real pages.

---------------------------------------------------------------------
MEDIA
---------------------------------------------------------------------

description_image

---------------------------------------------------------------------
COMPANY INFORMATION
---------------------------------------------------------------------

company_name
company_address
company_email
company_phone
company_siret
company_registration_city

---------------------------------------------------------------------
FOOTER
---------------------------------------------------------------------

footer_col_1_title
footer_col_2_title
footer_col_3_title
footer_col_4_title

footer_link_1
footer_link_2
footer_link_3
footer_link_4
footer_link_5
footer_link_6
footer_link_7
footer_link_8
footer_link_9
footer_link_10
footer_link_11
footer_link_12

copyright_year

---------------------------------------------------------------------
SECTION COMMENT SYSTEM
---------------------------------------------------------------------

Each major block of the page is wrapped inside clearly marked comments.

Example:

SECTION: HEADER_MAIN
END SECTION: HEADER_MAIN

These markers are used to:

• easily identify sections in the template
• simplify editing and maintenance
• allow safe extraction of sections
• support automated page generation

Sections represent reusable layout components such as:

HEADER
MOBILE MENU
HERO
CONTENT BLOCKS
MEDIA BLOCKS
PROCESS TIMELINE
CARDS / GRIDS
FAQ
CTA PANELS
PREFOOTER
FOOTER

---------------------------------------------------------------------
IMPORTANT RULES
---------------------------------------------------------------------

When generating a real page from this template:

• Replace all placeholders with real values
• Keep section comments intact
• Maintain semantic HTML structure
• Preserve accessibility attributes
• Ensure unique IDs where required
• Do not remove structural containers

---------------------------------------------------------------------
PURPOSE
---------------------------------------------------------------------

The purpose of this template is to centralize all reusable layout
components in a single master file to ensure:

• consistent page structure
• easier maintenance
• scalable site architecture
• safe content generation

=====================================================================
END OF TEMPLATE DOCUMENTATION
=====================================================================
-->

<!doctype html>
<html lang="lang_page">
<head>
  <meta charset="utf-8" />
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="description_page" />

  <link rel="canonical" href="url_page" />
  <meta property="og:url" content="url_page">

  <meta property="og:title" content="title_page">
  <meta property="og:description" content="description_page">
  <meta property="og:image" content="image_partage">
  <meta property="og:type" content="website">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="title_page">
  <meta name="twitter:description" content="description_page">
  <meta name="twitter:image" content="image_partage">

  <title>title_page</title>
  
  <link rel="stylesheet" href="assets/css/main.css" />
  <script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Organization",
 "name": "company_name",
 "url": "url_page",
 "logo": "logo_url",
 "description": "Lorem ipsum dolor sit amet"
}
</script>

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "WebSite",
 "name": "site_name",
 "url": "url_page",
 "description": "Lorem ipsum dolor sit amet",
 "publisher": {
  "@type": "Organization",
  "name": "company_name"
 }
}
</script>

  <script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "WebPage",
 "name": "title_page",
 "description": "description_page",
 "url": "url_page",
 "inLanguage": "lang_page",
 "isPartOf": {
  "@type": "WebSite",
  "name": "site_name",
  "url": "url_page"
 }
}
</script>
</head>
<body>
  <a class="skip-link" href="#main-content">skip_link_label</a>

    <!-- ==================================================
SECTION: HEADER_MAIN
ROLE: Header principal avec navigation desktop + burger mobile
================================================== -->
  <header class="header siteHeader" role="banner">
    <div class="container siteHeader__inner">
      <a class="header__logo siteHeader__logo" href="/" aria-label="Hans Vee — Retour à l'accueil">
        <img src="assets/img/logo-base.webp" alt="Logo Hans Vee" width="42" height="42" />
      </a>

      <nav class="nav siteNav" aria-label="Navigation principale">
        <a class="nav__link siteNav__link" href="/expertise">Expertise</a>
        <a class="nav__link siteNav__link" href="/solutions">Solutions</a>
        <a class="nav__link siteNav__link" href="/offres">Offres</a>
        <a class="nav__link siteNav__link" href="/geo-ia">GEO IA</a>
        <a class="nav__link siteNav__link" href="/hans-veerasawmy">À propos</a>
        <a class="btn btn--primary nav__cta siteNav__cta" href="https://calendly.com/hansvee" aria-label="Réserver un échange avec Hans Vee">Réserver un échange</a>
      </nav>

      <button
        class="header__burger siteHeader__burger"
        type="button"
        aria-label="Ouvrir le menu"
        aria-controls="mobileMenu"
        aria-expanded="false"
        id="burgerBtn"
      >
        <span class="header__burger-lines" aria-hidden="true">
          <span></span><span></span><span></span>
        </span>
      </button>
    </div>
  </header>

  <!-- END SECTION: HEADER_MAIN -->

    <!-- ==================================================
SECTION: MOBILE_MENU_PANEL
ROLE: Menu mobile overlay + panneau latéral
================================================== -->
  <div class="mobileMenu" id="mobileMenu" aria-hidden="true">
    <div class="mobileMenu__overlay" data-close="true"></div>

    <aside class="mobileMenu__panel" role="dialog" aria-modal="true" aria-label="Menu de navigation Hans Vee">
      <div class="mobileMenu__top">

        <a class="mobileMenu__logo" href="/" aria-label="Hans Vee — Retour à l'accueil">
          <img src="assets/img/logo-full.webp" alt="Logo Hans Vee" width="220" height="60">
        </a>

        <button class="mobileMenu__close"
          type="button"
          aria-label="Fermer le menu"
          id="closeBtn">
        </button>

      </div>

      <nav class="mobileMenu__nav" aria-label="Navigation mobile">
        <a class="mobileMenu__link" href="/expertise">Expertise</a>
        <a class="mobileMenu__link" href="/solutions">Solutions</a>
        <a class="mobileMenu__link" href="/offres">Offres</a>
        <a class="mobileMenu__link" href="/geo-ia">GEO IA</a>
        <a class="mobileMenu__link" href="/hans-veerasawmy">À propos</a>
      </nav>

      <div class="mobileMenu__cta">
        <a class="btn btn--primary" href="https://calendly.com/hansvee" aria-label="Réserver un échange avec Hans Vee">Réserver un échange</a>
      </div>

      <div class="mobileMenu__bottom">
        Agence Hans Vee — 15 rue des Halles, 75001 Paris
      </div>

    </aside>
  </div>

  <!-- END SECTION: MOBILE_MENU_PANEL -->

  <main id="main-content" role="main">

    <!-- ==================================================
SECTION: SECTION_HERO_PRIMARY
ROLE: Hero principal avec h1, h2 et CTA
================================================== -->
    <section class="hero l-section" id="id_section" aria-label="aria-label_id_section">

      <div class="hero__bg">
        <div class="hero__bubble hb1"></div>
        <div class="hero__bubble hb2"></div>
        <div class="hero__bubble hb3"></div>
        <div class="hero__bubble hb4"></div>
        <div class="hero__bubble hb5"></div>
      </div>
    
      <div class="container hero__inner l-stack">
        <h1 class="hero__h1 c-h1">Lorem ipsum dolor sit amet</h1>
    
        <h2 class="hero__h2 c-h2">
          Lorem ipsum <span class="accent c-accent">dolor sit amet</span>
          consectetur adipiscing elit
        </h2>
    
        <div class="hero__actions c-actions">
        <a class="btn btn--primary" href="#" title="description_lien" aria-label="description_lien">cta_label_primary</a>
        <a class="btn btn--ghost" href="#" title="description_lien" aria-label="description_lien">cta_label_secondary</a>
        </div>
      </div>
    </section>

    <!-- END SECTION: SECTION_HERO_PRIMARY -->

    <!-- ==================================================
SECTION: SECTION_HERO_INNER
ROLE: Hero secondaire avec breadcrumbs + titre
================================================== -->
    <section class="hero hero--inner l-section" id="id_section" aria-label="aria-label_id_section">

      <div class="hero__bg">
        <div class="hero__bubble hero__bubble--blue"></div>
        <div class="hero__bubble hero__bubble--violet"></div>
      </div>

      <div class="container hero__inner">

        <nav class="breadcrumbs">

          <a href="/" title="description_lien">Home</a>

          <span class="breadcrumbs__sep">/</span>

          <a href="#" title="description_lien">Section</a>

          <span class="breadcrumbs__sep">/</span>

          <span class="breadcrumbs__current">Current page</span>

        </nav>

        <h1 class="hero__h1 c-h1">
          Lorem ipsum dolor sit amet
        </h1>

      </div>

    </section>

    <!-- END SECTION: SECTION_HERO_INNER -->

        <!-- ==================================================
SECTION: SECTION_PREFOOTER
ROLE: Bloc préfooter avec logo, capacités et CTA
================================================== -->
<section class="section l-section" id="prefooter" aria-label="Présentation Agence Hans Vee">

<div class="container">

  <div class="prefooter-card">

    <div class="prefooter-logo">
      <img src="assets/img/logo-full.webp" alt="Logo Hans Vee" width="220" height="60">
    </div>

    <p class="prefooter-tagline">
      Hans Vee, l'agence marketing spécialisée en visibilité IA.<br>
      Rendez votre marque visible, comprise et recommandée par les LLM.
    </p>

    <div class="prefooter-grid">

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Autorité de marque IA <em>AI Brand Authority</em></span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Ingénierie narrative IA <em>AI Narrative Engineering</em></span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Gouvernance de marque IA <em>AI Brand Governance</em></span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Stratégie Knowledge Graph IA <em>AI Knowledge Graph Strategy</em></span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Visibilité de marque IA <em>AI Brand Visibility</em></span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Réputation de marque IA <em>AI Brand Reputation</em></span>
      </div>

    </div>

    <div class="prefooter-cta">
      <a class="btn btn--primary" href="https://calendly.com/hansvee" title="Réserver un échange avec Hans Vee" aria-label="Réserver un échange avec Hans Vee">Réserver un échange</a>
      <a class="btn btn--ghost" href="/offres" title="Découvrir les offres Hans Vee" aria-label="Découvrir les offres Hans Vee">Découvrir les offres</a>
    </div>

  </div>

</div>

</section>

<!-- END SECTION: SECTION_PREFOOTER -->

</main>

<!-- ==================================================
SECTION: FOOTER_MAIN
ROLE: Footer principal navigation + contact + mentions
================================================== -->
<footer class="siteFooter">

<div class="container siteFooter__inner">

<div class="siteFooter__cols">

  <div class="siteFooter__col">
  <div class="siteFooter__title">Navigation</div>

    <nav aria-label="Navigation du site">
      <a href="/" class="siteFooter__link" title="Accueil — Hans Vee">Home</a>
      <a href="/expertise" class="siteFooter__link" title="Référencement IA et zone d'expertise — Hans Vee">Expertise</a>
      <a href="/solutions" class="siteFooter__link" title="Solutions par secteur — Hans Vee">Solutions</a>
      <a href="/offres" class="siteFooter__link" title="Offres et accompagnement — Hans Vee">Offres</a>
      <a href="/offres/clarte-intelligence-fondation" class="siteFooter__link" title="Mesurer sa présence IA — offre Clarté et Intelligence — Hans Vee">Clarté &amp; Intelligence</a>
      <a href="/offres/impulsion-pilot-hybrid-build" class="siteFooter__link" title="Agence visibilité IA — offre Impulsion — Hans Vee">Impulsion</a>
      <a href="/hans-veerasawmy" class="siteFooter__link" title="Hans Veerasawmy — fondateur Agence Hans Vee">À propos</a>
      <a href="/live-missions" class="siteFooter__link" title="Cas concrets et missions — Hans Vee">Live Missions</a>
    </nav>
  </div>

  <div class="siteFooter__col">
    <div class="siteFooter__title">GEO &amp; AIO</div>

    <nav aria-label="Pages visibilité IA">
      <a href="/blog" class="siteFooter__link" title="Blog — Hans Vee">Blog</a>
      <a href="/geo-ia" class="siteFooter__link" title="GEO IA — Hans Vee">GEO IA</a>
      <a href="/agence-geo" class="siteFooter__link" title="Agence GEO à Paris — Hans Vee">Agence GEO</a>
      <a href="/consultant-geo" class="siteFooter__link" title="Consultant GEO — Hans Vee">Consultant GEO</a>
      <a href="/analyser-visibilite-marque-ia" class="siteFooter__link" title="Analyser la visibilité de votre marque dans les IA — Hans Vee">Analyser visibilité marque IA</a>
      <a href="/comparer-visibilite-concurrents-ia" class="siteFooter__link" title="Comparer la visibilité de vos concurrents dans les IA — Hans Vee">Comparer visibilité concurrents IA</a>
      <a href="/comment-apparaitre-reponses-ia" class="siteFooter__link" title="Comment apparaître dans les réponses IA — Hans Vee">Comment apparaître dans les réponses IA</a>
      <a href="/etre-recommande-chatgpt" class="siteFooter__link" title="Comment être recommandé par ChatGPT — Hans Vee">Comment être recommandé par ChatGPT</a>
    </nav>
  </div>

  <div class="siteFooter__col">
    <div class="siteFooter__title">Ressources</div>

    <nav aria-label="Ressources et librairie">
      <a href="/faq" class="siteFooter__link" title="Questions fréquentes — Hans Vee">FAQ</a>
      <a href="/librairie" class="siteFooter__link" title="Librairie des concepts — Hans Vee">Librairie</a>
      <a href="/decryptages" class="siteFooter__link" title="Décryptages et analyses comparatives — Hans Vee">Décryptages</a>
      <a href="/librairie/ai-brand-protocol" class="siteFooter__link" title="Définition AI Brand Protocol — méthode propriétaire — Hans Vee">AI Brand Protocol</a>
      <a href="/librairie/aio-authority-influence-ai-optimization" class="siteFooter__link" title="Définition AIO — Authority and Influence AI Optimization — Hans Vee">AIO</a>
      <a href="/librairie/ai-test-engineering" class="siteFooter__link" title="Définition AI Test Engineering — méthodologie de diagnostic — Hans Vee">AI Test Engineering</a>
      <a href="/librairie/geo-generative-engine-optimization" class="siteFooter__link" title="Définition GEO — Generative Engine Optimization — Hans Vee">GEO / Generative Engine Optimization</a>
      <a href="/librairie/llm-large-language-model" class="siteFooter__link" title="Définition LLM — Large Language Model — Hans Vee">LLM / Large Language Model</a>
    </nav>
  </div>

<div class="siteFooter__col">

<div class="siteFooter__title">Contact</div>

<div class="siteFooter__contact">
<svg class="icon" aria-hidden="true">
<use href="assets/icons/sprite.svg#icon-mail"></use>
</svg>
<a href="mailto:info@hansvee.com">info@hansvee.com</a>
</div>

<div class="siteFooter__contact">
<svg class="icon" aria-hidden="true">
<use href="assets/icons/sprite.svg#icon-location"></use>
</svg>
15 rue des Halles, 75001 Paris
</div>

<div class="siteFooter__legal">

<div>La Fabrique à Events SAS</div>
<div>SIRET : 89079842400010</div>
<div>Immatriculée au greffe de Paris, le 05/11/2020</div>

</div>

</div>

</div>

<div class="siteFooter__bottom">
  <div class="siteFooter__legal-links">
    <a href="/mentions-legales" class="siteFooter__legal-link">Mentions légales</a>
    <a href="/conditions-generales-vente" class="siteFooter__legal-link">CGV</a>
    <a href="/politique-de-confidentialite" class="siteFooter__legal-link">Confidentialité</a>
    <a href="/politique-de-cookies" class="siteFooter__legal-link">Cookies</a>
    <a href="/conditions-dutilisation" class="siteFooter__legal-link">Conditions d'utilisation</a>
  </div>
  <div class="siteFooter__copy">
    © 2026 La Fabrique à Events SAS - Agence Hans Vee — Tous droits réservés
  </div>
</div>

</div>

</footer>

<!-- END SECTION: FOOTER_MAIN -->


<script src="assets/js/menu.js" defer></script>

</body>
</html>