Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 deploy
|
c919c50fee | ||
|
deploy
|
785b3c5b43 |
@@ -0,0 +1,34 @@
|
||||
# Production : lancement manuel uniquement.
|
||||
# Aucun push (master, site/v3, …) ne doit déployer ptits-pas.fr.
|
||||
name: Déploiement Hugo production
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
deploy-production:
|
||||
runs-on: self-hosted
|
||||
steps:
|
||||
- name: Déployer sur ptits-pas.fr (ordre explicite)
|
||||
shell: bash
|
||||
run: |
|
||||
set -e
|
||||
COMPOSE_DIR=/home/deploy/infra_v2/apps/site-vitrine
|
||||
SITE_DIR=/home/deploy/infra_v2/site-vitrine
|
||||
|
||||
git config --global --add safe.directory "$SITE_DIR"
|
||||
cd "$SITE_DIR"
|
||||
# Ne pas écraser static/robots.txt (Allow prod, hors sync Git)
|
||||
git fetch origin
|
||||
git checkout master
|
||||
git pull --ff-only origin master
|
||||
|
||||
/bin/cp -f /home/deploy/infra_v2/backups/robots-prod-allow-2026-10-08.txt "$SITE_DIR/static/robots.txt" 2>/dev/null || true
|
||||
|
||||
cd "$COMPOSE_DIR"
|
||||
docker compose -f docker-compose.yml run --rm hugo-build
|
||||
# Restaurer Allow dans public après build Hugo (static peut être Disallow en Git)
|
||||
/bin/cp -f /home/deploy/infra_v2/backups/robots-prod-allow-2026-10-08.txt /home/deploy/infra_v2/site-vitrine/public/robots.txt
|
||||
docker compose -f docker-compose.yml up -d --force-recreate site-vitrine
|
||||
|
||||
echo "Production mise à jour à $(date)"
|
||||
@@ -0,0 +1,18 @@
|
||||
# Staging : push sur site/v3 uniquement.
|
||||
name: Déploiement Hugo Staging
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- site/v3
|
||||
|
||||
jobs:
|
||||
deploy-staging:
|
||||
runs-on: self-hosted
|
||||
steps:
|
||||
- name: Déployer sur staging.ptits-pas.fr
|
||||
shell: bash
|
||||
run: |
|
||||
set -e
|
||||
git config --global --add safe.directory /home/deploy/staging
|
||||
/home/deploy/infra_v2/apps/hooks/deploy-hugo.sh
|
||||
@@ -1,27 +0,0 @@
|
||||
name: Déploiement Hugo Staging
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
|
||||
jobs:
|
||||
deploy-staging:
|
||||
runs-on: self-hosted
|
||||
steps:
|
||||
- name: Déployer sur staging
|
||||
shell: bash
|
||||
run: |
|
||||
# Déclare /home/deploy/staging comme safe pour Git
|
||||
git config --global --add safe.directory /home/deploy/staging
|
||||
|
||||
# Dirige-toi dans le clone staging
|
||||
cd /home/deploy/staging
|
||||
|
||||
# Récupère la dernière version de master
|
||||
git pull origin master
|
||||
|
||||
# Relance le service Hugo-staging
|
||||
docker compose -f /home/deploy/infra/docker-compose.staging.yml up -d
|
||||
|
||||
echo "Staging mis à jour à $(date)"
|
||||
+14
-11
@@ -1,18 +1,17 @@
|
||||
# Pour staging: baseURL = "https://staging.ptits-pas.fr/"
|
||||
# Pour production: baseURL = "https://ptits-pas.fr/"
|
||||
# Staging. Build : apps/staging (hugo-build-staging --baseURL).
|
||||
# Production override : --baseURL=https://ptits-pas.fr/
|
||||
baseURL = "https://staging.ptits-pas.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
|
||||
|
||||
# SEO Configuration
|
||||
[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."
|
||||
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"
|
||||
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."
|
||||
author = "P'titsPas"
|
||||
# GA4 — switch depuis G-65J8GVLCRH le 2026-10-08 (site/v3)
|
||||
ga_id = "G-K8BM5FHLF3"
|
||||
|
||||
# Site map and SEO
|
||||
enableRobotsTXT = true
|
||||
enableRobotsTXT = false
|
||||
enableGitInfo = true
|
||||
|
||||
[sitemap]
|
||||
@@ -36,10 +35,14 @@ ignoreLogs = ['warning-goldmark-raw-html']
|
||||
url = "/fonctionnalites/"
|
||||
weight = 2
|
||||
[[menu.main]]
|
||||
name = "Pourquoi P'titsPas ?"
|
||||
url = "/pourquoi-ptitspas/"
|
||||
name = "Pilotage"
|
||||
url = "/pilotage/"
|
||||
weight = 3
|
||||
[[menu.main]]
|
||||
name = "Pourquoi P'titsPas"
|
||||
url = "/pourquoi-ptitspas/"
|
||||
weight = 4
|
||||
[[menu.main]]
|
||||
name = "Contact"
|
||||
url = "/contact/"
|
||||
weight = 4
|
||||
weight = 5
|
||||
|
||||
+6
-30
@@ -1,32 +1,8 @@
|
||||
---
|
||||
title: "P'titsPas : la petite enfance, vue du large."
|
||||
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: "Illustration P'titsPas"
|
||||
hero_tagline: "Clarté · neutralité · territoire"
|
||||
intro_md: |
|
||||
**Modernisez la mise en relation Parents - Assistantes Maternelles** avec une plateforme conçue pour les collectivités — sans notation des professionnels, sans algorithme opaque.
|
||||
|
||||
Les RPE portent une charge immense : **P'titsPas** apaise le quotidien administratif tout en laissant la collectivité piloter le service rendu aux familles.
|
||||
|
||||
Une même règle du jeu pour tous : **service public numérique** exigeant.
|
||||
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: "Un horizon commun pour votre politique petite enfance"
|
||||
title: "La Petite Enfance, enfin réunie"
|
||||
description: "P'titsPas — plateforme Petite Enfance on-premise pour les collectivités. Simplifiez RPE, assistantes maternelles et familles ; pilotez votre offre locale."
|
||||
date: 2026-10-08T12:00:00+02:00
|
||||
hero_tagline: "La plateforme Petite Enfance installée chez les collectivités."
|
||||
cta_primary: "Demander une démonstration"
|
||||
cta_primary_url: "/contact/"
|
||||
---
|
||||
|
||||
+53
-27
@@ -1,39 +1,65 @@
|
||||
---
|
||||
title: "Contactez-Nous - Parlons de Votre Projet P'titsPas"
|
||||
date: 2025-05-24T11:00:00+02:00
|
||||
draft: false
|
||||
title: "Demander une démonstration P'titsPas"
|
||||
description: "Contactez P'titsPas pour une démonstration de la plateforme Petite Enfance on-premise destinée aux collectivités."
|
||||
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
|
||||
|
||||
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 action="/contact.php" 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;">
|
||||
<form class="site-form" action="/contact.php" method="POST" novalidate>
|
||||
<div class="hp" aria-hidden="true">
|
||||
<label for="website">Site web</label>
|
||||
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
|
||||
</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>
|
||||
<label for="name">Nom et prénom</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
</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>
|
||||
<label for="collectivite">Collectivité / organisation</label>
|
||||
<input type="text" id="collectivite" name="collectivite" required>
|
||||
</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>
|
||||
<label for="fonction">Fonction</label>
|
||||
<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 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>
|
||||
<label for="taille">Taille (habitants ou nombre d'assistantes maternelles)</label>
|
||||
<input type="text" id="taille" name="taille" placeholder="ex. 12 000 habitants ou ~40 AM">
|
||||
</div>
|
||||
<button type="submit" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">Envoyer Votre Demande</button>
|
||||
<div>
|
||||
<label for="besoin">Besoin principal</label>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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/).
|
||||
+34
-35
@@ -1,50 +1,49 @@
|
||||
---
|
||||
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
|
||||
title: "Fonctionnalités — RPE, assistantes maternelles, parents"
|
||||
description: "Logiciel RPE collectivités : un outil pour les gestionnaires, les assistantes maternelles et les parents. Mise en relation simple, agenda, contrats — on-premise."
|
||||
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>
|
||||
|
||||
### 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 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.
|
||||
* ✅ **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.
|
||||
Un seul outil pour tout faire : dossiers, agenda, messagerie, événements.
|
||||
|
||||
### Pour vos Gestionnaires RPE : Gagnez du temps et de la visibilité
|
||||
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.
|
||||
* ⚡ **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.
|
||||
**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.
|
||||
|
||||
### 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.
|
||||
Vous gagnez du temps pour l'accompagnement humain — pas pour recopier des messages d'un canal à l'autre.
|
||||
|
||||
* 🔒 **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.).
|
||||
## <span id="am">Assistantes maternelles</span>
|
||||
|
||||
## Des Workflows Clairs et Sécurisés
|
||||
Le professionnel et le personnel restent à leur place.
|
||||
|
||||
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.
|
||||
- Plus besoin d'un **deuxième téléphone** pour séparer les usages.
|
||||
- Contrats, absences, congés et communications **regroupés** dans P'titsPas.
|
||||
- Congés et absences **datés** dans l'agenda — plus de dates perdues ou floues.
|
||||
- Accessible sur **téléphone, tablette et ordinateur**.
|
||||
|
||||
---
|
||||
## <span id="parents">Parents</span>
|
||||
|
||||
P'titsPas est plus qu'un logiciel, c'est un partenaire pour votre politique petite enfance.
|
||||
**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.
|
||||
|
||||
[Découvrez pourquoi P'titsPas est la solution de confiance pour les collectivités](/pourquoi-ptitspas)
|
||||
- Recherche simple selon le besoin et les disponibilités.
|
||||
- **Sans notation ni classement opaque.**
|
||||
- Tableau de bord simple, structuré, amical.
|
||||
- **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).
|
||||
|
||||
[Contactez-nous pour échanger sur vos besoins spécifiques](/contact)
|
||||
## Messagerie aidée (évolution, hors socle V1)
|
||||
|
||||
P'titsPas **peut aider** à reformuler ou traduire un message avant son envoi — pour les parents **et** les assistantes maternelles.
|
||||
|
||||
- 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.
|
||||
|
||||
## Pilotage
|
||||
|
||||
Pour les chiffres et le pilotage territorial : voir la page [Pilotage](/pilotage/).
|
||||
|
||||
<a href="/contact/" class="cta-button">Demander une démonstration</a>
|
||||
|
||||
+33
-14
@@ -1,27 +1,46 @@
|
||||
---
|
||||
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
|
||||
title: "Mentions légales"
|
||||
description: "Mentions légales du site P'titsPas : éditeur, hébergement, propriété intellectuelle et contact."
|
||||
date: 2026-10-08T12:00:00+02:00
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Mentions Légales
|
||||
# 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.
|
||||
Conformément aux dispositions applicables aux services de communication au public en ligne.
|
||||
|
||||
### Éditeur du site
|
||||
## É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.
|
||||
Le site vitrine **P'titsPas** (nom de domaine `ptits-pas.fr`) est édité dans le cadre du projet P'titsPas, plateforme Petite Enfance destinée aux collectivités.
|
||||
|
||||
### Hébergement
|
||||
- **Contact** : [contact@ptits-pas.fr](mailto:contact@ptits-pas.fr)
|
||||
|
||||
Curabitur sed iaculis dolor, non congue ligula. Maecenas imperdiet ante eget hendrerit posuere. Nunc urna libero, congue porta nibh a, semper feugiat sem.
|
||||
Les informations d'identité complète de l'éditeur (raison sociale, forme juridique, siège, RCS le cas échéant, directeur de la publication) seront précisées ici dès finalisation administrative. En attendant, toute demande peut être adressée à l'adresse ci-dessus.
|
||||
|
||||
### Propriété Intellectuelle
|
||||
## Hébergement
|
||||
|
||||
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.
|
||||
Le site est hébergé sur l'infrastructure exploitée pour P'titsPas (serveur dédié / VPS, France / UE selon configuration en vigueur).
|
||||
|
||||
### Responsabilité
|
||||
Pour toute question technique liée à l'hébergement du site vitrine : [contact@ptits-pas.fr](mailto:contact@ptits-pas.fr).
|
||||
|
||||
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.
|
||||
L'**application** P'titsPas, lorsqu'elle est déployée **on-premise**, est installée dans l'infrastructure de la collectivité cliente (ou de son opérateur désigné) ; l'hébergeur de ces données est alors celui de la collectivité.
|
||||
|
||||
## Propriété intellectuelle
|
||||
|
||||
L'ensemble des contenus de ce site (textes, éléments graphiques, marques, logos, structure) est protégé. Toute reproduction non autorisée est interdite, hors usage privé et citations conformes au droit.
|
||||
|
||||
La marque et les éléments visuels P'titsPas restent la propriété de leurs titulaires.
|
||||
|
||||
## Responsabilité
|
||||
|
||||
Les informations présentées sur ce site ont un caractère informatif et commercial. Elles décrivent la vision produit de la plateforme ; elles ne constituent pas un engagement contractuel tant qu'un contrat n'a pas été conclu.
|
||||
|
||||
L'éditeur s'efforce d'assurer l'exactitude des contenus et la disponibilité du site, sans garantie d'absence d'erreur ou d'interruption.
|
||||
|
||||
## Données personnelles
|
||||
|
||||
Le traitement des données collectées via ce site (formulaire, mesure d'audience) est décrit dans la [Politique de confidentialité](/politique-de-confidentialite/).
|
||||
|
||||
## Contact
|
||||
|
||||
[contact@ptits-pas.fr](mailto:contact@ptits-pas.fr)
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
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. En tant qu'autorité organisatrice (et, selon le territoire, dans le cadre d'un schéma pluriannuel ou d'une CTG), elles ont besoin d'une photographie fiable — pas d'un patchwork de fichiers et d'appels téléphoniques 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 le cadre demande — et ce que l'outil apporte
|
||||
|
||||
**Le cadre** : 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 exposer inutilement de données nominatives ;
|
||||
- des **exports** pour vos rapports, schémas et échanges avec les partenaires (dont la Caf).
|
||||
|
||||
Autrement dit : 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>
|
||||
@@ -1,31 +1,77 @@
|
||||
---
|
||||
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
|
||||
title: "Politique de confidentialité"
|
||||
description: "Politique de confidentialité du site P'titsPas : données du formulaire de contact, Google Analytics, cookies et droits RGPD."
|
||||
date: 2026-10-08T12:00:00+02:00
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Politique de Confidentialité
|
||||
# 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.
|
||||
La présente politique décrit le traitement des données à caractère personnel réalisé dans le cadre du **site vitrine** P'titsPas (notamment `ptits-pas.fr` et ses éventuels environnements de prévisualisation).
|
||||
|
||||
### Collecte des données personnelles
|
||||
Elle ne remplace pas la politique de confidentialité propre à **l'application P'titsPas** déployée chez une collectivité (on-premise) : dans ce cas, le **responsable du traitement** est en principe la collectivité ou la structure désignée dans le contrat de déploiement.
|
||||
|
||||
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.
|
||||
Dernière mise à jour : **8 octobre 2026**.
|
||||
|
||||
### Utilisation des données
|
||||
## Responsable du traitement (site vitrine)
|
||||
|
||||
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.
|
||||
Pour le site vitrine et le formulaire de contact :
|
||||
|
||||
### Droits des utilisateurs
|
||||
- **Contact** : [contact@ptits-pas.fr](mailto:contact@ptits-pas.fr)
|
||||
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
|
||||
Les mentions d'éditeur détaillées figurent sur la page [Mentions légales](/mentions-legales/).
|
||||
|
||||
### Cookies
|
||||
## Données collectées sur ce site
|
||||
|
||||
Maecenas imperdiet ante eget hendrerit posuere. Nunc urna libero, congue porta nibh a, semper feugiat sem. Sed cursus ante dapibus diam.
|
||||
### Formulaire de contact / demande de démonstration
|
||||
|
||||
### Modifications de la politique
|
||||
Lorsque vous utilisez le formulaire, nous collectons les informations que vous renseignez, notamment : nom, collectivité, fonction, taille approximative, besoin, adresse e-mail, téléphone (facultatif) et message.
|
||||
|
||||
Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
|
||||
Ces données sont utilisées uniquement pour **répondre à votre demande** (prise de contact, démonstration, information commerciale B2G) et pour assurer le suivi de la relation.
|
||||
|
||||
Base légale : **intérêt légitime** (réponse aux sollicitations professionnelles) et, le cas échéant, **mesures précontractuelles**.
|
||||
|
||||
Durée de conservation : le temps nécessaire au traitement de la demande, puis archivage limité si besoin de suivi commercial ou de preuve, dans la limite des durées usuelles (en pratique, suppression ou anonymisation lorsque la relation n'a plus d'objet).
|
||||
|
||||
### Mesure d'audience (Google Analytics 4)
|
||||
|
||||
Ce site utilise **Google Analytics 4** (identifiant de mesure `G-K8BM5FHLF3`) afin de comprendre la fréquentation des pages (pages vues, parcours approximatifs, type d'appareil).
|
||||
|
||||
La configuration retenue vise un traitement restreint : anonymisation de l'adresse IP, désactivation des Google Signals et de la personnalisation publicitaire.
|
||||
|
||||
Destinataire technique : Google Ireland Ltd / Google LLC, selon les conditions du service Analytics. Des transferts hors UE peuvent intervenir ; Google propose des mécanismes contractuels (clauses types) dans le cadre de ce service.
|
||||
|
||||
Vous pouvez limiter certains traceurs via les paramètres de votre navigateur ou des extensions dédiées.
|
||||
|
||||
## Cookies et traceurs
|
||||
|
||||
Le site peut déposer :
|
||||
|
||||
- des traceurs **techniques** nécessaires au fonctionnement ;
|
||||
- des traceurs d'**audience** liés à Google Analytics, dans les conditions ci-dessus.
|
||||
|
||||
## Destinataires
|
||||
|
||||
Les données du formulaire sont destinées à l'équipe P'titsPas en charge des contacts commerciaux et techniques. Elles ne sont pas vendues. Elles peuvent être traitées via notre messagerie (hébergement mail `mail.ptits-pas.fr`) pour l'acheminement des messages.
|
||||
|
||||
## Sécurité
|
||||
|
||||
Des mesures raisonnables sont mises en œuvre pour protéger les échanges (HTTPS sur le site, envoi du formulaire via messagerie sécurisée côté serveur). Aucun système n'étant infaillible, nous vous invitons à ne pas transmettre de données sensibles non nécessaires via le formulaire public.
|
||||
|
||||
## Vos droits (RGPD)
|
||||
|
||||
Conformément au règlement (UE) 2016/679, vous disposez notamment des droits d'accès, de rectification, d'effacement, de limitation, d'opposition et, le cas échéant, de portabilité.
|
||||
|
||||
Pour les exercer concernant le **site vitrine**, contactez : [contact@ptits-pas.fr](mailto:contact@ptits-pas.fr).
|
||||
|
||||
Vous pouvez également introduire une réclamation auprès de la **CNIL** : [https://www.cnil.fr](https://www.cnil.fr).
|
||||
|
||||
Pour les données traitées dans une **instance applicative** déployée chez une collectivité, adressez-vous au responsable du traitement désigné par cette collectivité.
|
||||
|
||||
## Application P'titsPas (on-premise)
|
||||
|
||||
Lorsque P'titsPas est installé chez une collectivité, les données des usagers (parents, assistantes maternelles, agents, etc.) sont hébergées et traitées dans le cadre défini par cette collectivité. La présente page ne constitue pas la politique applicable à ces traitements.
|
||||
|
||||
## Modifications
|
||||
|
||||
Cette politique peut être mise à jour. La date de dernière mise à jour figure en tête de page. En cas de changement substantiel, une information pourra être portée sur le site.
|
||||
|
||||
@@ -1,48 +1,34 @@
|
||||
---
|
||||
title: "Pourquoi Choisir P'titsPas pour Votre Collectivité ?"
|
||||
date: 2025-05-24T10:30:00+02:00
|
||||
draft: false
|
||||
title: "Pourquoi P'titsPas — on-premise pour les collectivités"
|
||||
description: "Pourquoi choisir P'titsPas : plateforme Petite Enfance on-premise, neutralité, maîtrise des données — pas un SaaS cloud crèche."
|
||||
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 :**
|
||||
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.
|
||||
P'titsPas s'**installe chez la collectivité**. Les données sont hébergées localement, sous votre maîtrise.
|
||||
|
||||
* **É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).
|
||||
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.
|
||||
|
||||
* **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.
|
||||
## Quatre principes
|
||||
|
||||
## 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 :**
|
||||
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.
|
||||
Mairies, EPCI, directions Petite Enfance, RPE, DSI — et, au quotidien, les assistantes maternelles et les familles.
|
||||
|
||||
* **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é.
|
||||
## Ce que ça change
|
||||
|
||||
## 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 :
|
||||
|
||||
* **🚀 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)
|
||||
<a href="/contact/" class="cta-button">Demander une démonstration</a>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,32 +3,39 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<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 }}">
|
||||
|
||||
{{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
{{ end }}
|
||||
|
||||
<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 }}">
|
||||
<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="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">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta name="twitter:image" content="{{ .Site.BaseURL }}images/icon-192.png">
|
||||
|
||||
<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">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": {{ if .IsHome }}"Organization"{{ else }}"WebPage"{{ end }},
|
||||
{{ if .IsHome }}
|
||||
"name": "{{ .Site.Title }}",
|
||||
"name": "P'titsPas",
|
||||
"url": "{{ .Site.BaseURL }}",
|
||||
"description": "{{ .Site.Params.description }}",
|
||||
"contactPoint": {
|
||||
@@ -43,13 +50,16 @@
|
||||
{{ end }}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-65J8GVLCRH', {
|
||||
gtag('config', '{{ .Site.Params.ga_id }}', {
|
||||
'anonymize_ip': true,
|
||||
'allow_google_signals': false,
|
||||
'allow_ad_personalization_signals': false,
|
||||
@@ -57,19 +67,22 @@
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="theme-horizon-nuit">
|
||||
<body>
|
||||
<a class="skip-link" href="#contenu-principal">Aller au contenu</a>
|
||||
<header class="hn-header">
|
||||
<div class="hn-header__inner">
|
||||
<a class="hn-brand" href="{{ "/" | relURL }}">P'tits<span class="hn-brand__gold">Pas</span></a>
|
||||
<nav class="hn-nav" id="hn-nav" aria-label="Navigation principale">
|
||||
<button type="button" class="hn-nav-toggle" id="hn-nav-toggle" aria-expanded="false" aria-controls="hn-nav-panel" aria-label="Ouvrir le menu">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<header class="site-header">
|
||||
<div class="site-header__inner">
|
||||
<a class="site-logo" href="{{ "/" | relURL }}">
|
||||
<img class="site-logo__mark" src="{{ "images/app/icon.png" | relURL }}" alt="" width="40" height="40" decoding="async">
|
||||
<span class="site-logo__text">P'titsPas</span>
|
||||
</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="hn-nav-panel" id="hn-nav-panel">
|
||||
<ul class="hn-nav-list">
|
||||
<div class="site-nav__panel" id="site-nav-panel">
|
||||
<ul class="site-nav__list">
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
@@ -78,7 +91,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main id="contenu-principal" class="hn-main">
|
||||
<main id="contenu-principal" class="site-main">
|
||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="hn-panel">
|
||||
<div class="page-shell">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="hn-panel">
|
||||
<div class="page-shell">
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
+75
-33
@@ -1,37 +1,79 @@
|
||||
{{ define "main" }}
|
||||
<div class="hn-home">
|
||||
<section class="hn-hero" aria-label="Accroche">
|
||||
<p class="hn-hero__kicker">{{ .Params.hero_tagline | default "Plateforme publique — petite enfance" }}</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="hn-hero__visual">
|
||||
<img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="900" height="560" fetchpriority="high">
|
||||
</div>
|
||||
</section>
|
||||
<div class="hn-dual">
|
||||
<div class="hn-panel hn-prose">
|
||||
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<aside class="hn-ethics" aria-label="Engagements">
|
||||
<h2>Principes</h2>
|
||||
<ul>
|
||||
{{ range .Params.ethics }}
|
||||
<li><strong>{{ .title }}</strong>{{ .detail }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</aside>
|
||||
<div class="home">
|
||||
<section class="hero" aria-labelledby="hero-title">
|
||||
<div class="hero__visual">
|
||||
<picture>
|
||||
<source media="(max-width: 52rem)" srcset="{{ "images/app/river_logo_mobile.png" | relURL }}">
|
||||
<img
|
||||
class="hero__brand-img"
|
||||
src="{{ "images/app/river_logo_desktop.png" | relURL }}"
|
||||
alt="P'titsPas — Grandir pas à pas, sereinement"
|
||||
width="1440"
|
||||
height="1080"
|
||||
fetchpriority="high"
|
||||
decoding="async">
|
||||
</picture>
|
||||
</div>
|
||||
<section class="hn-constellation">
|
||||
<div class="hn-constellation-inner hn-prose">
|
||||
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="hn-cta" aria-labelledby="hn-cta-title">
|
||||
<h2 id="hn-cta-title">{{ .Params.cta_title | default "Échanger avec nous" }}</h2>
|
||||
<p>Parcours clair · données maîtrisées · service public</p>
|
||||
<div>
|
||||
<a class="hn-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
|
||||
<a class="hn-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
|
||||
</div>
|
||||
</section>
|
||||
<div class="hero__copy">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="section experiences" aria-labelledby="exp-title">
|
||||
<div class="section__inner">
|
||||
<h2 id="exp-title">Trois expériences. Une même plateforme.</h2>
|
||||
<p class="section__lead">Sur le terrain, chacun a son parcours — la collectivité garde la vision d'ensemble.</p>
|
||||
<ul class="exp-grid">
|
||||
<li class="exp-card">
|
||||
<h3>Gestionnaires de RPE</h3>
|
||||
<p>Agenda, dossiers, messagerie, événements — un seul outil. Fini le jonglage WhatsApp, SMS, Outlook et Telegram.</p>
|
||||
<a href="{{ "fonctionnalites/" | relURL }}#rpe">Voir le quotidien RPE</a>
|
||||
</li>
|
||||
<li class="exp-card">
|
||||
<h3>Assistantes maternelles</h3>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="section pilotage-teaser" aria-labelledby="pil-title">
|
||||
<div class="section__inner section__inner--narrow">
|
||||
<h2 id="pil-title">Et pour votre collectivité, enfin une vision d'ensemble.</h2>
|
||||
<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>
|
||||
<p class="hero__actions">
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<footer class="hn-footer">
|
||||
<p>© {{ now.Year }} P'titsPas</p>
|
||||
<nav aria-label="Liens de pied de page">
|
||||
<a href="{{ "mentions-legales" | relURL }}">Mentions légales</a>
|
||||
<a href="{{ "politique-de-confidentialite" | relURL }}">Confidentialité</a>
|
||||
<a href="{{ "technique" | relURL }}">Données techniques</a>
|
||||
<footer class="footer-site">
|
||||
<p>© {{ 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">
|
||||
<a href="{{ "mentions-legales/" | relURL }}">Mentions légales</a>
|
||||
<a href="{{ "politique-de-confidentialite/" | relURL }}">Politique de confidentialité</a>
|
||||
<a href="{{ "donnees-et-securite/" | relURL }}">Données et sécurité</a>
|
||||
<a href="{{ "deploiement/" | relURL }}">Déploiement</a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
@@ -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">
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
+426
-418
@@ -1,532 +1,540 @@
|
||||
/* Proposition « Horizon nuit » — nocturne, lumière et serif (contraste maximal avec « Cahier pop ») */
|
||||
@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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sora:wght@300;400;500;600&display=swap");
|
||||
/* P'titsPas vitrine V3 — papier, rivière, Merienda marque */
|
||||
|
||||
@font-face {
|
||||
font-family: "Merienda";
|
||||
src: url("/fonts/Merienda-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--hn-void: #06080c;
|
||||
--hn-deep: #0e1219;
|
||||
--hn-mist: rgba(230, 223, 209, 0.92);
|
||||
--hn-mist-dim: rgba(200, 190, 175, 0.75);
|
||||
--hn-gold: #e8c547;
|
||||
--hn-gold-soft: rgba(232, 197, 71, 0.35);
|
||||
--hn-aurora: rgba(120, 190, 255, 0.12);
|
||||
--hn-line: rgba(232, 197, 71, 0.22);
|
||||
--font-serif: "Cormorant Garamond", Georgia, serif;
|
||||
--font-sans: "Sora", system-ui, sans-serif;
|
||||
--nav-cut: 52rem;
|
||||
--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: 78rem;
|
||||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.hn-brand__gold {
|
||||
color: var(--hn-gold);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
*, *::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;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body.theme-horizon-nuit {
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 300;
|
||||
font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
|
||||
line-height: 1.7;
|
||||
color: var(--hn-mist);
|
||||
background: var(--hn-void);
|
||||
background-image:
|
||||
radial-gradient(ellipse 120% 80% at 50% -30%, var(--hn-gold-soft), transparent 55%),
|
||||
radial-gradient(ellipse 70% 50% at 100% 20%, var(--hn-aurora), transparent 50%),
|
||||
radial-gradient(ellipse 50% 40% at 0% 80%, rgba(180, 120, 255, 0.06), transparent 45%);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
color: var(--ink);
|
||||
background-color: var(--paper);
|
||||
background-image: url("/images/app/paper2.jpg");
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
body {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--hn-gold);
|
||||
outline: 3px solid var(--mint);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
z-index: 3000;
|
||||
padding: 0.65rem 1rem;
|
||||
background: var(--hn-deep);
|
||||
color: var(--hn-gold);
|
||||
border: 1px solid var(--hn-line);
|
||||
z-index: 1000;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.skip-link:focus { left: 1rem; top: 1rem; }
|
||||
|
||||
.skip-link:focus {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
.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 */
|
||||
.hn-header {
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(14px);
|
||||
background: color-mix(in srgb, var(--hn-deep) 82%, transparent);
|
||||
border-bottom: 1px solid var(--hn-line);
|
||||
height: var(--header-h);
|
||||
background: rgba(247, 241, 232, 0.92);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(42, 38, 34, 0.08);
|
||||
}
|
||||
|
||||
.hn-header__inner {
|
||||
max-width: 80rem;
|
||||
.site-header__inner {
|
||||
max-width: var(--max);
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.25rem;
|
||||
padding: 0 1.25rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hn-brand {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
|
||||
letter-spacing: 0.02em;
|
||||
text-decoration: none;
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
.hn-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
.site-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
font-family: var(--font-brand);
|
||||
font-size: 1.45rem;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hn-nav-toggle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--hn-line);
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--hn-mist);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hn-nav-toggle span {
|
||||
.site-logo__mark {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.hn-nav-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
.site-logo__text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hn-nav.is-open .hn-nav-panel {
|
||||
max-height: 24rem;
|
||||
}
|
||||
|
||||
.hn-nav-list {
|
||||
.site-nav__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 1.25rem;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hn-nav-list a {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
.site-nav__list a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
color: var(--hn-mist-dim);
|
||||
padding: 0.35rem 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color 0.2s ease, border-color 0.2s ease;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.site-nav__list a:hover { color: var(--mint-deep); }
|
||||
|
||||
.nav-toggle {
|
||||
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;
|
||||
}
|
||||
|
||||
.hn-nav-list a:hover {
|
||||
color: var(--hn-gold);
|
||||
border-bottom-color: var(--hn-gold);
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
.hn-nav-toggle {
|
||||
@media (max-width: 52rem) {
|
||||
.nav-toggle { display: block; }
|
||||
.site-nav__panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hn-nav-panel {
|
||||
max-height: none !important;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 51.99rem) {
|
||||
.hn-nav-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.75rem);
|
||||
left: 0;
|
||||
background: color-mix(in srgb, var(--hn-deep) 96%, black);
|
||||
border: 1px solid var(--hn-line);
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.hn-nav-list {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
left: 0; right: 0;
|
||||
top: var(--header-h);
|
||||
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; }
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.hn-main {
|
||||
max-width: 80rem;
|
||||
.site-main { min-height: 60vh; }
|
||||
|
||||
.page-shell {
|
||||
max-width: min(56rem, 94vw);
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem 4rem;
|
||||
padding: 2rem 1.25rem 3.5rem;
|
||||
}
|
||||
|
||||
.hn-panel {
|
||||
border: 1px solid var(--hn-line);
|
||||
background: color-mix(in srgb, var(--hn-deep) 75%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 2px;
|
||||
padding: clamp(1.25rem, 3vw, 2.5rem);
|
||||
@media (min-width: 64rem) {
|
||||
.page-shell {
|
||||
max-width: min(68rem, 90vw);
|
||||
padding: 2.5rem 2rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hn-panel .content {
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
@media (min-width: 90rem) {
|
||||
.page-shell {
|
||||
max-width: min(74rem, 86vw);
|
||||
}
|
||||
}
|
||||
|
||||
/* Home */
|
||||
.hn-hero {
|
||||
min-height: clamp(22rem, 55vh, 36rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 3rem 0 2.5rem;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
.page-shell .content {
|
||||
background: var(--surface);
|
||||
padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.75rem);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 8px 32px rgba(42, 38, 34, 0.06);
|
||||
}
|
||||
|
||||
.hn-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--hn-gold), transparent);
|
||||
opacity: 0.5;
|
||||
.page-shell .content p,
|
||||
.page-shell .content li {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.hn-hero__kicker {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-gold);
|
||||
margin-bottom: 1rem;
|
||||
@media (min-width: 64rem) {
|
||||
.page-shell .content p,
|
||||
.page-shell .content li {
|
||||
font-size: 0.92rem;
|
||||
max-width: 62rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hn-hero h1 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
font-size: clamp(2.4rem, 1.2rem + 5vw, 4.2rem);
|
||||
line-height: 1.05;
|
||||
max-width: 18ch;
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--hn-mist);
|
||||
.page-shell h1 {
|
||||
font-family: var(--font-brand);
|
||||
font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem);
|
||||
line-height: 1.2;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hn-hero__visual {
|
||||
.page-shell h2 {
|
||||
font-family: var(--font-brand);
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.page-shell h2 { font-size: 1.15rem; }
|
||||
}
|
||||
.page-shell a { color: var(--link); }
|
||||
.note-validation {
|
||||
margin-top: 2rem;
|
||||
max-width: 28rem;
|
||||
border: 1px solid var(--hn-line);
|
||||
padding: 0.35rem;
|
||||
background: color-mix(in srgb, var(--hn-deep) 90%, transparent);
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.hn-hero__visual img {
|
||||
/* Buttons */
|
||||
.btn, .cta-button {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn--pill, .cta-button {
|
||||
padding: 0.85rem 1.6rem;
|
||||
border-radius: var(--radius-pill);
|
||||
background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
|
||||
color: #fff !important;
|
||||
box-shadow: 0 4px 16px rgba(74, 154, 130, 0.35);
|
||||
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
|
||||
}
|
||||
.btn--pill:hover, .cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(74, 154, 130, 0.4);
|
||||
}
|
||||
.btn--secondary {
|
||||
background: linear-gradient(135deg, var(--peach) 0%, #e07a4a 100%);
|
||||
box-shadow: 0 4px 16px rgba(244, 156, 110, 0.35);
|
||||
}
|
||||
.btn--text {
|
||||
background: none;
|
||||
color: var(--link) !important;
|
||||
box-shadow: none;
|
||||
padding: 0.85rem 1rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hero aligné sur le login app :
|
||||
paper2 (body) + river_logo_desktop (rivière + wordmark ensemble).
|
||||
Pas de dégradé coloré.
|
||||
*/
|
||||
.hero {
|
||||
position: relative;
|
||||
/* Pas de plein écran : le contenu suivant doit pointer sous le fold */
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
max-width: var(--max);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.hero__visual {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
animation: heroIn 0.9s var(--ease) both;
|
||||
}
|
||||
.hero__brand-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: saturate(0.92) contrast(1.05);
|
||||
max-height: min(52vh, 28rem);
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
}
|
||||
.hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
animation: heroIn 0.8s var(--ease) 0.08s both;
|
||||
}
|
||||
@keyframes heroIn {
|
||||
from { opacity: 0; transform: translateY(0.6rem); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.hero__title {
|
||||
font-family: var(--font-brand);
|
||||
font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.4rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.22;
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
.hero__tagline {
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--ink-soft);
|
||||
font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
|
||||
line-height: 1.45;
|
||||
}
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem 1rem;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hn-dual {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.hn-dual {
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
align-items: start;
|
||||
/* Desktop : comme le login — image rivière+logo à gauche, message à droite */
|
||||
@media (min-width: 64rem) {
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
|
||||
column-gap: 1.75rem;
|
||||
padding: 1rem 2.5rem 1.25rem;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
}
|
||||
.hero__visual {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.hero__brand-img {
|
||||
max-height: min(58vh, 30rem);
|
||||
width: 100%;
|
||||
}
|
||||
.hero__copy {
|
||||
text-align: left;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.hero__title {
|
||||
font-size: clamp(1.85rem, 1.4rem + 1.1vw, 2.6rem);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.hero__tagline {
|
||||
margin-bottom: 1.25rem;
|
||||
max-width: 28rem;
|
||||
}
|
||||
.hero__actions { justify-content: flex-start; }
|
||||
}
|
||||
|
||||
.hn-prose {
|
||||
font-weight: 300;
|
||||
@media (max-width: 40rem) {
|
||||
.hero {
|
||||
min-height: auto;
|
||||
padding: 0.75rem 1rem 1.25rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.hero__brand-img {
|
||||
max-height: 40vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hero__title { font-size: 1.3rem; }
|
||||
.hero__tagline { font-size: 0.98rem; margin-bottom: 1rem; }
|
||||
}
|
||||
|
||||
.hn-prose strong {
|
||||
font-weight: 500;
|
||||
color: var(--hn-mist);
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: clamp(2rem, 4vw, 3.5rem) 1.25rem;
|
||||
}
|
||||
|
||||
.hn-ethics {
|
||||
border-left: 1px solid var(--hn-line);
|
||||
padding-left: 1.25rem;
|
||||
.home > .section:first-of-type {
|
||||
padding-top: clamp(1.25rem, 2.5vw, 2rem);
|
||||
}
|
||||
|
||||
.hn-ethics h2 {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
color: var(--hn-gold);
|
||||
margin: 0 0 1rem;
|
||||
.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.35rem, 1.15rem + 0.7vw, 1.75rem);
|
||||
margin: 0 0 0.65rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.section__lead {
|
||||
color: var(--ink-soft);
|
||||
margin: 0 0 1.75rem;
|
||||
max-width: 42rem;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.section__lead { font-size: 0.92rem; max-width: 48rem; }
|
||||
}
|
||||
.section__inner--narrow .section__lead,
|
||||
.section__inner--narrow > p { margin-left: auto; margin-right: auto; }
|
||||
|
||||
.hn-ethics ul {
|
||||
.exp-grid {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.hn-ethics li {
|
||||
position: relative;
|
||||
padding: 0.65rem 0 0.65rem 1.25rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-size: 0.9rem;
|
||||
color: var(--hn-mist-dim);
|
||||
@media (max-width: 52rem) {
|
||||
.exp-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.hn-ethics li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: -3px;
|
||||
border-radius: 50%;
|
||||
background: var(--hn-gold);
|
||||
opacity: 0.85;
|
||||
@media (min-width: 64rem) {
|
||||
.experiences .section__inner,
|
||||
.confiance .section__inner {
|
||||
max-width: var(--max);
|
||||
}
|
||||
.exp-card { padding: 1.75rem 1.6rem; min-height: 12rem; }
|
||||
}
|
||||
|
||||
.hn-ethics strong {
|
||||
display: block;
|
||||
color: var(--hn-mist);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.15rem;
|
||||
.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;
|
||||
}
|
||||
|
||||
.hn-constellation {
|
||||
position: relative;
|
||||
padding: 2.5rem 0;
|
||||
margin: 2rem 0;
|
||||
.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); }
|
||||
}
|
||||
|
||||
.hn-constellation::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.35), transparent),
|
||||
radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.25), transparent),
|
||||
radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.2), transparent),
|
||||
radial-gradient(1px 1px at 88% 65%, rgba(232, 197, 71, 0.4), transparent),
|
||||
radial-gradient(1px 1px at 12% 80%, rgba(255, 255, 255, 0.18), transparent);
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
.exp-card h3 {
|
||||
font-family: var(--font-brand);
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.hn-constellation-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
.exp-card p {
|
||||
margin: 0 0 1rem;
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.hn-constellation-inner h2 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.35rem);
|
||||
font-weight: 500;
|
||||
margin-top: 0;
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
.hn-constellation-inner a {
|
||||
color: var(--hn-gold);
|
||||
}
|
||||
|
||||
.hn-cta {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
margin-top: 2rem;
|
||||
border: 1px solid var(--hn-line);
|
||||
background: linear-gradient(160deg, color-mix(in srgb, var(--hn-deep) 90%, transparent), rgba(232, 197, 71, 0.06));
|
||||
}
|
||||
|
||||
.hn-cta h2 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
|
||||
margin-top: 0;
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
.hn-cta p {
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-mist-dim);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hn-btn {
|
||||
display: inline-block;
|
||||
margin: 0.35rem 0.5rem;
|
||||
padding: 0.65rem 1.4rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
.exp-card a {
|
||||
font-weight: 700;
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
color: var(--hn-gold);
|
||||
border: 1px solid var(--hn-gold);
|
||||
background: transparent;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
.exp-card a:hover { text-decoration: underline; }
|
||||
|
||||
.pilotage-teaser {
|
||||
background: rgba(255, 252, 247, 0.55);
|
||||
border-top: 1px solid rgba(42, 38, 34, 0.06);
|
||||
border-bottom: 1px solid rgba(42, 38, 34, 0.06);
|
||||
}
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
|
||||
.hn-btn:hover {
|
||||
background: var(--hn-gold);
|
||||
color: var(--hn-void);
|
||||
/* Form */
|
||||
.site-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Inner pages */
|
||||
body.theme-horizon-nuit h1,
|
||||
body.theme-horizon-nuit h2,
|
||||
body.theme-horizon-nuit h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 500;
|
||||
color: var(--hn-mist);
|
||||
.site-form label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .logo-accueil img {
|
||||
border: 1px solid var(--hn-line);
|
||||
padding: 0.25rem;
|
||||
background: color-mix(in srgb, var(--hn-deep) 80%, transparent);
|
||||
.site-form input,
|
||||
.site-form select,
|
||||
.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;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .content-section {
|
||||
border: 1px solid var(--hn-line);
|
||||
background: color-mix(in srgb, var(--hn-deep) 70%, transparent);
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
.site-form .hp {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit a {
|
||||
color: var(--hn-gold);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .cta-button {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--hn-gold);
|
||||
background: transparent;
|
||||
color: var(--hn-gold);
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit .cta-button:hover {
|
||||
background: var(--hn-gold);
|
||||
color: var(--hn-void);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit form label {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-mist-dim);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit form input,
|
||||
body.theme-horizon-nuit form textarea {
|
||||
background: color-mix(in srgb, var(--hn-void) 60%, transparent);
|
||||
border: 1px solid var(--hn-line);
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit button,
|
||||
body.theme-horizon-nuit input[type="submit"] {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--hn-gold);
|
||||
background: transparent;
|
||||
color: var(--hn-gold);
|
||||
padding: 0.55rem 1.1rem;
|
||||
cursor: pointer;
|
||||
.form-note {
|
||||
margin-top: 1.25rem;
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.hn-footer {
|
||||
margin-top: 3rem;
|
||||
padding: 2rem 1rem;
|
||||
border-top: 1px solid var(--hn-line);
|
||||
.footer-site {
|
||||
padding: 2rem 1.25rem 3rem;
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-mist-dim);
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.9rem;
|
||||
border-top: 1px solid rgba(42, 38, 34, 0.08);
|
||||
background: rgba(247, 241, 232, 0.7);
|
||||
}
|
||||
|
||||
.hn-footer nav {
|
||||
.footer-site__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem 1.25rem;
|
||||
justify-content: center;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.hn-footer a {
|
||||
color: var(--hn-mist-dim);
|
||||
.footer-site__links a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.hn-footer a:hover {
|
||||
color: var(--hn-gold);
|
||||
}
|
||||
.footer-site__links a:hover { color: var(--mint-deep); }
|
||||
|
||||
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: 498 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 257 B |
+12
-7
@@ -1,7 +1,8 @@
|
||||
(function () {
|
||||
var nav = document.getElementById("hn-nav");
|
||||
var nav = document.getElementById("site-nav");
|
||||
if (!nav) return;
|
||||
var toggle = document.getElementById("hn-nav-toggle");
|
||||
|
||||
var toggle = nav.querySelector(".nav-toggle");
|
||||
var mq = window.matchMedia("(max-width: 51.99rem)");
|
||||
|
||||
function setOpen(open) {
|
||||
@@ -17,8 +18,12 @@
|
||||
var next = !nav.classList.contains("is-open");
|
||||
setOpen(next);
|
||||
if (next) {
|
||||
var first = nav.querySelector(".hn-nav-list a");
|
||||
if (first) requestAnimationFrame(function () { first.focus(); });
|
||||
var first = nav.querySelector(".site-nav__list a");
|
||||
if (first) {
|
||||
window.requestAnimationFrame(function () {
|
||||
first.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -30,13 +35,13 @@
|
||||
}
|
||||
});
|
||||
|
||||
nav.querySelectorAll(".hn-nav-list a").forEach(function (a) {
|
||||
nav.querySelectorAll(".site-nav__list a").forEach(function (a) {
|
||||
a.addEventListener("click", function () {
|
||||
if (mq.matches) setOpen(false);
|
||||
});
|
||||
});
|
||||
|
||||
mq.addEventListener("change", function (ev) {
|
||||
if (!ev.matches) setOpen(false);
|
||||
mq.addEventListener("change", function (e) {
|
||||
if (!e.matches) setOpen(false);
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user