feat: Initialisation du site vitrine P'titsPas

config.toml

@@ -1,3 +1,21 @@
 baseURL = "https://ptits-pas.fr/"
 languageCode = "fr"
-title = "Mon Super Site"
+title = "P'titsPas - Solution Petite Enfance pour Collectivités"
+
+[menu]
+  [[menu.main]]
+    name = "Accueil"
+    url = "/"
+    weight = 1
+  [[menu.main]]
+    name = "Fonctionnalités"
+    url = "/fonctionnalites/"
+    weight = 2
+  [[menu.main]]
+    name = "Pourquoi P'titsPas ?"
+    url = "/pourquoi-ptitspas/"
+    weight = 3
+  [[menu.main]]
+    name = "Contact"
+    url = "/contact/"
+    weight = 4

content/_index.md

@@ -1,19 +1,36 @@
 ---
-title: "Bienvenue sur Ptits-Pas"
+title: "Bienvenue sur P'titsPas - Votre Partenaire Petite Enfance"
 date: 2025-05-17T12:00:00+02:00
 ---
 
-# Salut ! On teste que tout fonctionne bien comme il faut :p
+<div class="logo-accueil"><img src="/images/page_login_4.1.png" alt="Logo P'titsPas"></div>
 
-Et maintenant on teste l'infra V2
+# P'titsPas : La solution publique pour une gestion simplifiée et humaine de la petite enfance dans votre collectivité.
-Le test ultime 2
 
+<div class="content-section">
+**P'titsPas 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, P'titsPas ne fonctionne ni sur la logique de notation, ni de sélection algorithmique opaque.
 
-Bienvenue sur mon site **Ptits-Pas**, propulsé par Hugo !
+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>
 
