cyber-mawonaj
dc6bf1bbde
Inclut SPECS_SVELTE.md : conventions Svelte 5/SvelteKit pour veille-ia, consolidées depuis doc2sveltekit-transition (playbook, charte OKI, best practices).
1298 lines
44 KiB
Svelte
1298 lines
44 KiB
Svelte
<!--
|
|
╔══════════════════════════════════════════════════════════════════════════════╗
|
|
║ 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>
|
|
© 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>
|