Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jmartin
|
89b2bd7090 |
+6
-6
@@ -5,7 +5,7 @@ keywords: ["P'titsPas", "ptitspas", "p'tits pas", "ptits pas", "petitspas", "pet
|
||||
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."
|
||||
hero_tagline: "Zéro algo opaque · Zéro notation · 100 % collectivité"
|
||||
intro_md: |
|
||||
**Modernisez la mise en relation Parents - Assistantes Maternelles avec une plateforme 100% éthique, conçue pour les collectivités.**
|
||||
|
||||
@@ -15,11 +15,11 @@ intro_md: |
|
||||
Plus qu'un outil de gestion, c'est la garantie d'un **Service Public Numérique** exemplaire.
|
||||
ethics:
|
||||
- title: "Sans notation"
|
||||
detail: "des professionnels"
|
||||
detail: " des pros"
|
||||
- title: "Sans algorithme opaque"
|
||||
detail: "de sélection"
|
||||
- title: "100% conforme"
|
||||
detail: "aux valeurs de la République"
|
||||
detail: " de sélection"
|
||||
- title: "100 % conforme"
|
||||
detail: " aux valeurs de la République"
|
||||
why_md: |
|
||||
## Pourquoi choisir P'titsPas pour votre commune ?
|
||||
|
||||
@@ -29,5 +29,5 @@ why_md: |
|
||||
* **⚖️ É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"
|
||||
cta_title: "Reprenez la main sur votre politique petite enfance"
|
||||
---
|
||||
|
||||
+17
-17
@@ -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.
|
||||
|
||||
<form class="site-form" action="/contact.php" method="POST">
|
||||
<div>
|
||||
<label for="name">Nom Prénom :</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
<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;">
|
||||
</div>
|
||||
<div>
|
||||
<label for="collectivite">Collectivité / Organisation :</label>
|
||||
<input type="text" id="collectivite" name="collectivite" required>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="collectivite" style="display: block; margin-bottom: 5px;">Collectivité / Organisation :</label>
|
||||
<input type="text" id="collectivite" name="collectivite" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Adresse E-mail :</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="email" style="display: block; margin-bottom: 5px;">Adresse E-mail :</label>
|
||||
<input type="email" id="email" name="email" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Téléphone (facultatif) :</label>
|
||||
<input type="tel" id="phone" name="phone">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="phone" style="display: block; margin-bottom: 5px;">Téléphone (facultatif) :</label>
|
||||
<input type="tel" id="phone" name="phone" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;">
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Votre Message :</label>
|
||||
<textarea id="message" name="message" rows="6" required></textarea>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="message" style="display: block; margin-bottom: 5px;">Votre Message :</label>
|
||||
<textarea id="message" name="message" rows="6" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;"></textarea>
|
||||
</div>
|
||||
<button type="submit">Envoyer votre demande</button>
|
||||
<button type="submit" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">Envoyer Votre Demande</button>
|
||||
</form>
|
||||
|
||||
Nous avons hâte de collaborer avec vous pour améliorer la gestion de la petite enfance sur votre territoire !
|
||||
@@ -10,25 +10,21 @@ 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 :
|
||||
|
||||
{{% featureblock title="Pour les Parents et Assistantes Maternelles : Une expérience fluide et rassurante" %}}
|
||||
### 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 %}}
|
||||
|
||||
{{% featureblock title="Pour vos Gestionnaires RPE : Gagnez du temps et de la visibilité" %}}
|
||||
### 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 %}}
|
||||
|
||||
{{% featureblock title="Pour votre DSI et Direction : Une solution souveraine et maîtrisée" %}}
|
||||
### 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).
|
||||
@@ -36,18 +32,14 @@ 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 %}}
|
||||
|
||||
---
|
||||
|
||||
@@ -55,4 +47,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)
|
||||
[Contactez-nous pour échanger sur vos besoins spécifiques](/contact)
|
||||
@@ -3,32 +3,26 @@
|
||||
<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: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">
|
||||
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}">
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
@@ -49,9 +43,7 @@
|
||||
{{ end }}
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
@@ -65,19 +57,19 @@
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="theme-cahier-pop">
|
||||
<a class="skip-link" href="#contenu-principal">Aller au contenu</a>
|
||||
<header class="site-header">
|
||||
<div class="site-header__inner">
|
||||
<a class="site-logo" href="{{ "/" | relURL }}">P'titsPas</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>
|
||||
<header class="cp-header">
|
||||
<div class="cp-header__inner">
|
||||
<a class="cp-logo" href="{{ "/" | relURL }}">P'titsPas</a>
|
||||
<nav class="cp-nav" id="cp-nav" aria-label="Navigation principale">
|
||||
<button type="button" class="cp-nav-toggle" id="cp-nav-toggle" aria-expanded="false" aria-controls="cp-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="site-nav__panel" id="site-nav-panel">
|
||||
<ul class="site-nav__list">
|
||||
<div class="cp-nav-panel" id="cp-nav-panel">
|
||||
<ul class="cp-nav-list">
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
@@ -86,7 +78,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main id="contenu-principal" class="site-main">
|
||||
<main id="contenu-principal" class="cp-main">
|
||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="page-shell">
|
||||
<div class="cp-page">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="page-shell">
|
||||
<div class="cp-page">
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
+22
-33
@@ -1,45 +1,34 @@
|
||||
{{ define "main" }}
|
||||
<div class="home">
|
||||
<section class="home-hero">
|
||||
{{ partial "home-path-motif.html" . }}
|
||||
<div class="home-hero__inner">
|
||||
<div class="home-hero__media">
|
||||
<img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="1200" height="630" fetchpriority="high">
|
||||
</div>
|
||||
<div class="home-hero__copy">
|
||||
<h1 class="home-hero__title">{{ .Title }}</h1>
|
||||
{{ with .Params.hero_tagline }}<p class="accroche">{{ . }}</p>{{ end }}
|
||||
</div>
|
||||
<div class="cp-home">
|
||||
<section class="cp-hero">
|
||||
<figure class="cp-polaroid">
|
||||
<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">
|
||||
</figure>
|
||||
<div class="cp-hero-copy">
|
||||
<p class="cp-tagline">{{ .Params.hero_tagline | default "Service public numérique — petite enfance" }}</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="home-bento">
|
||||
<article class="home-card home-card--intro">
|
||||
<div class="cp-zine-grid">
|
||||
<div class="cp-panel cp-panel--mint">
|
||||
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
|
||||
</article>
|
||||
<aside class="home-card home-card--ethics" aria-label="Engagements">
|
||||
<h2 class="visually-hidden">Nos engagements</h2>
|
||||
<ol class="ethics-steps">
|
||||
</div>
|
||||
<div class="cp-panel">
|
||||
<div class="cp-stickers" aria-label="Engagements">
|
||||
{{ range .Params.ethics }}
|
||||
<li>
|
||||
<strong>{{ .title }}</strong>
|
||||
{{ .detail }}
|
||||
</li>
|
||||
<div class="cp-sticker"><strong>{{ .title }}</strong>{{ .detail }}</div>
|
||||
{{ end }}
|
||||
</ol>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="home-why">
|
||||
<div class="cp-band">
|
||||
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="home-cta" aria-labelledby="home-cta-title">
|
||||
<h2 id="home-cta-title" class="visually-hidden">Actions</h2>
|
||||
{{ with .Params.cta_title }}<h3>{{ . }}</h3>{{ end }}
|
||||
</div>
|
||||
<section class="cp-cta" aria-labelledby="cp-cta-title">
|
||||
<h2 id="cp-cta-title">{{ .Params.cta_title | default "Passer à l'action" }}</h2>
|
||||
<div>
|
||||
<a href="{{ "fonctionnalites" | relURL }}" class="cta-button">Voir les fonctionnalités clés</a>
|
||||
<a href="{{ "contact" | relURL }}" class="cta-button">Demander une démo</a>
|
||||
<a class="cp-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
|
||||
<a class="cp-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<footer class="footer-site">
|
||||
<p>© {{ now.Year }} P'titsPas — Tous droits réservés.</p>
|
||||
<nav class="footer-site__links" aria-label="Liens de pied de page">
|
||||
<footer class="cp-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 }}">Politique de confidentialité</a>
|
||||
<a href="{{ "politique-de-confidentialite" | relURL }}">Confidentialité</a>
|
||||
<a href="{{ "technique" | relURL }}">Données techniques</a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<img class="home-hero__motif home-hero__motif-img" src="{{ "images/motif-trajet.svg" | relURL }}" width="520" height="140" alt="" role="presentation" decoding="async">
|
||||
@@ -1,7 +0,0 @@
|
||||
{{- $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>
|
||||
@@ -1,7 +0,0 @@
|
||||
{{- $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>
|
||||
+341
-507
@@ -1,35 +1,20 @@
|
||||
/* Charte P'titsPas — vitrine modernisée (tokens + layout) */
|
||||
/* Proposition « Cahier pop » — néo-galet / fanzine (très différent de la vitrine classique) */
|
||||
|
||||
@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");
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@400;600;700;800&display=swap");
|
||||
|
||||
:root {
|
||||
--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;
|
||||
--ink: #14110f;
|
||||
--paper: #fffef7;
|
||||
--tape: #ffeb80;
|
||||
--mint-pop: #7dd3c0;
|
||||
--peach-pop: #ffb4a2;
|
||||
--lav-pop: #c4b5fd;
|
||||
--border: 3px solid var(--ink);
|
||||
--shadow-hard: 6px 6px 0 var(--ink);
|
||||
--shadow-soft: 4px 4px 0 rgba(20, 17, 15, 0.35);
|
||||
--font-display: "Syne", system-ui, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
||||
--nav-cut: 52rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -39,7 +24,6 @@
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,601 +37,451 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
body.theme-cahier-pop {
|
||||
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: linear-gradient(165deg, var(--color-blanc) 0%, var(--color-lavande) 35%, var(--color-menthe-claire) 100%);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1rem);
|
||||
line-height: 1.55;
|
||||
color: var(--ink);
|
||||
background-color: var(--paper);
|
||||
background-image:
|
||||
radial-gradient(circle at 12% 18%, rgba(255, 180, 162, 0.35) 0%, transparent 42%),
|
||||
radial-gradient(circle at 88% 8%, rgba(196, 181, 253, 0.4) 0%, transparent 38%),
|
||||
radial-gradient(circle at 1px 1px, rgba(20, 17, 15, 0.07) 1px, transparent 0);
|
||||
background-size: auto, auto, 18px 18px;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--color-menthe-claire);
|
||||
outline: 3px solid var(--mint-pop);
|
||||
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;
|
||||
z-index: 2000;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
left: var(--space-2);
|
||||
top: var(--space-2);
|
||||
left: 0.75rem;
|
||||
top: 0.75rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
/* Header */
|
||||
.cp-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);
|
||||
z-index: 100;
|
||||
background: var(--tape);
|
||||
border-bottom: var(--border);
|
||||
box-shadow: 0 4px 0 rgba(20, 17, 15, 0.12);
|
||||
}
|
||||
|
||||
.site-header__inner {
|
||||
max-width: var(--content-max);
|
||||
.cp-header__inner {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
min-height: var(--header-height);
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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);
|
||||
.cp-logo {
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
color: var(--ink);
|
||||
border: var(--border);
|
||||
padding: 0.35rem 0.65rem;
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-soft);
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
.site-logo:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-lien-hover);
|
||||
.cp-logo:hover {
|
||||
transform: rotate(0deg) translate(-2px, -2px);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
.cp-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
.cp-nav-toggle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
gap: 5px;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-blanc);
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.nav-toggle__bar {
|
||||
.cp-nav-toggle span {
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 2px;
|
||||
width: 1.1rem;
|
||||
height: 3px;
|
||||
margin: 0 auto;
|
||||
background: var(--color-texte-principal);
|
||||
border-radius: 1px;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.site-nav.is-open .nav-toggle__bar:nth-child(1) {
|
||||
transform: translateY(8px) rotate(45deg);
|
||||
.cp-nav-panel {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
.site-nav.is-open .nav-toggle__bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
.cp-nav.is-open .cp-nav-panel {
|
||||
max-height: 22rem;
|
||||
}
|
||||
|
||||
.site-nav.is-open .nav-toggle__bar:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
.cp-nav-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0.75rem 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-1);
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.site-nav__list a {
|
||||
display: block;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
.cp-nav-list a {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-texte-principal);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background-color 0.2s ease;
|
||||
color: var(--ink);
|
||||
border: var(--border);
|
||||
padding: 0.45rem 0.65rem;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.cp-nav-list a:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 5px 5px 0 var(--ink);
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
.nav-toggle {
|
||||
.cp-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.site-nav__panel {
|
||||
position: static;
|
||||
.cp-nav-panel {
|
||||
max-height: none !important;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
justify-content: flex-end;
|
||||
.cp-nav-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ——— Main ——— */
|
||||
.site-main {
|
||||
max-width: var(--content-max);
|
||||
@media (max-width: 51.99rem) {
|
||||
.cp-nav-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.35rem);
|
||||
left: 0;
|
||||
background: var(--paper);
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-hard);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.cp-nav-list {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main shell */
|
||||
.cp-main {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-4) var(--space-3) var(--space-5);
|
||||
padding: 1.5rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: var(--space-4);
|
||||
.cp-page {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-hard);
|
||||
padding: clamp(1.25rem, 3vw, 2.25rem);
|
||||
}
|
||||
|
||||
.page-shell .content {
|
||||
max-width: 52rem;
|
||||
.cp-page .content {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
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-lien);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-lien-hover);
|
||||
}
|
||||
|
||||
/* ——— 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);
|
||||
}
|
||||
|
||||
.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;
|
||||
/* Home */
|
||||
.cp-hero {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.home-hero__inner {
|
||||
grid-template-columns: 1fr 1.1fr;
|
||||
align-items: center;
|
||||
@media (min-width: 52rem) {
|
||||
.cp-hero {
|
||||
grid-template-columns: 1fr 1.05fr;
|
||||
}
|
||||
}
|
||||
|
||||
.home-hero__media {
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-soft);
|
||||
.cp-polaroid {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
padding: 0.75rem 0.75rem 2.25rem;
|
||||
box-shadow: var(--shadow-hard);
|
||||
transform: rotate(-2.2deg);
|
||||
max-width: 22rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.home-hero__media img {
|
||||
@media (min-width: 52rem) {
|
||||
.cp-polaroid {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-polaroid img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 22rem;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border: var(--border);
|
||||
}
|
||||
|
||||
.home-hero__title {
|
||||
margin-bottom: var(--space-2);
|
||||
.cp-hero-copy h1 {
|
||||
font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.85rem);
|
||||
line-height: 1.08;
|
||||
margin: 0 0 0.75rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.ethics-steps li {
|
||||
padding: var(--space-2);
|
||||
background: var(--color-blanc);
|
||||
border-radius: var(--radius-sm);
|
||||
border-left: 4px solid var(--color-rose-tendre);
|
||||
font-size: 0.95rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.ethics-steps strong {
|
||||
display: block;
|
||||
font-family: var(--font-body);
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.home-why {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.home-why :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.home-why :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home-cta {
|
||||
text-align: center;
|
||||
padding: var(--space-4);
|
||||
background: linear-gradient(135deg, var(--color-peche-doux), var(--color-rose-tendre));
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.home-cta h2,
|
||||
.home-cta h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.home-cta .cta-button {
|
||||
margin: var(--space-1);
|
||||
}
|
||||
|
||||
/* ——— Legacy / inner pages ——— */
|
||||
.logo-accueil img {
|
||||
width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin-bottom: var(--space-4);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.content-section {
|
||||
background: var(--color-surface);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="submit"],
|
||||
.cta-button {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 700;
|
||||
background: var(--color-peche-doux);
|
||||
color: var(--color-texte-principal);
|
||||
border: none;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
.cp-tagline {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
border: var(--border);
|
||||
display: inline-block;
|
||||
margin-top: var(--space-1);
|
||||
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||
box-shadow: var(--shadow-soft);
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: var(--lav-pop);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
.cta-button:hover {
|
||||
background: var(--color-rose-tendre);
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
.cta-button:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
form div {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
form input[type="text"],
|
||||
form input[type="email"],
|
||||
form input[type="tel"],
|
||||
form textarea {
|
||||
width: 100%;
|
||||
padding: var(--space-2);
|
||||
border: 1px solid color-mix(in srgb, var(--color-menthe-claire) 70%, var(--color-texte-principal));
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.site-form {
|
||||
max-width: 38rem;
|
||||
margin: var(--space-4) auto;
|
||||
padding: var(--space-4);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.site-form button[type="submit"] {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
/* ——— Feature sections (shortcodes) ——— */
|
||||
.feature-section {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-soft);
|
||||
padding: var(--space-4);
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.feature-section__title {
|
||||
margin: 0 0 var(--space-2);
|
||||
padding-bottom: var(--space-2);
|
||||
border-bottom: 2px solid var(--color-menthe-claire);
|
||||
}
|
||||
|
||||
.feature-section__body > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.feature-section__body > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
.cp-zine-grid {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin: var(--space-3) 0;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.feature-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.cp-zine-grid {
|
||||
grid-template-columns: 1.35fr 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);
|
||||
.cp-panel {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.feature-card__title {
|
||||
margin: 0 0 var(--space-1);
|
||||
font-size: 1rem;
|
||||
.cp-panel--mint {
|
||||
background: color-mix(in srgb, var(--mint-pop) 55%, #fff);
|
||||
}
|
||||
|
||||
.feature-card__body {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-texte-secondaire);
|
||||
}
|
||||
|
||||
/* ——— 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 {
|
||||
.cp-stickers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--space-2) var(--space-3);
|
||||
margin-top: var(--space-2);
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.footer-site__links a {
|
||||
color: var(--color-texte-principal);
|
||||
.cp-sticker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: var(--border);
|
||||
padding: 0.55rem 0.65rem;
|
||||
background: var(--peach-pop);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
transform: rotate(var(--rot, 0deg));
|
||||
}
|
||||
|
||||
.footer-site__links a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-lien-hover);
|
||||
.cp-sticker:nth-child(1) {
|
||||
--rot: -0.8deg;
|
||||
}
|
||||
|
||||
.cp-sticker:nth-child(2) {
|
||||
--rot: 1deg;
|
||||
background: var(--lav-pop);
|
||||
}
|
||||
|
||||
.cp-sticker:nth-child(3) {
|
||||
--rot: -0.4deg;
|
||||
background: var(--tape);
|
||||
}
|
||||
|
||||
.cp-sticker strong {
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.95rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.cp-band {
|
||||
border: var(--border);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: 1.5rem 1.25rem;
|
||||
box-shadow: var(--shadow-hard);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cp-band h2 {
|
||||
margin-top: 0;
|
||||
color: var(--tape);
|
||||
font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
|
||||
}
|
||||
|
||||
.cp-band a {
|
||||
color: var(--mint-pop);
|
||||
}
|
||||
|
||||
.cp-cta {
|
||||
text-align: center;
|
||||
border: var(--border);
|
||||
padding: 1.75rem 1rem;
|
||||
background: linear-gradient(135deg, var(--peach-pop), var(--tape));
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
.cp-cta h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cp-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
border: var(--border);
|
||||
padding: 0.65rem 1.1rem;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
margin: 0.35rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.cp-btn:hover {
|
||||
transform: translate(-3px, -3px);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
/* Legacy content pages */
|
||||
body.theme-cahier-pop .logo-accueil img {
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
body.theme-cahier-pop .content-section {
|
||||
border: var(--border);
|
||||
background: #fff;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
body.theme-cahier-pop h1,
|
||||
body.theme-cahier-pop h2,
|
||||
body.theme-cahier-pop h3 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
body.theme-cahier-pop a {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
body.theme-cahier-pop .cta-button {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
border: var(--border);
|
||||
background: var(--tape);
|
||||
color: var(--ink);
|
||||
padding: 0.6rem 1rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body.theme-cahier-pop .cta-button:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: var(--shadow-hard);
|
||||
}
|
||||
|
||||
body.theme-cahier-pop form input,
|
||||
body.theme-cahier-pop form textarea {
|
||||
border: var(--border);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
body.theme-cahier-pop button,
|
||||
body.theme-cahier-pop input[type="submit"] {
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-soft);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.cp-footer {
|
||||
border-top: var(--border);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cp-footer a {
|
||||
color: var(--mint-pop);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 257 B |
+7
-12
@@ -1,8 +1,7 @@
|
||||
(function () {
|
||||
var nav = document.getElementById("site-nav");
|
||||
var nav = document.getElementById("cp-nav");
|
||||
if (!nav) return;
|
||||
|
||||
var toggle = nav.querySelector(".nav-toggle");
|
||||
var toggle = document.getElementById("cp-nav-toggle");
|
||||
var mq = window.matchMedia("(max-width: 51.99rem)");
|
||||
|
||||
function setOpen(open) {
|
||||
@@ -18,12 +17,8 @@
|
||||
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();
|
||||
});
|
||||
}
|
||||
var first = nav.querySelector(".cp-nav-list a");
|
||||
if (first) requestAnimationFrame(function () { first.focus(); });
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -35,13 +30,13 @@
|
||||
}
|
||||
});
|
||||
|
||||
nav.querySelectorAll(".site-nav__list a").forEach(function (a) {
|
||||
nav.querySelectorAll(".cp-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);
|
||||
mq.addEventListener("change", function (ev) {
|
||||
if (!ev.matches) setOpen(false);
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user