-- C’est ici que je présente mes projets  
+---
-- Un lien vers [Gitea](https://git.ptits-pas.fr)  
+<div class="content-section">
-- Un lien vers [Taiga](https://projets.ptits-pas.fr)  
+## Découvrez la différence P'titsPas
 
-> Pour modifier cette page, édite `content/_index.md`.
+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

@@ -0,0 +1,50 @@
+---
+title: "Contactez-Nous - Parlons de Votre Projet P'titsPas"
+date: 2025-05-24T11:00:00+02:00
+draft: false
+---
+
+Nous sommes ravis de l'intérêt que vous portez à P'titsPas et nous serions heureux d'échanger avec vous sur la manière dont notre solution peut répondre aux besoins spécifiques de votre collectivité.
+
+Que vous souhaitiez une démonstration personnalisée, obtenir un devis, ou simplement en savoir plus sur nos fonctionnalités et notre approche, n'hésitez pas à nous solliciter.
+
+## Demander une Démonstration ou un Devis
+
+Utilisez le formulaire ci-dessous pour nous faire part de votre projet. Nous nous engageons à vous répondre dans les plus brefs délais.
+
+<!-- 
+IMPORTANT : Pour que ce formulaire fonctionne, vous devez l'intégrer avec un service de gestion de formulaires externe tel que :
+- Formspree (https://formspree.io/)
+- Netlify Forms (si votre site est hébergé sur Netlify)
+- 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;">
+        <label for="collectivite" style="display: block; margin-bottom: 5px;">Collectivité / Organisation :</label>
+        <input type="text" id="collectivite" name="collectivite" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
+    </div>
+    <div style="margin-bottom: 15px;">
+        <label for="email" style="display: block; margin-bottom: 5px;">Adresse E-mail :</label>
+        <input type="email" id="email" name="email" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
+    </div>
+    <div style="margin-bottom: 15px;">
+        <label for="phone" style="display: block; margin-bottom: 5px;">Téléphone (facultatif) :</label>
+        <input type="tel" id="phone" name="phone" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
+    </div>
+    <div style="margin-bottom: 15px;">
+        <label for="message" style="display: block; margin-bottom: 5px;">Votre Message :</label>
+        <textarea id="message" name="message" rows="6" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;"></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>
+</form>
+
+Nous avons hâte de collaborer avec vous pour améliorer la gestion de la petite enfance sur votre territoire ! 

content/fonctionnalites.md

@@ -0,0 +1,54 @@
+---
+title: "P'titsPas : Des Fonctionnalités Pensées Pour Chaque Acteur de la Petite Enfance"
+date: 2025-05-24T10:00:00+02:00
+draft: false
+---
+
+P'titsPas offre une suite complète de fonctionnalités conçues pour simplifier le quotidien de tous les utilisateurs impliqués dans la garde d'enfants au sein de votre collectivité. Notre plateforme est pensée pour être intuitive, sécurisée et parfaitement adaptée aux besoins du service public.
+
+## Une Interface Adaptée à Chacun
+
+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
+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.
+*   **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
+Vos gestionnaires RPE sont en première ligne. P'titsPas leur donne les moyens d'agir efficacement :
+*   **Validation des comptes** et suivi des dossiers.
+*   **Tableau de bord de supervision** des contrats et des mises en relation.
+*   Outils de **médiation** en cas de désaccord.
+*   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é
+P'titsPas est conçu pour s'intégrer parfaitement à votre gestion administrative et technique, en vous offrant un contrôle complet :
+
+*   **Gestion centralisée des utilisateurs :** Créez, modifiez, et supervisez les comptes (parents, assistantes maternelles, gestionnaires) avec des droits précis.
+*   **Personnalisation de la plateforme :** Adaptez l'interface aux couleurs de votre collectivité, intégrez votre logo, et personnalisez le nom de la structure.
+*   **Paramètres avancés :** Configurez les règles de la plateforme, comme l'obligation de photo, les délais de validation, etc.
+*   **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.
+*   **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.
+*   **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.
+
+## Des Workflows Clairs et Sécurisés
+
+De la recherche d'une assistante maternelle à la fin de contrat, P'titsPas structure chaque étape :
+*   **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.
+
+---
+
+P'titsPas est plus qu'un logiciel, c'est un partenaire pour votre politique petite enfance.
+
+[Découvrez pourquoi P'titsPas est la solution de confiance pour les collectivités](/pourquoi-ptitspas)
+
+[Contactez-nous pour échanger sur vos besoins spécifiques](/contact) 

content/mentions-legales.md

@@ -0,0 +1,25 @@
+---
+title: "Mentions Légales"
+date: 2025-05-24T12:00:00+02:00
+draft: false
+---
+
+## Mentions Légales
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Éditeur du site
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+
+### Hébergement
+
+Curabitur sed iaculis dolor, non congue ligula. Maecenas imperdiet ante eget hendrerit posuere. Nunc urna libero, congue porta nibh a, semper feugiat sem.
+
+### Propriété Intellectuelle
+
+Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
+
+### Responsabilité
+
+Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. 

content/politique-de-confidentialite.md

@@ -0,0 +1,29 @@
+---
+title: "Politique de Confidentialité"
+date: 2025-05-24T12:05:00+02:00
+draft: false
+---
+
+## Politique de Confidentialité
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Collecte des données personnelles
+
+Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
+
+### Utilisation des données
+
+Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
+
+### Droits des utilisateurs
+
+Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. 
+
+### Cookies
+
+Maecenas imperdiet ante eget hendrerit posuere. Nunc urna libero, congue porta nibh a, semper feugiat sem. Sed cursus ante dapibus diam.
+
+### Modifications de la politique
+
+Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. 

content/pourquoi-ptitspas.md

@@ -0,0 +1,46 @@
+---
+title: "Pourquoi Choisir P'titsPas pour Votre Collectivité ?"
+date: 2025-05-24T10:30:00+02:00
+draft: false
+---
+
+Dans un monde numérique où les offres se multiplient, P'titsPas se distingue par son **engagement envers le service public** et ses valeurs fondamentales. Nous ne sommes pas une simple plateforme de mise en relation ; nous sommes un partenaire stratégique pour les collectivités qui souhaitent moderniser et humaniser la gestion de la petite enfance sur leur territoire.
+
+## Au Service de l'Intérêt Général, Pas des Intérêts Privés
+
+La différence P'titsPas réside dans son ADN : une solution pensée par et pour le secteur public.
+
+*   **Neutralité Absolue :**
+    Contrairement aux plateformes commerciales, P'titsPas n'utilise **aucun système de notation** ni algorithme opaque pour classer ou favoriser certaines assistantes maternelles. Chaque professionnel est présenté de manière équitable, garantissant aux parents un choix libre et éclairé, et aux assistantes maternelles une visibilité non biaisée.
+
+*   **Équité et Accès pour Tous :**
+    Nous croyons en un service public accessible. P'titsPas est conçu pour être utilisé facilement par tous, quel que soit le niveau d'aisance numérique. Les interfaces sont claires, la navigation intuitive, et nous visons la conformité avec les standards d'accessibilité (RGAA).
+
+*   **Transparence des Processus :**
+    Chaque étape, de la création de dossier à la gestion du contrat, est tracée et nécessite la validation des parties concernées. Cette transparence renforce la confiance entre les parents, les assistantes maternelles et les services de la mairie.
+
+## Une Gouvernance des Données Maîtrisée par Votre Collectivité
+
+Avec P'titsPas, vous gardez le contrôle de vos données et de celles de vos administrés.
+
+*   **Conformité RGPD Stricte et Native :**
+    La protection des données personnelles est au cœur de notre conception. Nous appliquons les principes de minimisation des données, de sécurisation des informations sensibles (comme le NIR, stocké chiffré et accessible uniquement aux personnes habilitées), et de gestion rigoureuse des consentements. Vous disposez d'une solution qui respecte les droits des usagers et les obligations légales des collectivités.
+
+*   **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
+
+En choisissant P'titsPas, vous optez pour :
+*   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.
+*   Le **renforcement du lien de confiance** avec vos administrés grâce à un outil transparent et équitable.
+*   Une **solution évolutive**, pensée pour s'adapter aux futurs besoins et aux nouvelles réglementations.
+
+---
+
+**P'titsPas, c'est l'assurance d'une gestion de la petite enfance sereine, efficace et conforme à vos valeurs de service public.**
+
+[Explorez en détail nos fonctionnalités](/fonctionnalites)
+
+[Prenons contact pour une démonstration adaptée à votre mairie](/contact) 

layouts/_default/baseof.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ .Title }} | {{ .Site.Title }}</title>
+    <link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
+</head>
+<body>
+    <header>
+        <!-- Idéalement, le menu serait dans un partiel header.html -->
+        <nav>
+            <ul>
+                {{ range .Site.Menus.main }}
+                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+                {{ end }}
+            </ul>
+        </nav>
+    </header>
+    <main>
+        {{ .Content }}
+    </main>
+    {{ partial "footer.html" . }}
+</body>
+</html> 

layouts/partials/footer.html

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

static/css/style.css

@@ -0,0 +1,180 @@
+/* Charte Graphique P'titsPas */
+
+/* Variables de Couleurs */
+:root {
+    --color-peche-doux: #FFD7A8;
+    --color-menthe-claire: #AEE1CD;
+    --color-rose-tendre: #F6B2C4;
+    --color-jaune-pale: #FFECB3;
+    --color-lavande: #E6E6FA; /* Approximation, à ajuster si vous avez un hex exact */
+    --color-corail-leger: #FFDAB9; /* Approximation, à ajuster */
+    --color-texte-principal: #333333;
+    --color-texte-secondaire: #555555;
+    --color-blanc: #FFFFFF;
+    --padding-module: 8px;
+}
+
+/* Import des polices (exemple avec Google Fonts) */
+@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 */
+
+/* Styles de Base */
+body {
+    font-family: 'Open Sans', sans-serif;
+    color: var(--color-texte-principal);
+    background-color: var(--color-blanc); /* Ou une teinte pastel très claire comme fond général */
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+}
+
+main {
+    padding: calc(var(--padding-module) * 3); /* 24px */
+    max-width: 960px;
+    margin: 0 auto;
+}
+
+h1 {
+    font-family: 'Merienda', cursive; /* Police Script pour titres d'impact */
+    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;
+    color: var(--color-texte-secondaire);
+}
+
+a {
+    color: var(--color-corail-leger); /* Corail léger pour les liens */
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Header / Navigation */
+header nav {
+    background-color: var(--color-menthe-claire); /* Menthe claire pour le header */
+    padding: var(--padding-module) 0;
+}
+
+header nav ul {
+    list-style-type: none;
+    padding: 0 calc(var(--padding-module) * 2);
+    text-align: center;
+    margin: 0;
+}
+
+header nav ul li {
+    display: inline;
+    margin-right: calc(var(--padding-module) * 2.5); /* 20px */
+}
+
+header nav ul li a {
+    color: var(--color-texte-principal); /* Texte plus foncé sur fond pastel clair */
+    text-decoration: none;
+    padding: calc(var(--padding-module) * 1.5) var(--padding-module);
+    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 {
+    background-color: var(--color-peche-doux); /* Pêche doux au survol */
+    text-decoration: none;
+}
+
+/* Style pour l'image du logo sur la page d'accueil */
+.logo-accueil img {
+    width: 100%; 
+    max-height: 400px; 
+    object-fit: cover; 
+    display: block; 
+    margin-bottom: calc(var(--padding-module) * 4); /* 32px */
+    border-radius: var(--padding-module); /* Coins arrondis style galet */
+}
+
+/* Boutons */
+button,
+input[type="submit"],
+.cta-button {
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 700;
+    background-color: var(--color-peche-doux); /* Pêche doux pour les boutons primaires */
+    color: var(--color-texte-principal);
+    border: none;
+    padding: calc(var(--padding-module) * 1.5) calc(var(--padding-module) * 3);
+    border-radius: calc(var(--padding-module) * 3); /* Forme de galet allongé */
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    margin-top: var(--padding-module);
+    transition: background-color 0.3s ease;
+}
+
+button:hover,
+input[type="submit"]:hover,
+.cta-button:hover {
+    background-color: var(--color-rose-tendre); /* Rose tendre au survol */
+}
+
+/* Formulaires (basique) */
+form div {
+    margin-bottom: calc(var(--padding-module) * 2);
+}
+
+form label {
+    display: block;
+    margin-bottom: var(--padding-module);
+    font-family: 'Quicksand', sans-serif;
+}
+
+form input[type="text"],
+form input[type="email"],
+form input[type="tel"],
+form textarea {
+    width: 100%;
+    padding: var(--padding-module);
+    border: 1px solid var(--color-menthe-claire);
+    border-radius: calc(var(--padding-module) / 2); /* 4px */
+    box-sizing: border-box; /* Important pour que padding ne change pas la largeur totale */
+    font-family: 'Open Sans', sans-serif;
+}
+
+/* Sections de contenu - style galet */
+.content-section {
+    background-color: var(--color-blanc);
+    padding: calc(var(--padding-module) * 3);
+    margin-bottom: calc(var(--padding-module) * 3);
+    border-radius: calc(var(--padding-module) * 2); /* 16px, angles arrondis */
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Ombre douce */
+}
+
+/* Footer */
+footer {
+    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 {
+    margin: var(--padding-module) 0;
+    font-size: 0.9em;
+}
+
+footer a {
+    color: var(--color-texte-secondaire);
+} 

static/images/.gitkeep

@@ -0,0 +1 @@
+