Site vitrine 3.0 (brouillon staging) — home, Pilotage, on-premise, GA.
Déploiement Hugo Staging / deploy-staging (push) Waiting to run

Hero court, trois expériences, confiance on-premise, pages métier,
formulaire qualifié, favicon depuis icon.png, Analytics G-K8BM5FHLF3.
This commit is contained in:
deploy
2026-10-08 12:30:08 +02:00
parent 785b3c5b43
commit 4b9ac57ca8
27 changed files with 629 additions and 799 deletions
+14 -11
View File
@@ -1,18 +1,17 @@
# Pour staging: baseURL = "https://staging.ptits-pas.fr/" # Staging. Build : apps/staging (hugo-build-staging --baseURL).
# Pour production: baseURL = "https://ptits-pas.fr/" # Production override : --baseURL=https://ptits-pas.fr/
baseURL = "https://staging.ptits-pas.fr/" baseURL = "https://staging.ptits-pas.fr/"
languageCode = "fr" languageCode = "fr"
title = "P'titsPas - Solution Petite Enfance pour Collectivités" title = "P'titsPas — Plateforme Petite Enfance on-premise pour collectivités"
liveReloadPort = -1 liveReloadPort = -1
# SEO Configuration
[params] [params]
description = "P'titsPas : plateforme publique pour la gestion de la petite enfance. Mise en relation parents-assistantes maternelles, transparence et neutralité garanties pour les collectivités." description = "P'titsPas : plateforme Petite Enfance installée chez les collectivités (on-premise). RPE, assistantes maternelles et familles — pilotage local, pas un SaaS cloud."
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é, garde enfant, crèche, RPE, relais petite enfance, plateforme publique, gestion municipale, nounou, baby-sitter, garde à domicile, accueil collectif, multi-accueil, halte-garderie, micro-crèche, RAM, modes de garde, service public, mairie, conseil départemental, CAF, allocation garde enfant, accompagnement parental, contrat assistante maternelle, agrément assistante maternelle, recherche nounou, solution numérique municipale, dématérialisation services publics, transparence publique, égalité territoriale, politique petite enfance, développement enfant, conciliation vie familiale professionnelle"
author = "P'titsPas" author = "P'titsPas"
# GA4 — switch depuis G-65J8GVLCRH le 2026-10-08 (site/v3)
ga_id = "G-K8BM5FHLF3"
# Site map and SEO enableRobotsTXT = false
enableRobotsTXT = true
enableGitInfo = true enableGitInfo = true
[sitemap] [sitemap]
@@ -36,10 +35,14 @@ ignoreLogs = ['warning-goldmark-raw-html']
url = "/fonctionnalites/" url = "/fonctionnalites/"
weight = 2 weight = 2
[[menu.main]] [[menu.main]]
name = "Pourquoi P'titsPas ?" name = "Pilotage"
url = "/pourquoi-ptitspas/" url = "/pilotage/"
weight = 3 weight = 3
[[menu.main]]
name = "Pourquoi P'titsPas"
url = "/pourquoi-ptitspas/"
weight = 4
[[menu.main]] [[menu.main]]
name = "Contact" name = "Contact"
url = "/contact/" url = "/contact/"
weight = 4 weight = 5
+6 -31
View File
@@ -1,33 +1,8 @@
--- ---
title: "P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire" title: "La Petite Enfance, enfin réunie"
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." description: "P'titsPas — plateforme Petite Enfance on-premise pour les collectivités. Simplifiez RPE, assistantes maternelles et familles ; pilotez votre offre locale."
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: 2026-10-08T12:00:00+02:00
date: 2025-05-17T12:00:00+02:00 hero_tagline: "La plateforme Petite Enfance installée chez les collectivités."
hero_image: "/images/page_login_4.1.png" cta_primary: "Demander une démonstration"
hero_image_alt: "Logo P'titsPas" cta_primary_url: "/contact/"
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"
--- ---
+48 -22
View File
@@ -1,39 +1,65 @@
--- ---
title: "Contactez-Nous - Parlons de Votre Projet P'titsPas" title: "Demander une démonstration P'titsPas"
date: 2025-05-24T11:00:00+02:00 description: "Contactez P'titsPas pour une démonstration de la plateforme Petite Enfance on-premise destinée aux collectivités."
draft: false date: 2026-10-08T12:00:00+02:00
--- ---
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é. # Demander une démonstration
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. Parlez-nous de votre collectivité. Nous vous rappelons pour une démonstration adaptée à votre contexte (RPE, direction Petite Enfance, DSI, élus).
## Demander une Démonstration ou un Devis <form class="site-form" action="/contact.php" method="POST" novalidate>
<div class="hp" aria-hidden="true">
Utilisez le formulaire ci-dessous pour nous faire part de votre projet. Nous nous engageons à vous répondre dans les plus brefs délais. <label for="website">Site web</label>
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
<form class="site-form" action="/contact.php" method="POST">
<div>
<label for="name">Nom Prénom :</label>
<input type="text" id="name" name="name" required>
</div> </div>
<div> <div>
<label for="collectivite">Collectivité / Organisation :</label> <label for="name">Nom et prénom</label>
<input type="text" id="name" name="name" required autocomplete="name">
</div>
<div>
<label for="collectivite">Collectivité / organisation</label>
<input type="text" id="collectivite" name="collectivite" required> <input type="text" id="collectivite" name="collectivite" required>
</div> </div>
<div> <div>
<label for="email">Adresse E-mail :</label> <label for="fonction">Fonction</label>
<input type="email" id="email" name="email" required> <select id="fonction" name="fonction" required>
<option value="">Choisir…</option>
<option value="elu">Élu·e</option>
<option value="direction-pe">Direction Petite Enfance</option>
<option value="rpe">Gestionnaire / RPE</option>
<option value="dsi">DSI / informatique</option>
<option value="autre">Autre</option>
</select>
</div> </div>
<div> <div>
<label for="phone">Téléphone (facultatif) :</label> <label for="taille">Taille (habitants ou nombre d'assistantes maternelles)</label>
<input type="tel" id="phone" name="phone"> <input type="text" id="taille" name="taille" placeholder="ex. 12 000 habitants ou ~40 AM">
</div> </div>
<div> <div>
<label for="message">Votre Message :</label> <label for="besoin">Besoin principal</label>
<textarea id="message" name="message" rows="6" required></textarea> <select id="besoin" name="besoin">
<option value="">Choisir…</option>
<option value="mise-en-relation">Mise en relation</option>
<option value="rpe">Outil RPE</option>
<option value="contractualisation">Contractualisation</option>
<option value="pilotage">Pilotage / statistiques</option>
<option value="autre">Autre</option>
</select>
</div> </div>
<button type="submit">Envoyer votre demande</button> <div>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required autocomplete="email">
</div>
<div>
<label for="phone">Téléphone</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
</div>
<div>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn--pill">Demander une démonstration</button>
</form> </form>
Nous avons hâte de collaborer avec vous pour améliorer la gestion de la petite enfance sur votre territoire ! <p class="form-note">Après envoi, vous verrez une confirmation. Nous vous rappelons dans les meilleurs délais.</p>
+22
View File
@@ -0,0 +1,22 @@
---
title: "Déploiement on-premise chez la collectivité"
description: "Installer P'titsPas chez la collectivité : déploiement on-premise, personnalisation, licence — solution petite enfance on premise."
date: 2026-10-08T12:00:00+02:00
---
# Déploiement : installée chez vous
P'titsPas se déploie **dans votre infrastructure** (serveur Linux / VM municipale ou intercommunale). Ce n'est pas un abonnement SaaS où tout reste chez l'éditeur.
## Ce que cela implique
- Instance dédiée à votre collectivité (ou groupement).
- Personnalisation : nom, couleurs, logo.
- Données sous votre maîtrise.
- Licence d'utilisation pour installer et exploiter l'application dans votre périmètre.
## Pour les communes sans équipe technique lourde
Le packaging vise une **installation rapide**. Les modalités exactes (accompagnement, hébergement délégué éventuel) se discutent avec vous — le socle reste la maîtrise locale, pas un cloud générique.
<a href="/contact/" class="cta-button">Parler déploiement</a>
+27
View File
@@ -0,0 +1,27 @@
---
title: "Données et sécurité — P'titsPas on-premise"
description: "RGPD, hébergement local, maîtrise des données : P'titsPas s'installe chez la collectivité, pas dans un cloud SaaS opaque."
date: 2026-10-08T12:00:00+02:00
aliases:
- /technique/
---
# Données et sécurité
P'titsPas est conçu pour un déploiement **on-premise** : l'instance et les données vivent dans l'infrastructure de la collectivité (ou de son opérateur).
## Maîtrise des données
- Hébergement local / sous votre responsabilité contractuelle.
- Pas de SaaS cloud opaque où vos données partent chez un tiers sans contrôle.
- Conception respectueuse du RGPD ; données sensibles (dont NIR le cas échéant) traitées selon des règles strictes de chiffrement et d'accès.
## Accessibilité
L'interface est pensée pour le **téléphone, la tablette et l'ordinateur**. L'accessibilité est une exigence de conception (visée AA), sans revendiquer une certification.
## Disponibilité et installation
Objectifs indicatifs de conception : haute disponibilité du service et installation rapide sur serveur Linux municipal. Les engagements contractuels se définissent au moment du déploiement.
Voir aussi [Déploiement](/deploiement/).
+31 -40
View File
@@ -1,58 +1,49 @@
--- ---
title: "P'titsPas : Des Fonctionnalités Pensées Pour Chaque Acteur de la Petite Enfance" title: "Fonctionnalités — RPE, assistantes maternelles, parents"
date: 2025-05-24T10:00:00+02:00 description: "Logiciel RPE collectivités : un outil pour les gestionnaires, les assistantes maternelles et les parents. Mise en relation simple, agenda, contrats — on-premise."
draft: false date: 2026-10-08T12:00:00+02:00
--- ---
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 plateforme, trois quotidiens
## Une Interface Adaptée à Chacun P'titsPas réunit dans un même environnement les **gestionnaires de RPE**, les **assistantes maternelles** et les **familles**. Ci-dessous, ce que chaque parcours est conçu 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 : ## <span id="rpe">Gestionnaires de RPE</span>
{{% featureblock title="Pour les Parents et Assistantes Maternelles : Une expérience fluide et rassurante" %}} Un seul outil pour tout faire : dossiers, agenda, messagerie, événements.
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** : Mise en relation transparente basée sur les besoins réels. **Fini** le jonglage entre WhatsApp, SMS, téléphone (« abonné absent »), Outlook et Telegram. Ces outils ne sont pas intégrés : on les remplace par un espace de travail commun, tracé, pensé pour le service public.
* ✅ **Gestion administrative simplifiée** : Contrats, avenants et suivi des heures en quelques clics.
* ✅ **Communication directe et tracée** : Pour apaiser les relations et garder un historique.
* ✅ **Agenda partagé** : Une meilleure organisation au quotidien.
{{% /featureblock %}}
{{% featureblock title="Pour vos Gestionnaires RPE : Gagnez du temps et de la visibilité" %}} Vous gagnez du temps pour l'accompagnement humain — pas pour recopier des messages d'un canal à l'autre.
Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur leur cœur de métier : l'accompagnement humain.
* 📊 **Tableau de bord de supervision** : Une vue d'ensemble immédiate des contrats et disponibilités sur le territoire. ## <span id="am">Assistantes maternelles</span>
* ⚡ **Validation rapide** : Gestion fluide des comptes et suivi des dossiers en temps réel.
* 🤝 **Outils de médiation** : Intervenez facilement en cas de désaccord grâce à l'historique des échanges.
* 📢 **Communication ciblée** : Organisez vos événements RPE et diffusez l'information efficacement.
{{% /featureblock %}}
{{% featureblock title="Pour votre DSI et Direction : Une solution souveraine et maîtrisée" %}} Le professionnel et le personnel restent à leur place.
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). - Plus besoin d'un **deuxième téléphone** pour séparer les usages.
* 🎨 **Personnalisation à votre image** : Logo, couleurs et nom de la structure adaptables à votre charte graphique. - Contrats, absences, congés et communications **regroupés** dans P'titsPas.
* ⚙️ **Gestion fine des droits** : Administration centralisée des comptes et des paramètres de la plateforme. - Congés et absences **datés** dans l'agenda — plus de dates perdues ou floues.
* 📈 **Pilotage par la donnée** : Statistiques d'usage, nombre de contrats, taux d'occupation... exportables pour vos rapports. - Accessible sur **téléphone, tablette et ordinateur**.
* 🧩 **Évolutivité** : Activez uniquement les modules dont vous avez besoin (Blog, IA, etc.).
{{% /featureblock %}}
## Des Workflows Clairs et Sécurisés ## <span id="parents">Parents</span>
De la recherche d'une assistante maternelle à la fin de contrat, P'titsPas structure chaque étape : **Fini** d'éplucher 200 feuilles A4 recto-verso pas à jour depuis des années, et d'appeler des numéros aux abonnés absents ou des assistantes maternelles déjà complètes.
{{% featureblock %}} - Recherche simple selon le besoin et les disponibilités.
* **Recherche et mise en relation** guidées. - **Sans notation ni classement opaque.**
* **Création et validation de contrats** dématérialisée et collaborative. - Tableau de bord simple, structuré, amical.
* **Gestion des avenants** simplifiée. - **Fini** les échanges qui se compliquent à cause de la barrière de la langue — la plateforme peut, en évolution, aider à reformuler ou traduire un message (voir ci-dessous).
* **Procédure de fin de contrat** accompagnée, avec calcul du solde de tout compte.
{{% /featureblock %}}
--- ## Messagerie aidée (évolution, hors socle V1)
P'titsPas est plus qu'un logiciel, c'est un partenaire pour votre politique petite enfance. P'titsPas **peut aider** à reformuler ou traduire un message avant son envoi — pour les parents **et** les assistantes maternelles.
[Découvrez pourquoi P'titsPas est la solution de confiance pour les collectivités](/pourquoi-ptitspas) - Ce n'est **pas** le socle V1 : évolution **activable** / payante pour la collectivité.
- L'aide ne classe **jamais** les assistantes maternelles et n'en choisit aucune.
- Le message aidé est **signalé** comme tel.
[Contactez-nous pour échanger sur vos besoins spécifiques](/contact) ## Pilotage
Pour les chiffres et le pilotage territorial : voir la page [Pilotage](/pilotage/).
<a href="/contact/" class="cta-button">Demander une démonstration</a>
+38
View File
@@ -0,0 +1,38 @@
---
title: "Pilotage Petite Enfance pour les collectivités"
description: "P'titsPas aide les collectivités à piloter l'offre Petite Enfance : places, disponibilités des assistantes maternelles, projections, exports — en local, on-premise."
date: 2026-10-08T12:00:00+02:00
---
# Pilotage : une vision d'ensemble, sans la collecte fastidieuse
Les communes doivent **connaître leur offre et leurs besoins** d'accueil du jeune enfant (autorité organisatrice, schéma pluriannuel ou CTG selon le territoire). En pratique, cela veut souvent dire recopier des tableaux, appeler des structures, croiser des fichiers — et recommencer chaque trimestre.
P'titsPas est **conçu pour centraliser** ces informations au fil de l'usage de la plateforme, et pour en tirer des indicateurs utiles au pilotage.
## Ce que la réglementation demande — et ce que l'outil apporte en plus
**Demande (cadre légal)** : recenser l'offre et les besoins d'accueil sur le territoire, pour organiser la politique Petite Enfance.
**En complément, P'titsPas est conçu pour permettre de suivre notamment :**
- les capacités et places auprès des assistantes maternelles ;
- les places occupées et disponibles ;
- la disponibilité déclarée des assistantes maternelles ;
- une projection des sorties liées à l'entrée à l'école (à partir des dates de naissance) ;
- des indicateurs agrégés, sans donnée nominative exposée inutilement ;
- des **exports** pour vos rapports, schémas et échanges avec les partenaires (dont la Caf).
Nous ne prétendons pas que « la Caf exige tel indicateur précis » sans source. Nous disons : *vous devez piloter l'offre ; P'titsPas est conçu pour vous y aider avec des données exploitables*, au-delà d'un taux théorique figé.
## Pour qui ?
Élus, direction Petite Enfance, RPE, DSI : une même lecture du terrain, sans multiplier les fichiers Excel.
## On-premise
Ces données restent **chez vous**. La plateforme s'installe dans l'infrastructure de la collectivité — pas un SaaS cloud opaque.
<a href="/contact/" class="cta-button">Demander une démonstration</a>
<p class="note-validation"><em>Les libellés de cette page seront affinés avec vous avant publication en production.</em></p>
+20 -34
View File
@@ -1,48 +1,34 @@
--- ---
title: "Pourquoi Choisir P'titsPas pour Votre Collectivité ?" title: "Pourquoi P'titsPas — on-premise pour les collectivités"
date: 2025-05-24T10:30:00+02:00 description: "Pourquoi choisir P'titsPas : plateforme Petite Enfance on-premise, neutralité, maîtrise des données — pas un SaaS cloud crèche."
draft: false date: 2026-10-08T12:00:00+02:00
--- ---
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. # Pourquoi P'titsPas ?
## Au Service de l'Intérêt Général, Pas des Intérêts Privés Parce que la Petite Enfance d'un territoire n'est pas un marché de notation : c'est un **service public**. Et parce que vos données ne devraient pas vivre dans un cloud SaaS opaque.
La différence P'titsPas réside dans son ADN : une solution pensée par et pour le secteur public. ## On-premise, pas SaaS
* **Neutralité Absolue :** P'titsPas s'**installe chez la collectivité**. Les données sont hébergées localement, sous votre maîtrise.
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 :** Ce n'est pas le modèle des logiciels crèche cloud (abonnements SaaS où l'hébergement et les règles restent chez l'éditeur). Ici : **souveraineté des données**, infrastructure municipale ou intercommunale, service public.
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 :** ## Quatre principes
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é 1. **Neutralité** — pas de notation des professionnelles, pas de préférence algorithmique.
2. **Équité** — le même outil pour tout le territoire.
3. **Transparence** — parcours lisibles et tracés.
4. **Accessibilité** — téléphone, tablette et ordinateur.
Avec P'titsPas, vous gardez le contrôle de vos données et de celles de vos administrés. ## Pour qui ?
* **Conformité RGPD Stricte et Native :** Mairies, EPCI, directions Petite Enfance, RPE, DSI — et, au quotidien, les assistantes maternelles et les familles.
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 :** ## Ce que ça change
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 d'Efficacité pour Votre Territoire - Un outil pour les **RPE** à la place d'une mosaïque de messageries.
- Un parcours clair pour les **assistantes maternelles** et les **parents**.
- Une **vision d'ensemble** pour piloter l'offre (voir [Pilotage](/pilotage/)).
En choisissant P'titsPas, vous faites le choix d'une gestion modernisée qui bénéficie à tous : <a href="/contact/" class="cta-button">Demander une démonstration</a>
* **🚀 Efficacité Administrative :** Réduisez drastiquement le temps de traitement des dossiers papier et centralisez l'information pour un pilotage plus fin.
* **🏛️ Valorisation du Service Public :** Positionnez votre collectivité comme un acteur innovant et proche des familles.
* **🤝 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.
---
**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)
-75
View File
@@ -1,75 +0,0 @@
---
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>
+13 -11
View File
@@ -6,7 +6,6 @@
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title> <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="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 }}"> <meta name="author" content="{{ .Site.Params.author | default .Site.Title }}">
{{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }} {{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
@@ -17,24 +16,26 @@
<meta property="og:url" content="{{ .Permalink }}"> <meta property="og:url" content="{{ .Permalink }}">
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}"> <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}"> <meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta property="og:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png"> <meta property="og:image" content="{{ .Site.BaseURL }}images/icon-192.png">
<meta property="og:locale" content="fr_FR"> <meta property="og:locale" content="fr_FR">
<meta property="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary">
<meta property="twitter:url" content="{{ .Permalink }}"> <meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}"> <meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta property="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}"> <meta name="twitter:image" content="{{ .Site.BaseURL }}images/icon-192.png">
<meta property="twitter:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
<link rel="canonical" href="{{ .Permalink }}"> <link rel="canonical" href="{{ .Permalink }}">
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}"> <link rel="icon" href="{{ "favicon.ico" | relURL }}" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16.png" | relURL }}">
<link rel="apple-touch-icon" href="{{ "images/icon-192.png" | relURL }}">
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": {{ if .IsHome }}"Organization"{{ else }}"WebPage"{{ end }}, "@type": {{ if .IsHome }}"Organization"{{ else }}"WebPage"{{ end }},
{{ if .IsHome }} {{ if .IsHome }}
"name": "{{ .Site.Title }}", "name": "P'titsPas",
"url": "{{ .Site.BaseURL }}", "url": "{{ .Site.BaseURL }}",
"description": "{{ .Site.Params.description }}", "description": "{{ .Site.Params.description }}",
"contactPoint": { "contactPoint": {
@@ -52,12 +53,13 @@
<link rel="stylesheet" href="{{ `/css/style.css` | relURL }}"> <link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script> {{/* GA4 G-K8BM5FHLF3 — switch depuis G-65J8GVLCRH le 2026-10-08 */}}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.ga_id }}"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'G-65J8GVLCRH', { gtag('config', '{{ .Site.Params.ga_id }}', {
'anonymize_ip': true, 'anonymize_ip': true,
'allow_google_signals': false, 'allow_google_signals': false,
'allow_ad_personalization_signals': false, 'allow_ad_personalization_signals': false,
+57 -32
View File
@@ -1,45 +1,70 @@
{{ define "main" }} {{ define "main" }}
<div class="home"> <div class="home">
<section class="home-hero"> <section class="hero" aria-labelledby="hero-title">
{{ partial "home-path-motif.html" . }} <div class="hero__bg" aria-hidden="true"></div>
<div class="home-hero__inner"> <div class="hero__river" aria-hidden="true">
<div class="home-hero__media"> <img src="{{ "images/app/river.png" | relURL }}" alt="" width="1400" height="400" decoding="async">
<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>
<div class="hero__inner">
<p class="hero__brand">P'titsPas</p>
<h1 id="hero-title" class="hero__title">{{ .Title }}</h1>
{{ with .Params.hero_tagline }}
<p class="hero__tagline">{{ . }}</p>
{{ end }}
<p class="hero__actions">
<a class="btn btn--pill" href="{{ .Params.cta_primary_url | default "/contact/" | relURL }}">{{ .Params.cta_primary | default "Demander une démonstration" }}</a>
</p>
</div> </div>
</section> </section>
<div class="home-bento"> <section class="section experiences" aria-labelledby="exp-title">
<article class="home-card home-card--intro"> <div class="section__inner">
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }} <h2 id="exp-title">Trois expériences. Une même plateforme.</h2>
</article> <p class="section__lead">Sur le terrain, chacun a son parcours — la collectivité garde la vision d'ensemble.</p>
<aside class="home-card home-card--ethics" aria-label="Engagements"> <ul class="exp-grid">
<h2 class="visually-hidden">Nos engagements</h2> <li class="exp-card">
<ol class="ethics-steps"> <h3>Gestionnaires de RPE</h3>
{{ range .Params.ethics }} <p>Agenda, dossiers, messagerie, événements — un seul outil. Fini le jonglage WhatsApp, SMS, Outlook et Telegram.</p>
<li> <a href="{{ "fonctionnalites/" | relURL }}#rpe">Voir le quotidien RPE</a>
<strong>{{ .title }}</strong>
{{ .detail }}
</li> </li>
{{ end }} <li class="exp-card">
</ol> <h3>Assistantes maternelles</h3>
</aside> <p>Contrats, absences et congés regroupés. Plus besoin d'un deuxième téléphone pour séparer le pro et le perso.</p>
<a href="{{ "fonctionnalites/" | relURL }}#am">Voir le quotidien AM</a>
</li>
<li class="exp-card">
<h3>Parents</h3>
<p>Recherche simple selon le besoin, sans notation ni classement opaque. Plus de listes papier périmées.</p>
<a href="{{ "fonctionnalites/" | relURL }}#parents">Voir le côté parents</a>
</li>
</ul>
</div> </div>
<section class="home-why">
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
</section> </section>
<section class="home-cta" aria-labelledby="home-cta-title"> <section class="section pilotage-teaser" aria-labelledby="pil-title">
<h2 id="home-cta-title" class="visually-hidden">Actions</h2> <div class="section__inner section__inner--narrow">
{{ with .Params.cta_title }}<h3>{{ . }}</h3>{{ end }} <h2 id="pil-title">Et pour votre collectivité, enfin une vision d'ensemble.</h2>
<div> <p>Places, disponibilités, projections liées à l'entrée à l'école : sortez de la collecte fastidieuse. P'titsPas est conçu pour centraliser ces indicateurs et les exporter pour votre pilotage.</p>
<a href="{{ "fonctionnalites" | relURL }}" class="cta-button">Voir les fonctionnalités clés</a> <p class="hero__actions">
<a href="{{ "contact" | relURL }}" class="cta-button">Demander une démo</a> <a class="btn btn--pill btn--secondary" href="{{ "pilotage/" | relURL }}">Découvrir le pilotage</a>
</p>
</div>
</section>
<section class="section confiance" aria-labelledby="conf-title">
<div class="section__inner">
<h2 id="conf-title">Installée chez vous. Pas un SaaS cloud.</h2>
<p class="section__lead">P'titsPas s'installe chez la collectivité (on-premise). Vos données restent sous votre maîtrise — souveraineté des données, service public, pas un cloud opaque.</p>
<ul class="principes">
<li><strong>Neutralité</strong> — pas de notation, pas de préférence algorithmique</li>
<li><strong>Équité</strong> — le même outil pour tout le territoire</li>
<li><strong>Transparence</strong> — parcours lisibles et tracés</li>
<li><strong>Accessibilité</strong> — téléphone, tablette et ordinateur</li>
</ul>
<p class="hero__actions">
<a class="btn btn--pill" href="{{ "contact/" | relURL }}">Demander une démonstration</a>
<a class="btn btn--text" href="{{ "pourquoi-ptitspas/" | relURL }}">Pourquoi P'titsPas</a>
</p>
</div> </div>
</section> </section>
</div> </div>
+5 -4
View File
@@ -1,8 +1,9 @@
<footer class="footer-site"> <footer class="footer-site">
<p>&copy; {{ now.Year }} P'titsPas — Tous droits réservés.</p> <p>&copy; {{ now.Year }} P'titsPas — Plateforme Petite Enfance on-premise pour les collectivités.</p>
<nav class="footer-site__links" aria-label="Liens de pied de page"> <nav class="footer-site__links" aria-label="Liens de pied de page">
<a href="{{ "mentions-legales" | relURL }}">Mentions légales</a> <a href="{{ "mentions-legales/" | relURL }}">Mentions légales</a>
<a href="{{ "politique-de-confidentialite" | relURL }}">Politique de confidentialité</a> <a href="{{ "politique-de-confidentialite/" | relURL }}">Politique de confidentialité</a>
<a href="{{ "technique" | relURL }}">Données techniques</a> <a href="{{ "donnees-et-securite/" | relURL }}">Données et sécurité</a>
<a href="{{ "deploiement/" | relURL }}">Déploiement</a>
</nav> </nav>
</footer> </footer>
+338 -529
View File
@@ -1,41 +1,37 @@
/* Charte P'titsPas — vitrine modernisée (tokens + layout) */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap");
@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"); /* P'titsPas vitrine V3 — papier, rivière, Merienda marque */
:root { @font-face {
--color-peche-doux: #ffd7a8; font-family: "Merienda";
--color-menthe-claire: #aee1cd; src: url("/fonts/Merienda-VariableFont_wght.ttf") format("truetype");
--color-rose-tendre: #f6b2c4; font-weight: 100 900;
--color-jaune-pale: #ffecb3; font-display: swap;
--color-lavande: #e6e6fa;
--color-corail-leger: #ffdab9;
--color-texte-principal: #2c2c2c;
--color-texte-secondaire: #555;
--color-blanc: #fff;
--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;
} }
:root {
--ink: #2a2622;
--ink-soft: #5a524a;
--paper: #f7f1e8;
--mint: #6bbda3;
--mint-deep: #4a9a82;
--peach: #f49c6e;
--lavender: #b289c9;
--yellow: #e9c833;
--surface: rgba(255, 252, 247, 0.88);
--link: #3d7a6a;
--radius-pill: 999px;
--font-brand: "Merienda", "Segoe UI", cursive;
--font-body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--font-ui: "Segoe UI", "Helvetica Neue", sans-serif;
--header-h: 3.75rem;
--max: 68rem;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *, *::before, *::after {
*::before,
*::after {
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
@@ -43,29 +39,26 @@
} }
} }
*, *, *::before, *::after { box-sizing: border-box; }
*::before,
*::after {
box-sizing: border-box;
}
html { html { scroll-behavior: smooth; }
scroll-behavior: smooth;
}
body { body {
margin: 0; margin: 0;
font-family: var(--font-body); font-family: var(--font-ui);
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
line-height: 1.65; line-height: 1.6;
color: var(--color-texte-principal); color: var(--ink);
background: linear-gradient(165deg, var(--color-blanc) 0%, var(--color-lavande) 35%, var(--color-menthe-claire) 100%); background-color: var(--paper);
background-image: url("/images/app/paper2.jpg");
background-size: cover;
background-attachment: fixed; background-attachment: fixed;
background-position: center;
min-height: 100vh; min-height: 100vh;
} }
:focus-visible { :focus-visible {
outline: 3px solid var(--color-menthe-claire); outline: 3px solid var(--mint);
outline-offset: 3px; outline-offset: 3px;
} }
@@ -73,581 +66,397 @@ body {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
z-index: 1000; z-index: 1000;
padding: var(--space-2) var(--space-3); padding: 0.75rem 1rem;
background: var(--color-texte-principal); background: var(--ink);
color: var(--color-blanc); color: #fff;
font-weight: 600;
text-decoration: none; text-decoration: none;
border-radius: var(--radius-sm); border-radius: 8px;
}
.skip-link:focus {
left: var(--space-2);
top: var(--space-2);
} }
.skip-link:focus { left: 1rem; top: 1rem; }
.visually-hidden { .visually-hidden {
position: absolute; position: absolute;
width: 1px; width: 1px; height: 1px;
height: 1px; padding: 0; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0,0,0,0);
margin: -1px; white-space: nowrap; border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} }
/* ——— Header ——— */ /* Header */
.site-header { .site-header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 50; z-index: 100;
background: color-mix(in srgb, var(--color-menthe-claire) 92%, transparent); height: var(--header-h);
background: rgba(247, 241, 232, 0.92);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid color-mix(in srgb, var(--color-texte-principal) 8%, transparent); border-bottom: 1px solid rgba(42, 38, 34, 0.08);
box-shadow: var(--shadow-soft);
} }
.site-header__inner { .site-header__inner {
max-width: var(--content-max); max-width: var(--max);
margin: 0 auto; margin: 0 auto;
padding: var(--space-2) var(--space-3); padding: 0 1.25rem;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-2); gap: 1rem;
min-height: var(--header-height);
} }
.site-logo { .site-logo {
font-family: var(--font-display); font-family: var(--font-brand);
font-size: 1.45rem;
font-weight: 700; font-weight: 700;
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--ink);
color: var(--color-texte-principal);
text-decoration: none; text-decoration: none;
white-space: nowrap; letter-spacing: -0.02em;
} }
.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 { .site-nav__list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
gap: 0.25rem 1.25rem;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-1);
} }
.site-nav__list a { .site-nav__list a {
display: block; color: var(--ink-soft);
padding: var(--space-1) var(--space-2); text-decoration: none;
font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
color: var(--color-texte-principal); font-weight: 600;
text-decoration: none;
border-radius: var(--radius-sm);
transition: background-color 0.2s ease;
} }
.site-nav__list a:hover { color: var(--mint-deep); }
.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 { .nav-toggle {
display: none; display: none;
background: none;
border: 0;
padding: 0.5rem;
cursor: pointer;
}
.nav-toggle__bar {
display: block;
width: 1.4rem;
height: 2px;
margin: 5px 0;
background: var(--ink);
border-radius: 2px;
} }
.site-nav { @media (max-width: 52rem) {
flex: 1; .nav-toggle { display: block; }
}
.site-nav__panel { .site-nav__panel {
position: static; display: none;
max-height: none !important; position: absolute;
overflow: visible; left: 0; right: 0;
background: transparent; top: var(--header-h);
border: none; background: var(--paper);
border-bottom: 1px solid rgba(42, 38, 34, 0.1);
padding: 1rem 1.25rem 1.5rem;
}
.site-nav.is-open .site-nav__panel { display: block; }
.site-nav__list { flex-direction: column; gap: 0.75rem; }
} }
.site-nav__list { /* Main */
justify-content: flex-end; .site-main { min-height: 60vh; }
}
}
/* ——— Main ——— */
.site-main {
max-width: var(--content-max);
margin: 0 auto;
padding: var(--space-4) var(--space-3) var(--space-5);
}
.page-shell { .page-shell {
background: var(--color-surface); max-width: 44rem;
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-4);
}
.page-shell .content {
max-width: 52rem;
margin: 0 auto; margin: 0 auto;
padding: 2.5rem 1.25rem 4rem;
}
.page-shell .content {
background: var(--surface);
padding: clamp(1.5rem, 3vw, 2.5rem);
border-radius: 1.25rem;
box-shadow: 0 8px 32px rgba(42, 38, 34, 0.06);
}
.page-shell h1 {
font-family: var(--font-brand);
font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
line-height: 1.2;
margin-top: 0;
}
.page-shell h2 {
font-family: var(--font-brand);
font-size: 1.35rem;
margin-top: 2rem;
}
.page-shell a { color: var(--link); }
.note-validation {
margin-top: 2rem;
font-size: 0.9rem;
color: var(--ink-soft);
} }
h1 { /* Buttons */
font-family: var(--font-display); .btn, .cta-button {
display: inline-block;
text-decoration: none;
font-family: var(--font-ui);
font-weight: 700; font-weight: 700;
font-size: clamp(1.65rem, 1.2rem + 2vw, 2.35rem); font-size: 1rem;
line-height: 1.25; border: 0;
color: var(--color-texte-principal); cursor: pointer;
margin: 0 0 var(--space-3);
} }
.btn--pill, .cta-button {
h2, padding: 0.85rem 1.6rem;
h3, border-radius: var(--radius-pill);
h4, background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
h5, color: #fff !important;
h6 { box-shadow: 0 4px 16px rgba(74, 154, 130, 0.35);
font-family: var(--font-body); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
font-weight: 700;
color: var(--color-texte-principal);
line-height: 1.3;
} }
.btn--pill:hover, .cta-button:hover {
h2 { transform: translateY(-2px);
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); box-shadow: 0 8px 24px rgba(74, 154, 130, 0.4);
} }
.btn--secondary {
h3 { background: linear-gradient(135deg, var(--peach) 0%, #e07a4a 100%);
font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); box-shadow: 0 4px 16px rgba(244, 156, 110, 0.35);
} }
.btn--text {
.accroche { background: none;
font-weight: 600; color: var(--link) !important;
color: var(--color-texte-secondaire); box-shadow: none;
} padding: 0.85rem 1rem;
a {
color: var(--color-lien);
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
} }
a:hover { /* Hero */
color: var(--color-lien-hover); .hero {
}
/* ——— Home ——— */
.home-hero {
position: relative; position: relative;
min-height: calc(100vh - var(--header-h));
min-height: calc(100dvh - var(--header-h));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; overflow: hidden;
border-radius: var(--radius-lg); padding: 2rem 1.25rem 4rem;
background: var(--color-surface);
box-shadow: var(--shadow-card);
margin-bottom: var(--space-4);
} }
.hero__bg {
.home-hero__motif {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(180deg, rgba(247,241,232,0.55) 0%, rgba(247,241,232,0.2) 40%, rgba(174,225,205,0.25) 100%);
pointer-events: none; pointer-events: none;
} }
.hero__river {
.home-hero__motif-img { position: absolute;
width: 100%; left: 50%;
height: 100%; bottom: -2%;
object-fit: cover; width: min(110vw, 56rem);
opacity: 0; transform: translateX(-50%);
animation: motifReveal 2s ease forwards 0.2s; opacity: 0.92;
pointer-events: none;
animation: riverIn 1.1s var(--ease) both;
} }
.hero__river img {
@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%; width: 100%;
height: auto; height: auto;
max-height: 22rem;
object-fit: cover;
display: block; display: block;
filter: drop-shadow(0 8px 24px rgba(42, 38, 34, 0.12));
}
@keyframes riverIn {
from { opacity: 0; transform: translateX(-50%) translateY(1.5rem); }
to { opacity: 0.92; transform: translateX(-50%) translateY(0); }
}
.hero__inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 36rem;
animation: heroIn 0.8s var(--ease) both;
}
@keyframes heroIn {
from { opacity: 0; transform: translateY(0.75rem); }
to { opacity: 1; transform: translateY(0); }
}
.hero__brand {
font-family: var(--font-brand);
font-size: clamp(2.2rem, 1.6rem + 3vw, 3.5rem);
font-weight: 700;
margin: 0 0 0.75rem;
letter-spacing: -0.03em;
color: var(--ink);
}
.hero__title {
font-family: var(--font-brand);
font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
font-weight: 600;
line-height: 1.25;
margin: 0 0 0.75rem;
}
.hero__tagline {
margin: 0 0 1.5rem;
color: var(--ink-soft);
font-size: 1.05rem;
line-height: 1.45;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin: 0;
} }
.home-hero__title { @media (max-width: 40rem) {
margin-bottom: var(--space-2); .hero {
min-height: auto;
padding: 1.75rem 1.1rem 3rem;
align-items: flex-start;
padding-top: 2rem;
}
.hero__river {
width: 130vw;
bottom: -8%;
opacity: 0.75;
}
.hero__brand { font-size: 2rem; }
.hero__title { font-size: 1.25rem; }
.hero__tagline { font-size: 0.98rem; margin-bottom: 1.25rem; }
} }
.home-bento { /* Sections */
display: grid; .section {
gap: var(--space-3); padding: clamp(2.5rem, 5vw, 4.5rem) 1.25rem;
margin-bottom: var(--space-4);
} }
.section__inner {
max-width: var(--max);
margin: 0 auto;
}
.section__inner--narrow { max-width: 40rem; text-align: center; }
.section h2 {
font-family: var(--font-brand);
font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
margin: 0 0 0.75rem;
line-height: 1.25;
}
.section__lead {
color: var(--ink-soft);
margin: 0 0 2rem;
max-width: 36rem;
}
.section__inner--narrow .section__lead,
.section__inner--narrow > p { margin-left: auto; margin-right: auto; }
@media (min-width: 48rem) { .exp-grid {
.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; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ethics-steps li {
padding: var(--space-2);
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);
}
.ethics-steps strong {
display: block;
font-family: var(--font-body);
margin-bottom: 0.15rem;
}
.home-why {
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-4);
margin-bottom: var(--space-4);
}
.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: var(--space-4);
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);
}
button,
input[type="submit"],
.cta-button {
font-family: var(--font-body);
font-weight: 700;
background: var(--color-peche-doux);
color: var(--color-texte-principal);
border: none;
padding: var(--space-2) var(--space-4);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
display: inline-block;
margin-top: var(--space-1);
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: 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;
}
}
form div {
margin-bottom: var(--space-2);
}
form label {
display: block;
margin-bottom: var(--space-1);
font-weight: 600;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
width: 100%;
padding: var(--space-2);
border: 1px solid color-mix(in srgb, var(--color-menthe-claire) 70%, var(--color-texte-principal));
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 1rem;
}
.site-form {
max-width: 38rem;
margin: var(--space-4) auto;
padding: var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}
.site-form button[type="submit"] {
margin-top: var(--space-2);
}
/* ——— Feature sections (shortcodes) ——— */
.feature-section {
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
padding: var(--space-4);
margin: var(--space-4) 0;
}
.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; display: grid;
gap: var(--space-3); grid-template-columns: repeat(3, 1fr);
margin: var(--space-3) 0; gap: 1.25rem;
} }
@media (max-width: 52rem) {
.exp-grid { grid-template-columns: 1fr; }
}
.exp-card {
background: var(--surface);
border-radius: 1.25rem;
padding: 1.5rem;
box-shadow: 0 6px 24px rgba(42, 38, 34, 0.06);
animation: cardIn 0.7s var(--ease) both;
}
.exp-card:nth-child(2) { animation-delay: 0.08s; }
.exp-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes cardIn {
from { opacity: 0; transform: translateY(0.8rem); }
to { opacity: 1; transform: translateY(0); }
}
.exp-card h3 {
font-family: var(--font-brand);
font-size: 1.2rem;
margin: 0 0 0.5rem;
}
.exp-card p {
margin: 0 0 1rem;
color: var(--ink-soft);
font-size: 0.98rem;
}
.exp-card a {
font-weight: 700;
color: var(--link);
text-decoration: none;
}
.exp-card a:hover { text-decoration: underline; }
@media (min-width: 40rem) { .pilotage-teaser {
.feature-grid { background: linear-gradient(135deg, rgba(230, 230, 250, 0.55), rgba(174, 225, 205, 0.4));
}
.pilotage-teaser p { color: var(--ink-soft); }
.confiance .principes {
list-style: none;
margin: 0 0 2rem;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 0.75rem 1.5rem;
} }
@media (max-width: 40rem) {
.confiance .principes { grid-template-columns: 1fr; }
}
.confiance .principes li {
background: var(--surface);
padding: 0.85rem 1rem;
border-radius: 0.75rem;
} }
.feature-card { /* Form */
background: color-mix(in srgb, var(--color-blanc) 88%, var(--color-lavande)); .site-form {
border-radius: var(--radius-sm); display: grid;
padding: var(--space-3); gap: 1rem;
border: 1px solid color-mix(in srgb, var(--color-texte-principal) 6%, transparent); margin-top: 1.5rem;
} }
.site-form label {
.feature-card__title { display: block;
margin: 0 0 var(--space-1); font-weight: 600;
font-size: 1rem; margin-bottom: 0.35rem;
font-size: 0.95rem;
} }
.site-form input,
.feature-card__body { .site-form select,
margin: 0; .site-form textarea {
width: 100%;
padding: 0.7rem 0.85rem;
border: 1px solid rgba(42, 38, 34, 0.18);
border-radius: 0.65rem;
font: inherit;
background: #fff;
}
.site-form .hp {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-note {
margin-top: 1.25rem;
color: var(--ink-soft);
font-size: 0.95rem; font-size: 0.95rem;
color: var(--color-texte-secondaire);
} }
/* ——— Footer ——— */ /* Footer */
.footer-site { .footer-site {
background: color-mix(in srgb, var(--color-jaune-pale) 88%, var(--color-blanc)); padding: 2rem 1.25rem 3rem;
padding: var(--space-4) var(--space-3);
text-align: center; text-align: center;
border-top: 1px solid color-mix(in srgb, var(--color-peche-doux) 80%, transparent); color: var(--ink-soft);
margin-top: var(--space-5); font-size: 0.9rem;
border-top: 1px solid rgba(42, 38, 34, 0.08);
background: rgba(247, 241, 232, 0.7);
} }
.footer-site p {
margin: var(--space-1) 0;
font-size: 0.95rem;
color: var(--color-texte-secondaire);
}
.footer-site__links { .footer-site__links {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem 1.25rem;
justify-content: center; justify-content: center;
gap: var(--space-2) var(--space-3); margin-top: 0.75rem;
margin-top: var(--space-2);
} }
.footer-site__links a { .footer-site__links a {
color: var(--color-texte-principal); color: var(--ink-soft);
font-weight: 600;
text-decoration: none; text-decoration: none;
} }
.footer-site__links a:hover { color: var(--mint-deep); }
.footer-site__links a:hover {
text-decoration: underline;
color: var(--color-lien-hover);
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB