<!--
  ╔══════════════════════════════════════════════════════════════════════════════╗
  ║  TEMPLATE PAGE "AI-OVERVIEW READY" — SvelteKit / Svelte pur                ║
  ║  Version : 1.0 — Juillet 2026                                              ║
  ║  Auteur  : Genere pour AKILPA / o-k-i                                      ║
  ║  Licence : CC BY-SA 4.0                                                    ║
  ╚══════════════════════════════════════════════════════════════════════════════╝

  OBJECTIF DE CE FICHIER :
  -------------------------
  Ce fichier est un MODELE de page Svelte concu pour etre :
  1. CITE par Google AI Overview (resume IA en haut des resultats)
  2. INDEXE efficacement par les crawlers Google
  3. ACCESSIBLE (lecteurs d'ecran, clavier, contrastes)
  4. RAPIDE (Core Web Vitals verts)
  5. SEMANTIQUE (HTML5 pur, pas de <div> inutiles)

  COMMENT LIRE CE FICHIER :
  ------------------------
  Chaque bloc de code est precede d'un commentaire expliquant :
  - CE QUE fait la balise/section
  - POURQUOI c'est important pour l'AI Overview ou le SEO
  - COMMENT l'adapter a ton contenu

  STRUCTURE DE LA PAGE :
  ----------------------
  |-- <svelte:head>     -> Metadonnees, Schema.org, Open Graph, Twitter Cards
  |-- <header>          -> Navigation + Fil d'Ariane (Breadcrumb)
  |-- <main>            -> Contenu principal (article)
  |   |-- Zone A         -> Resume immediat (50-80 mots) — CRITIQUE pour AI Overview
  |   |-- Zone B         -> Developpement thematique (H2 questions)
  |   |-- Zone C         -> FAQ structuree (Schema.org FAQPage)
  |   |-- Zone D         -> Conclusion + Liens connexes
  |-- <aside>           -> Contenu complementaire (sidebar)
  |-- <footer>          -> Pied de page

  ADAPTATION :
  -----------
  Remplace les variables entre crochets [COMME_CECI] par tes donnees.
  Les valeurs d'exemple sont fictives (theme : patrimoine guadeloupeen).
-->

<!-- =============================================================================
   SECTION 1 : <svelte:head>
   -------------------------------------------------------------------------------
   Cette balise Svelte injecte du contenu dans le <head> du document HTML.
   C'est ici que vit TOUT le SEO technique invisible : meta tags, Schema.org,
   liens canoniques, prechargements de ressources.

   POURQUOI c'est critique :
   -> Google lit le <head> AVANT de crawler le corps de la page.
   -> L'AI Overview utilise ces metadonnees pour comprendre le sujet.
   -> Open Graph et Twitter Cards controlent l'apercu sur les reseaux sociaux.
   -> Schema.org donne une CARTE SEMANTIQUE que l'IA ingere sans interpreter.
============================================================================= -->
<svelte:head>

  <!--
    -- Meta charset --
    UTF-8 = encodage universel. Obligatoire. Doit etre le PREMIER element du <head>
    apres le <title> pour eviter les problemes de caracteres speciaux (accents, creole).
  -->
  <meta charset="UTF-8">

  <!--
    -- Viewport --
    Indique au navigateur d'adapter la largeur a l'ecran du device.
    Sans ca, Google penalise en mobile-first indexing.
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--
    -- Title --
    REGLE : 50-60 caracteres max. Mot-cle principal en DEBUT.
    FORMAT : "Question principale | Nom du site"
    L'AI Overview utilise le <title> comme reference pour le sujet de la page.
  -->
  <title>Qu'est-ce que le lambi et son importance en Guadeloupe ? | AKILPA Patrimoine</title>

  <!--
    -- Meta description --
    REGLE : 150-160 caracteres max. Resume de la page. Contient le mot-cle principal.
    NE PAS bourrer de mots-cles. Ecrire pour un humain, mais penser machine.
    C'est ce texte qui apparait sous le lien bleu dans Google.
    L'AI Overview peut l'utiliser comme source pour sa synthese.
  -->
  <meta name="description" content="Le lambi (Lobatus gigas) est un symbole du patrimoine guadeloupeen. Decouvrez son histoire, sa place dans la culture creole et les enjeux de sa preservation.">

  <!--
    -- Auteur --
    Identifie l'auteur. CRITIQUE pour EEAT (Expertise, Authoritativeness, Trustworthiness).
    Google verifie que le contenu est ecrit par une personne reelle et identifiable.
  -->
  <meta name="author" content="Jean Dupont">

  <!--
    -- Robots --
    "index, follow" = autorise l'indexation et le suivi des liens.
    "max-snippet:-1" = autorise Google a extraire des snippets de n'importe quelle longueur.
    "max-image-preview:large" = autorise les grandes vignettes dans les resultats.
    "max-video-preview:-1" = autorise les apercus video complets.
    Si tu veux BLOQUER l'AI Overview, il n'existe actuellement aucune directive
    robots.txt/meta qui permette de rester dans Google Search tout en etant exclu
    de l'AI Overview. C'est tout ou rien.
  -->
  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">

  <!--
    -- Canonical --
    URL officielle de cette page. Evite le contenu duplique si la page est
    accessible via plusieurs URLs (parametres, sessions, etc.).
    Google considere cette URL comme la version PRIMAIRE.
  -->
  <link rel="canonical" href="https://akilpa.org/patrimoine/lambi-guadeloupe">

  <!--
    -- Alternate languages (hreflang) --
    Indique a Google les versions linguistiques de la page.
    "x-default" = version par defaut si la langue du visiteur n'est pas listee.
    IMPORTANT pour le referencement multilingue (francais, creole, anglais).
  -->
  <link rel="alternate" hreflang="fr" href="https://akilpa.org/patrimoine/lambi-guadeloupe">
  <link rel="alternate" hreflang="en" href="https://akilpa.org/en/heritage/lambi-guadeloupe">
  <link rel="alternate" hreflang="x-default" href="https://akilpa.org/patrimoine/lambi-guadeloupe">

  <!--
    -- Open Graph (Facebook, LinkedIn, WhatsApp, etc.) --
    Ces meta tags controlent l'apercu quand quelqu'un partage le lien.
    "og:type" = "article" pour un article de blog. "website" pour la home.
    "og:image" = image de partage. DIMENSIONS OBLIGATOIRES : 1200x630 px minimum.
    Sans image OG, le partage est moche et peu clique.
  -->
  <meta property="og:title" content="Qu'est-ce que le lambi et son importance en Guadeloupe ?">
  <meta property="og:description" content="Le lambi est un symbole du patrimoine guadeloupeen. Decouvrez son histoire et sa place dans la culture creole.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://akilpa.org/patrimoine/lambi-guadeloupe">
  <meta property="og:image" content="https://akilpa.org/images/lambi-patrimoine-1200x630.webp">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:locale" content="fr_FR">
  <meta property="og:site_name" content="AKILPA — Arts, Kilti, Patrimoine">
  <meta property="article:published_time" content="2026-07-24T00:00:00+00:00">
  <meta property="article:modified_time" content="2026-07-24T00:00:00+00:00">
  <meta property="article:author" content="https://akilpa.org/auteurs/jean-dupont">
  <meta property="article:section" content="Patrimoine">
  <meta property="article:tag" content="lambi, patrimoine, Guadeloupe, culture creole, Lobatus gigas">

  <!--
    -- Twitter Cards --
    "summary_large_image" = grande carte avec image (meilleur taux de clic).
    Meme image que Open Graph, mais Twitter prefere 1200x600.
  -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Qu'est-ce que le lambi et son importance en Guadeloupe ?">
  <meta name="twitter:description" content="Le lambi est un symbole du patrimoine guadeloupeen. Decouvrez son histoire et sa place dans la culture creole.">
  <meta name="twitter:image" content="https://akilpa.org/images/lambi-patrimoine-1200x600.webp">
  <meta name="twitter:creator" content="@akilpa_gwada">

  <!--
    -- Prechargement des ressources critiques --
    "preconnect" = etablit la connexion DNS+TCP+TLS en avance (gain de 100-300ms).
    "preload" = charge la police AVANT que le CSS ne la demande (evite le FOIT/FOUT).
    Ces optimisations ameliorent LCP (Largest Contentful Paint).
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>

  <!--
    -- Favicon --
    SVG = leger, scalable, theme clair/sombre via media query.
    Apple touch icon = obligatoire pour les bookmarks iOS.
  -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!--
    ==========================================================================
    SCHEMA.ORG — LE SQUELETTE INVISIBLE QUE L'IA LIT
    ==========================================================================

    Ce bloc JSON-LD est INVISIBLE pour l'utilisateur mais LU par Google.
    C'est une CARTE SEMANTIQUE qui dit a l'IA :
    - "Cette page est un article de blog"
    - "Il a ete ecrit par Jean Dupont le 24 juillet 2026"
    - "L'organisation est AKILPA"
    - "Il y a une FAQ structuree"
    - "Il y a une image principale"

    L'AI Overview utilise ces donnees pour citer ta page comme source.
    Sans Schema.org, l'IA doit DEVINER la structure = moins de chances d'etre cite.

    Le format @graph regroupe plusieurs entites liees entre elles par @id.
  -->
  {@html `
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Organization",
        "@id": "https://akilpa.org/#organization",
        "name": "AKILPA — Arts, Kilti, Patrimoine",
        "url": "https://akilpa.org",
        "logo": {
          "@type": "ImageObject",
          "url": "https://akilpa.org/logo-512x512.png",
          "width": 512,
          "height": 512
        },
        "sameAs": [
          "https://twitter.com/akilpa_gwada",
          "https://linkedin.com/company/akilpa",
          "https://github.com/akilpa"
        ],
        "address": {
          "@type": "PostalAddress",
          "streetAddress": "Rue de la Republique",
          "addressLocality": "Basse-Terre",
          "addressRegion": "Guadeloupe",
          "postalCode": "97100",
          "addressCountry": "FR"
        }
      },
      {
        "@type": "WebSite",
        "@id": "https://akilpa.org/#website",
        "url": "https://akilpa.org",
        "name": "AKILPA — Arts, Kilti, Patrimoine",
        "publisher": { "@id": "https://akilpa.org/#organization" },
        "potentialAction": {
          "@type": "SearchAction",
          "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://akilpa.org/recherche?q={search_term_string}"
          },
          "query-input": "required name=search_term_string"
        }
      },
      {
        "@type": "BlogPosting",
        "@id": "https://akilpa.org/patrimoine/lambi-guadeloupe/#article",
        "url": "https://akilpa.org/patrimoine/lambi-guadeloupe",
        "headline": "Qu'est-ce que le lambi et son importance en Guadeloupe ?",
        "description": "Le lambi (Lobatus gigas) est un symbole du patrimoine guadeloupeen. Decouvrez son histoire, sa place dans la culture creole et les enjeux de sa preservation.",
        "image": {
          "@type": "ImageObject",
          "url": "https://akilpa.org/images/lambi-patrimoine-1200x630.webp",
          "width": 1200,
          "height": 630
        },
        "author": {
          "@type": "Person",
          "name": "Jean Dupont",
          "url": "https://akilpa.org/auteurs/jean-dupont"
        },
        "publisher": { "@id": "https://akilpa.org/#organization" },
        "datePublished": "2026-07-24T00:00:00+00:00",
        "dateModified": "2026-07-24T00:00:00+00:00",
        "mainEntityOfPage": { "@id": "https://akilpa.org/patrimoine/lambi-guadeloupe/#webpage" },
        "speakable": {
          "@type": "SpeakableSpecification",
          "cssSelector": [".ai-summary", ".key-facts"]
        },
        "isPartOf": { "@id": "https://akilpa.org/#website" }
      },
      {
        "@type": "WebPage",
        "@id": "https://akilpa.org/patrimoine/lambi-guadeloupe/#webpage",
        "url": "https://akilpa.org/patrimoine/lambi-guadeloupe",
        "name": "Qu'est-ce que le lambi et son importance en Guadeloupe ?",
        "description": "Le lambi (Lobatus gigas) est un symbole du patrimoine guadeloupeen.",
        "isPartOf": { "@id": "https://akilpa.org/#website" },
        "about": { "@id": "https://akilpa.org/#organization" },
        "datePublished": "2026-07-24T00:00:00+00:00",
        "dateModified": "2026-07-24T00:00:00+00:00",
        "breadcrumb": { "@id": "https://akilpa.org/patrimoine/lambi-guadeloupe/#breadcrumb" }
      },
      {
        "@type": "BreadcrumbList",
        "@id": "https://akilpa.org/patrimoine/lambi-guadeloupe/#breadcrumb",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Accueil",
            "item": "https://akilpa.org/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Patrimoine",
            "item": "https://akilpa.org/patrimoine/"
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": "Le lambi en Guadeloupe"
          }
        ]
      },
      {
        "@type": "FAQPage",
        "@id": "https://akilpa.org/patrimoine/lambi-guadeloupe/#faq",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Qu'est-ce que le lambi exactement ?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "<p>Le lambi (<em>Lobatus gigas</em>) est un grand mollusque gastropode des eaux chaudes des Caraibes. Reconnaissable a sa coquille rose orangee, il peut mesurer jusqu'a 30 cm et vit principalement dans les herbiers de posidonies.</p>"
            }
          },
          {
            "@type": "Question",
            "name": "Pourquoi le lambi est-il important en Guadeloupe ?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "<p>Le lambi est un pilier de l'identite culturelle guadeloupeenne. Sa coquille sert d'instrument de musique traditionnel (le <em>konka</em>), sa chair est au coeur de la cuisine creole, et il symbolise la resilience des communautes cotieres.</p>"
            }
          },
          {
            "@type": "Question",
            "name": "Le lambi est-il menace d'extinction ?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "<p>Oui, le lambi est classe en danger d'extinction par l'UICN depuis 2021. La surpeche, la pollution et la destruction des herbiers marins ont fait chuter ses populations de 80% en 30 ans dans certaines zones des Caraibes.</p>"
            }
          }
        ]
      }
    ]
  }
  </script>
  `}

</svelte:head>


<!-- =============================================================================
   SECTION 2 : <header> — En-tete de page
   -------------------------------------------------------------------------------
   Le <header> contient la navigation principale et le fil d'Ariane.
   Il est identifie par ARIA pour les lecteurs d'ecran.
   Le fil d'Ariane (breadcrumb) aide Google a comprendre la hierarchie du site
   et apparait parfois dans les resultats de recherche.
============================================================================= -->
<header>

  <!--
    -- Navigation principale --
    <nav> = zone de navigation. aria-label = nom pour les lecteurs d'ecran.
    Les liens sont des ancres classiques (<a href>) — jamais de boutons JS
    pour la navigation principale (crawlable par Google).
  -->
  <nav aria-label="Navigation principale">
    <a href="/" aria-label="Retour a l'accueil AKILPA">
      <!-- Logo SVG = leger, scalable, theme clair/sombre -->
      <img src="/logo-akilpa.svg" alt="Logo AKILPA" width="120" height="40" loading="eager">
    </a>

    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/patrimoine/" aria-current="true">Patrimoine</a></li>
      <li><a href="/arts/">Arts</a></li>
      <li><a href="/kilti/">Kilti</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </nav>

  <!--
    -- Fil d'Ariane (Breadcrumb) --
    <nav aria-label="Fil d'Ariane"> = navigation secondaire.
    Chaque niveau est un <li> dans un <ol> (liste ordonnee = hierarchie).
    Le dernier element (page actuelle) N'EST PAS un lien (pas de href).
    Schema.org BreadcrumbList (dans le JSON-LD ci-dessus) doit correspondre
    EXACTEMENT a cette structure visuelle.
  -->
  <nav aria-label="Fil d'Ariane">
    <ol>
      <li>
        <a href="/">Accueil</a>
      </li>
      <li aria-hidden="true">/</li>
      <li>
        <a href="/patrimoine/">Patrimoine</a>
      </li>
      <li aria-hidden="true">/</li>
      <li aria-current="page">
        Le lambi en Guadeloupe
      </li>
    </ol>
  </nav>

</header>


<!-- =============================================================================
   SECTION 3 : <main> — Contenu principal
   -------------------------------------------------------------------------------
   <main> = contenu UNIQUE et PRINCIPAL de la page. UN SEUL <main> par page.
   Tout ce qui est dans <main> est ce que Google considere comme le "coeur"
   de la page. Le reste (<aside>, <footer>) est secondaire.

   STRUCTURE INTERNE :
   |-- <article>     -> Le contenu autonome (peut etre extrait seul)
   |   |-- En-tete    -> Titre, meta (date, auteur)
   |   |-- Zone A     -> Resume immediat (CRITIQUE)
   |   |-- Zone B     -> Developpement thematique
   |   |-- Zone C     -> FAQ visible + schema
   |   |-- Zone D     -> Conclusion + liens
   |-- <aside>       -> Sidebar (connexe, pas essentiel)
============================================================================= -->
<main>

  <!--
    -- <article> --
    <article> = contenu AUTONOME. Il pourrait etre extrait de cette page
    et publie ailleurs sans perdre de sens. C'est le conteneur ideal
    pour un article de blog, une fiche, un post.
    aria-labelledby = lie l'article a son titre pour l'accessibilite.
  -->
  <article aria-labelledby="titre-principal">

    <!-- ======================================================================
       ZONE A : EN-TETE DE L'ARTICLE
       ----------------------------------------------------------------------
       Contient le H1 (UN SEUL par page), les metadonnees de publication,
       et l'image principale (LCP = Largest Contentful Paint).
    ====================================================================== -->
    <header>

      <!--
        -- H1 : Titre principal --
        REGLE D'OR : UN SEUL H1 par page. C'est la question que la page resout.
        Format privilegie : question directe ou promesse claire.
        L'AI Overview utilise le H1 pour comprendre le sujet principal.
        Longueur : 20-70 caracteres idealement.
      -->
      <h1 id="titre-principal">
        Qu'est-ce que le lambi et son importance en Guadeloupe ?
      </h1>

      <!--
        -- Meta-informations de publication --
        <time datetime="..."> = date machine-readable (ISO 8601).
        C'est CRITIQUE pour Google qui verifie la fraicheur du contenu.
        L'attribut datetime doit etre EXACT (pas juste l'annee).
        Le texte visible peut etre en francais, mais datetime en ISO.
      -->
      <p class="article-meta">
        Publie le
        <time datetime="2026-07-24T00:00:00+00:00">24 juillet 2026</time>
        — Mis a jour le
        <time datetime="2026-07-24T00:00:00+00:00">24 juillet 2026</time>
        — Par
        <a href="/auteurs/jean-dupont/" rel="author">Jean Dupont</a>
        — Dans
        <a href="/patrimoine/">Patrimoine</a>
      </p>

      <!--
        -- Image principale (LCP) --
        C'est probablement le LCP (Largest Contentful Paint) de la page.
        REGLES :
        - Format WebP (ou AVIF) avec fallback JPEG.
        - Dimensions EXPLICITES (width/height) pour eviter le CLS.
        - loading="eager" (pas lazy) car c'est la premiere image visible.
        - alt DESCRIPTIF (pas "image" ni "photo").
        - Nom de fichier SEO-friendly : mots-cles-descriptifs.webp
      -->
      <figure>
        <img
          src="/images/lambi-coquille-guadeloupe-800x500.webp"
          alt="Coquille de lambi rose orangee posee sur du sable blanc en Guadeloupe, avec la mer turquoise en arriere-plan"
          width="800"
          height="500"
          loading="eager"
          decoding="async"
        >
        <figcaption>
          Coquille de lambi (<em>Lobatus gigas</em>) sur une plage de Guadeloupe.
          Photo : Jean Dupont — AKILPA.
        </figcaption>
      </figure>

    </header>


    <!-- ======================================================================
       ZONE B : RESUME IMMEDIAT (AI SUMMARY)
       ----------------------------------------------------------------------
       CETTE SECTION EST LA PLUS CRITIQUE POUR L'AI OVERVIEW.

       PRINCIPE : Google AI Overview extrait des BLOCS AUTO-CONTENUS.
       Si la reponse a la question principale n'est pas dans les 50-80 premiers
       mots visibles, l'IA ne te citera probablement pas.

       STRUCTURE :
       1. Paragraphe de 50-80 mots = reponse DIRECTE, sans preambule.
       2. Liste a puces = points cles (facilement extractables par l'IA).
       3. Encadre optionnel = "En resume" ou "Points essentiels".

       CLASSE CSS : .ai-summary (reference dans le Schema.org Speakable)
    ====================================================================== -->
    <section class="ai-summary" aria-label="Resume de l'article">

      <!--
        -- Paragraphe de resume --
        REGLES DE REDACTION MACHINE-FIRST :
        - Phrase 1 = reponse directe (sujet + verbe + complement).
        - Pas d'introduction narrative ("Depuis des siecles...").
        - Phrases < 25 mots.
        - Vocabulaire consistant (pas d'alternance lambi/conque/coquillage).
        - Active voice.
      -->
      <p>
        Le <strong>lambi</strong> (<em>Lobatus gigas</em>) est un mollusque
        gastropode des eaux chaudes des Caraibes, symbole central du patrimoine
        materiel et immateriel guadeloupeen. Sa coquille sert d'instrument
        musical traditionnel, sa chair nourrit la cuisine creole, et il incarne
        la resilience des communautes cotieres face aux changements climatiques.
      </p>

      <!--
        -- Points cles (liste a puces) --
        Les listes a puces sont EXTREMEMENT faciles a parser par les LLM.
        Chaque item = un fait isole et citable.
        L'AI Overview adore citer des listes sous forme de "etapes" ou "points".
      -->
      <h2 class="visually-hidden">Points essentiels</h2>
      <ul class="key-facts">
        <li>
          <strong>Nom scientifique :</strong> <em>Lobatus gigas</em> (anciennement <em>Strombus gigas</em>)
        </li>
        <li>
          <strong>Habitat :</strong> Herbiers marins des Caraibes, 0-20 metres de profondeur
        </li>
        <li>
          <strong>Taille :</strong> Jusqu'a 30 cm de longueur et 2 kg
        </li>
        <li>
          <strong>Statut UICN :</strong> En danger d'extinction (2021)
        </li>
        <li>
          <strong>Usage culturel :</strong> Instrument <span lang="ht">konka</span>, cuisine creole, artisanat
        </li>
      </ul>

    </section>


    <!-- ======================================================================
       ZONE C : DEVELOPPEMENT THEMATIQUE
       ----------------------------------------------------------------------
       Chaque H2 = une question que le lecteur (et l'IA) se pose.
       Format privilegie : interrogatif ("Qu'est-ce que... ?", "Pourquoi... ?",
       "Comment... ?").

       SOUS CHAQUE H2 :
       - Reponse en 2-3 phrases (40-60 mots).
       - Puis developpement, exemples, citations.
       - Paragraphes < 100 mots (3-4 phrases max).

       Cette structure correspond au "Query Fan-Out" de Google :
       l'IA relie ta page a des questions voisines.
    ====================================================================== -->

    <section aria-labelledby="h2-definition">
      <!--
        -- H2 : Question thematique --
        L'IA utilise les H2 comme CARTE DE NAVIGATION du contenu.
        Un H2 bien forme = une chance supplementaire d'apparaitre dans
        l'AI Overview pour cette question specifique.
      -->
      <h2 id="h2-definition">Qu'est-ce que le lambi exactement ?</h2>

      <p>
        Le lambi est un grand escargot de mer appartenant a la famille des
        Strombidae. Il vit dans les eaux peu profondes des Caraibes, ou il se
        nourrit d'algues et de detritus en se deplacant grace a son opercule
        corne caracteristique.
      </p>

      <p>
        Sa coquille presente une spirale elancee avec des epines saillantes
        et une ouverture rose a orangee. Cette coquille, une fois polie et
        taillee, devient l'instrument de musique traditionnel appele
        <span lang="ht">konka</span> ou <span lang="ht">conque</span> en creole
        guadeloupeen, utilise dans les ceremonies religieuses et les festivites
        populaires.
      </p>

      <!--
        -- Image illustrative --
        loading="lazy" = chargement differe (pas critique pour le LCP).
        decoding="async" = decodage non bloquant.
      -->
      <figure>
        <img
          src="/images/lambi-anatomie-600x400.webp"
          alt="Schema anatomique du lambi montrant la coquille, l'opercule et le pied, avec legendes en francais"
          width="600"
          height="400"
          loading="lazy"
          decoding="async"
        >
        <figcaption>
          Anatomie du lambi (<em>Lobatus gigas</em>) — Schema AKILPA.
        </figcaption>
      </figure>
    </section>


    <section aria-labelledby="h2-importance">
      <h2 id="h2-importance">Pourquoi le lambi est-il important en Guadeloupe ?</h2>

      <p>
        Le lambi depasse le statut de simple ressource alimentaire pour devenir
        un <strong>vecteur d'identite culturelle</strong>. Dans les communautes
        cotieres de la Guadeloupe, la peche au lambi est transmise de generation
        en generation, ancrant des savoir-faire immateriels menaces de disparition.
      </p>

      <p>
        Trois piliers fondent cette importance :
      </p>

      <!--
        -- Liste ordonnee (etapes/piliers) --
        <ol> = ordre logique. L'IA comprend qu'il s'agit d'une sequence
        ou d'une enumeration hierarchisee.
      -->
      <ol>
        <li>
          <strong>Gastronomie :</strong> La chair du lambi, preparee en
          fricassee, en gratins ou en soupes, est un plat emblematique des
          fetes familiales et des restaurants traditionnels.
        </li>
        <li>
          <strong>Musique et ceremonies :</strong> Le <span lang="ht">konka</span>
          rythme les processions de la Semaine Sainte, les celebrations du
          <span lang="ht">lewoz</span> et les rassemblements communautaires.
        </li>
        <li>
          <strong>Artisanat :</strong> Les coquilles vides sont transformees en
          objets decoratifs, bijoux et souvenirs, perpetuant un artisanat
          identitaire.
        </li>
      </ol>

      <blockquote cite="https://akilpa.org/sources/edouard-glissant">
        <p>
          "Le lambi ne se mange pas, il se joue. Il ne se joue pas, il se crie.
          Et dans ce cri, il y a toute l'histoire d'un peuple."
        </p>
        <footer>
          — <cite>Edouard Glissant, <em>Traite du Tout-Monde</em></cite>
        </footer>
      </blockquote>
    </section>


    <section aria-labelledby="h2-menace">
      <h2 id="h2-menace">Le lambi est-il menace d'extinction ?</h2>

      <p>
        <strong>Oui.</strong> L'Union internationale pour la conservation de la
        nature (UICN) a classe le lambi en danger d'extinction en 2021. Les
        populations ont chute de <strong>80 % en 30 ans</strong> dans certaines
        zones des Petites Antilles.
      </p>

      <!--
        -- Tableau de donnees --
        Les tableaux HTML sont EXCELLENTS pour le SEO et l'AI Overview.
        L'IA peut extraire des donnees structurees directement depuis <table>.
        TOUJOURS utiliser <thead>, <tbody>, <th scope="col/row">.
      -->
      <table>
        <caption>Evolution des populations de lambi en Guadeloupe (1990-2025)</caption>
        <thead>
          <tr>
            <th scope="col">Annee</th>
            <th scope="col">Estimation (tonnes pechées)</th>
            <th scope="col">Tendance</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1990</td>
            <td>450</td>
            <td>Stable</td>
          </tr>
          <tr>
            <td>2000</td>
            <td>280</td>
            <td>En baisse</td>
          </tr>
          <tr>
            <td>2010</td>
            <td>120</td>
            <td>En baisse forte</td>
          </tr>
          <tr>
            <td>2020</td>
            <td>45</td>
            <td>Critique</td>
          </tr>
          <tr>
            <td>2025</td>
            <td>30 (estimation)</td>
            <td>Critique</td>
          </tr>
        </tbody>
      </table>

      <p>
        Les causes principales sont la surpeche (peche sous-marine intensive),
        la pollution des herbiers marins par les algues sargasses et le
        rechauffement climatique qui acidifie les oceans et fragilise les
        coquilles juveniles.
      </p>
    </section>


    <!-- ======================================================================
       ZONE D : FAQ VISIBLE (correspond au Schema.org FAQPage)
       ----------------------------------------------------------------------
       Cette section est DUPLIQUEE dans le Schema.org JSON-LD ci-dessus.
       REGLE D'OR : le texte visible ici doit etre IDENTIQUE au texte
       du schema. Pas de contenu cache. Google compare les deux.

       Chaque question = un <details> (accordeon natif HTML5).
       Avantage : le contenu est VISIBLE dans le DOM (crawlable) mais
       peut etre replie pour l'UX. L'IA le voit quoi qu'il arrive.
    ====================================================================== -->
    <section aria-labelledby="h2-faq">
      <h2 id="h2-faq">Questions frequentes sur le lambi</h2>

      <!--
        -- FAQ Item 1 --
        <details> + <summary> = accordeon natif, accessible, sans JS.
        Le contenu est toujours dans le DOM (crawlable).
      -->
      <details>
        <summary>
          <h3>Qu'est-ce que le lambi exactement ?</h3>
        </summary>
        <p>
          Le lambi (<em>Lobatus gigas</em>) est un grand mollusque gastropode
          des eaux chaudes des Caraibes. Reconnaissable a sa coquille rose
          orangee, il peut mesurer jusqu'a 30 cm et vit principalement dans
          les herbiers de posidonies.
        </p>
      </details>

      <details>
        <summary>
          <h3>Pourquoi le lambi est-il important en Guadeloupe ?</h3>
        </summary>
        <p>
          Le lambi est un pilier de l'identite culturelle guadeloupeenne. Sa
          coquille sert d'instrument de musique traditionnel (le <em>konka</em>),
          sa chair est au coeur de la cuisine creole, et il symbolise la
          resilience des communautes cotieres.
        </p>
      </details>

      <details>
        <summary>
          <h3>Le lambi est-il menace d'extinction ?</h3>
        </summary>
        <p>
          Oui, le lambi est classe en danger d'extinction par l'UICN depuis
          2021. La surpeche, la pollution et la destruction des herbiers marins
          ont fait chuter ses populations de 80% en 30 ans dans certaines zones
          des Caraibes.
        </p>
      </details>
    </section>


    <!-- ======================================================================
       ZONE E : CONCLUSION + MAILLAGE INTERNE
       ----------------------------------------------------------------------
       La conclusion resume en 2-3 phrases et oriente vers le contenu connexe.
       Le maillage interne (liens vers pages du meme site) renforce la
       thematique et aide Google a comprendre l'architecture semantique.
    ====================================================================== -->
    <section aria-labelledby="h2-conclusion">
      <h2 id="h2-conclusion">Conclusion</h2>

      <p>
        Le lambi incarne la tension entre patrimoine vivant et urgence
        ecologique. Sa preservation ne releve pas seulement de la biologie
        marine, mais d'une politique culturelle qui reconnait le lien indissoluble
        entre les communautes cotieres guadeloupeennes et leur environnement.
      </p>

      <!--
        -- Maillage interne thematique --
        Chaque page doit contenir 3-5 liens vers des pages connexes.
        Ces liens doivent etre CONTEXTUELS (dans le texte), pas juste
        une liste "Lire aussi" en fin d'article.
        Le texte du lien (anchor text) doit decrire la page cible.
      -->
      <p>
        Pour approfondir, decouvrez notre article sur
        <a href="/patrimoine/herbiers-marins-guadeloupe/">les herbiers marins
        de Guadeloupe</a>, essentiels a la survie du lambi, ou explorez
        <a href="/kilti/instruments-musique-creole/">les instruments de
        musique creole</a> dont le <span lang="ht">konka</span> fait partie.
        Vous pouvez aussi consulter notre
        <a href="/patrimoine/especes-menacees-caraibes/">recensement des
        especes menacees aux Caraibes</a>.
      </p>
    </section>


    <!-- ======================================================================
       ZONE F : AUTEUR (EEAT renforce)
       ----------------------------------------------------------------------
       Google verifie que le contenu est ecrit par une personne reelle.
       Cette section renforce le E-E-A-T (Experience, Expertise,
       Authoritativeness, Trustworthiness).
    ====================================================================== -->
    <footer class="article-footer">
      <address class="author-card">
        <img
          src="/images/auteurs/jean-dupont-200x200.webp"
          alt="Portrait de Jean Dupont, anthropologue et co-fondateur d'AKILPA"
          width="100"
          height="100"
          loading="lazy"
        >
        <div>
          <p><strong>Jean Dupont</strong></p>
          <p>Anthropologue maritime, co-fondateur d'AKILPA. Specialiste des
          savoir-faire cotiers aux Antilles depuis 2015.</p>
          <p>
            <a href="/auteurs/jean-dupont/">Voir tous ses articles</a> —
            <a href="https://twitter.com/jeandupont" rel="noopener noreferrer">Twitter</a>
          </p>
        </div>
      </address>
    </footer>

  </article>


  <!-- ==========================================================================
     <aside> — CONTENU COMPLEMENTAIRE (SIDEBAR)
     --------------------------------------------------------------------------
     <aside> = contenu lie mais non essentiel a la comprehension principale.
     Google donne MOINS de poids au contenu dans <aside>.
     C'est l'endroit ideal pour : liens connexes, newsletter, publicite.
     NE PAS mettre de contenu critique pour le SEO ici.
  ========================================================================== -->
  <aside aria-label="Contenu connexe">

    <section>
      <h2>Sur le meme theme</h2>
      <ul>
        <li>
          <a href="/patrimoine/herbiers-marins-guadeloupe/">
            Les herbiers marins, poumon bleu de la Guadeloupe
          </a>
        </li>
        <li>
          <a href="/kilti/instruments-musique-creole/">
            Les instruments de musique creole : du <span lang="ht">ka</span> au <span lang="ht">konka</span>
          </a>
        </li>
        <li>
          <a href="/patrimoine/especes-menacees-caraibes/">
            Especes menacees aux Caraibes : etat des lieux 2026
          </a>
        </li>
      </ul>
    </section>

    <section>
      <h2>Newsletter AKILPA</h2>
      <p>Recevez nos articles patrimoine directement dans votre boite mail.</p>
      <form action="/api/newsletter" method="POST">
        <label for="email-newsletter">Votre adresse email</label>
        <input
          type="email"
          id="email-newsletter"
          name="email"
          required
          placeholder="votre@email.com"
          autocomplete="email"
        >
        <button type="submit">S'abonner</button>
      </form>
    </section>

  </aside>

</main>


<!-- =============================================================================
   SECTION 4 : <footer> — Pied de page
   -------------------------------------------------------------------------------
   <footer> = informations de pied de page pour la page ENTIERE.
   Contient : liens legaux, credits, reseaux sociaux, copyright.
   Le <footer> de l'article (dans <article>) est different du <footer>
   global (ici) qui concerne le site entier.
============================================================================= -->
<footer>

  <nav aria-label="Liens legaux">
    <ul>
      <li><a href="/mentions-legales/">Mentions legales</a></li>
      <li><a href="/politique-confidentialite/">Politique de confidentialite</a></li>
      <li><a href="/accessibilite/">Accessibilite</a></li>
      <li><a href="/plan-du-site/">Plan du site</a></li>
    </ul>
  </nav>

  <p>
    &copy; 2026 <a href="/">AKILPA — Arts, Kilti, Patrimoine</a>.
    Association loi 1901. Guadeloupe, France.
  </p>

  <address>
    <p>Contact : <a href="mailto:contact@akilpa.org">contact@akilpa.org</a></p>
    <p>Telephone : <a href="tel:+590590123456">+590 590 12 34 56</a></p>
  </address>

</footer>


<!-- =============================================================================
   STYLES EMBARQUES (exemple minimal)
   -------------------------------------------------------------------------------
   Dans un vrai projet SvelteKit, ces styles seraient dans un fichier .css
   separe ou dans un <style global>. Ici, ils illustrent les classes utilisees.
   Ces styles sont VOLONTAIREMENT simples pour rester lisibles.
   Dans la vraie vie, tu utiliserais Tailwind ou ton propre design system.
============================================================================= -->
<style>
  /*
    -- Reset minimal --
    box-sizing = evite les calculs de largeur penibles.
  */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /*
    -- Typographie de base --
    Inter = police lisible, bonne pour le web et les ecrans.
    line-height = 1.6 minimum pour la lisibilite.
  */
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #fafafa;
    margin: 0;
    padding: 0;
  }

  /*
    -- Conteneur principal --
    max-width = 65-75 caracteres par ligne = zone de confort de lecture.
    margin auto = centrage.
  */
  main {
    max-width: 70ch;
    margin: 0 auto;
    padding: 1rem;
  }

  /*
    -- Hierarchie typographique --
    H1 = plus grand, plus gras. H2 = question visuelle.
    Les headings doivent etre visuellement distincts.
  */
  h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #0f0f0f;
  }

  h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
    border-bottom: 2px solid #e63946; /* Ligne rouge AKILPA */
    padding-bottom: 0.25rem;
  }

  h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  /*
    -- Paragraphes --
    max-width implicite via le conteneur.
    margin-bottom = espacement entre paragraphes.
  */
  p {
    margin-bottom: 1rem;
  }

  /*
    -- Liens --
    Sous-lignes par defaut (accessibilite : on sait que c'est un lien).
    Couleur contrastee.
  */
  a {
    color: #e63946;
    text-decoration: underline;
  }

  a:hover, a:focus {
    color: #d62828;
    text-decoration: none;
    outline: 2px solid #e63946;
    outline-offset: 2px;
  }

  /*
    -- Zone de resume AI --
    Fond legerement different pour marquer visuellement la zone critique.
    C'est le premier bloc que l'utilisateur (et l'IA) voit.
  */
  .ai-summary {
    background: #fff3f3;
    border-left: 4px solid #e63946;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
  }

  .ai-summary p:first-child {
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 0;
  }

  /*
    -- Liste de faits cles --
    Pas de bullets par defaut, icones personnalisees via ::before.
  */
  .key-facts {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
  }

  .key-facts li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
  }

  .key-facts li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: #e63946;
    font-weight: bold;
  }

  /*
    -- Figures et images --
    max-width: 100% = responsive natif.
    height: auto = preserve le ratio (evite le CLS).
  */
  figure {
    margin: 1.5rem 0;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  figcaption {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.5rem;
    font-style: italic;
  }

  /*
    -- Tableaux --
    Bordures simples, alternance de lignes pour la lisibilite.
    Responsive : overflow-x auto sur mobile.
  */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
  }

  caption {
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: left;
  }

  th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  th {
    background: #f5f5f5;
    font-weight: 600;
  }

  tbody tr:nth-child(even) {
    background: #fafafa;
  }

  /*
    -- Citations --
    Bordure gauche + fond gris clair = style citation classique.
  */
  blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid #e63946;
    background: #f8f8f8;
    font-style: italic;
  }

  blockquote p {
    margin: 0;
  }

  blockquote footer {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: normal;
    color: #666;
  }

  /*
    -- FAQ (accordeons <details>) --
    Style natif ameliore. Chaque question = un bloc visuel.
  */
  details {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: #fff;
  }

  details[open] {
    border-color: #e63946;
  }

  summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none; /* Cache le triangle natif pour le remplacer */
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary h3 {
    display: inline;
    font-size: 1.1rem;
    margin: 0;
  }

  details p {
    margin-top: 0.75rem;
    margin-bottom: 0;
  }

  /*
    -- Carte auteur --
    Flexbox simple : image a gauche, texte a droite.
  */
  .author-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
  }

  .author-card img {
    border-radius: 50%;
    flex-shrink: 0;
  }

  .author-card p {
    margin: 0.25rem 0;
  }

  /*
    -- Navigation --
    Breadcrumb = petit texte, separateurs visuels.
  */
  nav[aria-label="Fil d'Ariane"] ol {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #666;
  }

  nav[aria-label="Fil d'Ariane"] a {
    color: #666;
    text-decoration: none;
  }

  nav[aria-label="Fil d'Ariane"] [aria-current="page"] {
    color: #1a1a1a;
    font-weight: 600;
  }

  /*
    -- Visually hidden --
    Cache visuellement un element tout en le gardant accessible
    aux lecteurs d'ecran. Utile pour les headings de sections
    qui n'ont pas besoin d'etre visibles mais doivent etre dans
    l'outline du document.
  */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /*
    -- Aside (sidebar) --
    Sur desktop, on pourrait le mettre a droite avec CSS Grid.
    Ici, simple empilement pour la lisibilite du code.
  */
  aside {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #eee;
  }

  aside h2 {
    font-size: 1.25rem;
    border: none;
    padding: 0;
  }

  /*
    -- Footer global --
    Fond sombre, texte clair. Separation visuelle claire.
  */
  body > footer {
    background: #1a1a1a;
    color: #ccc;
    padding: 2rem 1rem;
    margin-top: 3rem;
    text-align: center;
  }

  body > footer a {
    color: #fff;
  }

  body > footer nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
</style>
