diff --git a/content/_index.md b/content/_index.md index 13a66de..becfd6f 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,48 +1,33 @@ --- -title: "P'titsPas - Plateforme Publique de Gestion Petite Enfance pour Collectivités" +title: "P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire" description: "Solution numérique publique pour les collectivités : gestion transparente des relations parents-assistantes maternelles, sans notation ni algorithme opaque. Égalité et neutralité garanties." keywords: ["P'titsPas", "ptitspas", "p'tits pas", "ptits pas", "petitspas", "petit pas", "petits pas", "opetitspas", "pitispas", "ptitpas", "p'titpas", "Ptitspas", "PTITSPAS", "petite enfance", "assistante maternelle", "collectivité", "commune", "garde enfant", "RPE", "relais petite enfance", "plateforme publique", "transparence", "neutralité", "gestion municipale petite enfance", "plateforme numérique collectivité", "mise en relation parents assistante maternelle", "solution publique garde enfant", "service public petite enfance", "accompagnement parental collectivité", "transparence service public", "égalité accès garde enfant", "politique municipale enfance", "dématérialisation services municipaux"] date: 2025-05-17T12:00:00+02:00 +hero_image: "/images/page_login_4.1.png" +hero_image_alt: "Logo P'titsPas" +hero_tagline: "Plateforme publique pour les collectivités — transparence, neutralité, service public numérique." +intro_md: | + **Modernisez la mise en relation Parents - Assistantes Maternelles avec une plateforme 100% éthique, conçue pour les collectivités.** + + Les RPE sont saturés, la gestion administrative est lourde et les parents peinent à trouver une information fiable ? + **P'titsPas** centralise et sécurise tout le parcours d'accueil individuel, tout en redonnant la main à la collectivité. + + Plus qu'un outil de gestion, c'est la garantie d'un **Service Public Numérique** exemplaire. +ethics: + - title: "Sans notation" + detail: "des professionnels" + - title: "Sans algorithme opaque" + detail: "de sélection" + - title: "100% conforme" + detail: "aux valeurs de la République" +why_md: | + ## Pourquoi choisir P'titsPas pour votre commune ? + + Là où les plateformes privées "ubérisent" la garde d'enfant, P'titsPas **restaure le lien de confiance** et la neutralité du service public. + + * **🏛️ Souveraineté des Données :** Vos données restent sur le territoire, protégées et maîtrisées (RGPD strict). + * **⚖️ Équité Territoriale :** Offrez la même qualité de service à tous les administrés, quel que soit leur quartier. + * **🤝 Valorisation des RPE :** Libérez vos agents des tâches chronophages pour qu'ils se concentrent sur l'accompagnement humain. + * **📱 Simplicité d'Usage :** Une interface pensée pour tous (parents, assistantes mat', agents), accessible sur mobile et PC. +cta_title: "Reprenez le contrôle de votre politique Petite Enfance" --- - -
Logo P'titsPas
- -# P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire - -
- -**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 : -* **Sans notation** des professionnels -* **Sans algorithme opaque** de sélection -* **100% conforme** aux valeurs de la République - -
- ---- -
- -## 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. - -
- ---- -
- -### Reprenez le contrôle de votre politique Petite Enfance - -Voir les fonctionnalités clés -Demander une démo - -
diff --git a/content/contact.md b/content/contact.md index b59158b..8185850 100644 --- a/content/contact.md +++ b/content/contact.md @@ -12,28 +12,28 @@ Que vous souhaitiez une démonstration personnalisée, obtenir un devis, ou simp Utilisez le formulaire ci-dessous pour nous faire part de votre projet. Nous nous engageons à vous répondre dans les plus brefs délais. -
-
- - + +
+ +
-
- - +
+ +
-
- - +
+ +
-
- - +
+ +
-
- - +
+ +
- + Nous avons hâte de collaborer avec vous pour améliorer la gestion de la petite enfance sur votre territoire ! \ No newline at end of file diff --git a/content/fonctionnalites.md b/content/fonctionnalites.md index c820e2c..29b95b0 100644 --- a/content/fonctionnalites.md +++ b/content/fonctionnalites.md @@ -10,21 +10,25 @@ P'titsPas offre une suite complète de fonctionnalités conçues pour simplifier Nous comprenons que chaque acteur a des besoins spécifiques. C'est pourquoi P'titsPas propose des tableaux de bord et des outils dédiés : -### Pour les Parents et Assistantes Maternelles : Une expérience fluide et rassurante +{{% featureblock title="Pour les Parents et Assistantes Maternelles : Une expérience fluide et rassurante" %}} Bien que P'titsPas soit un outil au service de la collectivité, nous 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. +{{% /featureblock %}} -### Pour vos Gestionnaires RPE : Gagnez du temps et de la visibilité +{{% featureblock title="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. +{{% /featureblock %}} -### Pour votre DSI et Direction : Une solution souveraine et maîtrisée +{{% featureblock title="Pour votre DSI et Direction : Une solution souveraine et maîtrisée" %}} P'titsPas s'intègre à votre écosystème avec un niveau d'exigence élevé en matière de sécurité et de personnalisation. * 🔒 **Sécurité et Conformité RGPD** : Une conception "Privacy by Design", hébergement souverain et chiffrement des données sensibles (NIR). @@ -32,14 +36,18 @@ P'titsPas s'intègre à votre écosystème avec un niveau d'exigence élevé en * ⚙️ **Gestion fine des droits** : Administration centralisée des comptes et des paramètres de la plateforme. * 📈 **Pilotage par la donnée** : Statistiques d'usage, nombre de contrats, taux d'occupation... exportables pour vos rapports. * 🧩 **Évolutivité** : Activez uniquement les modules dont vous avez besoin (Blog, IA, etc.). +{{% /featureblock %}} ## Des Workflows Clairs et Sécurisés De la recherche d'une assistante maternelle à la fin de contrat, P'titsPas structure chaque étape : + +{{% featureblock %}} * **Recherche et mise en relation** guidées. * **Création et validation de contrats** dématérialisée et collaborative. * **Gestion des avenants** simplifiée. * **Procédure de fin de contrat** accompagnée, avec calcul du solde de tout compte. +{{% /featureblock %}} --- @@ -47,4 +55,4 @@ P'titsPas est plus qu'un logiciel, c'est un partenaire pour votre politique peti [Découvrez pourquoi P'titsPas est la solution de confiance pour les collectivités](/pourquoi-ptitspas) -[Contactez-nous pour échanger sur vos besoins spécifiques](/contact) \ No newline at end of file +[Contactez-nous pour échanger sur vos besoins spécifiques](/contact) diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 85ef68e..3363d20 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,40 +3,32 @@ - - + {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }} - - + {{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }} {{ end }} - - + - - + - - + - - - - - + + - + - - + -
- + +
+
+ + +
-
+
{{ block "main" . }}{{ .Content }}{{ end }}
{{ partial "footer.html" . }} + - \ No newline at end of file + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 7ab2eb2..0a23d59 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,3 +1,5 @@ {{ define "main" }} - {{ .Content }} -{{ end }} \ No newline at end of file +
+ {{ .Content }} +
+{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 91a0583..0277167 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,7 @@ {{ define "main" }} -
- {{ .Content }} -
-{{ end }} \ No newline at end of file +
+
+ {{ .Content }} +
+
+{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..9ddff8f --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,46 @@ +{{ define "main" }} +
+
+ {{ partial "home-path-motif.html" . }} +
+
+ {{ .Params.hero_image_alt | default +
+
+

{{ .Title }}

+ {{ with .Params.hero_tagline }}

{{ . }}

{{ end }} +
+
+
+ +
+
+ {{ with .Params.intro_md }}{{ . | markdownify }}{{ end }} +
+ +
+ +
+ {{ with .Params.why_md }}{{ . | markdownify }}{{ end }} +
+ +
+ + {{ with .Params.cta_title }}

{{ . }}

{{ end }} + +
+
+{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 11546ee..971eccf 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,11 +1,8 @@ - \ No newline at end of file + diff --git a/layouts/partials/home-path-motif.html b/layouts/partials/home-path-motif.html new file mode 100644 index 0000000..54609ed --- /dev/null +++ b/layouts/partials/home-path-motif.html @@ -0,0 +1 @@ + diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html new file mode 100644 index 0000000..110096a --- /dev/null +++ b/layouts/shortcodes/card.html @@ -0,0 +1,9 @@ +{{- $title := .Get "title" -}} +
+ {{- if $title -}} +

{{ $title }}

+ {{- end -}} +
+ {{ .Inner | markdownify }} +
+
diff --git a/layouts/shortcodes/featureblock.html b/layouts/shortcodes/featureblock.html new file mode 100644 index 0000000..ac7ec98 --- /dev/null +++ b/layouts/shortcodes/featureblock.html @@ -0,0 +1,9 @@ +{{- $title := .Get "title" -}} +
+ {{- if $title -}} +

{{ $title }}

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