Compare commits
1 Commits
master
...
feature/vi
| Author | SHA1 | Date | |
|---|---|---|---|
| efc2ef442c |
@ -1,48 +1,32 @@
|
||||
---
|
||||
title: "P'titsPas - Plateforme Publique de Gestion Petite Enfance pour Collectivités"
|
||||
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"
|
||||
---
|
||||
|
||||
<div class="logo-accueil"><img src="/images/page_login_4.1.png" alt="Logo P'titsPas"></div>
|
||||
|
||||
# P'titsPas : La solution publique pour accompagner la Petite Enfance de votre territoire
|
||||
|
||||
<div class="content-section">
|
||||
|
||||
**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
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
<div class="content-section">
|
||||
|
||||
## 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.
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
<div style="text-align: center; margin-top: calc(var(--padding-module) * 3);">
|
||||
|
||||
### Reprenez le contrôle de votre politique Petite Enfance
|
||||
|
||||
<a href="/fonctionnalites" class="cta-button">Voir les fonctionnalités clés</a>
|
||||
<a href="/contact" class="cta-button">Demander une démo</a>
|
||||
|
||||
</div>
|
||||
|
||||
@ -3,40 +3,26 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
||||
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
|
||||
<meta name="author" content="{{ .Site.Params.author | default .Site.Title }}">
|
||||
|
||||
<!-- Prevent indexing of staging site -->
|
||||
{{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
{{ end }}
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
|
||||
<meta property="og:url" content="{{ .Permalink }}">
|
||||
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<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:locale" content="fr_FR">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="{{ .Permalink }}">
|
||||
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<meta property="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta property="twitter:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
|
||||
<!-- JSON-LD structured data for Google -->
|
||||
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
@ -57,16 +43,12 @@
|
||||
{{ end }}
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-65J8GVLCRH', {
|
||||
'anonymize_ip': true,
|
||||
'allow_google_signals': false,
|
||||
@ -75,19 +57,31 @@
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<body class="theme-horizon-nuit">
|
||||
<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>
|
||||
</button>
|
||||
<div class="hn-nav-panel" id="hn-nav-panel">
|
||||
<ul class="hn-nav-list">
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<main id="contenu-principal" class="hn-main">
|
||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
<script src="{{ `/js/site.js` | relURL }}" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="hn-panel">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,5 +1,7 @@
|
||||
{{ define "main" }}
|
||||
<article class="content">
|
||||
<div class="hn-panel">
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
{{ end }}
|
||||
37
layouts/index.html
Normal file
37
layouts/index.html
Normal file
@ -0,0 +1,37 @@
|
||||
{{ 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>
|
||||
<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>
|
||||
{{ end }}
|
||||
@ -1,11 +1,8 @@
|
||||
<footer style="background-color: #f8f9fa; padding: 20px 0; text-align: center; border-top: 1px solid #e7e7e7; margin-top: 40px;">
|
||||
<div class="container">
|
||||
<p>© {{ now.Year }} P'titsPas - Tous droits réservés.</p>
|
||||
<p>
|
||||
<a href="/mentions-legales/" style="margin-right: 15px; text-decoration: none; color: #007bff;">Mentions Légales</a>
|
||||
<a href="/politique-de-confidentialite/" style="margin-right: 15px; text-decoration: none; color: #007bff;">Politique de Confidentialité</a>
|
||||
<a href="/technique/" style="text-decoration: none; color: #007bff;">Données Techniques</a>
|
||||
</p>
|
||||
<!-- Vous pouvez ajouter ici d'autres informations ou liens si nécessaire -->
|
||||
</div>
|
||||
<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>
|
||||
</nav>
|
||||
</footer>
|
||||
@ -1,180 +1,532 @@
|
||||
/* Charte Graphique P'titsPas */
|
||||
/* Proposition « Horizon nuit » — nocturne, lumière et serif (contraste maximal avec « Cahier pop ») */
|
||||
|
||||
@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");
|
||||
|
||||
/* 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;
|
||||
--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;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.hn-brand__gold {
|
||||
color: var(--hn-gold);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Styles de Base */
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: var(--color-texte-principal);
|
||||
background-color: var(--color-blanc); /* Ou une teinte pastel très claire comme fond général */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body.theme-horizon-nuit {
|
||||
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%);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--hn-gold);
|
||||
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);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.hn-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);
|
||||
}
|
||||
|
||||
.hn-header__inner {
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.25rem;
|
||||
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;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.hn-nav.is-open .hn-nav-panel {
|
||||
max-height: 24rem;
|
||||
}
|
||||
|
||||
.hn-nav-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 1.25rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: calc(var(--padding-module) * 3); /* 24px */
|
||||
max-width: 960px;
|
||||
.hn-nav-list a {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
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;
|
||||
}
|
||||
|
||||
.hn-nav-list a:hover {
|
||||
color: var(--hn-gold);
|
||||
border-bottom-color: var(--hn-gold);
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
.hn-nav-toggle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.hn-main {
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem 4rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.hn-panel .content {
|
||||
max-width: 42rem;
|
||||
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é */
|
||||
/* 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;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
font-family: 'Poppins', sans-serif; /* Pour les sous-titres et autres titres */
|
||||
color: var(--color-texte-principal);
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Accroches et sous-titres (exemples) */
|
||||
.accroche {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-weight: 700;
|
||||
color: var(--color-texte-secondaire);
|
||||
.hn-hero__kicker {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-gold);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-corail-leger); /* Corail léger pour les liens */
|
||||
text-decoration: none;
|
||||
.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);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
.hn-hero__visual {
|
||||
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);
|
||||
}
|
||||
|
||||
/* Header / Navigation */
|
||||
header nav {
|
||||
background-color: var(--color-menthe-claire); /* Menthe claire pour le header */
|
||||
padding: var(--padding-module) 0;
|
||||
.hn-hero__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: saturate(0.92) contrast(1.05);
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0 calc(var(--padding-module) * 2);
|
||||
text-align: center;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.hn-prose {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hn-prose strong {
|
||||
font-weight: 500;
|
||||
color: var(--hn-mist);
|
||||
}
|
||||
|
||||
.hn-ethics {
|
||||
border-left: 1px solid var(--hn-line);
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.hn-ethics ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
display: inline;
|
||||
margin-right: calc(var(--padding-module) * 2.5); /* 20px */
|
||||
.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);
|
||||
}
|
||||
|
||||
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 */
|
||||
.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;
|
||||
}
|
||||
|
||||
header nav ul li a:hover {
|
||||
background-color: var(--color-peche-doux); /* Pêche doux au survol */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Style pour l'image du logo sur la page d'accueil */
|
||||
.logo-accueil img {
|
||||
width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: cover;
|
||||
.hn-ethics strong {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--padding-module) * 4); /* 32px */
|
||||
border-radius: var(--padding-module); /* Coins arrondis style galet */
|
||||
color: var(--hn-mist);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
/* Boutons */
|
||||
button,
|
||||
input[type="submit"],
|
||||
.cta-button {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-weight: 700;
|
||||
background-color: var(--color-peche-doux); /* Pêche doux pour les boutons primaires */
|
||||
color: var(--color-texte-principal);
|
||||
border: none;
|
||||
padding: calc(var(--padding-module) * 1.5) calc(var(--padding-module) * 3);
|
||||
border-radius: calc(var(--padding-module) * 3); /* Forme de galet allongé */
|
||||
.hn-constellation {
|
||||
position: relative;
|
||||
padding: 2.5rem 0;
|
||||
margin: 2rem 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;
|
||||
}
|
||||
|
||||
.hn-constellation-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-decoration: none;
|
||||
color: var(--hn-gold);
|
||||
border: 1px solid var(--hn-gold);
|
||||
background: transparent;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.hn-btn:hover {
|
||||
background: var(--hn-gold);
|
||||
color: var(--hn-void);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin-top: var(--padding-module);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
.cta-button:hover {
|
||||
background-color: var(--color-rose-tendre); /* Rose tendre au survol */
|
||||
}
|
||||
|
||||
/* Formulaires (basique) */
|
||||
form div {
|
||||
margin-bottom: calc(var(--padding-module) * 2);
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: var(--padding-module);
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
form input[type="text"],
|
||||
form input[type="email"],
|
||||
form input[type="tel"],
|
||||
form textarea {
|
||||
width: 100%;
|
||||
padding: var(--padding-module);
|
||||
border: 1px solid var(--color-menthe-claire);
|
||||
border-radius: calc(var(--padding-module) / 2); /* 4px */
|
||||
box-sizing: border-box; /* Important pour que padding ne change pas la largeur totale */
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Sections de contenu - style galet */
|
||||
.content-section {
|
||||
background-color: var(--color-blanc);
|
||||
padding: calc(var(--padding-module) * 3);
|
||||
margin-bottom: calc(var(--padding-module) * 3);
|
||||
border-radius: calc(var(--padding-module) * 2); /* 16px, angles arrondis */
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Ombre douce */
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--color-jaune-pale); /* Jaune pâle pour le footer */
|
||||
padding: calc(var(--padding-module) * 2.5) 0;
|
||||
.hn-footer {
|
||||
margin-top: 3rem;
|
||||
padding: 2rem 1rem;
|
||||
border-top: 1px solid var(--hn-line);
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--color-peche-doux);
|
||||
margin-top: calc(var(--padding-module) * 5);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hn-mist-dim);
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: var(--padding-module) 0;
|
||||
font-size: 0.9em;
|
||||
.hn-footer nav {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--color-texte-secondaire);
|
||||
.hn-footer a {
|
||||
color: var(--hn-mist-dim);
|
||||
text-decoration: none;
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.hn-footer a:hover {
|
||||
color: var(--hn-gold);
|
||||
}
|
||||
42
static/js/site.js
Normal file
42
static/js/site.js
Normal file
@ -0,0 +1,42 @@
|
||||
(function () {
|
||||
var nav = document.getElementById("hn-nav");
|
||||
if (!nav) return;
|
||||
var toggle = document.getElementById("hn-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(".hn-nav-list a");
|
||||
if (first) 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(".hn-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);
|
||||
});
|
||||
})();
|
||||
Loading…
x
Reference in New Issue
Block a user