<!--
=====================================================================
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" />
  <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="aria_home">
        <img src="assets/img/logo-base.webp" alt="description_image" width="42" height="42" />
      </a>

      <nav class="nav siteNav" aria-label="Navigation principale">
        <a class="nav__link siteNav__link" href="#">nav_item_1</a>
        <a class="nav__link siteNav__link" href="#">nav_item_2</a>
        <a class="nav__link siteNav__link" href="#">nav_item_3</a>
        <a class="nav__link siteNav__link" href="#">nav_item_4</a>
        <a class="btn btn--primary nav__cta siteNav__cta" href="#">nav_cta_label</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="aria_menu">
      <div class="mobileMenu__top">

        <a class="mobileMenu__logo" href="#" aria-label="aria_home">
          <img src="assets/img/logo-full.webp" alt="description_image" 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="#">nav_item_1</a>
        <a class="mobileMenu__link" href="#">nav_item_2</a>
        <a class="mobileMenu__link" href="#">nav_item_3</a>
        <a class="mobileMenu__link" href="#">nav_item_4</a>
      </nav>

      <div class="mobileMenu__cta">
        <a class="btn btn--primary" href="#">nav_cta_label</a>
      </div>

      <div class="mobileMenu__bottom">
        company_name — company_address
      </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="id_section" aria-label="aria-label_id_section">

<div class="container">

  <div class="prefooter-card">

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

    <p class="prefooter-tagline">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </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>Lorem ipsum capability</span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Lorem ipsum capability</span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Lorem ipsum capability</span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Lorem ipsum capability</span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Lorem ipsum capability</span>
      </div>

      <div class="prefooter-item">
        <svg class="icon" aria-hidden="true">
          <use href="assets/icons/sprite.svg#icon-check"></use>
        </svg>
        <span>Lorem ipsum capability</span>
      </div>

    </div>

    <div class="prefooter-cta">
      <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>

</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">footer_col_1_title</div>

    <a href="#" class="siteFooter__link">footer_link_1</a>
    <a href="#" class="siteFooter__link">footer_link_2</a>
    <a href="#" class="siteFooter__link">footer_link_3</a>
    <a href="#" class="siteFooter__link">footer_link_4</a>
  </div>

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

    <a href="#" class="siteFooter__link">footer_link_5</a>
    <a href="#" class="siteFooter__link">footer_link_6</a>
    <a href="#" class="siteFooter__link">footer_link_7</a>
    <a href="#" class="siteFooter__link">footer_link_8</a>
  </div>

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

    <a href="#" class="siteFooter__link">footer_link_9</a>
    <a href="#" class="siteFooter__link">footer_link_10</a>
    <a href="#" class="siteFooter__link">footer_link_11</a>
    <a href="#" class="siteFooter__link">footer_link_12</a>
  </div>

<div class="siteFooter__col">

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

<p class="siteFooter__intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

<div class="siteFooter__contact">
<svg class="icon" aria-hidden="true">
<use href="assets/icons/sprite.svg#icon-mail"></use>
</svg>
company_email
</div>

<div class="siteFooter__contact">
<svg class="icon" aria-hidden="true">
<use href="assets/icons/sprite.svg#icon-location"></use>
</svg>
company_address
</div>

<div class="siteFooter__contact">
<svg class="icon" aria-hidden="true">
<use href="assets/icons/sprite.svg#icon-phone"></use>
</svg>
company_phone
</div>

<div class="siteFooter__legal">

<div>company_name</div>
<div>company_siret</div>
<div>company_registration_city</div>

</div>

</div>

</div>

<div class="siteFooter__bottom">
  <div class="siteFooter__copy">
    © copyright_year company_name — All rights reserved
  </div>
</div>

</div>

</footer>

<!-- END SECTION: FOOTER_MAIN -->


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

</body>
</html>