/* ==========================================================================
DESIGN SYSTEM « PAPIER, ENCRE, IMAGE » — Entre Curieux × Remyaga
Fichier unique du site (remplace style.css, organic.css, services.css,
custom_mega.css). Documentation : Design Systhèm/design-system.md
Décisions validées (10/10/2026)
- Polices : Young Serif (grands titres, voix « on ») + Instrument Sans
(titres voix « je », petits titres, texte, interface). Auto-hébergées.
- Arrondis asymétriques conservés (--rayon).
- Jamais de texte orange sur fond clair : on surligne (.hl).
- Ombres pleines décalées (bas-droite), jamais floues sur les composants DS.
- Grain papier discret. Pas de mode sombre pour l'instant.
- Trait sapin clair (11/10/2026) : plus de trait encre. Cartes et blocs en
--trait-couleur, champs en --trait-champ, boutons sans trait (ombre orange).
Sommaire
01. Variables (couleurs, typo, espacements, mise en page, effets)
02. Alias de l'ancien système (rétrocompatibilité des pages)
03. Dialectes « je » / « on »
04. Base et accessibilité
05. Typographie
06. Mise en page : conteneurs, sections, grilles
07. Boutons
08. Formulaires et messages
09. Pastilles et étiquettes
10. Cartes
11. Témoignages
12. FAQ en accordéon
13. Piliers, étiquettes passerelles, surligneur
14. Header, navigation, méga-menu, menu mobile
15. Footer
16. Modale et pop-up newsletter
17. Composants de la page d'accueil (bento, éditorial, liste de services)
18. Icônes
19. Utilitaires, animations, cibles tactiles
========================================================================== */
/* ==========================================================================
01. VARIABLES
========================================================================== */
:root {
/* --- Couche PAPIER : fonds --- */
--papier: #FCFAF8;
--papier-2: #F2EFEA;
/* --- Couche ENCRE : textes, titres, boutons, traits, ombres --- */
--encre: #0B2F2A;
--encre-doux: rgba(11, 47, 42, 0.72); /* texte secondaire (contraste AA) */
--sapin: #00695C;
--sapin-fonce: #004D40;
--sapin-clair: #D5ECE9;
--orange: #FF9F1C; /* fonds, soulignés, ombres — jamais du texte sur fond clair */
--orange-fonce: #E68A00;
--orange-clair: #FFF5E6;
--creme: #FCFAF8; /* texte sur fond sapin */
/* --- Couche IMAGE : illustrations uniquement, jamais dans l'interface --- */
--petrole: #1F5F70;
--sauge: #9DB59A;
--moutarde: #E3A82B;
--corail: #EE6C55;
/* --- États --- */
--danger: #B3261E;
--danger-fond: #FBEAE8;
--succes: #2E7D32;
--succes-fond: #E8F3E9;
/* --- Marques tierces (couleurs officielles, hors charte) --- */
--brand-whatsapp: #25D366;
--brand-facebook: #1877F2;
--brand-instagram: #E1306C;
--brand-youtube: #FF0000;
--brand-linkedin: #0A66C2;
/* --- Traits --- */
--trait: 1.5px;
/* Trait sapin clair (validé le 11/10/2026) : remplace le trait encre des
cartes, blocs et images. Les champs de formulaire gardent un trait plus
foncé (contraste 3:1 exigé pour repérer un champ). */
--trait-couleur: #B7D8D3;
--trait-champ: #5E9C93;
--bordure: rgba(11, 47, 42, 0.12); /* séparateurs discrets */
--bordure-forte: rgba(11, 47, 42, 0.22);
/* --- Arrondis (asymétriques, validés) --- */
--rayon: 4px 12px 6px 10px;
--rayon-sm: 3px 8px 4px 7px;
--rayon-pill: 999px;
/* --- Ombres pleines décalées (bas-droite) --- */
--ombre-sm: 2px 2px 0 var(--ombre);
--ombre-md: 4px 4px 0 var(--ombre);
--ombre-lg: 6px 6px 0 var(--ombre);
--ombre-xl: 8px 8px 0 var(--ombre);
/* --- Typographie --- */
--font-display: "Young Serif", Georgia, serif;
--font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Échelle typographique : 9 tailles, fluides pour les titres */
--fs-xs: 0.8125rem; /* 13px mentions, étiquettes */
--fs-sm: 0.875rem; /* 14px texte secondaire */
--fs-base: 1rem; /* 16px texte courant */
--fs-md: 1.125rem; /* 18px chapô, texte mis en avant */
--fs-lg: 1.25rem; /* 20px h4, titres de cartes */
--fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* 22→28 h3 */
--fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem); /* 28→38 h2 */
--fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* 32→48 h1 de page */
--fs-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem); /* 36→56 h1 d'accueil */
--lh-serre: 1.15;
--lh-titre: 1.25;
--lh-texte: 1.65;
/* --- Espacements (base 4px) --- */
--esp-1: 4px;
--esp-2: 8px;
--esp-3: 12px;
--esp-4: 16px;
--esp-5: 24px;
--esp-6: 32px;
--esp-7: 48px;
--esp-8: 64px;
--esp-9: 96px;
--esp-10: 128px;
/* --- Mise en page ---
Points de rupture (à utiliser tels quels dans les @media, les variables
CSS n'y sont pas permises) :
600px : mobile → au-dessus, petite tablette
900px : tablette → navigation desktop au-dessus (synchro main.js)
1200px : desktop large */
--conteneur: 1200px;
--conteneur-large: 1300px;
--conteneur-texte: 720px;
--gouttiere: 24px;
--section: var(--esp-9); /* espacement vertical des sections */
--header-h: 80px;
/* --- Profondeurs --- */
--z-header: 1000;
--z-popup: 1500;
--z-modal: 2000;
/* --- Mouvement : déplacements « tampon » en steps() --- */
--duree: 0.12s;
--geste: steps(3);
/* --- Grain papier statique --- */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
/* --- Valeurs de dialecte par défaut (voix « on ») --- */
--fond: var(--papier);
--ombre: var(--sapin-clair);
--btn-fond: var(--sapin);
--btn-texte: var(--creme);
--btn-ombre: var(--orange);
}
@media (max-width: 900px) {
:root {
--gouttiere: 20px;
--section: var(--esp-8);
--header-h: 72px;
}
}
/* ==========================================================================
02. ALIAS DE L'ANCIEN SYSTÈME
Les pages contiennent encore des styles écrits en dur qui appellent les
anciennes variables. Elles pointent désormais vers les jetons du design
system. À supprimer quand plus aucune page ne les utilise.
========================================================================== */
:root {
--primary: var(--sapin);
--primary-hover: var(--sapin-fonce);
--primary-light: var(--sapin-clair);
--accent: var(--orange);
--accent-hover: var(--orange-fonce);
--accent-light: var(--orange-clair);
--success: var(--succes);
--bg-main: var(--papier-2);
--bg-white: var(--papier);
--text-dark: var(--encre);
--text-muted: var(--encre-doux);
--text-white: var(--creme);
--border: var(--bordure);
--border-strong: var(--bordure-forte);
--font-title: var(--font-ui); /* sert aussi au menu : jamais Young Serif */
--font-body: var(--font-ui);
--max-width: var(--conteneur);
--header-height: var(--header-h);
/* Anciennes ombres floues : adoucies et teintées encre en attendant la
migration des pages vers les ombres pleines. */
--shadow-sm: 0 2px 8px rgba(11, 47, 42, 0.05);
--shadow-md: 0 8px 20px rgba(11, 47, 42, 0.08);
--shadow-lg: 0 16px 40px rgba(11, 47, 42, 0.12);
--shadow-accent: 0 8px 24px rgba(255, 159, 28, 0.25);
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: var(--rayon-pill);
--transition: all 0.2s ease;
--tilt: 0deg;
}
/* Pages migrées : le fond principal redevient le papier clair */
:root[data-ds="migre"] {
--bg-main: var(--fond);
--bg-white: var(--fond);
}
/* ==========================================================================
03. DIALECTES
Bloc écrit au « je » → data-univers="remyaga" : calme, aéré, une idée à la fois.
Bloc écrit au « on » → data-univers="communaute" : dense, vivant, on teste et on ajuste.
Un seul dialecte dominant par section.
========================================================================== */
[data-univers="remyaga"] {
--fond: var(--papier);
--ombre: var(--sapin-clair);
--btn-fond: var(--sapin);
--btn-texte: var(--creme);
--btn-ombre: var(--orange);
}
[data-univers="communaute"] {
--fond: var(--papier-2);
--ombre: var(--sapin-clair);
--btn-fond: var(--orange);
--btn-texte: var(--encre);
--btn-ombre: var(--sapin);
}
/* ==========================================================================
04. BASE ET ACCESSIBILITÉ
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
scroll-padding-top: calc(var(--header-h) + var(--esp-4));
}
body {
font-family: var(--font-ui);
font-size: var(--fs-base);
line-height: var(--lh-texte);
color: var(--encre);
background: var(--papier) var(--grain);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
img {
max-width: 100%;
height: auto;
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
}
button {
background-color: transparent;
border: none;
color: inherit;
cursor: pointer;
}
.skip-link {
position: absolute;
top: -100px;
left: var(--esp-4);
background: var(--encre);
color: var(--creme);
padding: var(--esp-2) var(--esp-4);
border-radius: var(--rayon-sm);
z-index: 100000;
transition: top 0.2s;
}
.skip-link:focus { top: var(--esp-2); }
:focus-visible {
outline: 3px solid var(--sapin);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
}
/* ==========================================================================
05. TYPOGRAPHIE
- h1, h2 : Young Serif (voix « on », et par défaut). Une seule graisse (400).
- h1, h2 dans data-univers="remyaga" : Instrument Sans semi-gras.
- h3 à h6 : Instrument Sans gras.
Les !important neutralisent les graisses écrites en dur dans les pages.
========================================================================== */
h1, h2, h3, h4, h5, h6 {
line-height: var(--lh-titre);
color: var(--sapin);
}
h1, h2,
.pilier__num,
.about-punch,
.desktop-logo span,
.titre-display {
font-family: var(--font-display) !important;
font-weight: 400 !important;
font-synthesis: none; /* jamais de faux gras ni de faux italique */
letter-spacing: 0;
}
[data-univers="remyaga"] h1,
[data-univers="remyaga"] h2 {
font-family: var(--font-ui) !important;
font-weight: 650 !important;
letter-spacing: -0.02em;
}
h3, h4, h5, h6 {
font-family: var(--font-ui);
font-weight: 700 !important;
letter-spacing: -0.01em;
}
/* Exception assumée : la phrase de conviction d'À propos reste en Young Serif */
.about-punch {
font-family: var(--font-display) !important;
font-weight: 400 !important;
}
/* Tailles de référence (les pages migrées s'y alignent) */
.t-4xl { font-size: var(--fs-4xl); line-height: var(--lh-serre); }
.t-3xl { font-size: var(--fs-3xl); line-height: var(--lh-serre); }
.t-2xl { font-size: var(--fs-2xl); line-height: var(--lh-titre); }
.t-xl { font-size: var(--fs-xl); line-height: var(--lh-titre); }
.t-lg { font-size: var(--fs-lg); }
.t-md { font-size: var(--fs-md); }
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }
.t-doux { color: var(--encre-doux); }
.chapo {
font-size: var(--fs-md);
line-height: 1.6;
color: var(--encre-doux);
max-width: 62ch;
}
/* Sur-titre façon magazine */
.folio {
font-family: var(--font-ui);
font-variant-caps: all-small-caps;
font-weight: 700;
letter-spacing: 0.1em;
font-size: var(--fs-base);
color: var(--encre);
margin: 0 0 var(--esp-3);
}
/* ==========================================================================
06. MISE EN PAGE
========================================================================== */
.container {
width: 100%;
max-width: var(--conteneur);
margin: 0 auto;
padding: 0 var(--gouttiere);
position: relative;
}
.container--large { max-width: var(--conteneur-large); }
.container--texte { max-width: var(--conteneur-texte); }
section {
padding: var(--section) 0;
position: relative;
overflow: hidden;
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--esp-8);
}
.section-header h2 {
font-size: var(--fs-2xl);
margin-bottom: var(--esp-4);
}
.section-header p {
font-size: var(--fs-md);
color: var(--encre-doux);
}
.grid {
display: grid;
gap: var(--esp-6);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.section-header { margin-bottom: var(--esp-7); }
}
@media (max-width: 600px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* Transition « papier déchiré » entre deux univers */
.torn-paper-divider {
width: 100%;
height: 40px;
background: var(--papier-2);
position: relative;
z-index: 10;
margin-top: -20px;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-size: cover;
-webkit-mask-size: cover;
}
.torn-paper-divider.reverse {
background: var(--papier);
transform: rotate(180deg);
}
/* ==========================================================================
07. BOUTONS
Primaire (.btn ou .btn-primary) : couleurs du dialecte, trait encre,
ombre pleine décalée, effet « tampon » au clic.
Secondaire (.btn-secondary) : fond papier, même forme.
Désactivé : bordure en tirets, sans ombre.
========================================================================== */
.btn,
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-2);
min-height: 48px;
padding: 14px 28px;
font-family: var(--font-ui);
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
color: var(--btn-texte);
background-color: var(--btn-fond);
border: var(--trait) solid transparent;
border-radius: var(--rayon);
box-shadow: 4px 4px 0 var(--btn-ombre);
transition: transform var(--duree) var(--geste), box-shadow var(--duree) var(--geste);
}
.btn:hover,
.btn-primary:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--btn-ombre);
color: var(--btn-texte);
}
.btn:active,
.btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0 0 0 var(--btn-ombre);
}
.btn i, .btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn-secondary,
.btn.btn-secondary {
border-color: var(--sapin);
--btn-fond: var(--papier);
--btn-texte: var(--encre);
--btn-ombre: var(--orange);
}
/* Variante accent : fond orange (texte encre) */
.btn-accent {
--btn-fond: var(--orange);
--btn-texte: var(--encre);
--btn-ombre: var(--sapin);
}
/* Tailles */
.btn--petit { padding: 8px 16px; font-size: var(--fs-sm); }
.btn--grand { padding: 16px 32px; font-size: var(--fs-md); }
.btn--grand svg { width: 20px; height: 20px; }
.btn[aria-disabled="true"],
.btn:disabled {
border-style: dashed;
box-shadow: none;
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn--sm {
min-height: 40px;
padding: 8px 16px;
font-size: var(--fs-sm);
}
.btn--bloc {
width: 100%;
}
.hero-buttons {
display: flex;
gap: var(--esp-4);
align-items: center;
flex-wrap: wrap;
}
/* ==========================================================================
08. FORMULAIRES ET MESSAGES
Structure : .form-group > label + .form-control (input, select, textarea)
États : :focus, .is-invalid (+ .form-error), .form-success
========================================================================== */
input, select, textarea {
color: var(--encre);
background-color: var(--papier);
border: 1.5px solid var(--bordure-forte);
border-radius: var(--rayon-sm);
}
input::placeholder,
textarea::placeholder {
color: var(--encre-doux);
opacity: 1;
}
input:focus, select:focus, textarea:focus {
border-color: var(--sapin);
outline: none;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.18);
}
.form-group {
margin-bottom: var(--esp-5);
}
.form-group label,
.form-label {
display: block;
font-weight: 600;
font-size: var(--fs-sm);
margin-bottom: var(--esp-2);
color: var(--encre);
}
.form-control {
width: 100%;
min-height: 48px;
padding: 12px 16px;
font-size: var(--fs-base);
color: var(--encre);
background-color: var(--papier);
border: var(--trait) solid var(--trait-champ);
border-radius: var(--rayon-sm);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.form-control:focus {
border-color: var(--sapin);
box-shadow: 3px 3px 0 var(--sapin);
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.form-help {
font-size: var(--fs-xs);
color: var(--encre-doux);
margin-top: var(--esp-1);
}
/* Erreur */
.form-control.is-invalid,
.form-control[aria-invalid="true"] {
border-color: var(--danger);
background-color: var(--danger-fond);
}
.form-error {
display: flex;
align-items: center;
gap: var(--esp-2);
margin-top: var(--esp-2);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--danger);
}
/* Messages de retour (envoi réussi / échec) */
.form-success,
.form-message {
padding: var(--esp-3) var(--esp-4);
border: var(--trait) solid var(--succes);
border-radius: var(--rayon-sm);
background: var(--succes-fond);
color: var(--succes);
font-weight: 600;
font-size: var(--fs-sm);
}
.form-message--erreur {
border-color: var(--danger);
background: var(--danger-fond);
color: var(--danger);
}
/* Formulaire en ligne (e-mail + bouton) */
.form-inline {
display: flex;
gap: var(--esp-3);
flex-wrap: wrap;
}
.form-inline .form-control {
flex: 1 1 220px;
}
@media (max-width: 600px) {
.form-inline { flex-direction: column; }
.form-inline .btn { width: 100%; }
}
/* ==========================================================================
09. PASTILLES ET ÉTIQUETTES
.pastille : catégorie, compétence, filtre (petites capitales, trait encre)
.tampon : étiquette posée de travers sur une carte ou une image
.badge : ancien nom, aligné sur .pastille
========================================================================== */
.pastille,
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
color: var(--encre);
background: var(--papier);
border: 1.5px solid var(--trait-couleur);
border-radius: var(--rayon-pill);
box-shadow: 2px 2px 0 var(--encre);
}
.badge { margin-bottom: var(--esp-4); }
.pastille--sapin,
.badge--sapin { background: var(--sapin-clair); }
.pastille--orange,
.badge--orange { background: var(--orange); }
.pastille--plate { box-shadow: none; }
.tampon {
display: inline-block;
padding: 4px 12px;
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1.2;
color: var(--encre);
background: var(--orange);
border: var(--trait) solid var(--trait-couleur);
transform: rotate(-3deg);
}
/* ==========================================================================
10. CARTES
.carte : fond papier, trait encre, ombre pleine du dialecte.
.carte--lien : carte entièrement cliquable qui se décolle au survol.
.card (ancien nom) : conservée le temps de la migration.
========================================================================== */
.carte {
position: relative;
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: var(--ombre-lg);
padding: var(--esp-6);
}
.carte--lien {
transition: transform 0.15s var(--geste), box-shadow 0.15s var(--geste);
}
.carte--lien:hover,
.carte--lien:focus-within {
transform: translate(-2px, -2px);
box-shadow: var(--ombre-xl);
}
.carte--plate { box-shadow: none; }
.carte--sapin {
background: var(--sapin);
color: var(--creme);
--ombre: var(--orange);
}
.carte--sapin h2,
.carte--sapin h3,
.carte--sapin h4 { color: var(--creme); }
.card {
background-color: var(--bg-white);
border-radius: var(--radius-md);
padding: var(--esp-6);
box-shadow: var(--shadow-sm);
border: 1px solid var(--bordure);
transition: var(--transition);
position: relative;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.card-icon {
width: 56px;
height: 56px;
border-radius: var(--rayon-sm);
background-color: var(--sapin-clair);
color: var(--sapin);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--esp-5);
}
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--esp-3); }
.card p { color: var(--encre-doux); font-size: 15px; margin-bottom: var(--esp-5); }
/* ==========================================================================
11. TÉMOIGNAGES
Structure : .testi-grid > figure.testi-card > .testi-stars + blockquote
+ figcaption > .testi-avatar + nom / .testi-role
========================================================================== */
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--esp-6);
}
.testi-card {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--esp-5);
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--sapin);
padding: 28px;
}
.testi-stars {
color: var(--orange);
-webkit-text-stroke: 0.8px var(--encre); /* contour : lisible sur papier */
font-size: 18px;
letter-spacing: 2px;
}
.testi-card blockquote {
margin: 0;
flex-grow: 1;
font-size: 15px;
line-height: 1.7;
color: var(--encre);
}
.testi-card figcaption {
display: flex;
align-items: center;
gap: var(--esp-3);
font-size: 15px;
color: var(--encre);
}
.testi-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--creme);
font-weight: 800;
background: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
}
.testi-role {
font-size: var(--fs-xs);
color: var(--encre-doux);
}
@media (max-width: 900px) {
.testi-grid { grid-template-columns: 1fr; gap: var(--esp-5); }
}
/* ==========================================================================
12. FAQ EN ACCORDÉON (sans JavaScript)
Structure : .faq > details.faq__item > summary.faq__q + .faq__a
========================================================================== */
.faq {
display: flex;
flex-direction: column;
gap: var(--esp-3);
max-width: 820px;
margin: 0 auto;
}
.faq__item {
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 3px 3px 0 var(--ombre);
}
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--esp-4);
min-height: 56px;
padding: var(--esp-4) var(--esp-5);
font-weight: 700;
font-size: var(--fs-base);
color: var(--encre);
cursor: pointer;
list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
content: "+";
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
border: 1.5px solid var(--trait-couleur);
border-radius: 50%;
transition: transform var(--duree) var(--geste);
}
.faq__item[open] .faq__q::after {
content: "−";
background: var(--orange);
}
.faq__a {
padding: 0 var(--esp-5) var(--esp-5);
color: var(--encre-doux);
line-height: 1.7;
}
/* ==========================================================================
13. PILIERS, ÉTIQUETTES PASSERELLES, SURLIGNEUR
========================================================================== */
/* Surligneur : remplace le texte orange (contraste 2:1, illisible) */
.hl {
background: linear-gradient(100deg, transparent 0 1%, var(--orange) 1% 99%, transparent 99%) 0 88% / 100% 58% no-repeat;
color: var(--encre);
padding: 0 0.2em;
margin: 0 -0.1em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Piliers de la communauté */
.piliers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--esp-5);
margin-top: var(--esp-7);
}
@media (max-width: 1200px) {
.piliers-grid { grid-template-columns: repeat(2, 1fr); gap: var(--esp-6); }
}
@media (max-width: 600px) {
.piliers-grid { grid-template-columns: 1fr; gap: var(--esp-5); }
}
.pilier {
overflow: hidden;
--tilt: 0deg;
position: relative;
padding: var(--esp-6) var(--esp-5);
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: 16px;
box-shadow: 6px 6px 0 var(--sapin);
transform: rotate(var(--tilt));
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
}
@media (min-width: 1201px) {
.pilier:nth-child(2) { --tilt: 1.5deg; margin-top: 24px; box-shadow: 6px 6px 0 var(--orange); }
.pilier:nth-child(3) { --tilt: -1deg; margin-top: 8px; box-shadow: 6px 6px 0 var(--sapin); }
.pilier:nth-child(4) { --tilt: 2deg; margin-top: 32px; box-shadow: 6px 6px 0 var(--orange); }
}
.pilier:hover {
transform: rotate(0) translate(-4px, -4px);
box-shadow: 10px 10px 0 var(--orange);
z-index: 10;
}
.pilier:nth-child(even):hover { box-shadow: 10px 10px 0 var(--sapin); }
.pilier h4 {
font-size: var(--fs-lg);
color: var(--encre);
margin-bottom: var(--esp-3);
}
.pilier h4 .surligne {
background-color: var(--orange);
color: var(--encre);
padding: 2px 8px;
border-radius: 4px;
display: inline-block;
}
.pilier p {
font-size: 15px;
color: var(--encre);
opacity: 0.85;
line-height: 1.6;
}
/* Numéro avec défaut de repérage (contour sapin + double orange décalé) */
.pilier__num {
position: relative;
display: block;
font-size: 64px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 2px var(--sapin);
margin-bottom: var(--esp-3);
isolation: isolate;
}
.pilier__num::after {
content: attr(data-n);
position: absolute;
inset: 0;
color: var(--orange);
-webkit-text-stroke: 0;
transform: translate(3px, 3px);
z-index: -1;
}
/* Repli « Lire la suite » */
.pilier details {
margin-top: auto;
padding-top: var(--esp-2);
font-size: 15px;
}
.pilier summary,
.lire {
cursor: pointer;
font-weight: 700;
color: var(--encre);
text-decoration: underline wavy var(--orange);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
list-style: none;
}
.pilier summary::-webkit-details-marker { display: none; }
.pilier details[open] summary { margin-bottom: var(--esp-2); }
.pilier details p { margin: 0; }
/* Étiquette passerelle : relie les deux univers */
.sticker {
display: inline-flex;
align-items: center;
gap: 0.4em;
min-height: 44px;
padding: 0.45rem 1rem;
border: var(--trait) dashed var(--trait-couleur);
border-radius: 14px 4px 12px 6px;
transform: rotate(-2deg);
font: 700 0.98rem/1.2 var(--font-ui);
color: var(--encre);
text-decoration: none;
background: var(--papier);
transition: transform var(--duree) var(--geste);
}
.sticker:hover { transform: rotate(0deg) translate(-1px, -1px); }
.sticker-row { margin-top: 40px; }
/* Lien de navigation dans le contenu (« Voir mes réalisations → ») */
.lien-fleche {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
font-weight: 700;
color: var(--sapin);
text-decoration: none;
}
.lien-fleche:hover,
.lien-fleche:focus-visible {
text-decoration: underline wavy var(--orange);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
/* Petite mention rassurante sous un bouton */
.reassure {
display: block;
margin-top: 10px;
font-size: var(--fs-sm);
font-weight: 500;
opacity: 0.85;
}
/* ==========================================================================
14. HEADER, NAVIGATION, MÉGA-MENU, MENU MOBILE
Le basculement desktop / tiroir mobile se fait à 900px (synchro avec
MOBILE_NAV_BREAKPOINT dans main.js).
========================================================================== */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-h);
display: flex;
align-items: center;
z-index: var(--z-header);
background-color: rgba(252, 250, 248, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--bordure);
transition: border-color 0.2s ease;
}
.header.scrolled { border-bottom-color: var(--trait-couleur); }
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
max-width: var(--conteneur-large);
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: var(--esp-2);
color: var(--encre);
text-decoration: none;
}
.logo-img { height: 36px; width: auto; display: block; }
.desktop-logo { gap: var(--esp-3); }
.desktop-logo .logo-img { height: 32px; }
.desktop-logo span {
color: var(--encre) !important;
font-size: 21px;
line-height: 1;
white-space: nowrap;
}
/* Entrée de la page en cours (classe posée par build.js via data-pages) */
.nav-item.is-current > a:not(.btn) {
color: var(--sapin);
text-decoration: underline wavy var(--orange);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
/* Liens */
.nav-item { list-style: none; }
.nav-item a {
display: block;
padding: var(--esp-2) var(--esp-4);
font-family: var(--font-ui);
font-weight: 600;
font-size: 15px;
color: var(--encre);
white-space: nowrap;
}
.nav-links .nav-item:not(.cta-btn) > a:not(.btn):hover,
.nav-links .nav-item:not(.cta-btn) > a:not(.btn):focus-visible,
.nav-item:not(.cta-btn) .active-link {
color: var(--sapin);
text-decoration: underline wavy var(--orange);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.nav-item .active-link { font-weight: 700; }
/* Bouton « Rejoindre » du menu */
.nav-item.cta-btn a {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 8px 20px;
font-weight: 700;
color: var(--creme);
background-color: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 3px 3px 0 var(--orange);
text-decoration: none;
transition: transform var(--duree) var(--geste), box-shadow var(--duree) var(--geste);
}
.nav-item.cta-btn a:hover {
color: var(--creme);
text-decoration: none;
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0 var(--orange);
}
/* Desktop */
@media (min-width: 901px) {
.mobile-logo { display: none !important; }
.nav-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.nav-group {
display: flex;
align-items: center;
gap: var(--esp-6);
margin: 0;
padding: 0;
}
.nav-left { flex: 1; display: flex; justify-content: flex-start; }
.nav-center { flex: 0 1 auto; display: flex; justify-content: center; gap: var(--esp-2); }
.nav-right { flex: 1; display: flex; justify-content: flex-end; }
.hamburger { display: none; }
/* Clavier : un sous-menu s'ouvre aussi quand le focus est à l'intérieur */
.mega-menu-wrapper:focus-within .mega-menu-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-centered:focus-within .cf-mega-panel-centered {
transform: translateX(-50%) translateY(0);
}
}
/* Entre 901 et 1150px : menu resserré pour tenir sur une ligne */
@media (min-width: 901px) and (max-width: 1150px) {
/* Les panneaux se centrent sous le header (et non sous leur bouton) pour
ne pas sortir de l'écran. */
.nav-item.mega-centered { position: static; }
.nav-item a { padding: var(--esp-2) 10px; font-size: 14px; }
.desktop-logo span { font-size: 18px; }
.nav-item.cta-btn a { padding: 8px 14px; }
}
/* Mobile : tiroir latéral */
@media (max-width: 900px) {
.desktop-logo { display: none !important; }
.nav-wrapper {
position: fixed;
top: 0;
right: -100%;
width: 340px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
background: var(--papier) var(--grain);
border-left: var(--trait) solid var(--trait-couleur);
box-shadow: 0 0 0 10000px rgba(11, 47, 42, 0);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 112px var(--esp-6) var(--esp-6);
transition: right 0.35s cubic-bezier(0.77, 0, 0.175, 1), box-shadow 0.35s ease;
z-index: var(--z-header);
overflow-y: auto;
}
.nav-wrapper.open {
right: 0;
box-shadow: 0 0 0 10000px rgba(11, 47, 42, 0.5);
}
.nav-group {
display: flex;
flex-direction: column;
gap: 0;
align-items: flex-start;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
.nav-item { width: 100%; }
.nav-item a {
font-size: 22px;
font-weight: 600;
padding: var(--esp-3) 0;
width: 100%;
}
.nav-links .nav-item:not(.cta-btn) > a:not(.btn):hover { padding-left: var(--esp-2); }
.nav-item.cta-btn { margin-top: var(--esp-6); }
.nav-item.cta-btn a {
width: 100%;
justify-content: center;
font-size: var(--fs-md);
padding: 16px 24px;
}
.hamburger {
display: block;
position: relative;
z-index: calc(var(--z-header) + 1);
padding: 10px;
min-width: 48px;
min-height: 48px;
}
.hamburger span {
display: block;
width: 28px;
height: 3px;
margin: 6px 0;
background-color: var(--encre);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}
/* Méga-menu : panneau commun */
.mega-menu-wrapper { position: relative; }
.mega-menu-wrapper::after { /* pont invisible entre le lien et le panneau */
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 30px;
}
.mega-centered { position: relative; }
.mega-full-width { position: static !important; }
.mega-menu-panel {
position: absolute;
top: 100%;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 100;
}
.mega-menu-wrapper:hover .mega-menu-panel,
.mega-menu-wrapper.active .mega-menu-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cf-mega-panel {
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--sapin);
margin-top: 10px;
overflow: hidden;
}
.cf-mega-panel-centered {
left: 50%;
transform: translateX(-50%) translateY(10px);
width: max-content;
min-width: 500px;
}
.mega-centered:hover .cf-mega-panel-centered,
.mega-centered.active .cf-mega-panel-centered {
transform: translateX(-50%) translateY(0);
}
.cf-mega-panel-centered-large {
width: 900px;
min-width: 900px;
max-width: 90vw;
}
/* Largeurs fixes des autres panneaux (sinon ils s'étirent sur la longueur des descriptions) */
.cf-mega-panel--m { width: 720px; min-width: 0; max-width: 90vw; }
.cf-mega-panel--s { width: 560px; min-width: 0; max-width: 90vw; }
.cf-mega-grid { display: grid; background: transparent; }
.cf-mega-3-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-mega-2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Les liens du méga-menu ne doivent pas hériter du display:block / nowrap
des liens de premier niveau (.nav-item a, plus prioritaire). */
.nav-item a.cf-mega-link,
.nav-item a.cf-mega-cta {
display: flex;
white-space: normal;
}
.cf-mega-col {
padding: var(--esp-5);
display: flex;
flex-direction: column;
gap: var(--esp-3);
border-right: 1.5px dashed var(--bordure-forte);
}
.cf-mega-col:last-child { border-right: none; }
.cf-mega-link {
display: flex;
align-items: flex-start;
gap: var(--esp-4);
padding: var(--esp-3);
border-radius: var(--rayon-sm);
text-decoration: none;
transition: background-color 0.15s ease;
}
.nav-item .cf-mega-link { white-space: normal; }
.cf-mega-link:hover { background-color: var(--papier-2); }
.cf-mega-link:hover .cf-mega-title {
text-decoration: underline wavy var(--orange);
text-underline-offset: 4px;
}
.cf-mega-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
color: var(--sapin);
}
.cf-mega-content {
display: flex;
flex-direction: column;
gap: var(--esp-1);
}
.cf-mega-title {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
color: var(--encre);
}
.cf-mega-desc {
font-size: var(--fs-xs);
line-height: 1.4;
color: var(--encre-doux);
}
/* Carte d'appel à l'action dans un méga-menu (ex. appel découverte) */
.cf-mega-cta {
display: flex;
flex-direction: column;
gap: var(--esp-2);
height: 100%;
padding: var(--esp-5);
color: var(--creme);
background: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 4px 4px 0 var(--orange);
text-decoration: none;
white-space: normal;
transition: transform var(--duree) var(--geste), box-shadow var(--duree) var(--geste);
}
.nav-item a.cf-mega-cta { color: var(--creme); padding: var(--esp-5); }
.cf-mega-cta:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--orange);
text-decoration: none;
}
.cf-mega-cta__label {
font-family: var(--font-display);
font-size: 20px;
line-height: 1.2;
}
.cf-mega-cta__text {
font-size: var(--fs-sm);
line-height: 1.45;
opacity: 0.9;
}
.cf-mega-cta__lien {
margin-top: auto;
font-weight: 700;
font-size: var(--fs-sm);
text-decoration: underline wavy var(--orange);
text-underline-offset: 4px;
}
.cf-mega-featured-card {
display: block;
margin-top: var(--esp-2);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon-sm);
overflow: hidden;
transition: transform var(--duree) var(--geste), box-shadow var(--duree) var(--geste);
}
.cf-mega-featured-card:hover {
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--orange);
}
.cf-mega-featured-img-wrapper {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
}
.cf-mega-featured-img { width: 100%; height: 100%; object-fit: cover; }
.cf-mega-featured-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 105, 92, 0.8), transparent);
}
.cf-mega-whatsapp-badge {
position: absolute;
bottom: var(--esp-3);
left: var(--esp-3);
display: flex;
align-items: center;
gap: var(--esp-1);
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: var(--brand-whatsapp);
border-radius: var(--rayon-pill);
}
/* Méga-menu en accordéon dans le tiroir mobile */
@media (max-width: 900px) {
.mega-menu-panel {
position: relative !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
transform: none !important;
padding: 0 !important;
display: none;
}
.mega-menu-wrapper.active .mega-menu-panel { display: block; }
.cf-mega-panel,
.cf-mega-panel-centered,
.cf-mega-panel-centered-large {
border: none;
box-shadow: none;
margin-top: 0;
border-radius: 0;
background: transparent;
left: 0 !important;
transform: none !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
.cf-mega-grid { grid-template-columns: 1fr !important; }
.cf-mega-col {
border-right: none;
border-bottom: 1.5px dashed var(--bordure-forte);
padding: var(--esp-3) 0;
}
.cf-mega-col:last-child { border-bottom: none; }
.nav-item a.cf-mega-link {
font-size: var(--fs-base);
padding: var(--esp-2);
}
}
/* ==========================================================================
15. FOOTER
========================================================================== */
.footer {
background: var(--papier-2) var(--grain);
color: var(--encre-doux);
padding: var(--esp-8) 0 var(--esp-6);
border-top: var(--trait) solid var(--trait-couleur);
}
.footer h6 {
color: var(--encre);
font-size: var(--fs-base);
margin-bottom: var(--esp-5);
}
.footer-top { margin-bottom: var(--esp-7); }
.footer-bio {
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--encre-doux);
margin-bottom: var(--esp-4);
}
.footer-more {
font-size: var(--fs-sm);
font-weight: 700;
color: var(--sapin);
}
.footer-more:hover {
text-decoration: underline wavy var(--orange);
text-underline-offset: 4px;
}
a.contact-item { color: inherit; text-decoration: none; }
a.contact-item:hover .contact-icon { box-shadow: 3px 3px 0 var(--orange); }
a.contact-item:hover .value { color: var(--sapin); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--esp-3); }
.footer-links a,
.footer-legal-links a {
color: var(--encre-doux);
font-size: 15px;
}
.footer-links a:hover,
.footer-legal-links a:hover {
color: var(--sapin);
text-decoration: underline wavy var(--orange);
text-underline-offset: 4px;
}
.footer-middle {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--esp-5);
padding: var(--esp-5) 0;
border-top: 1.5px dashed var(--bordure-forte);
border-bottom: 1.5px dashed var(--bordure-forte);
}
.footer-contact-text h6 { margin-bottom: var(--esp-2); font-size: var(--fs-md); }
.footer-contact-text p { font-size: 15px; color: var(--encre-doux); margin: 0; }
.footer-contact-items {
display: flex;
gap: var(--esp-7);
flex-wrap: wrap;
}
.contact-item {
display: flex;
align-items: center;
gap: var(--esp-4);
}
.contact-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--encre);
background: var(--papier);
border: 1.5px solid var(--trait-couleur);
border-radius: var(--rayon-sm);
box-shadow: 2px 2px 0 var(--encre);
}
.contact-icon i { width: 20px; height: 20px; }
.contact-info { display: flex; flex-direction: column; }
.contact-info .label {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--encre);
margin-bottom: var(--esp-1);
}
.contact-info .value { font-size: var(--fs-sm); color: var(--encre-doux); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--esp-5);
padding-top: var(--esp-6);
font-size: var(--fs-sm);
}
.footer-copyright { color: var(--encre-doux); min-width: 0; }
.footer-socials { display: flex; gap: var(--esp-3); }
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: var(--esp-2) var(--esp-5);
min-width: 0;
}
/* Icône de réseau social (carré, trait encre) */
.social-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--encre);
background: var(--papier);
border: 1.5px solid var(--trait-couleur);
border-radius: var(--rayon-sm);
box-shadow: 2px 2px 0 var(--encre);
transition: transform var(--duree) var(--geste), box-shadow var(--duree) var(--geste);
}
.social-icon i,
.social-icon svg {
font-size: 16px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--encre);
}
.social-icon:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--orange);
}
@media (max-width: 900px) {
.footer-middle { flex-direction: column; align-items: flex-start; }
.footer-contact-items { flex-direction: column; gap: var(--esp-5); }
.footer-bottom {
flex-direction: column;
text-align: center;
justify-content: center;
}
.footer-legal-links,
.footer-socials { justify-content: center; }
.footer-socials { width: 100%; margin-bottom: var(--esp-4); }
.footer-top.grid-4,
.footer-top.grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 40px 20px !important;
}
}
@media (max-width: 600px) {
.footer-top.grid-4,
.footer-top.grid { gap: 32px 20px !important; }
.footer-top.grid-4 > :first-child,
.footer-top.grid > :first-child { grid-column: 1 / -1; }
}
/* ==========================================================================
16. MODALE ET POP-UP NEWSLETTER
========================================================================== */
.modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.modal.active { opacity: 1; pointer-events: all; }
.modal-overlay {
position: absolute;
inset: 0;
background-color: rgba(11, 47, 42, 0.6);
}
.modal-container {
position: relative;
z-index: calc(var(--z-modal) + 1);
width: 90%;
max-width: 500px;
padding: var(--esp-7) var(--esp-6) var(--esp-6);
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 8px 8px 0 var(--sapin);
transform: translateY(16px);
transition: transform 0.2s ease;
}
.modal.active .modal-container { transform: translateY(0); }
.modal-close {
position: absolute;
top: var(--esp-4);
right: var(--esp-4);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--encre);
border: 1.5px solid var(--trait-couleur);
border-radius: 50%;
background: var(--papier);
}
.modal-close:hover { background: var(--orange); }
.modal-header h3 { margin-bottom: var(--esp-3); color: var(--encre); }
.modal-header p {
font-size: var(--fs-sm);
color: var(--encre-doux);
margin-bottom: var(--esp-5);
}
.newsletter-popup {
position: fixed;
bottom: 30px;
right: 30px;
width: 420px;
max-width: calc(100vw - 40px);
padding: var(--esp-6);
color: var(--creme);
background-color: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--orange);
z-index: var(--z-popup);
transform: translateY(150px);
opacity: 0;
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.newsletter-popup.active {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
.newsletter-popup h4 {
color: var(--creme);
font-size: var(--fs-lg);
margin-bottom: var(--esp-3);
padding-right: var(--esp-5);
}
.newsletter-popup p {
font-size: var(--fs-sm);
color: rgba(252, 250, 248, 0.9);
margin-bottom: var(--esp-5);
line-height: 1.5;
}
.popup-close {
position: absolute;
top: var(--esp-4);
right: var(--esp-4);
color: rgba(252, 250, 248, 0.8);
}
.popup-close:hover { color: var(--orange); }
.popup-avatar {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--esp-5);
color: var(--encre);
background: var(--orange);
border: var(--trait) solid var(--trait-couleur);
border-radius: 50%;
}
.popup-avatar i { width: 24px; height: 24px; stroke-width: 2.5; }
.popup-input-group {
display: flex;
gap: var(--esp-2);
align-items: stretch;
}
.popup-input-group input[type="email"] {
flex: 1;
min-width: 0;
min-height: 46px;
padding: 10px 14px;
font-size: var(--fs-sm);
color: var(--encre);
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon-sm);
}
.popup-input-group button[type="submit"] {
--btn-fond: var(--orange);
--btn-texte: var(--encre);
--btn-ombre: var(--encre);
min-height: 46px;
padding: 10px 18px;
font-size: var(--fs-sm);
white-space: nowrap;
box-shadow: 3px 3px 0 var(--encre);
}
@media (max-width: 600px) {
.newsletter-popup {
bottom: 0;
right: 0;
width: 100%;
max-width: 100%;
border-radius: var(--rayon) var(--rayon) 0 0;
border-bottom: none;
box-shadow: 0 -4px 0 var(--orange);
transform: translateY(100%);
padding: var(--esp-5);
}
.newsletter-popup.active { transform: translateY(0); }
.popup-input-group { flex-direction: column; }
.popup-input-group button[type="submit"] { width: 100%; }
}
/* ==========================================================================
17. COMPOSANTS DE LA PAGE D'ACCUEIL
========================================================================== */
/* Bento « Comment Entre Curieux t'aide » */
.bento-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--esp-5);
margin-top: var(--esp-7);
}
.bento-card {
position: relative;
padding: var(--esp-6);
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: 16px;
box-shadow: 4px 4px 0 var(--ombre);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bento-card:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--ombre);
}
.bento-card.large {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--esp-7);
overflow: hidden;
color: var(--creme);
background: var(--sapin);
--ombre: var(--orange);
}
.bento-card.large h3 { color: var(--creme); font-size: 28px; }
.bento-card.large p { color: var(--creme); font-size: var(--fs-base); font-weight: 400; opacity: 0.9; }
.bento-card.large .btn { margin-top: auto; align-self: flex-start; }
/* Colonne du formulaire newsletter dans la grande carte */
.bento-cta {
flex: 0 0 340px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 900px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-card.large {
flex-direction: column;
align-items: stretch;
gap: var(--esp-5);
}
.bento-cta { flex-basis: auto; width: 100%; }
}
/* Mise en page éditoriale (image + texte) */
.editorial-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--esp-8);
align-items: center;
}
.editorial-layout > * { min-width: 0; }
@media (min-width: 901px) {
.nowrap-desktop { white-space: nowrap; }
}
@media (max-width: 900px) {
.editorial-layout { grid-template-columns: 1fr; gap: var(--esp-6); }
}
.editorial-image-wrapper { position: relative; }
.editorial-image-wrapper img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border: var(--trait) solid var(--trait-couleur);
border-radius: 8px;
box-shadow: 12px 12px 0 var(--orange);
}
/* Liste d'offres */
.service-list {
list-style: none;
padding: 0;
margin: var(--esp-6) 0;
}
.service-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--esp-4);
padding: var(--esp-4) 0;
border-bottom: 1px solid var(--bordure);
}
.service-list h4 { font-size: var(--fs-lg); margin: 0; }
.service-list p {
font-size: var(--fs-sm);
color: var(--encre-doux);
margin: var(--esp-1) 0 0;
}
@media (max-width: 900px) {
.manifesto-intro { grid-template-columns: 1fr !important; gap: var(--esp-6) !important; }
}
/* ==========================================================================
18. ICÔNES
- Interface (flèches, menus, pictogrammes) : Lucide, .
- Marques (LinkedIn, Instagram, YouTube, Facebook, WhatsApp, X) :
Font Awesome, . Lucide n'en fournit plus.
- Dans les sources on écrit toujours ces balises ; le build les remplace
par des SVG écrits dans la page (scripts/optimisations.js) : aucune
bibliothèque d'icônes n'est chargée par le navigateur.
- Flèches de navigation dans un texte : caractères ↗ ↘ → plutôt qu'icônes.
- Une icône seule doit avoir un aria-label sur son lien ou bouton.
========================================================================== */
.ic { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.ic--sm { width: 16px; height: 16px; }
.ic--lg { width: 24px; height: 24px; }
/* Logos de marque (SVG Font Awesome) : taille du texte, comme l'ancienne police */
.fa-icone {
display: inline-block;
flex-shrink: 0;
width: 1em;
height: 1em;
vertical-align: -0.125em;
overflow: visible;
}
/* ==========================================================================
19. UTILITAIRES, ANIMATIONS, CIBLES TACTILES
========================================================================== */
.text-center { text-align: center; }
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.6s ease forwards; }
/* Lisibilité mobile : planchers de taille pour les textes encore écrits en dur */
@media (max-width: 600px) {
p[style*="font-size: 10px"], p[style*="font-size: 10.5px"],
p[style*="font-size: 11px"], p[style*="font-size: 12px"],
p[style*="font-size: 12.5px"], p[style*="font-size: 13px"],
p[style*="font-size: 13.5px"],
li[style*="font-size: 12px"], li[style*="font-size: 13px"] {
font-size: 14px !important;
line-height: 1.6 !important;
}
.article-body p,
.article-body li {
font-size: var(--fs-base);
line-height: 1.75;
}
.footer-links a,
.footer p,
.footer .contact-info .value,
.footer-copyright,
.footer-legal-links a { font-size: var(--fs-sm); }
.newsletter-popup p,
.sv-step p,
.kit-desc { font-size: var(--fs-sm); line-height: 1.6; }
}
/* Cibles tactiles ≥ 44px (WCAG 2.5.8, recommandations Apple/Google) */
@media (pointer: coarse) {
.footer-links a,
.footer-legal-links a,
.nav-item a,
.filter-label,
.social-icon {
min-height: 44px;
display: flex;
align-items: center;
}
.footer-socials .social-icon,
.filter-label { min-width: 44px; }
.btn,
button[type="submit"],
.tool-btn,
.kit-btn { min-height: 44px; }
}
/* Filet de sécurité : titres posés sur un fond sapin écrit en dur */
[style*="background-color: var(--primary)"] h1:not([style*="color"]),
[style*="background-color: var(--primary)"] h2:not([style*="color"]),
[style*="background-color: var(--primary)"] h3:not([style*="color"]),
[style*="background-color: var(--primary)"] h4:not([style*="color"]),
[style*="background-color: var(--sapin)"] h2:not([style*="color"]),
[style*="background-color: var(--sapin)"] h3:not([style*="color"]) {
color: var(--creme);
}
/* ==========================================================================
20. GRAIN PAPIER SUR LES SURFACES (validé le 10/10/2026)
Le grain est posé sur le fond de page ; les sections et cartes qui ont leur
propre couleur de fond le masquaient. On l'ajoute donc à ces surfaces.
background-image seul : la couleur de fond de chaque bloc est conservée.
Jamais sur les images (elles ont leur propre texture).
========================================================================== */
section,
.footer,
.carte,
.card,
.bento-card,
.pilier,
.testi-card,
.faq__item,
.cf-mega-panel,
.modal-container,
.newsletter-popup,
.about-bento,
.fond-1,
.fond-2 {
background-image: var(--grain);
}
.fond-1 { background-color: var(--papier); }
.fond-2 { background-color: var(--papier-2); }
/* ==========================================================================
21. PAGES D'ACCOMPAGNEMENT (services.html + service-*.html, voix « je »)
Composants partagés par la page Services et les 3 pages d'offres.
Les boutons utilisent les classes du système (.btn, .btn-secondary…).
========================================================================== */
.sv {
max-width: var(--conteneur);
margin: 0 auto;
padding: 0 var(--gouttiere);
}
.sv-section { padding: var(--section) 0; }
.sv-bg-white { background-color: var(--papier); }
.sv-bg-light { background-color: var(--papier-2); }
/* En-têtes de page */
.sv-hero,
.sv-detail-hero {
padding: calc(var(--header-h) + var(--esp-8)) 0 var(--esp-8);
background-color: var(--papier);
text-align: center;
border-bottom: 1.5px dashed var(--bordure-forte);
}
.sv-hero .sv,
.sv-detail-hero .sv { max-width: 780px; }
.sv-eyebrow {
display: inline-flex;
margin-bottom: var(--esp-6);
padding: 6px 14px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--encre);
background: var(--sapin-clair);
border: 1.5px solid var(--trait-couleur);
border-radius: var(--rayon-pill);
box-shadow: 2px 2px 0 var(--encre);
}
.sv-hero h1,
.sv-detail-hero h1 {
font-size: var(--fs-3xl);
line-height: 1.12;
color: var(--encre);
margin-bottom: var(--esp-5);
}
.sv-hero h1 em {
font-style: normal;
color: var(--encre);
background: linear-gradient(100deg, transparent 0 1%, var(--orange) 1% 99%, transparent 99%) 0 88% / 100% 58% no-repeat;
padding: 0 0.15em;
}
.sv-hero p,
.sv-detail-hero p {
font-size: var(--fs-md);
line-height: 1.7;
color: var(--encre-doux);
max-width: 600px;
margin: 0 auto var(--esp-7);
}
.sv-hero-btns,
.sv-cta-final-btns {
display: flex;
gap: var(--esp-4);
justify-content: center;
flex-wrap: wrap;
}
.sv-breadcrumb {
display: flex;
gap: var(--esp-2);
justify-content: center;
align-items: center;
margin-bottom: var(--esp-5);
font-size: var(--fs-sm);
color: var(--encre-doux);
}
.sv-breadcrumb a { color: var(--encre-doux); }
.sv-breadcrumb a:hover {
color: var(--sapin);
text-decoration: underline wavy var(--orange);
text-underline-offset: 4px;
}
/* En-têtes de section */
.sv-sec-head {
text-align: center;
margin-bottom: var(--esp-8);
}
.sv-sec-head h2 {
font-size: var(--fs-2xl);
color: var(--encre);
margin-bottom: var(--esp-3);
}
.sv-sec-head p {
font-size: var(--fs-md);
line-height: 1.6;
color: var(--encre-doux);
max-width: 560px;
margin: 0 auto;
}
/* Cartes d'offres */
.sv-pricing {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-6);
align-items: stretch;
}
.sv-price-card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--esp-7) var(--esp-6) var(--esp-6);
background-color: var(--papier);
background-image: var(--grain);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--sapin);
}
.sv-price-card.popular { box-shadow: 8px 8px 0 var(--orange); }
.sv-popular-badge {
position: absolute;
top: -14px;
left: var(--esp-6);
padding: 4px 12px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--encre);
background: var(--orange);
border: var(--trait) solid var(--trait-couleur);
transform: rotate(-3deg);
}
.sv-price-card h3 {
font-size: var(--fs-xl);
color: var(--encre);
margin-bottom: var(--esp-2);
}
.sv-card-sub {
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--encre-doux);
margin-bottom: var(--esp-5);
min-height: 42px;
}
.sv-price-amount {
font-family: var(--font-display);
font-size: 30px;
line-height: 1.1;
color: var(--sapin);
margin-bottom: var(--esp-1);
}
.sv-price-label {
font-size: var(--fs-xs);
color: var(--encre-doux);
margin-bottom: var(--esp-5);
}
.sv-price-card .btn {
width: 100%;
margin-bottom: var(--esp-6);
}
.sv-price-features-title {
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--encre);
margin-bottom: var(--esp-3);
padding-bottom: var(--esp-3);
border-bottom: 1.5px dashed var(--bordure-forte);
}
.sv-price-features {
list-style: none;
margin: 0 0 var(--esp-5);
flex: 1;
}
.sv-price-features li,
.sv-step-features li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 0;
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--encre);
}
.sv-price-features li svg,
.sv-step-features li svg {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 2px;
color: var(--sapin);
}
.sv-see-more {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
margin-top: auto;
padding-top: var(--esp-3);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--sapin);
border-top: 1.5px dashed var(--bordure-forte);
}
.sv-see-more:hover {
text-decoration: underline wavy var(--orange);
text-underline-offset: 4px;
}
.sv-see-more svg { width: 14px; height: 14px; }
/* Composer son accompagnement (modules à la carte) */
.sv-builder-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--esp-6);
align-items: start;
}
.sv-builder-opts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-5);
}
.sv-builder-cat h3 {
font-size: var(--fs-lg);
color: var(--encre);
margin-bottom: var(--esp-4);
padding-bottom: var(--esp-3);
border-bottom: 1.5px dashed var(--bordure-forte);
}
.sv-builder-grid {
display: flex;
flex-direction: column;
gap: var(--esp-3);
}
.sv-opt-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
padding: var(--esp-4);
text-align: left;
font: inherit;
color: var(--encre);
background: var(--papier);
border: 1.5px solid var(--trait-couleur);
border-radius: var(--rayon-sm);
cursor: pointer;
transition: transform var(--duree) var(--geste), box-shadow var(--duree) var(--geste), background-color 0.15s ease;
}
.sv-opt-card:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--sapin); }
.sv-opt-card.selected,
.sv-opt-card[aria-pressed="true"] {
background: var(--sapin-clair);
border-color: var(--sapin);
box-shadow: 3px 3px 0 var(--sapin);
}
.sv-opt-check {
position: absolute;
top: var(--esp-4);
right: var(--esp-4);
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
border: 1.5px solid var(--trait-couleur);
border-radius: 50%;
background: var(--papier);
}
.sv-opt-card.selected .sv-opt-check,
.sv-opt-card[aria-pressed="true"] .sv-opt-check {
color: var(--creme);
background: var(--sapin);
border-color: var(--sapin);
}
.sv-opt-check svg { width: 12px; height: 12px; }
.sv-opt-title {
padding-right: 30px;
font-size: 15px;
font-weight: 700;
}
.sv-opt-desc {
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--encre-doux);
}
.sv-builder-summary {
position: sticky;
top: calc(var(--header-h) + var(--esp-5));
padding: var(--esp-6);
background-color: var(--papier);
background-image: var(--grain);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--orange);
}
.sv-summary-title {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--encre);
margin-bottom: var(--esp-5);
text-align: center;
}
.sv-summary-empty {
font-size: var(--fs-sm);
color: var(--encre-doux);
text-align: center;
margin-bottom: var(--esp-5);
}
.sv-summary-list {
list-style: none;
margin: 0 0 var(--esp-5);
display: none;
}
.sv-summary-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--esp-3);
padding: var(--esp-2) 0;
font-size: var(--fs-sm);
border-bottom: 1.5px dashed var(--bordure);
}
.sv-summary-list li:last-child { border-bottom: none; }
.sv-summary-list li button {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--encre-doux);
border-radius: 50%;
}
.sv-summary-list li button:hover { color: var(--danger); background: var(--danger-fond); }
.sv-summary-total {
text-align: center;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--encre);
margin-bottom: var(--esp-5);
padding-top: var(--esp-4);
border-top: 1.5px dashed var(--bordure-forte);
}
.sv-summary-total span {
display: block;
margin-top: var(--esp-1);
font-family: var(--font-display);
font-size: 24px;
color: var(--sapin);
}
.sv-builder-summary .btn { width: 100%; }
/* Déroulé en 4 étapes */
.sv-process {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
background-color: var(--papier);
background-image: var(--grain);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--sapin);
overflow: hidden;
}
.sv-step {
padding: var(--esp-6) var(--esp-5);
border-right: 1.5px dashed var(--bordure-forte);
transition: background-color 0.15s ease;
}
.sv-step:last-child { border-right: none; }
.sv-step:hover { background-color: var(--papier-2); }
.sv-step-num {
position: relative;
display: inline-block;
margin-bottom: var(--esp-3);
font-family: var(--font-display);
font-size: 44px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px var(--sapin);
isolation: isolate;
}
.sv-step-num::after {
content: attr(data-n);
position: absolute;
inset: 0;
color: var(--orange);
-webkit-text-stroke: 0;
transform: translate(3px, 3px);
z-index: -1;
}
.sv-step h4 {
font-size: var(--fs-base);
color: var(--encre);
margin-bottom: var(--esp-2);
}
.sv-step p {
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--encre-doux);
}
/* Programme détaillé d'une offre (pages service-*.html) */
.sv-steps {
display: flex;
flex-direction: column;
gap: var(--esp-5);
}
.sv-step-card {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: var(--esp-6);
align-items: start;
padding: var(--esp-6) var(--esp-6) var(--esp-6) var(--esp-5);
background-color: var(--papier);
background-image: var(--grain);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--sapin);
}
.sv-step-card:nth-child(even) { box-shadow: 6px 6px 0 var(--orange); }
.sv-step-num-circle {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--font-display);
font-size: 24px;
color: var(--creme);
background: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
border-radius: 50%;
box-shadow: 3px 3px 0 var(--orange);
}
.sv-step-card h3 {
font-size: var(--fs-lg);
color: var(--encre);
margin-bottom: var(--esp-2);
}
.sv-step-desc {
font-size: 15px;
line-height: 1.6;
color: var(--encre-doux);
margin-bottom: var(--esp-4);
}
.sv-step-features {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--esp-5);
}
/* Témoignages (même rendu que .testi-card) */
.sv-testi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: var(--esp-6);
}
.sv-testi {
display: flex;
flex-direction: column;
gap: var(--esp-5);
padding: 28px;
background-color: var(--papier);
background-image: var(--grain);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 6px 6px 0 var(--sapin);
}
.sv-testi-stars { color: var(--orange); font-size: 18px; letter-spacing: 2px; -webkit-text-stroke: 0.8px var(--encre); }
.sv-testi-quote {
flex: 1;
font-size: 15px;
line-height: 1.7;
color: var(--encre);
}
.sv-testi-author { display: flex; align-items: center; gap: var(--esp-3); }
.sv-testi-avatar {
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: var(--creme);
background: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
border-radius: 50%;
}
.sv-testi:nth-child(2) .sv-testi-avatar { background: var(--orange); color: var(--encre); }
.sv-testi:nth-child(3) .sv-testi-avatar { background: var(--encre); }
.sv-testi-name { font-weight: 700; font-size: 15px; color: var(--encre); }
.sv-testi-role { font-size: var(--fs-xs); color: var(--encre-doux); margin-top: 1px; }
/* Bandeau final sur fond sapin */
.sv-cta-final {
padding: var(--section) 0;
text-align: center;
color: var(--creme);
background-color: var(--sapin);
}
.sv-cta-final h2 {
font-size: var(--fs-2xl);
color: var(--creme);
margin-bottom: var(--esp-3);
}
.sv-cta-final p {
font-size: var(--fs-md);
color: rgba(252, 250, 248, 0.88);
margin-bottom: var(--esp-7);
}
.sv-cta-final .btn-accent { --btn-ombre: var(--encre); }
/* Bouton contour clair, pour les fonds sapin */
.btn-contour-clair {
--btn-fond: transparent;
--btn-texte: var(--creme);
--btn-ombre: transparent;
border-color: var(--creme);
}
.btn-contour-clair:hover { --btn-ombre: var(--orange); }
@media (max-width: 1200px) {
.sv-builder-opts { grid-template-columns: 1fr; gap: var(--esp-6); }
}
@media (max-width: 900px) {
.sv-pricing { grid-template-columns: 1fr; gap: var(--esp-7); }
.sv-builder-wrap { grid-template-columns: 1fr; }
.sv-builder-summary { position: static; }
.sv-process { grid-template-columns: 1fr 1fr; }
.sv-step { border-bottom: 1.5px dashed var(--bordure-forte); }
.sv-step:nth-child(2) { border-right: none; }
.sv-step-card { grid-template-columns: 1fr; gap: var(--esp-4); padding: var(--esp-5); }
.sv-step-features { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.sv-process { grid-template-columns: 1fr; }
.sv-step { border-right: none; }
.sv-step:last-child { border-bottom: none; }
.sv-hero-btns .btn,
.sv-cta-final-btns .btn { width: 100%; }
}
/* ==========================================================================
22. PAGE À PROPOS (voix « je »)
========================================================================== */
.apropos-hero {
padding: calc(var(--header-h) + var(--esp-8)) 0 var(--section);
background-color: var(--papier);
}
.apropos-hero__grille {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--esp-8);
align-items: center;
}
/* Portrait sur fond sapin + citation */
.apropos-portrait {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 560px;
padding-top: var(--esp-6);
background-color: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 8px 8px 0 var(--orange);
overflow: hidden;
}
.apropos-portrait img {
width: auto;
max-width: 88%;
height: 520px;
object-fit: contain;
object-position: bottom center;
}
.apropos-citation {
position: absolute;
left: var(--esp-5);
right: var(--esp-5);
bottom: var(--esp-5);
margin: 0;
padding: var(--esp-5);
background-color: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon-sm);
box-shadow: 4px 4px 0 var(--encre);
}
.apropos-citation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--esp-3);
align-items: start;
}
.apropos-citation__icone {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
color: var(--encre);
background: var(--orange);
border: 1.5px solid var(--trait-couleur);
border-radius: 50%;
}
.apropos-citation__icone svg { width: 16px; height: 16px; }
.apropos-citation blockquote {
margin: 0;
font-size: 15px;
line-height: 1.55;
font-weight: 500;
color: var(--encre);
}
.apropos-citation figcaption {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--encre-doux);
}
/* Légende sous la photo : nom + lien vers le portfolio */
.apropos-legende {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--esp-1);
margin-top: var(--esp-5);
}
.apropos-legende__titre {
font-size: var(--fs-md);
font-weight: 600;
color: var(--encre-doux);
}
.apropos-legende__nom {
font-family: var(--font-display);
font-size: 20px;
line-height: 1.2;
color: var(--encre);
}
/* Récit */
.apropos-recit h1 {
font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); /* 24 → 30 px */
line-height: 1.3;
color: var(--encre);
margin-bottom: var(--esp-5);
}
.apropos-recit p {
font-size: var(--fs-base);
line-height: 1.7;
color: var(--encre-doux);
margin-bottom: var(--esp-4);
}
.apropos-recit .apropos-signature {
color: var(--encre);
font-weight: 500;
padding-left: var(--esp-4);
border-left: 3px solid var(--orange);
margin: var(--esp-5) 0 var(--esp-6);
}
.apropos-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--esp-4) var(--esp-5);
}
.apropos-reseaux {
display: flex;
gap: var(--esp-3);
}
/* Slogan + trois cartes */
.apropos-slogan {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--esp-7);
align-items: center;
margin-bottom: var(--esp-8);
}
.apropos-slogan h2 {
font-size: var(--fs-2xl);
color: var(--encre);
margin: 0;
}
.apropos-slogan p {
font-size: var(--fs-base);
line-height: 1.7;
color: var(--encre-doux);
margin: 0;
}
.apropos-cartes {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
gap: var(--esp-6);
}
.apropos-carte {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--esp-5);
padding: var(--esp-7) var(--esp-6) var(--esp-6);
}
.apropos-carte p {
flex-grow: 1;
font-size: 15px;
line-height: 1.65;
color: var(--encre);
}
.apropos-carte .btn { width: 100%; white-space: nowrap; }
.apropos-carte--photo {
position: relative;
overflow: hidden;
background-color: var(--sapin-clair);
padding-right: 42%;
}
.apropos-carte--photo .btn { width: auto; }
.apropos-carte--photo img {
position: absolute;
right: 0;
bottom: 0;
width: 40%;
height: 96%;
object-fit: contain;
object-position: bottom right;
pointer-events: none;
}
.apropos-carte--orange { --ombre: var(--orange); }
/* Newsletter */
/* De 901 à 1200 px : les 3 cartes restent sur une rangée ; la petite photo
(déjà présente en grand dans le hero) s'efface pour laisser la place au texte. */
@media (max-width: 1200px) {
.apropos-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-5); }
.apropos-carte { padding: var(--esp-6) var(--esp-5) var(--esp-5); }
.apropos-carte--photo { padding-right: var(--esp-5); }
.apropos-carte--photo img { display: none; }
.apropos-carte .btn { padding: 12px 16px; font-size: 15px; }
}
@media (max-width: 900px) {
.apropos-hero__grille,
.apropos-slogan { grid-template-columns: 1fr; gap: var(--esp-6); }
.apropos-portrait { min-height: 0; padding-top: var(--esp-6); flex-direction: column; align-items: stretch; }
.apropos-portrait img { height: 380px; max-width: 100%; align-self: center; }
.apropos-citation { position: relative; inset: auto; margin: 0 var(--esp-3) var(--esp-3); }
.apropos-cartes { grid-template-columns: 1fr; }
.apropos-carte--photo { padding-right: 42%; }
.apropos-carte--photo img { display: block; }
}
@media (max-width: 600px) {
.apropos-cartes { grid-template-columns: 1fr; }
.apropos-carte--photo { padding-right: var(--esp-6); padding-bottom: 260px; }
.apropos-carte--photo img { width: 60%; height: 250px; right: var(--esp-4); }
.apropos-carte--photo .btn { width: 100%; }
}
/* ==========================================================================
23. FORMULAIRE NEWSLETTER (identique sur tout le site)
Prénom + e-mail obligatoires, vérifiés par main.js avant l'envoi à Brevo.
Fonctionne sur fond clair comme sur fond sapin.
========================================================================== */
.nl-form {
display: grid;
gap: var(--esp-3);
width: 100%;
}
.nl-form__champs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
gap: var(--esp-3);
}
.nl-champ {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.nl-form .form-control { min-height: 50px; }
.nl-form .btn {
width: 100%;
--btn-ombre: var(--encre);
}
/* Message d'erreur sous un champ : pastille lisible sur tous les fonds */
.nl-champ .form-error {
margin: 0;
padding: 6px 10px;
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.4;
color: var(--danger);
background: var(--danger-fond);
border: 1.5px solid var(--danger);
border-radius: var(--rayon-sm);
}
.nl-champ .form-error[hidden] { display: none; }
.nl-champ .form-error button {
margin-left: 4px;
padding: 0;
font: inherit;
font-weight: 700;
color: var(--encre);
text-decoration: underline;
cursor: pointer;
}
.nl-form .form-control[aria-invalid="true"] {
border-color: var(--danger);
background-color: var(--danger-fond);
}
/* Retour après envoi */
.nl-form__statut {
margin: 0;
font-size: var(--fs-sm);
font-weight: 600;
line-height: 1.45;
}
.nl-form__statut:empty { display: none; }
.nl-form__statut.is-ok,
.nl-form__statut.is-erreur {
padding: var(--esp-3) var(--esp-4);
border: 1.5px solid currentColor;
border-radius: var(--rayon-sm);
}
.nl-form p.nl-form__statut.is-ok { color: var(--succes); background: var(--succes-fond); opacity: 1; }
.nl-form p.nl-form__statut.is-erreur { color: var(--danger); background: var(--danger-fond); opacity: 1; }
@media (max-width: 600px) {
.nl-form .btn { padding: 12px 14px; font-size: 15px; }
.bento-card.large { padding: var(--esp-5); }
}
/* Bloc newsletter de fin de page (partial newsletter-bloc.html) :
carte sapin, texte à gauche, formulaire à droite */
.nl-section { background-color: var(--papier); }
.nl-bloc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--esp-7);
align-items: center;
padding: var(--esp-7);
}
.nl-bloc h2 {
font-size: var(--fs-2xl);
color: var(--creme);
margin-bottom: var(--esp-4);
}
.nl-bloc p {
font-size: 15px;
line-height: 1.65;
color: rgba(252, 250, 248, 0.88);
}
.nl-bloc .form-control { border-color: var(--trait-champ); }
.nl-bloc .btn { --btn-ombre: var(--encre); }
@media (max-width: 900px) {
.nl-bloc {
grid-template-columns: 1fr;
gap: var(--esp-6);
padding: var(--esp-6) var(--esp-5);
}
}
/* Champ piège anti-robots : invisible pour les humains */
.nl-piege {
display: none !important; /* invisible ET ignoré par le remplissage automatique du navigateur */
}
/* ==========================================================================
24. PAGE PORTFOLIO (voix « je »)
Hero, projets en onglets + filtres, parcours, galerie plein écran.
Les visuels sont rangés dans assets/portfolio//01.webp, 02.webp…
========================================================================== */
.pf-galerie__nav[hidden] { display: none; }
/* --- Hero --- */
.pf-hero {
padding: calc(var(--header-h) + var(--esp-8)) 0 var(--section);
background-color: var(--papier);
}
.pf-hero__grille {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: var(--esp-8);
align-items: center;
}
.pf-dispo { margin-bottom: var(--esp-5); }
.pf-dispo__point {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--succes);
box-shadow: 0 0 0 3px var(--succes-fond);
}
.pf-hero h1 {
font-size: var(--fs-2xl);
line-height: var(--lh-serre);
margin-bottom: var(--esp-5);
}
.pf-hero__chapo {
max-width: 56ch;
font-size: var(--fs-md);
line-height: 1.6;
color: var(--encre-doux);
margin-bottom: var(--esp-6);
}
.pf-competences { margin-bottom: var(--esp-7); }
.pf-competences__titre {
margin-bottom: var(--esp-3);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--encre);
}
.pf-competences ul {
display: flex;
flex-wrap: wrap;
gap: var(--esp-2);
margin: 0;
padding: 0;
list-style: none;
}
.pf-competences li {
padding: 6px 12px;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--encre);
background: var(--papier-2);
border: 1.5px solid var(--bordure-forte);
border-radius: var(--rayon-sm);
}
.pf-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--esp-4);
}
/* Portrait détouré sur fond sapin (même famille que la page À propos) */
.pf-portrait {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 500px;
padding-top: var(--esp-7);
background-color: var(--sapin);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 8px 8px 0 var(--orange);
overflow: hidden;
}
.pf-portrait img {
width: auto;
max-width: 92%;
height: 460px;
object-fit: contain;
object-position: bottom center;
}
.pf-portrait__tampon {
position: absolute;
top: var(--esp-5);
left: var(--esp-5);
z-index: 1;
font-size: var(--fs-sm);
}
.pf-portrait__tampon strong {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-lg);
}
/* --- Éléments communs : liens, vignettes, puces, renommage --- */
.pf-liens {
display: flex;
flex-wrap: wrap;
gap: var(--esp-2);
}
.pf-lien {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 6px 14px;
font: 600 var(--fs-sm)/1.2 var(--font-ui);
color: var(--encre);
text-decoration: none;
background: var(--papier);
border: 1.5px solid var(--trait-couleur);
border-radius: var(--rayon-pill);
cursor: pointer;
}
.pf-lien svg { width: 15px; height: 15px; }
.pf-lien i { font-size: 13px; }
.pf-lien:hover { background: var(--sapin-clair); }
.pf-lien--plein {
color: var(--creme);
background: var(--sapin);
box-shadow: 2px 2px 0 var(--orange);
}
.pf-lien--plein:hover { background: var(--sapin-fonce); }
.pf-vignette {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
background: var(--papier-2);
border: 0;
cursor: zoom-in;
}
.pf-vignette img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.pf-vignette:hover img { transform: scale(1.04); }
.pf-vignette:focus-visible,
.pf-mini__vignette:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
/* Logo carré sur fond blanc : il remplit la largeur, seul le blanc est recadré */
.pf-vignette--logo { background: #fff; }
.pf-vignette--plus span {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font: 400 var(--fs-xl)/1 var(--font-display);
color: var(--creme);
background: rgba(11, 47, 42, 0.62);
}
.pf-puces {
display: grid;
gap: var(--esp-2);
margin: 0;
padding: 0;
list-style: none;
}
.pf-puces li {
position: relative;
padding-left: var(--esp-5);
line-height: 1.6;
color: var(--encre-doux);
}
.pf-puces li::before {
content: "";
position: absolute;
top: 0.6em;
left: 2px;
width: 8px;
height: 8px;
background: var(--orange);
border: 1.5px solid var(--trait-couleur);
border-radius: 2px;
transform: rotate(45deg);
}
.pf-devenu { color: var(--sapin); } /* « ancien nom → nouveau nom » */
/* --- Projets phares : études de cas --- */
.pf-cas-liste {
display: grid;
gap: var(--esp-9);
}
/* Colonne image : capture, vignettes puis résultats chiffrés ;
colonne texte : contexte et actions. Une étude sur deux est inversée. */
.pf-cas {
display: grid;
grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"visuel texte"
"resultats texte";
gap: var(--esp-6) var(--esp-8);
align-items: start;
}
.pf-cas:nth-child(even) {
grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
grid-template-areas:
"texte visuel"
"texte resultats";
}
.pf-cas__visuel {
grid-area: visuel;
display: grid;
gap: var(--esp-4);
}
.pf-cas__resultats { grid-area: resultats; }
.pf-cas__texte { grid-area: texte; }
.pf-cas__texte .pf-liens { margin-top: var(--esp-6); }
.pf-cas__resultats h4 {
margin: 0 0 var(--esp-3);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--encre);
}
/* Capture d'écran dans un cadre de navigateur */
.pf-ecran {
margin: 0;
overflow: hidden;
background: var(--papier);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
box-shadow: 8px 8px 0 var(--orange);
}
.pf-ecran__barre {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--papier-2);
border-bottom: var(--trait) solid var(--trait-couleur);
}
.pf-ecran__barre > span:not(.pf-ecran__url) {
width: 10px;
height: 10px;
border: 1.5px solid var(--trait-couleur);
border-radius: 50%;
}
.pf-ecran__barre > span:first-child { background: var(--orange); }
.pf-ecran__url {
flex: 1;
margin-left: var(--esp-3);
padding: 3px 12px;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--encre-doux);
background: var(--papier);
border: 1px solid var(--bordure-forte);
border-radius: var(--rayon-pill);
}
.pf-ecran img {
display: block;
width: 100%;
height: auto;
}
.pf-cas__vignettes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-3);
}
.pf-cas__vignettes--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-cas__vignettes .pf-vignette {
aspect-ratio: 4 / 3;
height: auto;
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon-sm);
}
.pf-cas__texte .pastille { margin-bottom: var(--esp-4); }
.pf-cas__texte h3 {
margin: 0 0 var(--esp-1);
font-size: var(--fs-2xl);
line-height: var(--lh-titre);
}
.pf-cas__role {
margin: 0 0 var(--esp-6);
font-weight: 700;
color: var(--sapin);
}
.pf-cas__texte h4 {
margin: var(--esp-5) 0 var(--esp-2);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--encre);
}
.pf-cas__texte > p:not(.pf-cas__role) {
margin: 0;
line-height: var(--lh-texte);
color: var(--encre-doux);
}
.pf-chiffres {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-3);
margin: 0;
padding: 0;
list-style: none;
}
.pf-chiffres li {
display: flex;
flex-direction: column;
gap: var(--esp-1);
padding: var(--esp-4);
font-size: var(--fs-sm);
line-height: 1.4;
color: var(--encre-doux);
background: var(--papier);
border: 1.5px solid var(--trait-couleur);
border-radius: var(--rayon-sm);
box-shadow: 3px 3px 0 var(--sapin);
}
.pf-chiffres strong {
font: 400 var(--fs-xl)/1.1 var(--font-display);
color: var(--encre);
}
/* --- Autres réalisations --- */
.pf-filtres {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--esp-2);
margin-bottom: var(--esp-7);
}
.pf-filtre {
min-height: 38px;
padding: 6px 18px;
font: 600 var(--fs-sm)/1.2 var(--font-ui);
color: var(--encre);
background: transparent;
border: 1.5px solid var(--bordure-forte);
border-radius: var(--rayon-pill);
cursor: pointer;
}
.pf-filtre:hover { border-color: var(--sapin); }
.pf-filtre[aria-pressed="true"] {
background: var(--sapin-clair);
border-color: var(--sapin);
box-shadow: 2px 2px 0 var(--encre);
}
.pf-mini-grille {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-6);
}
.pf-mini {
display: flex;
flex-direction: column;
gap: var(--esp-4);
padding: var(--esp-5);
box-shadow: var(--ombre-md);
}
.pf-mini[hidden] { display: none; }
.pf-mini__tete {
display: flex;
align-items: center;
gap: var(--esp-4);
}
.pf-mini__vignette,
.pf-mini__icone {
flex-shrink: 0;
width: 64px;
height: 64px;
overflow: hidden;
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon-sm);
}
.pf-mini__vignette {
padding: 0;
background: var(--papier-2);
cursor: zoom-in;
}
.pf-mini__vignette img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pf-mini__vignette--logo { background: #fff; }
.pf-mini__vignette--logo img { transform: scale(1.6); }
.pf-mini__icone {
display: grid;
place-items: center;
color: var(--sapin);
background-color: var(--sapin-clair);
}
.pf-mini__icone svg { width: 28px; height: 28px; stroke-width: 1.6; }
.pf-mini__domaine {
display: inline-block;
margin-bottom: var(--esp-1);
padding: 2px 9px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--encre);
background: var(--sapin-clair);
border-radius: var(--rayon-pill);
}
.pf-mini__domaine--marketing { background: var(--orange-clair); }
.pf-mini h3 {
margin: 0;
font-size: var(--fs-lg);
line-height: 1.3;
}
.pf-mini p {
flex-grow: 1;
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--encre-doux);
}
.pf-suite {
margin-top: var(--esp-8);
text-align: center;
}
/* --- Parcours en double piste --- */
.pf-legende {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--esp-5);
}
.pf-legende__item {
display: inline-flex;
align-items: center;
gap: var(--esp-2);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--encre);
}
.pf-legende__item::before {
content: "";
width: 14px;
height: 14px;
border: var(--trait) solid var(--trait-couleur);
border-radius: 50%;
}
.pf-legende__item--agro::before { background: var(--sapin); }
.pf-legende__item--marketing::before { background: var(--orange); }
/* Deux colonnes et un axe central : agronomie à gauche, marketing à droite.
Quand une ligne agronomie précède une ligne marketing, les deux se placent
côte à côte : on voit les deux pistes avancer en parallèle. */
.pf-piste {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
row-gap: var(--esp-5);
max-width: 1060px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.pf-piste::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: var(--trait) dashed var(--bordure-forte);
}
.pf-piste__annee {
position: relative;
grid-column: 1 / -1;
justify-self: center;
margin: var(--esp-4) 0 var(--esp-1);
padding: 6px 18px;
font: 400 var(--fs-lg)/1 var(--font-display);
color: var(--creme);
background: var(--encre);
border-radius: var(--rayon-pill);
}
.pf-piste__annee:first-child { margin-top: 0; }
.pf-etape {
position: relative;
align-self: start;
padding: var(--esp-5);
background-color: var(--papier);
background-image: var(--grain);
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon);
}
.pf-etape--agro { grid-column: 1; box-shadow: 4px 4px 0 var(--sapin); }
.pf-etape--marketing { grid-column: 3; box-shadow: 4px 4px 0 var(--orange); }
/* Point sur l'axe central */
.pf-etape::after {
content: "";
position: absolute;
top: var(--esp-5);
width: 16px;
height: 16px;
border: var(--trait) solid var(--trait-couleur);
border-radius: 50%;
}
.pf-etape--agro::after { right: calc(-36px - 10px); background: var(--sapin); }
.pf-etape--marketing::after { left: calc(-36px - 10px); background: var(--orange); }
.pf-etape__piste { display: none; }
.pf-etape__date {
display: block;
margin-bottom: var(--esp-2);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--encre-doux);
}
.pf-etape h3 {
margin: 0 0 var(--esp-1);
font-size: var(--fs-lg);
line-height: 1.3;
}
.pf-etape__lieu {
margin: 0 0 var(--esp-3);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--sapin);
}
.pf-etape > p:last-child {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--encre-doux);
}
.pf-etape .pf-puces li { font-size: 15px; }
/* --- Formation & certifications --- */
.pf-formations {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--esp-5);
margin: 0;
padding: 0;
list-style: none;
}
.pf-formation {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--esp-2);
padding: var(--esp-5);
}
.pf-formation__icone {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: var(--esp-2);
color: var(--encre);
background: var(--orange);
border: 1.5px solid var(--trait-couleur);
border-radius: 50%;
}
.pf-formation__icone svg { width: 20px; height: 20px; }
.pf-formation__date {
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--encre-doux);
}
.pf-formation h3 {
margin: 0;
font-size: var(--fs-md);
line-height: 1.35;
}
.pf-formation p {
margin: 0;
margin-top: auto;
font-weight: 700;
color: var(--sapin);
}
/* --- Parlons-en --- */
.pf-parlons {
padding: var(--esp-8) var(--esp-6);
text-align: center;
}
.pf-parlons h2 {
font-size: var(--fs-2xl);
margin-bottom: var(--esp-6);
}
.pf-parlons__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--esp-4);
}
.pf-parlons .btn-accent { --btn-ombre: var(--encre); }
.pf-parlons .reassure { color: var(--creme); }
/* --- Derniers articles --- */
.pf-articles__entete {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--esp-4);
margin-bottom: var(--esp-7);
}
.pf-articles__entete h2 {
margin: 0;
font-size: var(--fs-2xl);
}
.pf-articles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--esp-6);
}
.pf-article {
display: flex;
flex-direction: column;
gap: var(--esp-3);
padding: var(--esp-4);
color: var(--encre);
text-decoration: none;
}
.pf-article__image {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border: var(--trait) solid var(--trait-couleur);
border-radius: var(--rayon-sm);
}
.pf-article__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pf-article__infos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--esp-2);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--encre-doux);
}
.pf-article h3 {
margin: 0;
font-size: var(--fs-md);
line-height: 1.35;
}
/* --- Réseaux sociaux --- */
.pf-reseaux { text-align: center; }
.pf-reseaux h2 {
font-size: var(--fs-2xl);
margin-bottom: var(--esp-4);
}
.pf-reseaux > p {
max-width: 600px;
margin: 0 auto var(--esp-7);
color: var(--encre-doux);
}
.pf-reseaux__liens {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--esp-3);
}
.pf-reseaux .fa-linkedin { color: var(--brand-linkedin); }
.pf-reseaux .fa-youtube { color: var(--brand-youtube); }
.pf-reseaux .fa-instagram { color: var(--brand-instagram); }
.pf-reseaux .fa-facebook-f { color: var(--brand-facebook); }
/* --- Galerie plein écran (