fix(shortcodes): éviter que Goldmark interprète </div> comme bloc de code

La fermeture du div était indentée dans le gabarit ; une fois injectée
après une liste, CommonMark la traitait comme du code indenté.
Corps du bloc sur une seule ligne avec </div> non indenté.

Made-with: Cursor

.gitignore

@@ -11,3 +11,4 @@ Thumbs.db
 .idea/
 *.swp
 *.swo
+.cursorrules 

content/_index.md

@@ -1,38 +1,33 @@
 ---
-title: "P'titsPas - Plateforme Publique de Gestion Petite Enfance pour Collectivités"
+title: "P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire"
 description: "Solution numérique publique pour les collectivités : gestion transparente des relations parents-assistantes maternelles, sans notation ni algorithme opaque. Égalité et neutralité garanties."
 keywords: ["P'titsPas", "ptitspas", "p'tits pas", "ptits pas", "petitspas", "petit pas", "petits pas", "opetitspas", "pitispas", "ptitpas", "p'titpas", "Ptitspas", "PTITSPAS", "petite enfance", "assistante maternelle", "collectivité", "commune", "garde enfant", "RPE", "relais petite enfance", "plateforme publique", "transparence", "neutralité", "gestion municipale petite enfance", "plateforme numérique collectivité", "mise en relation parents assistante maternelle", "solution publique garde enfant", "service public petite enfance", "accompagnement parental collectivité", "transparence service public", "égalité accès garde enfant", "politique municipale enfance", "dématérialisation services municipaux"]
 date: 2025-05-17T12:00:00+02:00
+hero_image: "/images/page_login_4.1.png"
+hero_image_alt: "Logo P'titsPas"
+hero_tagline: "Plateforme publique pour les collectivités — transparence, neutralité, service public numérique."
+intro_md: |
+  **Modernisez la mise en relation Parents - Assistantes Maternelles avec une plateforme 100% éthique, conçue pour les collectivités.**
+
+  Les RPE sont saturés, la gestion administrative est lourde et les parents peinent à trouver une information fiable ?
+  **P'titsPas** centralise et sécurise tout le parcours d'accueil individuel, tout en redonnant la main à la collectivité.
+
+  Plus qu'un outil de gestion, c'est la garantie d'un **Service Public Numérique** exemplaire.
+ethics:
+  - title: "Sans notation"
+    detail: "des professionnels"
+  - title: "Sans algorithme opaque"
+    detail: "de sélection"
+  - title: "100% conforme"
+    detail: "aux valeurs de la République"
+why_md: |
+  ## Pourquoi choisir P'titsPas pour votre commune ?
+
+  Là où les plateformes privées "ubérisent" la garde d'enfant, P'titsPas **restaure le lien de confiance** et la neutralité du service public.
+
+  *   **🏛️ Souveraineté des Données :** Vos données restent sur le territoire, protégées et maîtrisées (RGPD strict).
+  *   **⚖️ Équité Territoriale :** Offrez la même qualité de service à tous les administrés, quel que soit leur quartier.
+  *   **🤝 Valorisation des RPE :** Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur l'accompagnement humain.
+  *   **📱 Simplicité d'Usage :** Une interface pensée pour tous (parents, assistantes mat', agents), accessible sur mobile et PC.
+cta_title: "Reprenez le contrôle de votre politique Petite Enfance"
 ---
-
-<div class="logo-accueil"><img src="/images/page_login_4.1.png" alt="Logo P'titsPas"></div>
-
-# P'titsPas : La solution publique pour une gestion simplifiée et humaine de la petite enfance dans votre collectivité. V2
-
-<div class="content-section">
-**P'titsPas (aussi écrit ptitspas ou p'tits pas) est une plateforme numérique conçue pour accompagner les collectivités dans la gestion des relations entre les parents, les assistantes maternelles et les relais petite enfance (RPE). Elle vise à simplifier, structurer et sécuriser les processus de mise en relation, de contractualisation, de suivi et de communication autour de la garde d'enfants.**
-
-Elle s'inscrit dans une démarche publique fondée sur les valeurs de la République : **égalité**, **neutralité**, **accessibilité** et **transparence**. Contrairement aux plateformes privées, la solution P'titsPas ne fonctionne ni sur la logique de notation, ni de sélection algorithmique opaque.
-
-Notre mission est de valoriser le rôle des collectivités locales dans l'accompagnement de la petite enfance en fournissant un outil performant, éthique et adapté à vos besoins.
-</div>
-
----
-<div class="content-section">
-## Découvrez la différence P'titsPas
-
-Nous croyons en un service public numérique qui place **l'humain**, **la clarté** et **le lien de confiance** au cœur de chaque interaction.
-
-*   **Neutralité Garantie :** Pas de système de notation, pas de mise en concurrence biaisée. Chaque acteur est traité avec équité.
-*   **Transparence Totale :** Des processus lisibles, traçables, et validés par toutes les parties prenantes.
-*   **Accessibilité Universelle :** Une interface pensée pour une utilisation intuitive sur tous les appareils, des téléphones aux ordinateurs de bureau.
-*   **Protection des Données :** Un respect strict du RGPD et une gouvernance des données maîtrisée par la collectivité.
-</div>
-
----
-<div style="text-align: center; margin-top: calc(var(--padding-module) * 3);">
-### Prêt à moderniser la gestion de la petite enfance dans votre commune ?
-
-<a href="/fonctionnalites" class="cta-button">Découvrez nos fonctionnalités</a>
-<a href="/contact" class="cta-button">Contactez-nous</a>
-</div>

content/contact.md

@@ -12,39 +12,28 @@ Que vous souhaitiez une démonstration personnalisée, obtenir un devis, ou simp
 
 Utilisez le formulaire ci-dessous pour nous faire part de votre projet. Nous nous engageons à vous répondre dans les plus brefs délais.
 
-<!-- 
+<form class="site-form" action="/contact.php" method="POST">
-IMPORTANT : Pour que ce formulaire fonctionne, vous devez l'intégrer avec un service de gestion de formulaires externe tel que :
+    <div>
-- Formspree (https://formspree.io/)
+        <label for="name">Nom Prénom :</label>
-- Netlify Forms (si votre site est hébergé sur Netlify)
+        <input type="text" id="name" name="name" required>
-- Getform (https://getform.io/)
-- Ou une solution backend personnalisée.
-
-Vous devrez modifier l'attribut "action" du formulaire ci-dessous avec l'URL fournie par le service que vous choisirez,
-et potentiellement ajouter des champs cachés spécifiques à ce service.
--->
-
-<form action="#" method="POST" style="max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px;">
-    <div style="margin-bottom: 15px;">
-        <label for="name" style="display: block; margin-bottom: 5px;">Nom Prénom :</label>
-        <input type="text" id="name" name="name" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
     </div>
-    <div style="margin-bottom: 15px;">
+    <div>
-        <label for="collectivite" style="display: block; margin-bottom: 5px;">Collectivité / Organisation :</label>
+        <label for="collectivite">Collectivité / Organisation :</label>
-        <input type="text" id="collectivite" name="collectivite" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
+        <input type="text" id="collectivite" name="collectivite" required>
     </div>
-    <div style="margin-bottom: 15px;">
+    <div>
-        <label for="email" style="display: block; margin-bottom: 5px;">Adresse E-mail :</label>
+        <label for="email">Adresse E-mail :</label>
-        <input type="email" id="email" name="email" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
+        <input type="email" id="email" name="email" required>
     </div>
-    <div style="margin-bottom: 15px;">
+    <div>
-        <label for="phone" style="display: block; margin-bottom: 5px;">Téléphone (facultatif) :</label>
+        <label for="phone">Téléphone (facultatif) :</label>
-        <input type="tel" id="phone" name="phone" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
+        <input type="tel" id="phone" name="phone">
     </div>
-    <div style="margin-bottom: 15px;">
+    <div>
-        <label for="message" style="display: block; margin-bottom: 5px;">Votre Message :</label>
+        <label for="message">Votre Message :</label>
-        <textarea id="message" name="message" rows="6" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;"></textarea>
+        <textarea id="message" name="message" rows="6" required></textarea>
     </div>
-    <button type="submit" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">Envoyer Votre Demande</button>
+    <button type="submit">Envoyer votre demande</button>
 </form>
 
 Nous avons hâte de collaborer avec vous pour améliorer la gestion de la petite enfance sur votre territoire ! 

content/fonctionnalites.md

@@ -10,40 +10,44 @@ P'titsPas offre une suite complète de fonctionnalités conçues pour simplifier
 
 Nous comprenons que chaque acteur a des besoins spécifiques. C'est pourquoi P'titsPas propose des tableaux de bord et des outils dédiés :
 
-### Pour les Parents et Assistantes Maternelles : Simplicité et Autonomie
+{{% featureblock title="Pour les Parents et Assistantes Maternelles : Une expérience fluide et rassurante" %}}
-Bien que P'titsPas soit un outil au service de la collectivité, nous avons à cœur de fournir une expérience utilisateur optimale pour les parents et les assistantes maternelles. Une adoption facilitée par ces utilisateurs clés signifie moins de charge de support pour vos services et une plus grande satisfaction citoyenne.
+Bien que P'titsPas soit un outil au service de la collectivité, nous savons que l'adhésion des familles est la clé du succès. Une adoption facilitée signifie moins de sollicitations pour vos services et une plus grande satisfaction citoyenne.
-*   **Recherche facilitée** et mise en relation transparente.
-*   **Gestion simplifiée des contrats** et des avenants.
-*   **Communication directe et tracée.**
-*   **Suivi des heures**, aide à la déclaration Pajemploi.
-*   **Agenda partagé** pour une meilleure organisation.
 
-### Pour les Gestionnaires de Relais Petite Enfance (RPE) : Supervision et Accompagnement
+*   ✅ **Recherche facilitée** : Mise en relation transparente basée sur les besoins réels.
-Vos gestionnaires RPE sont en première ligne. P'titsPas leur donne les moyens d'agir efficacement :
+*   ✅ **Gestion administrative simplifiée** : Contrats, avenants et suivi des heures en quelques clics.
-*   **Validation des comptes** et suivi des dossiers.
+*   ✅ **Communication directe et tracée** : Pour apaiser les relations et garder un historique.
-*   **Tableau de bord de supervision** des contrats et des mises en relation.
+*   ✅ **Agenda partagé** : Une meilleure organisation au quotidien.
-*   Outils de **médiation** en cas de désaccord.
+{{% /featureblock %}}
-*   Organisation d'**événements RPE** et communication ciblée.
-*   **Alertes** pour une gestion proactive des situations sensibles.
 
-### Pour les Administrateurs de la Mairie : Contrôle, Personnalisation et Sécurité
+{{% featureblock title="Pour vos Gestionnaires RPE : Gagnez du temps et de la visibilité" %}}
-P'titsPas est conçu pour s'intégrer parfaitement à votre gestion administrative et technique, en vous offrant un contrôle complet :
+Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur leur cœur de métier : l'accompagnement humain.
 
-*   **Gestion centralisée des utilisateurs :** Créez, modifiez, et supervisez les comptes (parents, assistantes maternelles, gestionnaires) avec des droits précis.
+*   📊 **Tableau de bord de supervision** : Une vue d'ensemble immédiate des contrats et disponibilités sur le territoire.
-*   **Personnalisation de la plateforme :** Adaptez l'interface aux couleurs de votre collectivité, intégrez votre logo, et personnalisez le nom de la structure.
+*   ⚡ **Validation rapide** : Gestion fluide des comptes et suivi des dossiers en temps réel.
-*   **Paramètres avancés :** Configurez les règles de la plateforme, comme l'obligation de photo, les délais de validation, etc.
+*   🤝 **Outils de médiation** : Intervenez facilement en cas de désaccord grâce à l'historique des échanges.
-*   **Modules Activables :** Étendez les fonctionnalités de P'titsPas selon vos besoins spécifiques (Blog RPE, aide à la reformulation IA, etc.). La plateforme évolue avec vous.
+*   📢 **Communication ciblée** : Organisez vos événements RPE et diffusez l'information efficacement.
-*   **Statistiques et Rapports :** Accédez à des données clés sur l'utilisation de la plateforme, le nombre de contrats, d'enfants, et exportez des données pour vos analyses.
+{{% /featureblock %}}
-*   **Sécurité et Conformité RGPD :** Bénéficiez d'une solution conçue dans le respect strict du RGPD, avec des outils pour la gestion des consentements, la journalisation des accès et la sécurisation des données (NIR chiffré, etc.).
+
-*   **Architecture Technique Robuste :** Déployez P'titsPas sur votre infrastructure ou explorez nos options d'accompagnement. La solution est pensée pour être portable et maintenable.
+{{% featureblock title="Pour votre DSI et Direction : Une solution souveraine et maîtrisée" %}}
+P'titsPas s'intègre à votre écosystème avec un niveau d'exigence élevé en matière de sécurité et de personnalisation.
+
+*   🔒 **Sécurité et Conformité RGPD** : Une conception "Privacy by Design", hébergement souverain et chiffrement des données sensibles (NIR).
+*   🎨 **Personnalisation à votre image** : Logo, couleurs et nom de la structure adaptables à votre charte graphique.
+*   ⚙️ **Gestion fine des droits** : Administration centralisée des comptes et des paramètres de la plateforme.
+*   📈 **Pilotage par la donnée** : Statistiques d'usage, nombre de contrats, taux d'occupation... exportables pour vos rapports.
+*   🧩 **Évolutivité** : Activez uniquement les modules dont vous avez besoin (Blog, IA, etc.).
+{{% /featureblock %}}
 
 ## Des Workflows Clairs et Sécurisés
 
 De la recherche d'une assistante maternelle à la fin de contrat, P'titsPas structure chaque étape :
+
+{{% featureblock %}}
 *   **Recherche et mise en relation** guidées.
 *   **Création et validation de contrats** dématérialisée et collaborative.
 *   **Gestion des avenants** simplifiée.
 *   **Procédure de fin de contrat** accompagnée, avec calcul du solde de tout compte.
+{{% /featureblock %}}
 
 ---
 

content/mentions-legales.md

@@ -1,5 +1,7 @@
 ---
-title: "Mentions Légales"
+title: "Mentions Légales - P'titsPas"
+description: "Mentions légales et informations juridiques du site P'titsPas, plateforme de gestion petite enfance pour collectivités. Éditeur, hébergement et propriété intellectuelle."
+keywords: ["mentions légales", "ptitspas", "plateforme petite enfance", "collectivités", "informations juridiques", "éditeur site"]
 date: 2025-05-24T12:00:00+02:00
 draft: false
 ---

content/politique-de-confidentialite.md

@@ -1,5 +1,7 @@
 ---
-title: "Politique de Confidentialité"
+title: "Politique de Confidentialité - P'titsPas"
+description: "Politique de confidentialité de P'titsPas : protection des données, utilisation de Google Analytics, cookies et droits des utilisateurs selon le RGPD."
+keywords: ["politique confidentialité", "rgpd", "ptitspas", "protection données", "cookies", "google analytics", "droits utilisateurs"]
 date: 2025-05-24T12:05:00+02:00
 draft: false
 ---

content/pourquoi-ptitspas.md

@@ -29,13 +29,15 @@ Avec P'titsPas, vous gardez le contrôle de vos données et de celles de vos adm
 *   **Adaptabilité aux Réalités Locales :**
     P'titsPas n'est pas une solution rigide. Personnalisez l'apparence (logo, couleurs), activez les modules qui correspondent à VOS besoins, et intégrez la plateforme dans l'écosystème de votre collectivité.
 
-## Plus qu'un Outil, un Levier pour Votre Politique Petite Enfance
+## Plus qu'un Outil, un Levier d'Efficacité pour Votre Territoire
 
-En choisissant P'titsPas, vous optez pour :
+En choisissant P'titsPas, vous faites le choix d'une gestion modernisée qui bénéficie à tous :
-*   La **valorisation du rôle de votre collectivité** comme acteur clé de l'accompagnement des familles.
+
-*   La **modernisation de vos services** avec une solution performante et sécurisée.
+*   **🚀 Efficacité Administrative :** Réduisez drastiquement le temps de traitement des dossiers papier et centralisez l'information pour un pilotage plus fin.
-*   Le **renforcement du lien de confiance** avec vos administrés grâce à un outil transparent et équitable.
+*   **🏛️ Valorisation du Service Public :** Positionnez votre collectivité comme un acteur innovant et proche des familles.
-*   Une **solution évolutive**, pensée pour s'adapter aux futurs besoins et aux nouvelles réglementations.
+*   **🤝 Renforcement du lien de confiance :** Offrez un cadre sécurisant et transparent qui apaise les relations entre parents et professionnels.
+*   **🛡️ Sérénité Juridique :** Appuyez-vous sur une solution conçue pour respecter scrupuleusement le cadre légal et la protection des données.
+*   **💶 Modèle Économique Transparent :** Licence d'installation puis abonnement (mensuel, bi-annuel ou annuel) selon vos besoins, sans coûts cachés ni exploitation des données.
 
 ---
 

content/technique.md

@@ -0,0 +1,75 @@
+---
+title: "Données Techniques & Sécurité - P'titsPas"
+description: "Architecture technique, sécurité des données, conformité RGPD et hébergement souverain de la solution P'titsPas pour les collectivités."
+keywords: ["sécurité données", "RGPD collectivité", "hébergement souverain", "architecture technique", "chiffrement AES-256", "docker", "accessibilité RGAA"]
+date: 2025-05-24T14:00:00+02:00
+draft: false
+---
+
+# Données Techniques, Sécurité & Conformité
+
+P'titsPas est conçu dès l'origine (**Security by Design**) pour répondre aux exigences strictes des DSI des collectivités territoriales. Notre architecture privilégie la souveraineté, la sécurité des données sensibles et la conformité légale.
+
+<div class="content-section">
+
+## 🛡️ Sécurité et Protection des Données
+
+La confiance est le socle de notre solution. Nous mettons en œuvre les standards de sécurité les plus élevés pour protéger les données des familles et des agents.
+
+*   **Chiffrement Avancé** : Toutes les données sont chiffrées en transit (TLS 1.3, HSTS) et les données sensibles comme le NIR (Numéro de Sécurité Sociale) sont chiffrées au repos (AES-256).
+*   **Minimisation des Données** : Le NIR est utilisé exclusivement pour la génération des contrats PDF et n'est jamais affiché en clair dans l'interface.
+*   **Protection des Accès** : Mots de passe chiffrés, protection contre les attaques par force brute, et journalisation complète des accès sensibles.
+*   **Droit à l'Oubli** : Les utilisateurs peuvent supprimer leur compte et leurs données (hors obligations légales de conservation) en totale autonomie.
+
+</div>
+
+---
+
+<div class="content-section">
+
+## ⚖️ Conformité RGPD & Juridique
+
+P'titsPas est un outil **100% conforme au Règlement Général sur la Protection des Données (RGPD)**.
+
+*   **Consentement Explicite** : Gestion fine des accords (ex: droit à l'image pour les photos).
+*   **Registre des Traitements** : Finalités claires et documentées pour chaque donnée collectée.
+*   **Souveraineté** : Les données sont hébergées sur des infrastructures maîtrisées, sans transfert hors UE.
+*   **Propriété** : La collectivité reste maître de ses données administratives.
+
+</div>
+
+---
+
+<div class="content-section">
+
+## 🏗️ Architecture & Déploiement
+
+Notre solution est pensée pour s'intégrer facilement dans le système d'information de votre commune.
+
+*   **Technologie Moderne** : Architecture modulaire et conteneurisée (Docker), facilitant la maintenance et les mises à jour.
+*   **Déploiement Flexible** : Installation rapide (< 1h) sur vos serveurs communaux (Linux) ou en mode SaaS souverain dédié.
+*   **Haute Disponibilité** : Conception robuste visant une disponibilité de service > 98%.
+*   **Interopérabilité** : Exports de données standards (CSV) pour vos statistiques et possibilité d'intégration API (sur étude).
+
+</div>
+
+---
+
+<div class="content-section">
+
+## ♿ Accessibilité Numérique
+
+Le service public se doit d'être accessible à tous.
+
+*   **Compatibilité** : Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Edge, Safari) et sur tous les terminaux (Mobile, Tablette, Desktop).
+*   **Normes RGAA** : Nous visons le niveau AA du Référentiel Général d'Amélioration de l'Accessibilité (navigation clavier, contrastes, lecteurs d'écran).
+*   **Mode Déconnecté** : L'agenda et la messagerie restent consultables même en cas de perte temporaire de réseau.
+
+</div>
+
+<div style="text-align: center; margin-top: 30px;">
+    <p><strong>Vous êtes DSI ou Responsable Technique ?</strong><br>
+    Demandez notre dossier d'architecture technique détaillé.</p>
+    <a href="/contact" class="cta-button">Contacter le support technique</a>
+</div>
+

layouts/_default/baseof.html

@@ -4,18 +4,15 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- SEO Meta Tags -->
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
     <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
     <meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
     <meta name="author" content="{{ .Site.Params.author | default .Site.Title }}">
 
-    <!-- Prevent indexing of staging site -->
     {{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
     <meta name="robots" content="noindex, nofollow">
     {{ end }}
 
-    <!-- Open Graph / Facebook -->
     <meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
     <meta property="og:url" content="{{ .Permalink }}">
     <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
@@ -23,20 +20,15 @@
     <meta property="og:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
     <meta property="og:locale" content="fr_FR">
 
-    <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="{{ .Permalink }}">
     <meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
     <meta property="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
     <meta property="twitter:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
 
-    <!-- Canonical URL -->
     <link rel="canonical" href="{{ .Permalink }}">
+    <link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}">
 
-    <!-- Favicon -->
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
-    
-    <!-- JSON-LD structured data for Google -->
     <script type="application/ld+json">
     {
       "@context": "https://schema.org",
@@ -59,20 +51,45 @@
     </script>
 
     <link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-65J8GVLCRH', {
+        'anonymize_ip': true,
+        'allow_google_signals': false,
+        'allow_ad_personalization_signals': false,
+        'restricted_data_processing': true
+      });
+    </script>
 </head>
 <body>
-    <header>
+    <a class="skip-link" href="#contenu-principal">Aller au contenu</a>
-        <nav>
+    <header class="site-header">
-            <ul>
+        <div class="site-header__inner">
+            <a class="site-logo" href="{{ "/" | relURL }}">P'titsPas</a>
+            <nav class="site-nav" id="site-nav" aria-label="Navigation principale">
+                <button type="button" class="nav-toggle" aria-expanded="false" aria-controls="site-nav-panel" id="site-nav-toggle" aria-label="Ouvrir le menu">
+                    <span class="nav-toggle__bar" aria-hidden="true"></span>
+                    <span class="nav-toggle__bar" aria-hidden="true"></span>
+                    <span class="nav-toggle__bar" aria-hidden="true"></span>
+                </button>
+                <div class="site-nav__panel" id="site-nav-panel">
+                    <ul class="site-nav__list">
                         {{ range .Site.Menus.main }}
-                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+                        <li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
                         {{ end }}
                     </ul>
+                </div>
             </nav>
+        </div>
     </header>
-    <main>
+    <main id="contenu-principal" class="site-main">
         {{ block "main" . }}{{ .Content }}{{ end }}
     </main>
     {{ partial "footer.html" . }}
+    <script src="{{ `/js/site.js` | relURL }}" defer></script>
 </body>
 </html>

layouts/_default/list.html

@@ -1,3 +1,5 @@
 {{ define "main" }}
+<div class="page-shell">
     {{ .Content }}
+</div>
 {{ end }}

layouts/_default/single.html

@@ -1,5 +1,7 @@
 {{ define "main" }}
+<div class="page-shell">
     <article class="content">
         {{ .Content }}
     </article>
+</div>
 {{ end }}

layouts/index.html

@@ -0,0 +1,46 @@
+{{ define "main" }}
+<div class="home">
+    <section class="home-hero">
+        {{ partial "home-path-motif.html" . }}
+        <div class="home-hero__inner">
+            <div class="home-hero__media">
+                <img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="1200" height="630" fetchpriority="high">
+            </div>
+            <div class="home-hero__copy">
+                <h1 class="home-hero__title">{{ .Title }}</h1>
+                {{ with .Params.hero_tagline }}<p class="accroche">{{ . }}</p>{{ end }}
+            </div>
+        </div>
+    </section>
+
+    <div class="home-bento">
+        <article class="home-card home-card--intro">
+            {{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
+        </article>
+        <aside class="home-card home-card--ethics" aria-label="Engagements">
+            <h2 class="visually-hidden">Nos engagements</h2>
+            <ol class="ethics-steps">
+                {{ range .Params.ethics }}
+                <li>
+                    <strong>{{ .title }}</strong>
+                    {{ .detail }}
+                </li>
+                {{ end }}
+            </ol>
+        </aside>
+    </div>
+
+    <section class="home-why">
+        {{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
+    </section>
+
+    <section class="home-cta" aria-labelledby="home-cta-title">
+        <h2 id="home-cta-title" class="visually-hidden">Actions</h2>
+        {{ with .Params.cta_title }}<h3>{{ . }}</h3>{{ end }}
+        <div>
+            <a href="{{ "fonctionnalites" | relURL }}" class="cta-button">Voir les fonctionnalités clés</a>
+            <a href="{{ "contact" | relURL }}" class="cta-button">Demander une démo</a>
+        </div>
+    </section>
+</div>
+{{ end }}

layouts/partials/footer.html

@@ -1,10 +1,8 @@
-<footer style="background-color: #f8f9fa; padding: 20px 0; text-align: center; border-top: 1px solid #e7e7e7; margin-top: 40px;">
+<footer class="footer-site">
-    <div class="container">
+    <p>&copy; {{ now.Year }} P'titsPas — Tous droits réservés.</p>
-        <p>&copy; {{ now.Year }} P'titsPas - Tous droits réservés.</p>
+    <nav class="footer-site__links" aria-label="Liens de pied de page">
-        <p>
+        <a href="{{ "mentions-legales" | relURL }}">Mentions légales</a>
-            <a href="/mentions-legales/" style="margin-right: 15px; text-decoration: none; color: #007bff;">Mentions Légales</a>
+        <a href="{{ "politique-de-confidentialite" | relURL }}">Politique de confidentialité</a>
-            <a href="/politique-de-confidentialite/" style="text-decoration: none; color: #007bff;">Politique de Confidentialité</a>
+        <a href="{{ "technique" | relURL }}">Données techniques</a>
-        </p>
+    </nav>
-        <!-- Vous pouvez ajouter ici d'autres informations ou liens si nécessaire -->
-    </div>
 </footer>

layouts/partials/home-path-motif.html

@@ -0,0 +1 @@
+<img class="home-hero__motif home-hero__motif-img" src="{{ "images/motif-trajet.svg" | relURL }}" width="520" height="140" alt="" role="presentation" decoding="async">

layouts/shortcodes/card.html

@@ -0,0 +1,7 @@
+{{- $title := .Get "title" -}}
+<div class="feature-card">
+{{- if $title -}}
+<h4 class="feature-card__title">{{ $title }}</h4>
+{{- end -}}
+<div class="feature-card__body">{{ .Inner | markdownify }}</div>
+</div>

layouts/shortcodes/featureblock.html

@@ -0,0 +1,7 @@
+{{- $title := .Get "title" -}}
+<section class="feature-section">
+{{- if $title -}}
+<h3 class="feature-section__title">{{ $title }}</h3>
+{{- end -}}
+<div class="feature-section__body">{{ .Inner | markdownify }}</div>
+</section>

static/css/style.css

@@ -1,143 +1,543 @@
-/* Charte Graphique P'titsPas */
+/* Charte P'titsPas — vitrine modernisée (tokens + layout) */
+
+@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");
 
-/* Variables de Couleurs */
 :root {
-    --color-peche-doux: #FFD7A8;
+    --color-peche-doux: #ffd7a8;
-    --color-menthe-claire: #AEE1CD;
+    --color-menthe-claire: #aee1cd;
-    --color-rose-tendre: #F6B2C4;
+    --color-rose-tendre: #f6b2c4;
-    --color-jaune-pale: #FFECB3;
+    --color-jaune-pale: #ffecb3;
-    --color-lavande: #E6E6FA; /* Approximation, à ajuster si vous avez un hex exact */
+    --color-lavande: #e6e6fa;
-    --color-corail-leger: #FFDAB9; /* Approximation, à ajuster */
+    --color-corail-leger: #ffdab9;
-    --color-texte-principal: #333333;
+    --color-texte-principal: #2c2c2c;
-    --color-texte-secondaire: #555555;
+    --color-texte-secondaire: #555;
-    --color-blanc: #FFFFFF;
+    --color-blanc: #fff;
-    --padding-module: 8px;
+    --color-lien: #c45b6e;
+    --color-lien-hover: #a8485a;
+    --color-surface: rgba(255, 255, 255, 0.92);
+    --shadow-soft: 0 2px 12px rgba(44, 44, 44, 0.06);
+    --shadow-card: 0 4px 24px rgba(44, 44, 44, 0.08);
+    --radius-sm: 8px;
+    --radius-md: 16px;
+    --radius-lg: 24px;
+    --space-1: 0.5rem;
+    --space-2: 1rem;
+    --space-3: 1.5rem;
+    --space-4: 2rem;
+    --space-5: 3rem;
+    --font-display: "Merienda", cursive;
+    --font-body: "Source Sans 3", system-ui, sans-serif;
+    --header-height: 4rem;
+    --content-max: 72rem;
+    --nav-break: 52rem;
 }
 
-/* Import des polices (exemple avec Google Fonts) */
+@media (prefers-reduced-motion: reduce) {
-@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Open+Sans:wght@400;700&family=Poppins:wght@700&family=Quicksand:wght@500;700&family=Montserrat:wght@400;700&display=swap');
+    *,
-/* Si vous avez une police script/brushed spécifique, elle devra être importée ici aussi, potentiellement localement */
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
 
-/* Styles de Base */
 body {
-    font-family: 'Open Sans', sans-serif;
+    margin: 0;
+    font-family: var(--font-body);
+    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
+    line-height: 1.65;
     color: var(--color-texte-principal);
-    background-color: var(--color-blanc); /* Ou une teinte pastel très claire comme fond général */
+    background: linear-gradient(165deg, var(--color-blanc) 0%, var(--color-lavande) 35%, var(--color-menthe-claire) 100%);
+    background-attachment: fixed;
+    min-height: 100vh;
+}
+
+:focus-visible {
+    outline: 3px solid var(--color-menthe-claire);
+    outline-offset: 3px;
+}
+
+.skip-link {
+    position: absolute;
+    left: -9999px;
+    z-index: 1000;
+    padding: var(--space-2) var(--space-3);
+    background: var(--color-texte-principal);
+    color: var(--color-blanc);
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: var(--radius-sm);
+}
+
+.skip-link:focus {
+    left: var(--space-2);
+    top: var(--space-2);
+}
+
+.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;
+}
+
+/* ——— Header ——— */
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background: color-mix(in srgb, var(--color-menthe-claire) 92%, transparent);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid color-mix(in srgb, var(--color-texte-principal) 8%, transparent);
+    box-shadow: var(--shadow-soft);
+}
+
+.site-header__inner {
+    max-width: var(--content-max);
+    margin: 0 auto;
+    padding: var(--space-2) var(--space-3);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    min-height: var(--header-height);
+}
+
+.site-logo {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
+    color: var(--color-texte-principal);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.site-logo:hover {
+    text-decoration: none;
+    color: var(--color-lien-hover);
+}
+
+.site-nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.nav-toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+    width: 2.75rem;
+    height: 2.75rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: var(--color-blanc);
+    cursor: pointer;
+    box-shadow: var(--shadow-soft);
+}
+
+.nav-toggle__bar {
+    display: block;
+    width: 1.25rem;
+    height: 2px;
+    margin: 0 auto;
+    background: var(--color-texte-principal);
+    border-radius: 1px;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.site-nav.is-open .nav-toggle__bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+}
+
+.site-nav.is-open .nav-toggle__bar:nth-child(2) {
+    opacity: 0;
+}
+
+.site-nav.is-open .nav-toggle__bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+}
+
+.site-nav__list {
+    list-style: none;
     margin: 0;
     padding: 0;
-    line-height: 1.6;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
 }
 
-main {
+.site-nav__list a {
-    padding: calc(var(--padding-module) * 3); /* 24px */
+    display: block;
-    max-width: 960px;
+    padding: var(--space-1) var(--space-2);
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--color-texte-principal);
+    text-decoration: none;
+    border-radius: var(--radius-sm);
+    transition: background-color 0.2s ease;
+}
+
+.site-nav__list a:hover {
+    background: var(--color-peche-doux);
+    text-decoration: none;
+}
+
+@media (max-width: 51.99rem) {
+    .nav-toggle {
+        display: flex;
+    }
+
+    .site-nav__panel {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 100%;
+        max-height: 0;
+        overflow: hidden;
+        background: color-mix(in srgb, var(--color-blanc) 96%, var(--color-menthe-claire));
+        border-bottom: 1px solid color-mix(in srgb, var(--color-texte-principal) 8%, transparent);
+        transition: max-height 0.35s ease;
+    }
+
+    .site-nav.is-open .site-nav__panel {
+        max-height: 24rem;
+    }
+
+    .site-nav__list {
+        flex-direction: column;
+        padding: var(--space-3);
+        align-items: stretch;
+    }
+
+    .site-nav__list a {
+        text-align: center;
+    }
+}
+
+@media (min-width: 52rem) {
+    .nav-toggle {
+        display: none;
+    }
+
+    .site-nav {
+        flex: 1;
+    }
+
+    .site-nav__panel {
+        position: static;
+        max-height: none !important;
+        overflow: visible;
+        background: transparent;
+        border: none;
+    }
+
+    .site-nav__list {
+        justify-content: flex-end;
+    }
+}
+
+/* ——— Main ——— */
+.site-main {
+    max-width: var(--content-max);
+    margin: 0 auto;
+    padding: var(--space-4) var(--space-3) var(--space-5);
+}
+
+.page-shell {
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+    padding: var(--space-4);
+}
+
+.page-shell .content {
+    max-width: 52rem;
     margin: 0 auto;
 }
 
 h1 {
-    font-family: 'Merienda', cursive; /* Police Script pour titres d'impact */
+    font-family: var(--font-display);
-    color: var(--color-texte-principal);
-    /* Peut nécessiter des ajustements de taille ou de graisse spécifiques */
-    /* font-weight: 700; /* ou 400 selon le style désiré */ 
-}
-
-h2, h3, h4, h5, h6 {
-    font-family: 'Poppins', sans-serif; /* Pour les sous-titres et autres titres */
-    color: var(--color-texte-principal);
-}
-
-/* Accroches et sous-titres (exemples) */
-.accroche {
-    font-family: 'Quicksand', sans-serif;
     font-weight: 700;
+    font-size: clamp(1.65rem, 1.2rem + 2vw, 2.35rem);
+    line-height: 1.25;
+    color: var(--color-texte-principal);
+    margin: 0 0 var(--space-3);
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-body);
+    font-weight: 700;
+    color: var(--color-texte-principal);
+    line-height: 1.3;
+}
+
+h2 {
+    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
+}
+
+h3 {
+    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
+}
+
+.accroche {
+    font-weight: 600;
     color: var(--color-texte-secondaire);
 }
 
 a {
-    color: var(--color-corail-leger); /* Corail léger pour les liens */
+    color: var(--color-lien);
-    text-decoration: none;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
 }
 
 a:hover {
-    text-decoration: underline;
+    color: var(--color-lien-hover);
 }
 
-/* Header / Navigation */
+/* ——— Home ——— */
-header nav {
+.home-hero {
-    background-color: var(--color-menthe-claire); /* Menthe claire pour le header */
+    position: relative;
-    padding: var(--padding-module) 0;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-card);
+    margin-bottom: var(--space-4);
 }
 
-header nav ul {
+.home-hero__motif {
-    list-style-type: none;
+    position: absolute;
-    padding: 0 calc(var(--padding-module) * 2);
+    inset: 0;
-    text-align: center;
+    pointer-events: none;
+}
+
+.home-hero__motif-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    animation: motifReveal 2s ease forwards 0.2s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .home-hero__motif-img {
+        animation: none;
+        opacity: 0.16;
+    }
+}
+
+@keyframes motifReveal {
+    to {
+        opacity: 0.16;
+    }
+}
+
+.home-hero__inner {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    gap: var(--space-4);
+    padding: var(--space-4);
+}
+
+@media (min-width: 48rem) {
+    .home-hero__inner {
+        grid-template-columns: 1fr 1.1fr;
+        align-items: center;
+    }
+}
+
+.home-hero__media {
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    box-shadow: var(--shadow-soft);
+}
+
+.home-hero__media img {
+    width: 100%;
+    height: auto;
+    max-height: 22rem;
+    object-fit: cover;
+    display: block;
+}
+
+.home-hero__title {
+    margin-bottom: var(--space-2);
+}
+
+.home-bento {
+    display: grid;
+    gap: var(--space-3);
+    margin-bottom: var(--space-4);
+}
+
+@media (min-width: 48rem) {
+    .home-bento {
+        grid-template-columns: 1.4fr 1fr;
+        align-items: start;
+    }
+}
+
+.home-card {
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+    padding: var(--space-4);
+}
+
+.home-card--ethics {
+    background: linear-gradient(145deg, var(--color-blanc), var(--color-jaune-pale));
+}
+
+.ethics-steps {
+    list-style: none;
     margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
 }
 
-header nav ul li {
+.ethics-steps li {
-    display: inline;
+    padding: var(--space-2);
-    margin-right: calc(var(--padding-module) * 2.5); /* 20px */
+    background: var(--color-blanc);
+    border-radius: var(--radius-sm);
+    border-left: 4px solid var(--color-rose-tendre);
+    font-size: 0.95rem;
+    box-shadow: var(--shadow-soft);
 }
 
-header nav ul li a {
+.ethics-steps strong {
-    color: var(--color-texte-principal); /* Texte plus foncé sur fond pastel clair */
+    display: block;
-    text-decoration: none;
+    font-family: var(--font-body);
-    padding: calc(var(--padding-module) * 1.5) var(--padding-module);
+    margin-bottom: 0.15rem;
-    display: inline-block;
-    font-family: 'Quicksand', sans-serif;
-    font-weight: 700;
-    border-radius: calc(var(--padding-module) / 2); /* 4px */
 }
 
-header nav ul li a:hover {
+.home-why {
-    background-color: var(--color-peche-doux); /* Pêche doux au survol */
+    background: var(--color-surface);
-    text-decoration: none;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+    padding: var(--space-4);
+    margin-bottom: var(--space-4);
 }
 
-/* Style pour l'image du logo sur la page d'accueil */
+.home-why :first-child {
+    margin-top: 0;
+}
+
+.home-why :last-child {
+    margin-bottom: 0;
+}
+
+.home-cta {
+    text-align: center;
+    padding: var(--space-4);
+    background: linear-gradient(135deg, var(--color-peche-doux), var(--color-rose-tendre));
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-card);
+}
+
+.home-cta h2,
+.home-cta h3 {
+    margin-top: 0;
+    margin-bottom: var(--space-3);
+}
+
+.home-cta .cta-button {
+    margin: var(--space-1);
+}
+
+/* ——— Legacy / inner pages ——— */
 .logo-accueil img {
     width: 100%;
     max-height: 400px;
     object-fit: cover;
     display: block;
-    margin-bottom: calc(var(--padding-module) * 4); /* 32px */
+    margin-bottom: var(--space-4);
-    border-radius: var(--padding-module); /* Coins arrondis style galet */
+    border-radius: var(--radius-sm);
+}
+
+.content-section {
+    background: var(--color-surface);
+    padding: var(--space-4);
+    margin-bottom: var(--space-3);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-soft);
 }
 
-/* Boutons */
 button,
 input[type="submit"],
 .cta-button {
-    font-family: 'Quicksand', sans-serif;
+    font-family: var(--font-body);
     font-weight: 700;
-    background-color: var(--color-peche-doux); /* Pêche doux pour les boutons primaires */
+    background: var(--color-peche-doux);
     color: var(--color-texte-principal);
     border: none;
-    padding: calc(var(--padding-module) * 1.5) calc(var(--padding-module) * 3);
+    padding: var(--space-2) var(--space-4);
-    border-radius: calc(var(--padding-module) * 3); /* Forme de galet allongé */
+    border-radius: 999px;
     cursor: pointer;
     text-decoration: none;
     display: inline-block;
-    margin-top: var(--padding-module);
+    margin-top: var(--space-1);
-    transition: background-color 0.3s ease;
+    transition: background-color 0.2s ease, transform 0.15s ease;
+    box-shadow: var(--shadow-soft);
+}
+
+.cta-button {
+    text-decoration: none;
 }
 
 button:hover,
 input[type="submit"]:hover,
 .cta-button:hover {
-    background-color: var(--color-rose-tendre); /* Rose tendre au survol */
+    background: var(--color-rose-tendre);
+    text-decoration: none;
+    transform: translateY(-1px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    button:hover,
+    input[type="submit"]:hover,
+    .cta-button:hover {
+        transform: none;
+    }
 }
 
-/* Formulaires (basique) */
 form div {
-    margin-bottom: calc(var(--padding-module) * 2);
+    margin-bottom: var(--space-2);
 }
 
 form label {
     display: block;
-    margin-bottom: var(--padding-module);
+    margin-bottom: var(--space-1);
-    font-family: 'Quicksand', sans-serif;
+    font-weight: 600;
 }
 
 form input[type="text"],
@@ -145,36 +545,109 @@ form input[type="email"],
 form input[type="tel"],
 form textarea {
     width: 100%;
-    padding: var(--padding-module);
+    padding: var(--space-2);
-    border: 1px solid var(--color-menthe-claire);
+    border: 1px solid color-mix(in srgb, var(--color-menthe-claire) 70%, var(--color-texte-principal));
-    border-radius: calc(var(--padding-module) / 2); /* 4px */
+    border-radius: var(--radius-sm);
-    box-sizing: border-box; /* Important pour que padding ne change pas la largeur totale */
+    font-family: var(--font-body);
-    font-family: 'Open Sans', sans-serif;
+    font-size: 1rem;
 }
 
-/* Sections de contenu - style galet */
+.site-form {
-.content-section {
+    max-width: 38rem;
-    background-color: var(--color-blanc);
+    margin: var(--space-4) auto;
-    padding: calc(var(--padding-module) * 3);
+    padding: var(--space-4);
-    margin-bottom: calc(var(--padding-module) * 3);
+    background: var(--color-surface);
-    border-radius: calc(var(--padding-module) * 2); /* 16px, angles arrondis */
+    border-radius: var(--radius-md);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Ombre douce */
+    box-shadow: var(--shadow-soft);
 }
 
-/* Footer */
+.site-form button[type="submit"] {
-footer {
+    margin-top: var(--space-2);
-    background-color: var(--color-jaune-pale); /* Jaune pâle pour le footer */
-    padding: calc(var(--padding-module) * 2.5) 0;
-    text-align: center;
-    border-top: 1px solid var(--color-peche-doux);
-    margin-top: calc(var(--padding-module) * 5);
 }
 
-footer p {
+/* ——— Feature sections (shortcodes) ——— */
-    margin: var(--padding-module) 0;
+.feature-section {
-    font-size: 0.9em;
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-soft);
+    padding: var(--space-4);
+    margin: var(--space-4) 0;
 }
 
-footer a {
+.feature-section__title {
+    margin: 0 0 var(--space-2);
+    padding-bottom: var(--space-2);
+    border-bottom: 2px solid var(--color-menthe-claire);
+}
+
+.feature-section__body > :first-child {
+    margin-top: 0;
+}
+
+.feature-section__body > :last-child {
+    margin-bottom: 0;
+}
+
+.feature-grid {
+    display: grid;
+    gap: var(--space-3);
+    margin: var(--space-3) 0;
+}
+
+@media (min-width: 40rem) {
+    .feature-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.feature-card {
+    background: color-mix(in srgb, var(--color-blanc) 88%, var(--color-lavande));
+    border-radius: var(--radius-sm);
+    padding: var(--space-3);
+    border: 1px solid color-mix(in srgb, var(--color-texte-principal) 6%, transparent);
+}
+
+.feature-card__title {
+    margin: 0 0 var(--space-1);
+    font-size: 1rem;
+}
+
+.feature-card__body {
+    margin: 0;
+    font-size: 0.95rem;
     color: var(--color-texte-secondaire);
 }
+
+/* ——— Footer ——— */
+.footer-site {
+    background: color-mix(in srgb, var(--color-jaune-pale) 88%, var(--color-blanc));
+    padding: var(--space-4) var(--space-3);
+    text-align: center;
+    border-top: 1px solid color-mix(in srgb, var(--color-peche-doux) 80%, transparent);
+    margin-top: var(--space-5);
+}
+
+.footer-site p {
+    margin: var(--space-1) 0;
+    font-size: 0.95rem;
+    color: var(--color-texte-secondaire);
+}
+
+.footer-site__links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-2) var(--space-3);
+    margin-top: var(--space-2);
+}
+
+.footer-site__links a {
+    color: var(--color-texte-principal);
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.footer-site__links a:hover {
+    text-decoration: underline;
+    color: var(--color-lien-hover);
+}

static/images/motif-trajet.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 140" preserveAspectRatio="xMidYMid slice" fill="none">
+  <path stroke="#7eb9a4" stroke-width="2.5" stroke-linecap="round" opacity="0.35" d="M20 100 C 90 30, 160 120, 230 70 S 360 20, 500 85"/>
+</svg>

static/js/site.js

@@ -0,0 +1,47 @@
+(function () {
+    var nav = document.getElementById("site-nav");
+    if (!nav) return;
+
+    var toggle = nav.querySelector(".nav-toggle");
+    var mq = window.matchMedia("(max-width: 51.99rem)");
+
+    function setOpen(open) {
+        nav.classList.toggle("is-open", open);
+        if (toggle) {
+            toggle.setAttribute("aria-expanded", open ? "true" : "false");
+            toggle.setAttribute("aria-label", open ? "Fermer le menu" : "Ouvrir le menu");
+        }
+    }
+
+    if (toggle) {
+        toggle.addEventListener("click", function () {
+            var next = !nav.classList.contains("is-open");
+            setOpen(next);
+            if (next) {
+                var first = nav.querySelector(".site-nav__list a");
+                if (first) {
+                    window.requestAnimationFrame(function () {
+                        first.focus();
+                    });
+                }
+            }
+        });
+    }
+
+    document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && nav.classList.contains("is-open")) {
+            setOpen(false);
+            if (toggle) toggle.focus();
+        }
+    });
+
+    nav.querySelectorAll(".site-nav__list a").forEach(function (a) {
+        a.addEventListener("click", function () {
+            if (mq.matches) setOpen(false);
+        });
+    });
+
+    mq.addEventListener("change", function (e) {
+        if (!e.matches) setOpen(false);
+    });
+})();